From 72b80f7e8fd6fb293f473bdc91caa8607d9dc034 Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:05:09 -0800
Subject: [PATCH] feat: add new button style, update nav

---
 src/_data/navigation.js                |  12 ++-
 src/_includes/layouts/post.html        |   6 +-
 src/_includes/partials/footer.html     |   8 +-
 src/_includes/partials/menu.html       |   5 +-
 src/_includes/svgs/book.svg            |   3 +
 src/_includes/svgs/circle-info.svg     |   3 +
 src/_includes/svgs/frame.svg           |   3 +
 src/_includes/svgs/game-controller.svg |   3 +
 src/_includes/svgs/list.svg            |  10 +++
 src/_includes/svgs/user.svg            |   4 +
 src/css/blocks/button.css              | 107 +++++++++++++++++++------
 src/css/blocks/categories.css          |  16 ----
 src/css/blocks/menu.css                |  10 ---
 src/css/global/variables.css           |   2 +
 14 files changed, 132 insertions(+), 60 deletions(-)
 create mode 100644 src/_includes/svgs/book.svg
 create mode 100644 src/_includes/svgs/circle-info.svg
 create mode 100644 src/_includes/svgs/frame.svg
 create mode 100644 src/_includes/svgs/game-controller.svg
 create mode 100644 src/_includes/svgs/list.svg
 create mode 100644 src/_includes/svgs/user.svg
 delete mode 100644 src/css/blocks/categories.css
 delete mode 100644 src/css/blocks/menu.css

diff --git a/src/_data/navigation.js b/src/_data/navigation.js
index f82cee9..8cc8f19 100644
--- a/src/_data/navigation.js
+++ b/src/_data/navigation.js
@@ -3,14 +3,22 @@ export default {
     {
       text: "About",
       url: "/about",
+      icon: "circle-info",
     },
     {
       text: "Posts",
       url: "/posts",
+      icon: "list",
     },
     {
-      text: "Catalogue",
-      url: "/catalogue",
+      text: "Games",
+      url: "/catalogue/games",
+      icon: "game-controller",
+    },
+    {
+      text: "Books",
+      url: "/catalogue/books",
+      icon: "book",
     },
   ],
   bottom: [
diff --git a/src/_includes/layouts/post.html b/src/_includes/layouts/post.html
index 47a1407..27f249b 100644
--- a/src/_includes/layouts/post.html
+++ b/src/_includes/layouts/post.html
@@ -10,8 +10,10 @@ layout: "layouts/base"
         <p class="[ text-skew text-fadeText flow-space-0.25 ]">{{ excerpt }}</p>
         <ul class="[ categories ] [ cluster list-none p-0 flow-space-2 line-height-m ]">
             {% for tag in tags | filter(["post"]) %}
-                <li class="[ flex gap-0.25 ]">
-                    <a href="/tags/{{ tag | slugify }}">{{ tag }}</a>
+                <li>
+                    <a class="[ button ]" href="/tags/{{ tag | slugify }}">
+                        {% include "svgs/frame.svg" %}
+                    {{ tag }}</a>
                 </li>
             {% endfor %}
         </ul>
diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html
index b78a648..adf2401 100644
--- a/src/_includes/partials/footer.html
+++ b/src/_includes/partials/footer.html
@@ -14,17 +14,19 @@
         </div>
         <div class="[ repel ]">
             <nav class="[ flow-space-0.5 ]">
-                <ul class="[ menu ] [ cluster p-0 m-0 gap-0.5 ]" role="list">
+                <ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
                     <li>
                         <span class="[ visually-hidden ]">Feeds</span>
-                        <a href="/feeds" class="[ button ]" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
+                        <a href="/feeds"
+                           class="[ button button--alt ]"
+                           aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
                     </li>
                     {% for key, url in meta.social %}
                         {% set alt = key | capitalize %}
                         <li>
                             <span class="[ visually-hidden ]">{{ alt }}</span>
                             <a href="{{ url }}"
-                               class="[ button ]"
+                               class="[ button button--alt ]"
                                target="_blank"
                                rel="me external noreferrer noopener"
                                aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
diff --git a/src/_includes/partials/menu.html b/src/_includes/partials/menu.html
index 1753755..56c6465 100644
--- a/src/_includes/partials/menu.html
+++ b/src/_includes/partials/menu.html
@@ -1,7 +1,10 @@
 <ul class="[ menu ] [ list-none cluster p-0 m-0 ]">
     {% for item in navigation.top %}
         <li>
-            <a class="[ button ]" href="{{ item.url }}">{{ item.text }}</a>
+            <a class="[ button button--alt font-size-s line-height-m ]"
+               href="{{ item.url }}">
+                {% include "svgs/" + item.icon + ".svg" %}
+                <span class="[ visually-hidden ]">{{ item.text }}</span></a>
         </li>
     {% endfor %}
 </ul>
diff --git a/src/_includes/svgs/book.svg b/src/_includes/svgs/book.svg
new file mode 100644
index 0000000..6e810d2
--- /dev/null
+++ b/src/_includes/svgs/book.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 0C3.34315 0 2 1.34315 2 3V13C2 14.6569 3.34315 16 5 16H14V14H4V12H14V0H5Z" fill="currentColor"/>
+</svg>
diff --git a/src/_includes/svgs/circle-info.svg b/src/_includes/svgs/circle-info.svg
new file mode 100644
index 0000000..b1d5a99
--- /dev/null
+++ b/src/_includes/svgs/circle-info.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM7 8H6V6H9V11H10V13H7V8ZM9 5V3H7V5H9Z" fill="currentColor"/>
+</svg>
diff --git a/src/_includes/svgs/frame.svg b/src/_includes/svgs/frame.svg
new file mode 100644
index 0000000..fa02e58
--- /dev/null
+++ b/src/_includes/svgs/frame.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 15V12H10V15H12V12H15V10H12V6H15V4H12V1H10V4H6V1H4V4H1V6H4V10H1V12H4V15H6ZM10 10H6V6H10V10Z" fill="currentColor"/>
+</svg>
diff --git a/src/_includes/svgs/game-controller.svg b/src/_includes/svgs/game-controller.svg
new file mode 100644
index 0000000..e71fdee
--- /dev/null
+++ b/src/_includes/svgs/game-controller.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13L3 14L6 11H10L13 14L16 13L15.248 4.7284C15.1076 3.18316 13.812 2 12.2604 2H3.73964C2.18803 2 0.89244 3.18316 0.751964 4.72839L0 13ZM12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6ZM12 8C12 8.55228 11.5523 9 11 9C10.4477 9 10 8.55228 10 8C10 7.44772 10.4477 7 11 7C11.5523 7 12 7.44772 12 8ZM5 8C6.10457 8 7 7.10457 7 6C7 4.89543 6.10457 4 5 4C3.89543 4 3 4.89543 3 6C3 7.10457 3.89543 8 5 8Z" fill="currentColor"/>
+</svg>
diff --git a/src/_includes/svgs/list.svg b/src/_includes/svgs/list.svg
new file mode 100644
index 0000000..e085dd2
--- /dev/null
+++ b/src/_includes/svgs/list.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 1H1V3H3V1Z" fill="currentColor"/>
+<path d="M3 5H1V7H3V5Z" fill="currentColor"/>
+<path d="M1 9H3V11H1V9Z" fill="currentColor"/>
+<path d="M3 13H1V15H3V13Z" fill="currentColor"/>
+<path d="M15 1H5V3H15V1Z" fill="currentColor"/>
+<path d="M15 5H5V7H15V5Z" fill="currentColor"/>
+<path d="M5 9H15V11H5V9Z" fill="currentColor"/>
+<path d="M15 13H5V15H15V13Z" fill="currentColor"/>
+</svg>
diff --git a/src/_includes/svgs/user.svg b/src/_includes/svgs/user.svg
new file mode 100644
index 0000000..663dbe6
--- /dev/null
+++ b/src/_includes/svgs/user.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7Z" fill="currentColor"/>
+<path d="M14 12C14 10.3431 12.6569 9 11 9H5C3.34315 9 2 10.3431 2 12V15H14V12Z" fill="currentColor"/>
+</svg>
diff --git a/src/css/blocks/button.css b/src/css/blocks/button.css
index acdce2c..54ce617 100644
--- a/src/css/blocks/button.css
+++ b/src/css/blocks/button.css
@@ -1,35 +1,90 @@
 .button {
-  display: flex;
   align-items: center;
-  justify-content: center;
-  line-height: 1rem;
-  background-color: var(--color-white);
-  color: var(--color-shadow);
-  box-shadow:
-    1px 1px 0px var(--color-shadow),
-    2px 2px 0 var(--color-shadow);
-  padding-block: var(--spacing-0\.25);
-  padding-inline: var(--spacing-0\.5);
-  border-radius: var(--spacing-0\.25);
-  border: 1px solid var(--color-shadow);
+  color: var(--color-text);
+  display: inline-flex;
+  gap: var(--spacing-0\.5);
+  padding: var(--spacing-0\.5) var(--spacing-1);
+  position: relative;
   text-decoration: none;
-  font-size: 0.8rem;
-  transition:
-    box-shadow var(--transition-duration),
-    transform var(--transition-duration),
-    background-color var(--transition-duration),
-    color var(--transition-duration);
+  transition: transform 0.3s ease;
+  z-index: 1;
+
+  &::before,
+  &::after {
+    border-radius: var(--spacing-0\.5);
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition:
+      opacity 0.1s ease,
+      transform 0.3s var(--transition-bounce);
+    z-index: -1;
+  }
+
+  &::before {
+    background-color: var(--color-surface);
+  }
+
+  &::after {
+    background-color: var(--color-text);
+    opacity: 0;
+  }
+
+  svg {
+    color: var(--color-fadeText);
+    transform: scale(1);
+    transition: transform 0.3s var(--transition-bounce);
+  }
 }
 
-.button:hover {
-  background-color: color-mix(
-    in srgb,
-    var(--color-white) 90%,
-    var(--color-primary)
-  );
+@media (hover: hover) {
+  .button:hover {
+    &::before,
+    &::after {
+      transform: scale(1.05);
+    }
+
+    &::after {
+      opacity: 1;
+    }
+
+    svg {
+      color: var(--color-border);
+      transform: rotateZ(12deg) scale(1.4);
+    }
+  }
 }
 
 .button:active {
-  box-shadow: 0 0 0 var(--color-shadow);
-  transform: translate(2px, 2px);
+  transform: scale(0.8);
+}
+
+.button--alt {
+  color: var(--color-primary);
+
+  &::before {
+    background-color: var(--color-white);
+  }
+
+  &::after {
+    background-color: color-mix(
+      in srgb,
+      var(--color-white) 90%,
+      var(--color-primary)
+    );
+  }
+
+  svg {
+    color: inherit;
+  }
+}
+
+@media (hover: hover) {
+  .button--alt:hover {
+    color: var(--color-shadow);
+
+    svg {
+      color: inherit;
+    }
+  }
 }
diff --git a/src/css/blocks/categories.css b/src/css/blocks/categories.css
deleted file mode 100644
index 180d299..0000000
--- a/src/css/blocks/categories.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.categories li {
-  color: var(--color-fadeText);
-}
-
-.categories li > a {
-  text-decoration-color: var(--color-fadeText);
-}
-
-.categories li > a:hover {
-  text-decoration-color: inherit;
-}
-
-.categories li::before {
-  content: "#";
-  user-select: none;
-}
diff --git a/src/css/blocks/menu.css b/src/css/blocks/menu.css
deleted file mode 100644
index 5842fdf..0000000
--- a/src/css/blocks/menu.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.menu > li {
-  filter: drop-shadow(1px 0 0 var(--color-white))
-    drop-shadow(-1px 0 0 var(--color-white))
-    drop-shadow(0 -1px 0 var(--color-white))
-    drop-shadow(0 1px 0 var(--color-white));
-}
-
-.menu > li:has(a:focus-visible) {
-  filter: none;
-}
diff --git a/src/css/global/variables.css b/src/css/global/variables.css
index 59e8ff6..0540422 100644
--- a/src/css/global/variables.css
+++ b/src/css/global/variables.css
@@ -9,4 +9,6 @@
   --text-skew: skew(0deg, -1deg);
 
   --triangles: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0" d="M0,0 40,40 80,0z" /></svg>');
+
+  --transition-bounce: cubic-bezier(0.47, 2.5, 0.41, 1);
 }