From bab76c7f31b9ea01d74de72d3933efcf44669643 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Wed, 21 Feb 2024 22:30:52 -0800
Subject: [PATCH] fix: update mobile styles

---
 src/_includes/partials/footer.html | 31 +++++++++++++------------
 src/_includes/partials/header.html | 36 ++++++++++++++++--------------
 src/_includes/partials/menu.html   |  2 +-
 src/css/blocks/site-footer.css     | 23 -------------------
 src/css/blocks/site-logo.css       |  5 +----
 src/css/blocks/site-nav.css        |  9 +-------
 src/css/compositions/cluster.css   | 15 +++++++++++++
 src/css/compositions/repel.css     | 16 +++++++++++++
 src/css/compositions/switcher.css  | 21 +++++++++++++++++
 9 files changed, 91 insertions(+), 67 deletions(-)
 delete mode 100644 src/css/blocks/site-footer.css
 create mode 100644 src/css/compositions/cluster.css
 create mode 100644 src/css/compositions/repel.css
 create mode 100644 src/css/compositions/switcher.css

diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html
index ae62894..ed03e91 100644
--- a/src/_includes/partials/footer.html
+++ b/src/_includes/partials/footer.html
@@ -1,17 +1,20 @@
-<footer class="[ footer ] [ mt-1.5 py-1.5 ]">
-    <div class="[ footer-grid ] [ wrapper gap-0.5 ]">
-        <p>&copy; {{ meta.author }} 2018-2024.</p>
-        <nav class="[ footer-pages ]">
-            <ul class="[ flex-col list-none p-0 m-0 gap-0.5 ]">
-                {% for link in navigation.bottom %}
-                    <li>
-                        <a href="{{ link.url }}">{{ link.text }}</a>
-                    </li>
-                {% endfor %}
-            </ul>
-        </nav>
-        <nav class="[ footer-socials ]">
-            <ul class="[ flex list-none gap-0.5 m-0 p-0 ]">
+<footer class="[ bg-surface mt-1.5 py-1.5 ]">
+    <div class="[ wrapper flow ]">
+        <div class="[ repel ]">
+            <p>&copy; {{ meta.author }} 2018-2024.</p>
+            <nav>
+                <ul class="[ list-none cluster p-0 m-0 ]">
+                    {% for link in navigation.bottom %}
+                        <li>
+                            <a href="{{ link.url }}">{{ link.text }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
+        <nav style="--flow-space: var(--spacing-0\.5)">
+            <ul class="[ list-none cluster p-0 m-0 ]"
+                style="--gap: var(--spacing-0\.5)">
                 <li>
                     <span class="[ visually-hidden ]">RSS</span>
                     <a href="/rss.xml" target="_blank" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
diff --git a/src/_includes/partials/header.html b/src/_includes/partials/header.html
index 090df0c..aaea89b 100644
--- a/src/_includes/partials/header.html
+++ b/src/_includes/partials/header.html
@@ -1,18 +1,20 @@
-<header class="[ navbar ]">
-    <nav class="[ wrapper flex items-center justify-between ]">
-        <div class="[ site-logo ] [ flex items-center ]">
-            <a class="[ logo ] [ flex items-center justify-center ]"
-               aria-label="Go to index"
-               href="{{ meta.url }}">
-                <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
-            </a>
-            <a class="[ wordmark ] [ flex ]"
-               href="{{ meta.url }}"
-               aria-label="Go to index">
-                <span>wonderful</span>
-                <span>frog</span>
-            </a>
-        </div>
-        {% include "partials/menu.html" %}
-    </nav>
+<header class="[ navbar ][ py-1 mb-1 ]">
+    <div class="[ wrapper ]">
+        <nav class="[ repel ]">
+            <div class="[ site-logo ] [ flex items-center gap-0.5 ]">
+                <a class="[ logo ] [ flex items-center justify-center ]"
+                   aria-label="Go to index"
+                   href="{{ meta.url }}">
+                    <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
+                </a>
+                <a class="[ wordmark ] [ flex ]"
+                   href="{{ meta.url }}"
+                   aria-label="Go to index">
+                    <span>wonderful</span>
+                    <span>frog</span>
+                </a>
+            </div>
+            {% include "partials/menu.html" %}
+        </nav>
+    </div>
 </header>
diff --git a/src/_includes/partials/menu.html b/src/_includes/partials/menu.html
index 3a40d15..4d6417e 100644
--- a/src/_includes/partials/menu.html
+++ b/src/_includes/partials/menu.html
@@ -1,4 +1,4 @@
-<ul class="[ links ] [ flex ]">
+<ul class="[ list-none cluster p-0 m-0 ]">
     {% for item in navigation.top %}
         <li>
             <a href="{{ item.url }}" {{ helpers.getLinkActiveState(item.url, page.url) | safe }}>{{ item.text }}</a>
diff --git a/src/css/blocks/site-footer.css b/src/css/blocks/site-footer.css
deleted file mode 100644
index c22fe01..0000000
--- a/src/css/blocks/site-footer.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.footer {
-  background-color: var(--color-surface);
-}
-
-.footer-grid {
-  display: grid;
-}
-
-.footer-socials {
-  grid-column: 1 / -1;
-}
-
-@media (min-width: 32rem) {
-  .footer-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .footer-pages ul {
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: flex-end;
-  }
-}
diff --git a/src/css/blocks/site-logo.css b/src/css/blocks/site-logo.css
index 9b70dd5..0ef5a5a 100644
--- a/src/css/blocks/site-logo.css
+++ b/src/css/blocks/site-logo.css
@@ -1,9 +1,6 @@
-.site-logo {
-  gap: 0.5rem;
-}
-
 .site-logo .wordmark {
   text-decoration: none;
+  margin-block-start: -6px;
 }
 
 .site-logo .wordmark > span {
diff --git a/src/css/blocks/site-nav.css b/src/css/blocks/site-nav.css
index 3c4ddf7..e9cf60f 100644
--- a/src/css/blocks/site-nav.css
+++ b/src/css/blocks/site-nav.css
@@ -2,18 +2,11 @@
   backdrop-filter: blur(3px);
   background-color: color-mix(
     in srgb,
-    var(--color-background) 60%,
+    var(--color-background) 70%,
     transparent
   );
   background-image: linear-gradient(var(--color-background) 20%, transparent);
-  container: navbar / inline-size;
-  padding-block: 1.5rem;
   position: sticky;
   top: 0;
   z-index: 1;
 }
-
-.navbar .links {
-  list-style-type: none;
-  gap: 1rem;
-}
diff --git a/src/css/compositions/cluster.css b/src/css/compositions/cluster.css
new file mode 100644
index 0000000..a5258ac
--- /dev/null
+++ b/src/css/compositions/cluster.css
@@ -0,0 +1,15 @@
+/*
+CLUSTER
+More info: https://every-layout.dev/layouts/cluster/
+A layout that lets you distribute items with consitent
+spacing, regardless of their size
+*/
+
+.cluster {
+  --gap: var(--spacing-1);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, --spacing-1);
+  justify-content: flex-start;
+  align-items: center;
+}
diff --git a/src/css/compositions/repel.css b/src/css/compositions/repel.css
new file mode 100644
index 0000000..b5ad18e
--- /dev/null
+++ b/src/css/compositions/repel.css
@@ -0,0 +1,16 @@
+/*
+REPEL
+A little layout that pushes items away from each other where
+there is space in the viewport and stacks on small viewports
+*/
+.repel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-0\.5);
+}
+
+.repel[data-nowrap] {
+  flex-wrap: nowrap;
+}
diff --git a/src/css/compositions/switcher.css b/src/css/compositions/switcher.css
new file mode 100644
index 0000000..ea57801
--- /dev/null
+++ b/src/css/compositions/switcher.css
@@ -0,0 +1,21 @@
+/*
+SWITCHER
+More info: https://every-layout.dev/layouts/switcher/
+A layout that allows you to lay **2** items next to each other
+until there is not enough horizontal space to allow that.
+*/
+
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((32rem - 100%) * 999);
+}
+
+.switcher > :nth-last-child(n + 3),
+.switcher > :nth-last-child(n + 3) ~ * {
+  flex-basis: 100%;
+}