fix: update mobile styles

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>

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>

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>