From de708778114ec4b4cfb0e0e5d8959bd857878118 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Fri, 17 Jul 2020 18:35:06 +0200
Subject: [PATCH] tablet reponsive

---
 src/_includes/partials/components/nav.njk |  2 +-
 src/scss/components/_intro.scss           | 62 +++++++++++++++++++++--
 src/scss/components/_member-list.scss     | 15 +++++-
 src/scss/components/_nav.scss             |  9 +++-
 src/scss/components/_post.scss            | 19 +++++--
 src/scss/components/_posts-list.scss      | 32 +++++++++---
 src/scss/components/_presentation.scss    |  2 +-
 src/scss/components/_site-head.scss       |  2 +-
 src/scss/components/_sponsor.scss         |  2 +-
 9 files changed, 125 insertions(+), 20 deletions(-)

diff --git a/src/_includes/partials/components/nav.njk b/src/_includes/partials/components/nav.njk
index 01388a5..eb6e5cd 100644
--- a/src/_includes/partials/components/nav.njk
+++ b/src/_includes/partials/components/nav.njk
@@ -1,6 +1,6 @@
 {% if navigation.items %}
   <nav class="nav" aria-label="{{ariaLabel}}">
-    <ul class="[ nav__list ] [ box-flex align-center md:space-before ]">
+    <ul class="[ nav__list ]">
       {% for item in navigation.items %}
         {% set relAttribute = '' %}
         {% set currentAttribute = '' %}
diff --git a/src/scss/components/_intro.scss b/src/scss/components/_intro.scss
index e5f5f46..116a5d4 100644
--- a/src/scss/components/_intro.scss
+++ b/src/scss/components/_intro.scss
@@ -42,7 +42,29 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (min-width: 768px) and (max-width: 1199.98px) {
+  .intro {
+    margin-top: 4rem;
+
+    &__heading {
+      width: 100%;
+      max-width: none;
+
+      + svg {
+        order: 1;
+        margin-right: auto;
+      }
+    }
+
+    .btn-grp {
+      margin-top: auto;
+      margin-right: auto;
+      margin-bottom: 4rem;
+    }
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
   .intro {
     margin-top: 3rem;
 
@@ -52,16 +74,48 @@
       + svg {
         margin: 2rem auto 0;
         max-width: 7rem;
+        order: 0;
       }
     }
 
     .btn-grp {
-      margin-top: 0;
       display: flex;
-      width: 100%;
+      width: auto;
       flex-direction: column;
       align-items: center;
-      margin-top: 2rem;
+      margin-top: auto;
+      margin-bottom: auto;
+      margin-right: auto;
+
+      .btn + .btn {
+        margin-left: 0;
+        margin-top: 1.5rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .intro {
+    margin-top: 3rem;
+    
+    &__heading {
+      font-size: 1.75rem;
+
+      + svg {
+        margin: 2rem auto 0;
+        max-width: 7rem;
+        order: 0;
+      }
+    }
+
+    .btn-grp {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 2rem;
+      margin-bottom: 0;
+      width: 100%;
 
       .btn + .btn {
         margin-left: 0;
diff --git a/src/scss/components/_member-list.scss b/src/scss/components/_member-list.scss
index addcf5f..a31b545 100644
--- a/src/scss/components/_member-list.scss
+++ b/src/scss/components/_member-list.scss
@@ -52,12 +52,25 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .member-list {
     &__heading {
       margin: 4rem 0;
+      font-size: 1.75rem;
     }
+  }
+}
 
+@media (max-width: 991.98px) {
+  .member-list {
+    &__items {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .member-list {
     &__items {
       display: block;
     }
diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss
index 03e5114..81c0b5e 100644
--- a/src/scss/components/_nav.scss
+++ b/src/scss/components/_nav.scss
@@ -5,6 +5,9 @@
     margin: -.5rem;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 
     &::-webkit-scrollbar {
       display: none;
@@ -35,8 +38,12 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .nav {
     margin-top: 1rem;
+
+    &__list {
+      justify-content: flex-start;
+    }
   }
 }
diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss
index 264baa5..55fcf99 100644
--- a/src/scss/components/_post.scss
+++ b/src/scss/components/_post.scss
@@ -330,7 +330,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .post {
     &__body {
       h1 {
@@ -350,8 +350,21 @@
         min-width: 48rem;
       }
 
-      .process-cae{
-        
+      .process-cae {
+        &__block {
+          .small-boat {
+            margin-left: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .post {
+    &__body {
+      .process-cae {
         &.split {
           display: block;
 
diff --git a/src/scss/components/_posts-list.scss b/src/scss/components/_posts-list.scss
index 65f89e0..4a2faf6 100644
--- a/src/scss/components/_posts-list.scss
+++ b/src/scss/components/_posts-list.scss
@@ -69,7 +69,7 @@
   }
 }
 
-.home .news-list {
+main.home .news-list {
   margin-top: 8rem;
   margin-bottom: 24rem;
   position: relative;
@@ -80,25 +80,43 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (min-width: 768px) and (max-width: 1199.98px) {
   .news-list {
-    > svg {
-      width: 70rem;
-      overflow: hidden;
+    &__items {
+      grid-template-columns: repeat(3, 1fr);
     }
+  }  
+}
 
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .news-list {
+    &__items {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  main.posts .news-list {
     &__items {
       display: block;
     }
 
-    &__item + &__item {
+    li + li {
       margin-top: 1.5rem;
     }
   }
+}
 
-  .home .news-list {
+@media (max-width: 1199.98px) {
+  main.home .news-list {
     margin: 6rem 0;
 
+    > svg {
+      width: 70rem;
+      overflow: hidden;
+    }
+
     .wrapper {
       max-width: 100%;
       margin: 0;
diff --git a/src/scss/components/_presentation.scss b/src/scss/components/_presentation.scss
index d802d6f..dc19adf 100644
--- a/src/scss/components/_presentation.scss
+++ b/src/scss/components/_presentation.scss
@@ -81,7 +81,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 767.98px) {
   .presentation {
     article {
       display: block;
diff --git a/src/scss/components/_site-head.scss b/src/scss/components/_site-head.scss
index e5e2860..5857f18 100644
--- a/src/scss/components/_site-head.scss
+++ b/src/scss/components/_site-head.scss
@@ -19,7 +19,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .site-head {
     &__inner {
       display: block;
diff --git a/src/scss/components/_sponsor.scss b/src/scss/components/_sponsor.scss
index 21e1475..77419a1 100644
--- a/src/scss/components/_sponsor.scss
+++ b/src/scss/components/_sponsor.scss
@@ -36,7 +36,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 767.98px) {
   .sponsor {
     &__list {
       display: flex;