responsive tablet

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

@@ -867,6 +867,13 @@ ul.pagination {
     position: absolute;
     left: -1rem; } }
 
+@media (max-width: 1024px) {
+  .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 #navbar {
+    padding-right: 2rem; } }
+
 .callout {
   padding-top: 0.5rem; }
 
@@ -980,6 +987,9 @@ ul.pagination {
   /*On cache tout ce qui dépasse des 400px*/
   transition: max-height 1s ease;
   /* Transition CSS entre l'ouverture et la fermeture*/ }
+  @media (max-width: 1024px) {
+    .texte-cache {
+      max-height: 445px; } }
 
 /*Style du module TEXTE lorsqu'il est ouvert*/
 .texte-cache.ouvert {
@@ -995,6 +1005,13 @@ ul.pagination {
   left: 0;
   right: 0; }
 
+@media (max-width: 1024px) {
+  .modular .features {
+    width: 80% !important;
+    margin-left: 8rem !important; }
+  .modular .features .feature {
+    width: 24% !important; } }
+
 .bouton-ouverture {
   position: relative;
   justify-content: center;
@@ -1167,6 +1184,22 @@ ul.pagination {
         margin-top: 0; }
       .modal .container .message {
         padding: 5% 5% 5% 5%; } }
+  @media (max-width: 1024px) {
+    .modal .container {
+      transform: translateX(-50%) translateY(-50%);
+      width: 75%;
+      height: 65%;
+      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;
@@ -1243,6 +1276,21 @@ ul.pagination {
             padding: 0.8rem; }
     #new-footer .tothetop {
       bottom: 37rem; } }
+  @media (max-width: 1024px) {
+    #new-footer .footer .contact img {
+      max-height: 1.5rem; }
+    #new-footer .footer .contact h6 {
+      font-size: 0.8rem; }
+    #new-footer .footer .contact p {
+      font-size: 0.8rem; }
+    #new-footer .footer .contact svg {
+      margin-bottom: 0.6rem; }
+    #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: 14rem; } }
 
 button:focus {
   border: solid !important;

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

@@ -109,6 +109,18 @@
 
 }
 
+@media (max-width: 1024px) {
+
+  .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 #navbar {
+    padding-right: 2rem;
+  }
+}
+
 .callout {
   padding-top: 0.5rem;
 
@@ -340,11 +352,15 @@
 
 /*Style du module TEXTE*/
 .texte-cache {
-  position: relative;
 
+  position: relative;
   max-height: 400px; /*Hauteur du texte visible avant le clic*/
   overflow: hidden; /*On cache tout ce qui dépasse des 400px*/
   transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
+  @media (max-width: 1024px) {
+    max-height: 445px;
+
+  }
 }
 
 /*Style du module TEXTE lorsqu'il est ouvert*/
@@ -352,6 +368,7 @@
     max-height: 300vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
   }
 
+
 /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
 .texte-cache:not(.ouvert)::after {
   content: '';
@@ -361,6 +378,21 @@
   left: 0;
   right: 0;
   // background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
+
+}
+
+
+
+@media (max-width: 1024px) {
+  .modular .features {
+
+    width: 80% !important;
+    margin-left: 8rem !important;
+  }
+  .modular .features .feature {
+      width: 24% !important;
+      // margin-bottom: 10rem;
+  }
 }
 
 .bouton-ouverture {
@@ -633,6 +665,26 @@
     }
 
   }
+  @media (max-width: 1024px) {
+    transform: translateX(-50%) translateY(-50%);
+    width: 75%;
+    height: 65%;
+    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%;
+    }
+
+  }
 }
 
 
@@ -742,6 +794,40 @@
 
   }
 
+  @media (max-width: 1024px) {
+    .footer {
+
+      .contact {
+        img {
+          max-height: 1.5rem;
+        }
+        h6 {
+          font-size:0.8rem;
+        }
+        p {
+          font-size: 0.8rem;
+        }
+        svg {
+          margin-bottom: 0.6rem;
+        }
+      }
+      .footer-logos {
+
+        img {
+          padding: 0.5rem;
+
+          &:last-of-type {
+            padding: 0.8rem;
+
+          }
+        }
+      }
+    }
+    .tothetop {
+      bottom: $footer-height + 8rem;
+    }
+
+  }
 }
 
 

user/themes/epau-antimatter/templates/partials/base.html.twig

@@ -65,10 +65,12 @@
                 {% block header_navigation %}
                 {% include 'partials/navigation.html.twig' %}
                 {% endblock %}
-                <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
+                <!-- <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span> -->
             </div>
+
         </header>
 
+
         {% endblock %}
 
         {% block showcase %}{% endblock %}