Merge pull request #28 from opendatafit/27-header-and-footer-responsi…

…ve-fixes Responsive tweaks for header and footer
open-datakit · Jan 31, 2024 · 6a43293 · 6a43293
2 parents 5937311 + 4f2227d
commit 6a43293
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -6,6 +6,8 @@ const today = new Date();
   @use "@opendatafit/common-styles/common-styles/variables/fonts";
   @use "@opendatafit/common-styles/common-styles/mixins/lists";
 
+  @use "../styles/mixins/breakpoints";
+
   strong {
     font-variation-settings: "opsz" 14,"wght" 550;
   }
@@ -51,18 +53,25 @@ const today = new Date();
     .supporters {
       @include lists.reset;
       box-sizing: border-box;
-      display: flex;
+      display: grid;
       justify-content: center;
       gap: 3ch;
       margin: 0 auto;
-      height: 5em;
       width: auto;
+      grid-auto-rows: 5em;
+
+      grid-template-columns: repeat(4, auto);
       margin-top: 1em;
       margin-bottom: 2em;
-      li {
-        flex: 0 0 auto;
-        min-width: 0;
+
+      @include breakpoints.mobile-bp {
+        grid-template-columns: repeat(2, auto);
+      }
+
+      @media (max-width: 500px) {
+        grid-template-columns: repeat(1, auto);
       }
+
       a {
         display: block;
         height: 100%;

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -6,6 +6,8 @@ import { SITE_TITLE } from "../consts";
 <style lang="scss">
   @use "@opendatafit/common-styles/common-styles/mixins/display";
   @use "@opendatafit/common-styles/common-styles/variables/fonts";
+
+  @use "../styles/mixins/breakpoints";
 
   header.site-header {
     // color: colour.$banner;
@@ -37,6 +39,11 @@ import { SITE_TITLE } from "../consts";
         gap: 2ch;
         align-items: center;
       }
+      @include breakpoints.mobile-bp {
+        .internal-links {
+          display: none;
+        }
+      }
     }
     a {
       text-decoration: none;