📱 Make footer layout nicer on narrow screens

querkmachine · Sep 27, 2024 · c5c3aee · c5c3aee
1 parent 86531a1
commit c5c3aee
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/src/_layouts/layout.njk b/src/_layouts/layout.njk
@@ -86,7 +86,7 @@
       <div class="kimWrapper kimFooter_inner">
         {% block beforeFooter %}{% endblock%}
         <div class="kimGrid">
-          <div class="kimGrid_column kimGrid_column-oneHalf defiant:kimGrid_column-oneThird">
+          <div class="kimGrid_column kimGrid_column-full nx:kimGrid_column-oneHalf defiant:kimGrid_column-oneThird">
             <h2 class="kimHeading-xs" id="footer-links-beeps">More beeping</h2>
             <ul class="kimList kimFooter_links" aria-labelledby="footer-links-beeps">
               {%- for link in site.footerLinks %}
@@ -98,7 +98,7 @@
               {%- endfor%}
             </ul>
           </div>
-          <div class="kimGrid_column kimGrid_column-oneHalf defiant:kimGrid_column-oneThird">
+          <div class="kimGrid_column kimGrid_column-full nx:kimGrid_column-oneHalf defiant:kimGrid_column-oneThird">
             <h2 class="kimHeading-xs" id="footer-links-other">Things and stuff</h2>
             <ul class="kimList kimFooter_links" aria-labelledby="footer-links-other">
               {%- for link in site.legalLinks %}

diff --git a/src/assets/components/_noodle-bowl.scss b/src/assets/components/_noodle-bowl.scss
@@ -67,8 +67,15 @@
       animation-timing-function: ease-in-out;
       animation-direction: alternate-reverse;
 
-      @include media-queries.kim-mq($from: constitution) {
-        --pawb-offset: calc(var(--pawb-width) * 1.25);
+      // Move pawbs further apart if we have space
+      @include media-queries.kim-mq($from: 430px) {
+        --pawb-offset: calc(var(--pawb-width) * 1.2);
+      }
+
+      // Hide pawbs entirely on really narrow screens to prevent introducing
+      // a horizontal scrollbar
+      @include media-queries.kim-mq($to: 370px) {
+        content: none;
       }
 
       @media (prefers-reduced-motion: reduce) {

diff --git a/src/assets/settings/_breakpoints.scss b/src/assets/settings/_breakpoints.scss
@@ -1,8 +1,9 @@
 // Breakpoints defined by their minimum widths. Named for the hero ship classes
-// from Star Trek TOS/TNG/DS9/VOY in that order. Screens below 'constitution'
+// from Star Trek ENT/TOS/TNG/DS9/VOY in that order. Screens below 'nx'
 // are not considered to be part of any breakpoint (essentially, they are the
 // 'default' breakpoint).
 $kim-breakpoints: (
+  nx: 320px,
   constitution: 400px,
   galaxy: 600px,
   defiant: 768px,

diff --git a/src/index.njk b/src/index.njk
@@ -112,11 +112,11 @@ metadata:
 {%- if webrings or buttons.homepage %}
   <div class="kimGrid">
     {%- if webrings %}
-    <div class="kimGrid_column kimGrid_column-full galaxy:kimGrid_column-twoThirds">
+    <div class="kimGrid_column kimGrid_column-full defiant:kimGrid_column-twoThirds">
       <h2 class="kimHeading-xs">Webrings</h2>
       <dl class="kimGrid page-rings">
         {%- for ring in webrings %}
-        <div class="kimGrid_column kimGrid_column-oneThird">
+        <div class="kimGrid_column kimGrid_column-oneHalf constitution:kimGrid_column-oneThird">
           <dt>
             <a class="kimLink-plain" href="{{ ring.url }}">
               {% include "./assets/images/" + ring.icon %}<br>
@@ -140,7 +140,7 @@ metadata:
     {%- endif %}
     {%- if buttons.homepage %}
       {% from "src/_includes/88x31-button.njk" import kim88x31Button %}
-      <div class="kimGrid_column kimGrid_column-full galaxy:kimGrid_column-oneThird">
+      <div class="kimGrid_column kimGrid_column-full defiant:kimGrid_column-oneThird">
         <h2 class="kimHeading-xs">Buttons</h2>
         <div class="kimButtonGrid">
           {%- for button in buttons.homepage %}{{ kim88x31Button(button) }}{%- endfor %}