fix: update mobile styles

src/_includes/partials/footer.html

@@ -1,17 +1,20 @@
-<footer class="[ footer ] [ mt-1.5 py-1.5 ]">
+<footer class="[ bg-surface mt-1.5 py-1.5 ]">
-    <div class="[ footer-grid ] [ wrapper gap-0.5 ]">
+    <div class="[ wrapper flow ]">
-        <p>&copy; {{ meta.author }} 2018-2024.</p>
+        <div class="[ repel ]">
-        <nav class="[ footer-pages ]">
+            <p>&copy; {{ meta.author }} 2018-2024.</p>
-            <ul class="[ flex-col list-none p-0 m-0 gap-0.5 ]">
+            <nav>
-                {% for link in navigation.bottom %}
+                <ul class="[ list-none cluster p-0 m-0 ]">
-                    <li>
+                    {% for link in navigation.bottom %}
-                        <a href="{{ link.url }}">{{ link.text }}</a>
+                        <li>
-                    </li>
+                            <a href="{{ link.url }}">{{ link.text }}</a>
-                {% endfor %}
+                        </li>
-            </ul>
+                    {% endfor %}
-        </nav>
+                </ul>
-        <nav class="[ footer-socials ]">
+            </nav>
-            <ul class="[ flex list-none gap-0.5 m-0 p-0 ]">
+        </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>

src/_includes/partials/header.html

@@ -1,18 +1,20 @@
-<header class="[ navbar ]">
+<header class="[ navbar ][ py-1 mb-1 ]">
-    <nav class="[ wrapper flex items-center justify-between ]">
+    <div class="[ wrapper ]">
-        <div class="[ site-logo ] [ flex items-center ]">
+        <nav class="[ repel ]">
-            <a class="[ logo ] [ flex items-center justify-center ]"
+            <div class="[ site-logo ] [ flex items-center gap-0.5 ]">
-               aria-label="Go to index"
+                <a class="[ logo ] [ flex items-center justify-center ]"
-               href="{{ meta.url }}">
+                   aria-label="Go to index"
-                <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
+                   href="{{ meta.url }}">
-            </a>
+                    <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
-            <a class="[ wordmark ] [ flex ]"
+                </a>
-               href="{{ meta.url }}"
+                <a class="[ wordmark ] [ flex ]"
-               aria-label="Go to index">
+                   href="{{ meta.url }}"
-                <span>wonderful</span>
+                   aria-label="Go to index">
-                <span>frog</span>
+                    <span>wonderful</span>
-            </a>
+                    <span>frog</span>
-        </div>
+                </a>
-        {% include "partials/menu.html" %}
+            </div>
-    </nav>
+            {% include "partials/menu.html" %}
+        </nav>
+    </div>
 </header>

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>

src/css/blocks/site-footer.css

@@ -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;
-  }
-}

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 {

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;
-}

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;
+}

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;
+}

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%;
+}