responsive sans menu

user/themes/epau-antimatter/css-compiled/template.css

@@ -808,6 +808,9 @@ ul.pagination {
     font-family: "Sarabun", sans-serif !important; }
     #sb-site #body p:empty {
       display: none; }
+    @media (max-width: 442px) {
+      #sb-site #body {
+        padding-top: 2rem; } }
 
 #header.scrolled {
   padding-left: 2rem;
@@ -853,6 +856,17 @@ ul.pagination {
       min-height: 4rem !important;
       margin: auto; }
 
+@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, .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; }
 
@@ -873,7 +887,13 @@ ul.pagination {
   .titre_nsb h1 {
     margin-bottom: 0rem !important;
     text-align: right;
-    padding-right: 0rem !important; }
+    padding-right: 0rem !important;
+    padding-left: 2rem; }
+  @media (max-width: 442px) {
+    .titre_nsb {
+      margin-right: 42%; }
+      .titre_nsb h1 {
+        font-size: 1.6rem; } }
 
 .titre_bsn {
   display: block;
@@ -883,6 +903,9 @@ ul.pagination {
     margin-bottom: 0rem !important; }
   .titre_bsn p {
     padding-right: 15%; }
+  @media (max-width: 442px) {
+    .titre_bsn h1 {
+      font-size: 1.6rem; } }
 
 @keyframes animate {
   0% {
@@ -935,6 +958,9 @@ ul.pagination {
     font-weight: 500;
     font-style: italic;
     padding-bottom: 1.5rem; }
+  @media (max-width: 442px) {
+    .programme {
+      min-width: 20rem; } }
 
 .programme:hover {
   background-color: #000;
@@ -989,7 +1015,7 @@ ul.pagination {
 
 .mozaique_personnes {
   background-color: #d5d2d1;
-  padding-bottom: 4rem; }
+  padding-bottom: 10rem; }
   .mozaique_personnes .equipe {
     display: flex !important;
     flex-direction: row;
@@ -999,6 +1025,11 @@ ul.pagination {
     padding-right: 15%;
     margin: auto;
     justify-items: center; }
+    @media (max-width: 442px) {
+      .mozaique_personnes .equipe {
+        width: 100%;
+        padding-left: 3%;
+        padding-right: 2%; } }
     .mozaique_personnes .equipe h3 {
       padding-top: 3rem;
       min-width: 100%;
@@ -1007,6 +1038,10 @@ ul.pagination {
       font-size: 1rem;
       line-height: 20px;
       text-align: left; }
+      @media (max-width: 442px) {
+        .mozaique_personnes .equipe h3 {
+          font-size: 0.9rem;
+          padding-right: 0.5rem; } }
     .mozaique_personnes .equipe .personne {
       display: flex;
       flex-direction: row;
@@ -1019,6 +1054,10 @@ ul.pagination {
         justify-content: flex-end;
         max-width: 30rem;
         min-width: 30rem; }
+        @media (max-width: 442px) {
+          .mozaique_personnes .equipe .personne .mozaique {
+            max-width: 21rem;
+            min-width: 21rem; } }
         .mozaique_personnes .equipe .personne .mozaique .photo {
           overflow: hidden;
           width: 15rem !important;
@@ -1035,6 +1074,10 @@ ul.pagination {
           width: 50%;
           height: 15rem;
           min-width: 15rem; }
+          @media (max-width: 442px) {
+            .mozaique_personnes .equipe .personne .mozaique .info {
+              max-width: 11rem;
+              min-width: 11rem; } }
           .mozaique_personnes .equipe .personne .mozaique .info h5 {
             font-weight: 900;
             font-size: 1.1rem;
@@ -1042,6 +1085,11 @@ ul.pagination {
             padding-top: 0.8rem;
             padding-right: 1rem;
             padding-left: 1.3rem; }
+            @media (max-width: 442px) {
+              .mozaique_personnes .equipe .personne .mozaique .info h5 {
+                font-size: 0.9rem;
+                padding-left: 0.8rem;
+                padding-right: 0.6rem; } }
           .mozaique_personnes .equipe .personne .mozaique .info h6 {
             font-weight: 300;
             font-size: 0.9rem;
@@ -1050,10 +1098,15 @@ ul.pagination {
             margin: 0;
             padding-right: 1.2rem;
             padding-left: 1.3rem; }
-          .mozaique_personnes .equipe .personne .mozaique .info:hover {
-            background-color: #000;
-            color: #fff;
-            transition: 0.2s ease-in-out; }
+            @media (max-width: 442px) {
+              .mozaique_personnes .equipe .personne .mozaique .info h6 {
+                padding-left: 0.8rem;
+                font-size: 0.75rem;
+                padding-right: 0.6rem; } }
+        .mozaique_personnes .equipe .personne .mozaique:hover {
+          background-color: #000;
+          color: #fff;
+          transition: 0.2s ease-in-out; }
 
 .bouton {
   border: solid !important;
@@ -1098,6 +1151,22 @@ ul.pagination {
     font-size: 30px; }
   .modal .container a.close:hover {
     color: black; }
+  @media (max-width: 442px) {
+    .modal .container {
+      transform: translateX(-50%) translateY(-50%);
+      width: 85%;
+      height: 80%;
+      overflow-y: scroll; }
+      .modal .container a.close {
+        font-size: 0.8rem;
+        position: absolute;
+        right: 2%;
+        top: 0.8%; }
+      .modal .container p {
+        font-size: 0.8rem;
+        margin-top: 0; }
+      .modal .container .message {
+        padding: 5% 5% 5% 5%; } }
 
 #new-footer {
   display: flex;
@@ -1120,7 +1189,8 @@ ul.pagination {
       text-align: top; }
   #new-footer .footer {
     display: flex;
-    flex-direction: row; }
+    flex-direction: row;
+    flex-wrap: nowrap; }
     #new-footer .footer .footer-logos {
       display: flex;
       flex-direction: row;
@@ -1152,6 +1222,27 @@ ul.pagination {
         font-weight: 600; }
       #new-footer .footer .contact p {
         margin: 0; }
+  @media (max-width: 442px) {
+    #new-footer .footer {
+      width: 100%;
+      flex-direction: column-reverse;
+      align-items: center;
+      margin: auto; }
+      #new-footer .footer .contact {
+        padding-top: 1rem;
+        width: 80%; }
+      #new-footer .footer .footer-logos {
+        width: 90%;
+        margin-top: 1.5rem;
+        margin-left: 0.5rem;
+        flex-direction: column;
+        justify-content: space-between; }
+        #new-footer .footer .footer-logos img {
+          padding: 0.5rem; }
+          #new-footer .footer .footer-logos img:last-of-type {
+            padding: 0.8rem; }
+    #new-footer .tothetop {
+      bottom: 37rem; } }
 
 button:focus {
   border: solid !important;
@@ -1308,3 +1399,7 @@ button:focus {
 
 .modular .modular-row:last-child {
   margin-bottom: 2rem; }
+
+@media (max-width: 442px) {
+  h1 {
+    font-size: 1.5rem; } }