responsive sans menu

.~lock.readme.odt_0.odt#

@@ -1 +0,0 @@
-,ouidade,localhost.localdomain,06.05.2021 12:43,file:///home/ouidade/.config/libreoffice/4;

README.md

@@ -7,16 +7,9 @@
 composer create-project getgrav/grav ~/webroot/grav
 ```
 
-# lance serveur local
-
-```
-cd ~/webroot/nomdusite
-php -S localhost:8000 system/router.php
-```
-Fenêtre à laisser ouverte!
 
 
-#### dans autre fenetre, installer version admin
+#### installer version admin
 
 mise à jours
 ```

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; } }

user/themes/epau-antimatter/package.json

@@ -1,7 +1,6 @@
 {
   "dependencies": {
-    "animate.css": "^4.1.1",
-    "node-sass": "*"
+    "animate.css": "^4.1.1"
   },
   "scripts": {
     "sass": "node-sass -w scss -o css-compiled"
@@ -18,5 +17,8 @@
     "url": "https://figureslibres.io/gogs/ouidade/dev-epau.archi.fr"
   },
   "author": "Ouidade Soussi-Chiadmi",
-  "license": "GPL-3.0"
+  "license": "GPL-3.0",
+  "devDependencies": {
+    "node-sass": "*"
+  }
 }

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;
+  }
+}

user/themes/epau-antimatter/templates/modular/accueil.html.twig

@@ -2,21 +2,7 @@
     <!-- {% set image = page.media.images|first %}
     {% if image %}
         {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
-    {% endif %} -->
-
-  <!-- <div class="titre_bsn">
-  <h1>EPAU</h1>
-
-  <div class="test" >
-    <svg width="100%" height="0.5rem">
-     <rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" opacity="0.1" />
-   </svg>
-  </div>
-
-  <h2>L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS</h2>
-
-  <p>Organisme national de recherche et d’expérimentation, sous la tutelle des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’Architecture et du Patrimoine et de l’Association Europan France</p>
-
+    {% endif %}
 
 
   {{ content|raw }}

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

@@ -65,7 +65,7 @@
                 {% 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>