feat: various css updates

src/_data/navigation.js

@@ -15,16 +15,16 @@ export default {
       url: "/games",
       icon: "game-controller",
     },
-    {
-      text: "Books",
-      url: "/books",
-      icon: "book",
-    },
     {
       text: "Watching",
       url: "/watching",
       icon: "tv-retro",
     },
+    {
+      text: "Books",
+      url: "/books",
+      icon: "book",
+    },
   ],
   bottom: [
     {

src/_includes/partials/header.html

@@ -15,6 +15,12 @@
                 <a class="[ wordmark ] [ flex ]"
                    href="{{ meta.url }}"
                    aria-label="Go to index">
+                    <svg height="0" width="0">
+                        <filter id="3d_text" color-interpolation-filters="sRGB">
+                        <feDropShadow dx="0" dy="1" stdDeviation="0" flood-opacity="1" flood-color="var(--color-shadow)" />
+                        <feDropShadow dx="0" dy="2" stdDeviation="0" flood-opacity="1" flood-color="var(--color-shadow)" />
+                        </filter>
+                    </svg>
                     <span>wonderful</span>
                     <span>frog</span>
                 </a>

src/css/blocks/button.css

@@ -6,7 +6,7 @@
   padding: var(--spacing-0\.5) var(--spacing-1);
   position: relative;
   text-decoration: none;
-  transition: transform 0.3s ease;
+  transition: transform 0.3s var(--transition-bounce);
   z-index: 1;
 
   &::before,
@@ -38,10 +38,10 @@
 }
 
 @media (hover: hover) {
-  .button:hover {
+  .button:not(:active):hover {
     &::before,
     &::after {
-      transform: scale(1.25);
+      transform: scale(1.05);
     }
 
     &::after {
@@ -50,13 +50,13 @@
 
     svg {
       color: var(--color-border);
-      transform: rotateZ(10deg) scale(1.5);
+      transform: rotateZ(10deg) scale(1.25);
     }
   }
 }
 
 .button:active {
-  transform: scale(0.8);
+  transform: scale(0.95);
 }
 
 .button--alt {

src/css/blocks/media-grid.css

@@ -55,6 +55,7 @@
           opacity: 0;
 
           .meta-text {
+            transition-delay: 0.05s;
             transform: translateY(var(--spacing-1));
           }
         }

src/css/blocks/site-logo.css

@@ -1,7 +1,5 @@
 .site-logo .wordmark {
   text-decoration: none;
-  margin-block-start: -6px;
-  transform: skew(0deg, -1deg) translateY(2px);
 }
 
 .site-logo .logo img {
@@ -13,38 +11,38 @@
     drop-shadow(
       0 0 6px color-mix(in srgb, var(--color-primary) 80%, var(--color-white))
     );
+  transition: transform 0.3s var(--transition-bounce);
 }
 
 .site-logo .wordmark > span {
-  text-shadow:
+  --shadow-color: var(--color-shadow);
-    -1px 1px 0 var(--shadow-color),
-    0 1px 0 var(--shadow-color),
-    -1px -1px 0 var(--shadow-color),
-    1px -1px 0 var(--shadow-color),
-    1px 1px 0 var(--shadow-color),
-    -1px 2px 0 var(--shadow-color),
-    0px 2px 0 var(--shadow-color),
-    1px 2px 0 var(--shadow-color),
-    -1px 3px 0 var(--shadow-color),
-    0px 3px 0 var(--shadow-color),
-    1px 3px 0 var(--shadow-color);
   color: var(--color-white);
   font-family: var(--font-family-display);
   font-size: 1.5rem;
   letter-spacing: -0.05em;
-  transition: transform var(--transition-duration);
+  position: relative;
+  text-shadow:
+    -1px -1px 0 var(--shadow-color),
+    0px -1px 0 var(--shadow-color),
+    1px -1px 0 var(--shadow-color),
+    1px 0px 0 var(--shadow-color),
+    1px 1px 0 var(--shadow-color),
+    0px 1px 0 var(--shadow-color),
+    -1px 1px 0 var(--shadow-color),
+    -1px 0px 0 var(--shadow-color);
+  filter: url(#3d_text);
+  transition: transform 0.3s var(--transition-bounce);
 }
 
 .site-logo .wordmark > span:hover {
-  transform: translateY(-2px);
+  transform: scale(1.15) translateY(-4px);
+  z-index: 2;
 }
 
-.site-logo .wordmark > * {
+.site-logo .wordmark > span:nth-child(2) {
-  --shadow-color: var(--color-shadow);
   z-index: 1;
 }
 
-.site-logo .wordmark > :nth-child(2) {
+.site-logo .wordmark > span:nth-child(3) {
-  z-index: 0;
   color: color-mix(in srgb, var(--color-white) 90%, var(--color-primary));
 }