feat: Re-do the nav

sass/_main.scss

@@ -283,12 +283,9 @@ img:not(.no-hover):hover {
 }
 
 // NAVBAR
-.site-nav {
+.nav {
-  z-index: 1;
-  width: 80%;
-  top: 1rem;
-  position: sticky;
   overflow: auto;
+  width: 80%;
   max-width: var(--content-width);
   margin: 1rem auto;
   box-shadow: var(--shadow);
@@ -296,10 +293,14 @@ img:not(.no-hover):hover {
   background-color: var(--fg05);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
+  position: sticky;
+  top: 1rem;
+  z-index: 1;
 
-  // bootstrap icons
+  &-container {
-  .bi {
+    margin: 0.5rem 0.5rem;
-    font-size: 1rem;
+    position: relative;
+    text-align: center;
   }
 
   ul {
@@ -310,71 +311,57 @@ img:not(.no-hover):hover {
   }
 
   li {
-    color: var(--fg50);
+    transition: var(--transition);
+    color: var(--default-color);
     display: inline-block;
   }
 
   a {
     display: inline-block;
-    font-size: 0.9rem;
     padding: 0.4rem 1rem;
     border-radius: var(--rounded-corner);
     background-color: transparent;
     color: var(--fg50);
     transition: var(--transition);
     text-decoration: none;
-  }
 
-  a:hover {
+    &:hover,
+    &:focus {
       background-color: var(--fg05);
       color: var(--primary-color);
     }
-
-  a.site-nav-title {
-    line-height: normal; // unset line height
-    font-size: 1.2rem;
-  }
-
-  // svg {
-  //   transform: translateY(-0.125rem) translateX(-0.125rem); // fix icon position
-  // }
-}
-
-@media only screen and (max-device-width: 480px) {
-  .site-nav {
-    position: static;
-    width: 90%;
   }
 }
 
-.site-nav-container {
+@media (min-width: 600px) {
-  display: block;
+  .nav {
-  margin: 0.5rem 0.5rem;
+    &-container {
-  position: relative;
-  text-align: center;
-}
-
-@media (min-width: 640px) {
-  .site-nav-container {
       text-align: left;
     }
 
-  .site-nav ul {
+    ul {
       bottom: 0;
       position: absolute;
       right: 0;
     }
+  }
+}
+
+@media only screen and (max-device-width: 480px) {
+  .nav {
+    width: 90%;
+  }
 }
 
 // FOOTER
-.site-footer {
+.footer {
   text-align: center;
   padding: 3rem 0 3rem;
   font-size: 1rem;
   margin-top: 4rem;
 }
 
-.site-footer {
+.footer {
   details {
     all: unset;
   }

templates/includes/footer.html

@@ -1,4 +1,4 @@
-<footer class="site-footer">
+<footer class="footer">
   {% if config.extra.footer.show_copyright %}
   <p title="Last built at {{ now() | date(format='%F %R %Z') }}">&copy; {{ config.title }}, 2023</p>
   {% endif %}

templates/includes/nav.html

@@ -1,6 +1,7 @@
-<nav class="site-nav">
+<nav class="nav">
-  <div class="site-nav-container">
+  <div class="nav-container">
-    <a class="site-nav-title" href="{{ config.base_url }}">
+    <a href="{{ config.base_url }}">
+      <i class="bi bi-house-fill"></i>
       {{ config.title }}
     </a>
     <ul>