responsive sans menu

user/themes/epau-antimatter/scss/template.scss

@@ -65,3 +65,6 @@
 
 // Modular
 @import "template/modular/all";
+
+// Media Queries
+@import "template/mediaqueries";

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -26,12 +26,17 @@
     padding-bottom: 2rem !important;
     font-family: "Sarabun", sans-serif !important;
     p:empty { display:none; }
+    @media (max-width: 442px) {
+      padding-top: 2rem;
+    }
   }
 }
 
+
 #header.scrolled {
   padding-left: 2rem;
   padding-right: 2rem;
+
 }
 #header #navbar ul.navigation li a {
     font-family: "Sarabun", sans-serif;
@@ -62,16 +67,16 @@
 
 #logo {
   position: relative;
-    display: flex;
-    flex-direction: row;
-    @include transform(scale(0.75));
-    // &.active {
-    //   a:after {
-    //     top: 0;
-    //     visibility: visible;
-    //     @include transform(scale(0.75));
-		// 	  @extend .default-animation;
-    //   }
+  display: flex;
+  flex-direction: row;
+  @include transform(scale(0.75));
+  // &.active {
+  //   a:after {
+  //     top: 0;
+  //     visibility: visible;
+  //     @include transform(scale(0.75));
+	// 	  @extend .default-animation;
+  //   }
 
     img {
       padding: 0.5rem;
@@ -88,6 +93,22 @@
     }
 }
 
+@media (max-width: 442px) {
+  #header #navbar {
+    position: absolute;
+    right: 1rem;
+  }
+  .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
+    padding-left: 0!important;
+    padding-right: 0rem !important;
+  }
+  #header #logo {
+    position: absolute;
+    left: -1rem;
+  }
+
+}
+
 .callout {
   padding-top: 0.5rem;
 
@@ -119,6 +140,13 @@
         margin-bottom: 0rem !important;
         text-align: right;
         padding-right: 0rem !important;
+        padding-left: 2rem;
+      }
+      @media (max-width: 442px) {
+        margin-right: 42%;
+        h1 {
+          font-size: 1.6rem;
+        }
       }
 }
 
@@ -138,6 +166,11 @@
     p {
       padding-right: 15%;
     }
+    @media (max-width: 442px) {
+      h1 {
+        font-size: 1.6rem;
+      }
+    }
 }
 
 @keyframes animate {
@@ -283,6 +316,9 @@
       font-style: italic;
       padding-bottom: 1.5rem;
     }
+    @media (max-width: 442px) {
+      min-width: 20rem;
+    }
 }
 
 
@@ -352,7 +388,7 @@
 
 .mozaique_personnes {
   background-color: #d5d2d1;
-  padding-bottom: 4rem;
+  padding-bottom: 10rem;
 
 
 
@@ -367,6 +403,12 @@
     padding-right: 15%;
     margin: auto;
     justify-items: center;
+    @media (max-width: 442px) {
+      width: 100%;
+      padding-left: 3%;
+      padding-right: 2%;
+
+    }
 
     h3 {
       // display: flex;
@@ -379,6 +421,10 @@
       font-size: 1rem;
       line-height: 20px;
       text-align: left;
+      @media (max-width: 442px) {
+        font-size: 0.9rem;
+        padding-right: 0.5rem;
+      }
     }
 
     .personne {
@@ -390,14 +436,18 @@
       padding-right: 0.5rem;
       padding-bottom: 0.5rem;
 
+
       .mozaique {
         display: flex;
         flex-direction: row;
-
-
         justify-content: flex-end;
         max-width: 30rem;
         min-width: 30rem;
+        @media (max-width: 442px) {
+          max-width: 21rem;
+          min-width: 21rem;
+
+        }
 
         .photo {
           // min-width: 10rem;
@@ -429,6 +479,10 @@
           width: 50%;
           height: 15rem;
           min-width: 15rem;
+          @media (max-width: 442px) {
+            max-width: 11rem;
+            min-width: 11rem;
+          }
 
           h5 {
            font-weight: 900;
@@ -437,6 +491,11 @@
            padding-top: 0.8rem;
            padding-right: 1rem;
            padding-left: 1.3rem;
+           @media (max-width: 442px) {
+           font-size: 0.9rem;
+           padding-left: 0.8rem;
+           padding-right: 0.6rem;
+           }
          }
          h6 {
            font-weight: 300;
@@ -447,7 +506,13 @@
            padding-right: 1.2rem;
            // padding-bottom: 1rem;
            padding-left: 1.3rem;
+           @media (max-width: 442px) {
+              padding-left: 0.8rem;
+              font-size: 0.75rem;
+              padding-right: 0.6rem;
+           }
          }
+        }
 
          &:hover {
              background-color: #000;
@@ -457,7 +522,7 @@
         }
       }
     }
-  }
+
 
 }
 
@@ -548,6 +613,26 @@
   	color: black;
   }
 
+  @media (max-width: 442px) {
+    transform: translateX(-50%) translateY(-50%);
+    width: 85%;
+    height: 80%;
+    overflow-y: scroll;
+    a.close {
+      font-size: 0.8rem;
+      position: absolute;
+      right: 2%;
+      top:0.8%;
+    }
+    p {
+      font-size: 0.8rem;
+      margin-top: 0;
+    }
+    .message{
+      padding: 5% 5% 5% 5%;
+    }
+
+  }
 }
 
 
@@ -577,10 +662,10 @@
     }
   }
 
-
   .footer {
     display: flex;
     flex-direction: row;
+    flex-wrap: nowrap;
 
     .footer-logos {
       display: flex;
@@ -601,9 +686,9 @@
       }
     }
 
-#new-footer .footer .footer-logos img:last-of-type {
-  height: 0.5rem !important;
-}
+    #new-footer .footer .footer-logos img:last-of-type {
+      height: 0.5rem !important;
+    }
     .contact {
       display: flex;
       flex-direction: column;
@@ -626,6 +711,37 @@
       }
     }
   }
+  @media (max-width: 442px) {
+    .footer {
+    width: 100%;
+    flex-direction: column-reverse;
+    align-items: center;
+    margin:auto;
+      .contact {
+        padding-top: 1rem;
+        width: 80%;
+      }
+      .footer-logos {
+        width: 90%;
+        margin-top: 1.5rem;
+        margin-left: 0.5rem;
+        flex-direction: column;
+        justify-content: space-between;
+        img {
+          padding:0.5rem;
+          &:last-of-type {
+            padding: 0.8rem;
+          }
+        }
+      }
+    }
+    .tothetop {
+      bottom: $footer-height + 31rem;
+    }
+
+
+  }
+
 }
 
 

user/themes/epau-antimatter/scss/template/_mediaqueries.scss

@@ -0,0 +1,5 @@
+@media (max-width: 442px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+}