daudix/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: Make navbar super pretty

Browse source
This commit is contained in:
David Lapshin 2023-08-09 08:44:57 +03:00
parent 5a43f9d2e0
commit 9127ea7f2d
Signed by: daudix
GPG key ID: 93ECF15D3053D81C
3 changed files with 57 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
_includes/head.html
View file

@ -25,4 +25,41 @@
<!-- Plausible -->
<script defer data-domain="daudix-ufo.codeberg.page" src="https://analytics.projectsegfau.lt/js/script.js"></script>
<script>
var scrolling = false;
window.onscroll = function () {
if (!scrolling) {
scrolling = true;
setTimeout(function () {
scrollFunction();
scrolling = false;
}, 100); // Adjust the debounce time as needed
}
};
function scrollFunction() {
var navContainers = document.querySelectorAll(".nav-container");
var navElements = document.querySelectorAll(".nav");
for (var i = 0; i < navContainers.length; i++) {
if (document.documentElement.scrollTop > 20) {
navContainers[i].style.margin = "0.5rem auto";
} else {
navContainers[i].style.margin = "1rem auto";
}
}
for (var i = 0; i < navElements.length; i++) {
if (document.documentElement.scrollTop > 20) {
navElements[i].style.backdropFilter = "blur(32px) saturate(180%)";
navElements[i].style.boxShadow = "0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03)";
} else {
navElements[i].style.backdropFilter = "none";
navElements[i].style.boxShadow = "none";
}
}
}
</script>
</head>

2
_includes/navbar.html
View file

@ -8,7 +8,7 @@
<li><a href="{{ '/tags' | prepend: site.baseurl }}">Tags</a></li>
<li><a href="{{ '/' | prepend: relative_url }}">Home</a></li>
<li><a href="{{ '/feed.xml' | prepend: site.baseurl }}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<svg class="feed-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path
d="M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998zm0 0" />
</svg>

25
style.css
View file

@ -981,6 +981,12 @@ section#comments .comment details summary {
}
/* Navbar */
nav {
position: sticky;
top: 0;
z-index: 1;
}
.nav-container {
display: block;
width: 80%;
@ -990,15 +996,19 @@ section#comments .comment details summary {
}
.nav {
/* background: linear-gradient(90deg, var(--purple2) 0%, var(--blue2) 100%); */
/* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); */
background-color: transparent;
backdrop-filter: blur(32px) saturate(180%);
/* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
0 2px 6px 2px rgba(0, 0, 0, 0.03); */
overflow: auto;
transition: 200ms;
}
.nav-container {
margin: 1rem auto;
position: relative;
text-align: center;
transition: 200ms;
}
.nav-title {
@ -1026,9 +1036,9 @@ section#comments .comment details summary {
/* padding: 0 1rem 0 0; */
}
.nav li:last-child {
/* padding-right: 0; */
}
/* .nav li:last-child {
padding-right: 0;
} */
.nav a {
display: inline-block;
@ -1047,10 +1057,13 @@ section#comments .comment details summary {
}
.nav svg {
transform: translateY(0.125em);
fill: var(--dark-op50);
}
.nav .feed-icon {
transform: translateY(0.125em);
}
@media (min-width: 650px) {
.nav-container {
text-align: left;