feat: Rewrite nav, improve comment faves/boosts

Also, this is perhaps last featire commit here, I'll merge duckquill and my main site, it can be still used as a theme, it's just will be more convenient

sass/_comments.scss

@@ -122,6 +122,7 @@ section#comments {
       color: inherit;
       grid-area: card;
       max-width: 400px;
+      text-decoration: none; 
 
       &:hover {
         text-decoration: none;
@@ -155,8 +156,16 @@ section#comments {
         padding: 1rem;
         text-align: left;
 
+        h5 {
+          font-weight: 600;
+          all: unset;
+          font-size: 1rem;
+        }
+
         p {
+          font-weight: 400;
           color: var(--fg-muted-5);
+          font-size: 0.8rem;
         }
 
         * {
@@ -177,40 +186,66 @@ section#comments {
     }
 
     footer {
-      @extend small;
-
       display: flex;
       gap: 0.4rem;
       grid-area: interactions;
       margin-top: 1rem;
 
-      .boosts {
+      .reblogs,
-        background-color: var(--orange-bg);
+      .favourites {
         border-radius: var(--rounded-corner);
+        font-size: 1rem;
+        font-variant-numeric: tabular-nums;
+        font-weight: 400;
+        padding: 0.4rem 1rem;
+        text-decoration: none;
+        transition: var(--transition);
+
+        &:hover {
+          text-decoration: none;
+        }
+
+        &:active {
+          transform: scale(var(--active));
+        }
+
+        &::before {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: inline-block;
+          font-family: "bootstrap-icons" !important;
+          font-style: normal;
+          font-variant: normal;
+          font-weight: normal !important;
+          line-height: 1;
+          margin-inline-end: 0.25rem;
+          text-transform: none;
+          vertical-align: -0.125em;
+          transform: scale(1);
+        }
+      }
+
+      .reblogs {
         color: var(--orange-fg);
-        cursor: default;
+
-        font-size: 0.9rem;
+        &:hover {
-        font-weight: 600;
+          background-color: var(--orange-bg);
-        padding: 0.4rem 1rem;
+        }
 
         &::before {
-          content: "🔁";
+          content: "\F813";
-          margin-inline-end: 0.25rem;
         }
       }
 
-      .faves {
+      .favourites {
-        background-color: var(--red-bg);
-        border-radius: var(--rounded-corner);
         color: var(--red-fg);
-        cursor: default;
+
-        font-size: 0.9rem;
+        &:hover {
-        font-weight: 600;
+          background-color: var(--red-bg);
-        padding: 0.4rem 1rem;
+        }
 
         &::before {
-          content: "❤️";
+          content: "\F417";
-          margin-inline-end: 0.25rem;
         }
       }
     }

sass/_main.scss

@@ -13,7 +13,7 @@ html {
 }
 
 // Smaller font size on mobile
-// @media only screen and (max-device-width: 480px) {
+// @media screen and (max-width: 480px) {
 //   html {
 //     font-size: 14px;
 //   }
@@ -65,7 +65,7 @@ body {
   max-width: var(--content-width);
 }
 
-@media only screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px) {
   .container {
     width: 90vw;
   }

sass/_media.scss

@@ -16,7 +16,11 @@ img {
     box-shadow: var(--shadow-raised);
   }
 
-  @media only screen and (max-device-width: 480px) {
+  &:active {
+    transform: scale(var(--active));
+  }
+
+  @media screen and (max-width: 480px) {
     &:not(.no-hover):hover {
       transform: scale(110%);
     }

sass/_nav.scss

@@ -1,47 +1,70 @@
-.nav {
+header {
-  overflow: auto;
-  width: 80vw;
-  max-width: calc(var(--content-width) + 10rem);
-  margin: 1rem auto;
-  box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
-  border-radius: var(--rounded-corner-big);
-  background-color: var(--nav-bg);
-  backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+  background-color: var(--nav-bg);
+  border-radius: 999px;
+  box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
+  margin: 1rem auto;
+  max-width: calc(var(--content-width) + 10rem);
   position: sticky;
   top: 1rem;
+  width: 80vw;
   z-index: 1;
 
-  &-container {
+  @media screen and (max-width: 630px) {
-    margin: 0.5rem 0.5rem;
+    & {
-    position: relative;
+      border-radius: 16px;
-    text-align: center;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    & {
+      width: 90vw;
+    }
+  }
+
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.4rem;
+
+    @media screen and (max-width: 630px) {
+      & {
+        justify-content: center;
+      }
     }
 
     ul {
-    list-style-type: none;
+      display: flex;
-    margin: 1rem 0 0;
+      flex-wrap: wrap;
+      gap: 0.2rem;
+      justify-content: center;
+      margin: 0;
       padding: 0;
-    text-align: center;
     }
 
     li {
-    transition: var(--transition);
+      list-style: none;
-    color: var(--default-color);
+      display: inline-flex;
-    display: inline-block;
     }
 
     a {
-    background-color: transparent;
+      border-radius: 999px;
-    border-radius: var(--rounded-corner);
       color: var(--fg-muted-4);
-    display: inline-block;
       font-weight: 400;
       padding: 0.4rem 1rem;
       text-decoration: none;
       transform: scale(1);
       transition: var(--transition);
 
+      @media screen and (max-width: 630px) {
+        & {
+          border-radius: var(--rounded-corner);
+        }
+      }
+
       &:hover {
         background-color: var(--fg-muted-1);
         color: var(--primary-color);
@@ -52,31 +75,5 @@
         transform: scale(var(--active));
       }
     }
-
-  @media only screen and (max-device-width: 480px) {
-    & {
-      width: 90vw;
-      position: static;
-    }
-  }
-
-  @media (min-width: 600px) {
-    & {
-      border-radius: 999px;
-
-      &-container {
-        text-align: left;
-      }
-
-      ul {
-        bottom: 0;
-        position: absolute;
-        right: 0;
-      }
-
-      a {
-        border-radius: 999px;
-      }
-    }
   }
 }

sass/_variables.scss

@@ -51,7 +51,6 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
   --glow: #{$glow};
-  --rounded-corner-big: 18px;
   --rounded-corner-small: 8px;
   --rounded-corner: 12px;
   --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),

sass/style.scss

@@ -10,23 +10,24 @@
 
 @use "normalize";
 
+@use "variables";
+@use "fonts";
+@use "main";
+
 @use "bootstrap-icons";
 @use "buttons";
 @use "comments";
 @use "crt";
-@use "fonts";
 @use "footer";
 @use "gnome-hig";
 @use "johnvertisement";
 @use "links";
-@use "main";
 @use "media";
 @use "nav";
 @use "not-found";
 @use "post-nav";
 @use "statements";
 @use "tags";
-@use "variables";
 
 @import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
 @import url("syntax-theme-light.css") (prefers-color-scheme: light);

templates/includes/comments.html

@@ -211,21 +211,23 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
               let interactions = document.createElement("footer");
 
               if(status.reblogs_count > 0) {
-                let boosts = document.createElement("span");
+                let reblogs = document.createElement("a");
-                boosts.className = "boosts";
+                reblogs.setAttribute("href", status.url + "/reblogs");
-                boosts.setAttribute("title", "Boosts");
+                reblogs.className = "reblogs";
-                boosts.textContent = status.reblogs_count;
+                reblogs.setAttribute("title", "Boosts");
+                reblogs.textContent = status.reblogs_count;
 
-                interactions.appendChild(boosts);
+                interactions.appendChild(reblogs);
               }
 
               if(status.favourites_count > 0) {
-                let faves = document.createElement("span");
+                let favourites = document.createElement("a");
-                faves.className = "faves";
+                favourites.setAttribute("href", status.url + "/favourites");
-                faves.setAttribute("title", "Favorites");
+                favourites.className = "favourites";
-                faves.textContent = status.favourites_count;
+                favourites.setAttribute("title", "Favorites");
+                favourites.textContent = status.favourites_count;
 
-                interactions.appendChild(faves);
+                interactions.appendChild(favourites);
               }
 
               let comment = document.createElement("article");

templates/includes/nav.html

@@ -1,5 +1,5 @@
-<nav class="nav">
+<header>
-  <div class="nav-container">
+  <nav>
     <a href="{{ get_url(path='') }}">
       {% if config.extra.nav.icons %}
         <i class="bi bi-house"></i>
@@ -29,5 +29,5 @@
       </li>
       {% endif %}
     </ul>
-  </div>
   </nav>
+</header>