fixed header links melting together on very narrow screens

Author: Oaphi

dist/assets/css/main.css

@@ -1,8 +1,15 @@
+$screensize-narrow: 500px;
 $screensize-phone: 600px;
 $screensize-tablet: 900px;
 $screensize-desktop: 1200px;
 $screensize-large-desktop: 1800px;
 
+@mixin for-narrow-only {
+    @media (width <= 499px) {
+        @content;
+    }
+}
+
 @mixin for-phone-only {
     @media (width <= 599px) {
         @content;

dist/assets/css/main.css.map

@@ -7,6 +7,10 @@
     padding-top: variables.$gutter;
     position: absolute;
 
+    @include responsive.for-narrow-only {
+        position: static;
+    }
+
     .links,
     .logo {
         position: relative;
@@ -29,6 +33,17 @@
         margin-left: 2%;
         justify-content: space-evenly;
 
+        @include responsive.for-narrow-only {
+            display: inline-flex;
+            flex-wrap: wrap;
+            column-gap: 0.5em;
+            row-gap: 1em;
+
+            a {
+                margin-left: 0;
+            }
+        }
+
         @include responsive.for-image-adjustments {
             width: 100%;
             text-align: center;

src/styles/_responsive.scss

@@ -39,8 +39,16 @@
                 padding: 80px 0 20px 0;
             }
 
+            @include responsive.for-narrow-only {
+                padding-top: 1em;
+            }
+
             h1 {
                 margin-top: 30%;
+
+                @include responsive.for-narrow-only {
+                    margin-top: 0;
+                }
             }
 
             button {