Responsive home page

src/_includes/partials/components/intro.njk

@@ -1,7 +1,7 @@
 <header class="[ intro ]">
   <div class="[ wrapper ]">
     <h1 class="[ intro__heading ]">{{ brandHeading }}</h1>
-    <svg width="127" height="237" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116.77 20.74c-.472-1.843-2.433-5.326-6.48-5.326h-4.283C105.395 6.814 98.249 0 89.533 0c-9.116 0-16.534 7.448-16.534 16.605v20.597L10.073 61.124a2.422 2.422 0 00-1.403 3.124c6.302 16.578 22.13 26.795 38.897 26.795 2.778 0 5.582-.315 8.375-.895 2.026.425 4.09.704 6.169.824v21.449a2.422 2.422 0 104.842 0V90.962a41.398 41.398 0 006.046-.8v22.259a2.422 2.422 0 104.843 0v-23.59c16.39-5.573 28.22-21.102 28.22-39.352V20.256h4.228c1.262 0 1.737 1.513 1.793 1.708a2.425 2.425 0 002.94 1.723 2.424 2.424 0 001.747-2.948zM32.478 82.973c-8.206-3.684-14.61-10.117-18.31-18.225l62.113-23.615c.013-.004.023-.013.034-.017.09-.036.173-.083.257-.128.058-.032.119-.058.174-.093.066-.044.124-.096.186-.146.06-.05.127-.095.184-.151.05-.05.092-.109.138-.162.054-.063.112-.124.159-.192.043-.065.077-.136.116-.203.037-.067.079-.131.11-.202.03-.07.05-.146.074-.22.024-.076.053-.15.07-.229.015-.065.019-.132.028-.199.013-.093.028-.187.03-.282l.003-.039V16.605c0-6.485 5.245-11.762 11.69-11.762 6.416 0 11.637 5.226 11.687 11.667v30.547H86.663a2.421 2.421 0 00-2.422 2.422c0 .023.007.043.007.068-.033 15.12-9.538 28.88-23.678 34.255-9.166 3.483-19.144 3.192-28.092-.828zm34.639 3.12c12.614-6.78 21.023-19.79 21.88-34.194h12.133c-1.194 18.255-15.785 32.903-34.013 34.195z" fill="#1E1E1E"/><path d="M89.53 20.256h4.464a2.421 2.421 0 100-4.842h-4.463a2.421 2.421 0 100 4.842zM123.897 194.561h-4.496V114.15a2.241 2.241 0 00-2.248-2.233H6.994c-1.24 0-2.248 1-2.248 2.233v80.411H2.498a2.242 2.242 0 00-2.248 2.234v37.971A2.242 2.242 0 002.498 237h121.399a2.243 2.243 0 002.249-2.234v-37.971a2.243 2.243 0 00-2.249-2.234zM9.243 116.384h105.662v78.177H9.243v-78.177zm112.406 116.149H4.746v-33.505H121.65v33.505z" fill="#1E1E1E"/><path d="M103.663 125.318h-83.18a2.242 2.242 0 00-2.249 2.234v55.841a2.241 2.241 0 002.248 2.233h83.181c1.241 0 2.248-1 2.248-2.233v-55.841a2.242 2.242 0 00-2.248-2.234zm-2.248 55.841H22.73v-51.373h78.685v51.373zM114.904 206.846h-13.488a2.242 2.242 0 00-2.248 2.234v13.401a2.242 2.242 0 002.248 2.234h13.488a2.243 2.243 0 002.249-2.234V209.08a2.243 2.243 0 00-2.249-2.234zm-2.248 13.402h-8.992v-8.935h8.992v8.935zM92.423 206.846h-13.49a2.242 2.242 0 00-2.247 2.234v13.401a2.242 2.242 0 002.248 2.234h13.489a2.242 2.242 0 002.248-2.234V209.08a2.242 2.242 0 00-2.248-2.234zm-2.248 13.402h-8.993v-8.935h8.993v8.935z" fill="#1E1E1E"/><path d="M78.934 134.253H27.227v4.467h51.707v-4.467zM63.197 143.187h-35.97v4.468h35.97v-4.468zM45.212 152.122H27.227v4.467h17.985v-4.467zM58.7 152.122h-8.993v4.467h8.992v-4.467z" fill="#111"/></svg>
+    <svg viewBox="0 0 127 237" height="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116.77 20.74c-.472-1.843-2.433-5.326-6.48-5.326h-4.283C105.395 6.814 98.249 0 89.533 0c-9.116 0-16.534 7.448-16.534 16.605v20.597L10.073 61.124a2.422 2.422 0 00-1.403 3.124c6.302 16.578 22.13 26.795 38.897 26.795 2.778 0 5.582-.315 8.375-.895 2.026.425 4.09.704 6.169.824v21.449a2.422 2.422 0 104.842 0V90.962a41.398 41.398 0 006.046-.8v22.259a2.422 2.422 0 104.843 0v-23.59c16.39-5.573 28.22-21.102 28.22-39.352V20.256h4.228c1.262 0 1.737 1.513 1.793 1.708a2.425 2.425 0 002.94 1.723 2.424 2.424 0 001.747-2.948zM32.478 82.973c-8.206-3.684-14.61-10.117-18.31-18.225l62.113-23.615c.013-.004.023-.013.034-.017.09-.036.173-.083.257-.128.058-.032.119-.058.174-.093.066-.044.124-.096.186-.146.06-.05.127-.095.184-.151.05-.05.092-.109.138-.162.054-.063.112-.124.159-.192.043-.065.077-.136.116-.203.037-.067.079-.131.11-.202.03-.07.05-.146.074-.22.024-.076.053-.15.07-.229.015-.065.019-.132.028-.199.013-.093.028-.187.03-.282l.003-.039V16.605c0-6.485 5.245-11.762 11.69-11.762 6.416 0 11.637 5.226 11.687 11.667v30.547H86.663a2.421 2.421 0 00-2.422 2.422c0 .023.007.043.007.068-.033 15.12-9.538 28.88-23.678 34.255-9.166 3.483-19.144 3.192-28.092-.828zm34.639 3.12c12.614-6.78 21.023-19.79 21.88-34.194h12.133c-1.194 18.255-15.785 32.903-34.013 34.195z" fill="#1E1E1E"/><path d="M89.53 20.256h4.464a2.421 2.421 0 100-4.842h-4.463a2.421 2.421 0 100 4.842zM123.897 194.561h-4.496V114.15a2.241 2.241 0 00-2.248-2.233H6.994c-1.24 0-2.248 1-2.248 2.233v80.411H2.498a2.242 2.242 0 00-2.248 2.234v37.971A2.242 2.242 0 002.498 237h121.399a2.243 2.243 0 002.249-2.234v-37.971a2.243 2.243 0 00-2.249-2.234zM9.243 116.384h105.662v78.177H9.243v-78.177zm112.406 116.149H4.746v-33.505H121.65v33.505z" fill="#1E1E1E"/><path d="M103.663 125.318h-83.18a2.242 2.242 0 00-2.249 2.234v55.841a2.241 2.241 0 002.248 2.233h83.181c1.241 0 2.248-1 2.248-2.233v-55.841a2.242 2.242 0 00-2.248-2.234zm-2.248 55.841H22.73v-51.373h78.685v51.373zM114.904 206.846h-13.488a2.242 2.242 0 00-2.248 2.234v13.401a2.242 2.242 0 002.248 2.234h13.488a2.243 2.243 0 002.249-2.234V209.08a2.243 2.243 0 00-2.249-2.234zm-2.248 13.402h-8.992v-8.935h8.992v8.935zM92.423 206.846h-13.49a2.242 2.242 0 00-2.247 2.234v13.401a2.242 2.242 0 002.248 2.234h13.489a2.242 2.242 0 002.248-2.234V209.08a2.242 2.242 0 00-2.248-2.234zm-2.248 13.402h-8.993v-8.935h8.993v8.935z" fill="#1E1E1E"/><path d="M78.934 134.253H27.227v4.467h51.707v-4.467zM63.197 143.187h-35.97v4.468h35.97v-4.468zM45.212 152.122H27.227v4.467h17.985v-4.467zM58.7 152.122h-8.993v4.467h8.992v-4.467z" fill="#111"/></svg>
     <div class="btn-grp">
       <a role="button" href="/comprendre-la-cae" class="btn btn-secondary">Une CAE c'est quoi ?</a>
       <a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre

src/_includes/partials/global/site-head.njk

@@ -1,8 +1,8 @@
 <a class="skip-link" href="#main-content">Skip to content</a>
 <header role="banner" class="[ site-head ]">
   <div class="wrapper">
-    <div class="[ site-head__inner ] [ md:box-flex space-between align-center ]">
+    <div class="[ site-head__inner ]">
-      <a href="/" class="[ site-head__site-name ] [ leading-tight ]">
+      <a href="/" class="[ site-head__site-name ]">
         <span class="visually-hidden">{{ site.name }} - Home</span>
         {% include "../../../images/astrolabe_logo.svg" %}
       </a>

src/scss/_typography.scss

@@ -79,14 +79,14 @@ h3 {
   font-size: get-size(500);
 }
 
-@include media-query('md') {
+@media (max-width: 575.98px) {
-  // h1 {
+  h1 {
-  //   font-size: get-size(900);
+    font-size: 2rem;
-  // }
+  }
 
-  // h2 {
+  h2 {
-  //   font-size: get-size(800);
+    font-size: 1.6rem;
-  // }
+  }
 
   // h3 {
   //   font-size: get-size(700);

src/scss/components/_form.scss

@@ -126,3 +126,26 @@ legend {
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .home .form-container {
+    svg {
+      width: 70rem;
+      overflow: hidden;
+    }
+  }
+
+  .form-container {
+    .contact-heading {
+      margin: 2rem 0;
+    }
+  }
+
+  .field-list {
+    display: block;
+  }
+  
+  .field-list__field-group {
+    margin-top: 1.5rem;
+  }
+}

src/scss/components/_intro.scss

@@ -29,14 +29,11 @@
       display: none;
     }
 
-    &--compact {
-      max-width: 20ex;
-    }
-
     + svg {
       margin-left: auto;
       margin-right: 8rem;
       vertical-align: middle;
+      max-width: 8rem;
     }
   }
 
@@ -44,3 +41,32 @@
     margin-top: -3.5rem;
   }
 }
+
+@media (max-width: 575.98px) {
+  .intro {
+    margin-top: 3rem;
+
+    &__heading {
+      font-size: 1.75rem;
+
+      + svg {
+        margin: 2rem auto 0;
+        max-width: 7rem;
+      }
+    }
+
+    .btn-grp {
+      margin-top: 0;
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 2rem;
+
+      .btn + .btn {
+        margin-left: 0;
+        margin-top: 1.5rem;
+      }
+    }
+  }
+}

src/scss/components/_posts-list.scss

@@ -79,3 +79,32 @@
     top: -9rem;
   }
 }
+
+@media (max-width: 575.98px) {
+  .news-list {
+    > svg {
+      width: 70rem;
+      overflow: hidden;
+    }
+
+    &__items {
+      display: flex;
+      overflow-y: auto;
+      padding-bottom: 1rem;
+    }
+
+    &__item {
+      flex-shrink: 0;
+      flex-basis: 16rem;
+    }
+  }
+
+  .home .news-list {
+    margin: 6rem 0;
+
+    &__inner {
+      position: static;
+      margin-top: -9rem;
+    }
+  }
+}

src/scss/components/_presentation.scss

@@ -80,3 +80,30 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .presentation {
+    article {
+      display: block;
+      margin-bottom: 4rem;
+    }
+
+    .content {
+      h2 {
+        font-size: 1.6rem;
+
+        + p {
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .side-info {
+      margin-top: 2rem;
+
+      img {
+        margin-bottom: 2.5rem;
+      }
+    }
+  }
+}

src/scss/components/_site-foot.scss

@@ -43,3 +43,11 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .site-foot {
+    &__inner {
+      display: block;
+    }
+  }
+}

src/scss/components/_site-head.scss

@@ -2,6 +2,12 @@
   padding-top: 3rem;
   padding-bottom: 1.5rem;
 
+  &__inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &__site-name {
     font-weight: 700;
     text-decoration: none;
@@ -12,3 +18,16 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .site-head {
+    &__inner {
+      display: block;
+    }
+
+    &__site-name {
+      display: inline-block;
+      margin: 0 auto;
+    }
+  }
+}

src/scss/components/_sponsor.scss

@@ -35,3 +35,17 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .sponsor {
+    &__list {
+      display: flex;
+      overflow-y: auto;
+      padding-bottom: 1rem;
+    }
+
+    &__list-item + &__list-item {
+      margin-left: 1.5rem;
+    }
+  }
+}