responsive sans menu

2021-05-07 13:34:41 +02:00
parent c5f39b8f25
commit ada70cc406
10 changed files with 796 additions and 205 deletions
@@ -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;
+    }
+
+
+  }
+
 }


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