debut responsive

assets/app/frontend/app/app.scss

@@ -1,6 +1,7 @@
 @import "./node_modules/bootstrap/scss/bootstrap";
 
 @import "../scss/vars";
+@import "../scss/mixin_responsive";
 @import "../scss/base";
 @import "../scss/home";
 @import "../scss/carto";
@@ -11,5 +12,4 @@
 @import "../scss/contact";
 @import "../scss/contribuate";
 @import "../scss/header";
-@import "../scss/footer";
-@import "../scss/responsive";
+@import "../scss/footer";

assets/app/frontend/scss/about.scss

@@ -16,7 +16,7 @@
       h1 {
         color: #FFF;
         font-family: FranklinGothic;
-        font-size: 75px;
+        font-size: 7.5rem;
         line-height: 67px;
         margin-top: 100px;
         margin-bottom: 75px;
@@ -24,7 +24,7 @@
 
       p {
         color: #FFF;
-        font-size: 20px;
+        font-size: 2.0rem;
         margin-bottom: 50px;
       }
 
@@ -33,7 +33,7 @@
         color: $green;
         text-transform: uppercase;
         padding: 10px;
-        font-size: 25px;
+        font-size: 2.5rem;
         display: inline-block;
         text-align: center;
       }
@@ -57,16 +57,16 @@
       font-weight: bold;
       margin-top: 100px;
       margin-bottom: 40px;
-      font-size: 40px;
+      font-size: 4.0rem;
     }
 
     .description {
-      font-size: 17px;
+      font-size: 1.7rem;
     }
 
     .other-startup {
       color: $orange;
-      font-size: 20px;
+      font-size: 2.0rem;
       display: inline-block;
       margin-top: 20px;
       font-weight: bold;
@@ -81,7 +81,7 @@
     h2 {
       color: $green;
       text-align: center;
-      font-size: 40px;
+      font-size: 4.0rem;
       font-weight: bold;
       margin-bottom: 70px;
 
@@ -104,7 +104,7 @@
     h2 {
       margin-bottom: 40px;
       font-weight: bold;
-      font-size: 40px;
+      font-size: 4.0rem;
     }
 
 
@@ -140,7 +140,7 @@
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
-      font-size: 40px;
+      font-size: 4.0rem;
 
       .picto-labourage {
         vertical-align: baseline;
@@ -151,7 +151,7 @@
       color: $yellow;
       background-color: $green;
       padding: 15px;
-      font-size: 22px;
+      font-size: 2.2rem;
       margin-top: 30px;
       display: inline-block;
     }
@@ -166,7 +166,7 @@
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
-      font-size: 40px;
+      font-size: 4.0rem;
 
       .picto-labourage {
         vertical-align: baseline;
@@ -176,7 +176,7 @@
     .subscribe-event {
       border: 2px solid $green;
       padding: 15px;
-      font-size: 22px;
+      font-size: 2.2rem;
       margin-top: 40px;
       display: inline-block;
 
@@ -201,7 +201,7 @@
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
-      font-size: 40px;
+      font-size: 4.0rem;
 
       .picto-ressource {
         vertical-align: baseline;
@@ -217,9 +217,8 @@
 
     .contribuate {
       border: 2px solid $yellow;
-      font-size: 22px;
+      font-size: 2.2rem;
       padding: 15px;
-      font-size: 22px;
       margin-top: 40px;
       display: inline-block;
 
@@ -241,7 +240,7 @@
         font-weight: bold;
         text-align: center;
         margin-bottom: 50px;
-        font-size: 40px;
+        font-size: 4.0rem;
       }
 
       .description {
@@ -252,7 +251,7 @@
         color: $green;
         background-color: $yellow;
         padding: 10px;
-        font-size: 23px;
+        font-size: 2.3rem;
         display: inline-block;
         text-align: center;
         margin-top: 30px;
@@ -268,14 +267,14 @@
       h2 {
         font-weight: bold;
         margin-bottom: 50px;
-        font-size: 40px;
+        font-size: 4.0rem;
       }
 
       .join-coeur {
         border: 2px solid $green;
         display: inline-block;
         padding: 15px;
-        font-size: 22px;
+        font-size: 2.2rem;
         margin-top: 50px;
 
         a {
@@ -294,7 +293,7 @@
       color: $green;
       font-weight: bold;
       margin-bottom: 70px;
-      font-size: 25px;
+      font-size: 2.5rem;
     }
 
     img {

assets/app/frontend/scss/base.scss

@@ -1,5 +1,29 @@
+html {
+  font-size: 62.5%;
+
+  @include large-only {
+    font-size: 60%;
+  }
+
+  @include desktop-only {
+    font-size: 55%;
+  }
+
+  @include tablet-only {
+    font-size: 50%;
+  }
+
+  @include mobile-only {
+    font-size: 45%;
+  }
+}
+
 #content-page {
   margin-top: $headerheight;
+
+  @include mobile-only {
+    margin-top: 80px;
+  }
 }
 
 img {
@@ -12,13 +36,17 @@ li, p, a, select, option, .description {
 }
 
 p, .description {
-  font-size: 20px;
+  font-size: 2.0rem;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: Georgia;
 }
 
+h2 {
+  font-size: 3.3rem;
+}
+
 .bold {
   font-weight: bold;
 }
@@ -53,7 +81,7 @@ button:focus {
   color: $green;
   text-transform: uppercase;
   font-family: dinbold;
-  font-size: 20px;
+  font-size: 2.0rem;
   padding: 15px;
   display: inline-block;
 
@@ -66,7 +94,7 @@ button:focus {
   color: $yellow;
   background-color: $green;
   padding: 15px;
-  font-size: 22px;
+  font-size: 2.2rem;
   margin-top: 30px;
   display: inline-block;
   border: none;

assets/app/frontend/scss/carto-carte.scss

@@ -3,14 +3,14 @@
 
   .title-carte {
     color: $green;
-    font-size: 50px;
+    font-size: 5.0rem;
     font-family: FranklinGothic;
     text-align: center;
   }
 
   .row-contrib {
     color: $green;
-    font-size: 20px;
+    font-size: 2.0rem;
     font-family: FranklinGothic;
     margin-top: 50px;
 

assets/app/frontend/scss/carto-liste.scss

@@ -3,7 +3,7 @@
 
   .title-liste {
     color: $green;
-    font-size: 50px;
+    font-size: 5.0rem;
     font-family: FranklinGothic;
     text-align: center;
   }
@@ -47,7 +47,7 @@
           label {
             color: #808080;
             font-family: dinbold;
-            font-size: 14px;
+            font-size: 1.4rem;
             display: inline-block;
             padding: 3px 10px;
             font-weight: normal;

assets/app/frontend/scss/carto.scss

@@ -5,7 +5,7 @@
     h1 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 75px;
+      font-size: 7.5rem;
       line-height: 67px;
       margin-top: 100px;
       margin-bottom: 75px;
@@ -18,14 +18,14 @@
     h2 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 28px;
+      font-size: 2.8rem;
       margin-bottom: 30px;
     }
 
     .description {
       color: $orange;
       font-style: italic;
-      font-size: 20px;
+      font-size: 2.0rem;
       margin-bottom: 50px;
       font-family: FranklinGothic;
     }
@@ -35,14 +35,14 @@
 
       .nb-contrib {
         color: $orange;
-        font-size: 126px;
+        font-size: 12.6rem;
         font-family: FranklinGothic;
         height: 150px;
       }
 
       .contrib {
         color: $green;
-        font-size: 70px;
+        font-size: 7.0rem;
         font-family: FranklinGothic;
       }
     }
@@ -58,7 +58,7 @@
       border: 2px solid $green;
       color: $green;
       font-family: FranklinGothic;
-      font-size: 20px;
+      font-size: 2.0rem;
       padding: 20px;
       height: 190px;
 
@@ -74,7 +74,7 @@
     margin-top: 75px;
     text-align: center;
     font-family: FranklinGothic;
-    font-size: 25px;
+    font-size: 2.5rem;
     padding-top: 15px;
     padding-bottom: 25px;
 

assets/app/frontend/scss/contact.scss

@@ -6,7 +6,7 @@
     h1 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 75px;
+      font-size: 7.5rem;
       line-height: 67px;
       margin-top: 100px;
       margin-bottom: 35px;
@@ -15,7 +15,7 @@
     p {
       color: $orange;
       font-style: italic;
-      font-size: 20px;
+      font-size: 2.0rem;
       margin-bottom: 50px;
       width: 50%;
     }
@@ -49,14 +49,14 @@
 
     .address-contact {
       color: $green;
-      font-size: 37px;
+      font-size: 3.7rem;
       margin-bottom: 5px;
     }
 
     .link-contact a {
       color: $green;
       text-decoration: underline;
-      font-size: 37px;
+      font-size: 3.7rem;
     }
   }
 
@@ -82,7 +82,7 @@
       border: 2px solid $green;
       font-weight: bold;
       padding: 15px;
-      font-size: 30px;
+      font-size: 3.0rem;
 
       &:hover {
         border-color: $yellow;

assets/app/frontend/scss/contribuate.scss

@@ -5,7 +5,7 @@
     h1 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 75px;
+      font-size: 7.5rem;
       line-height: 67px;
       margin-top: 100px;
       margin-bottom: 75px;
@@ -18,14 +18,14 @@
     h2 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 28px;
+      font-size: 2.8rem;
       margin-bottom: 30px;
     }
 
     .description {
       color: $orange;
       font-style: italic;
-      font-size: 20px;
+      font-size: 2.0rem;
       margin-bottom: 50px;
       font-family: FranklinGothic;
     }
@@ -40,18 +40,18 @@
       color: $green;
 
       .you-are {
-        font-size: 40px;
+        font-size: 4.0rem;
         height: 20px;
       }
 
       .nb-contrib {
         color: $orange;
-        font-size: 126px;
+        font-size: 12.6rem;
         height: 150px;
       }
 
       .contrib {
-        font-size: 70px;
+        font-size: 7.0rem;
       }
     }
   }
@@ -61,7 +61,7 @@
 
     .title-form {
       color: $green;
-      font-size: 50px;
+      font-size: 5.0rem;
       font-family: FranklinGothic;
       text-align: center;
       margin-bottom: 50px;
@@ -71,11 +71,11 @@
       .label {
         color: $green;
         font-family: FranklinGothic;
-        font-size: 18px;
+        font-size: 1.8rem;
       }
 
       button {
-        font-size: 15px;
+        font-size: 1.5rem;
         padding: 10px;
       }
 
@@ -98,7 +98,7 @@
       h2 {
         color: $green;
         font-family: FranklinGothic;
-        font-size: 27px;
+        font-size: 2.7rem;
         margin-top: 70px;
 
         img {
@@ -156,7 +156,7 @@
         margin-top: 100px;
         border-radius: 0;
         padding: 15px 40px;
-        font-size: 27px;
+        font-size: 2.7rem;
       }
     }
   }

assets/app/frontend/scss/footer.scss

@@ -2,6 +2,7 @@ footer {
   margin-top: 100px;
   color: $green;
   font-family: dinbold;
+  font-size: 1.6rem;
 
   a {
     color: $green;
@@ -20,7 +21,7 @@ footer {
 
     li {
       list-style: none;
-      font-size: 25px;
+      font-size: 2.5rem;
       margin-bottom: 20px;
 
       &.title-list {
@@ -30,7 +31,7 @@ footer {
       }
 
       a {
-        font-size: 16px;
+        font-size: 1.6rem;
         text-decoration: underline;
       }
     }
@@ -59,7 +60,7 @@ footer {
     margin-top: 70px;
 
     .contact {
-      font-size: 25px;
+      font-size: 2.5rem;
       font-weight: bold;
       border: 2px solid $yellow;
       padding: 10px 30px;
@@ -69,7 +70,7 @@ footer {
 
     .newsletter {
       .lettre-infos {
-        font-size: 22px;
+        font-size: 2.2rem;
         font-family: Georgia;
         font-weight: bold;
         margin: 0;
@@ -102,7 +103,7 @@ footer {
 
     .col-network {
       .stay-connect {
-        font-size: 13px;
+        font-size: 1.3rem;
         font-family: dinbold;
         margin-bottom: 5px;
       }
@@ -119,6 +120,6 @@ footer {
     background-color: $yellow;
     line-height: 50px;
     text-align: center;
-    font-size: 15px;
+    font-size: 1.5rem;
   }
 }

assets/app/frontend/scss/header.scss

@@ -22,6 +22,10 @@
           border: 0;
           background-color: #FFF;
           z-index: 100;
+
+          @include mobile-only {
+            width: 100px;
+          }
         }
       }
 
@@ -40,10 +44,14 @@
               margin-bottom: 6%;
               display: inline-block;
 
+              @include mobile-only {
+                padding: 0;
+              }
+
               a {
                 color: $green;
-                font-size: 50px;
-                line-height: 50px;
+                font-size: 5.0rem;
+                line-height: 5.0rem;
 
                 &:hover {
                   color: $yellow;
@@ -56,7 +64,7 @@
                 a {
                   border: 2px solid $yellow;
                   padding: 10px 45px;
-                  font-size: 25px;
+                  font-size: 2.5rem;
                 }
               }
 
@@ -67,12 +75,28 @@
                 top: 0;
                 right: 0;
                 background-color: $yellow;
+
+                @include mobile-only {
+                  right: 30%;
+                }
+              }
+
+              &.participate-mobile {
+                display: none;
+
+                @include mobile-only {
+                  display: inline-block;
+                }
               }
             }
           }
         }
 
         .col-logo {
+          @include mobile-only {
+            display: none;
+          }
+
           .logo {
             position: absolute;
             top: 50%;
@@ -91,22 +115,34 @@
     z-index: 2;
     border-bottom: 1px solid lightgrey;
 
+    @include mobile-only {
+      height: 80px;
+    }
+
     .navbar-brand {
-      width: 50%;
+      width: 45%;
+
+      @include large-only {
+        width: 30%;
+      }
 
       img {
-        max-height: 85px;
+        max-height: 80px;
       }
     }
 
     .participate {
-      font-size: 30px;
+      font-size: 3.0rem;
       color: #568b6f;
       font-family: dinbold;
       border: 2px solid #568b6f;
       padding: 8px 10px;
       font-weight: bold;
 
+      @include mobile-only {
+        display: none;
+      }
+
       &:hover {
         text-decoration: none;
         border-color: $yellow;
@@ -115,9 +151,13 @@
 
     .space-collab {
       color: $yellow;
-      font-size: 22px;
+      font-size: 2.2rem;
       font-family: FranklinGothic;
 
+      @include desktop-only {
+        display: none;
+      }
+
       img {
         height: 50px;
         margin-right: 10px;
@@ -130,6 +170,10 @@
 
       img {
         max-width: 140px;
+
+        @include mobile-only {
+          max-width: 80px;
+        }
       }
     }
   }

assets/app/frontend/scss/home.scss

@@ -7,36 +7,67 @@
     .row-futur {
       min-height: 800px;
 
+      @include large-only {
+        min-height: 720px;
+      }
+
+      @include tablet-only {
+        min-height: auto;
+        padding-bottom: 30px;
+      }
+
+      @include tablet-only {
+        img {
+          display: none;
+        }
+      }
+
       h1 {
         font-family: FranklinGothic;
         width: 70%;
-        font-size: 80px;
+        font-size: 8.0rem;
         margin-top: 70px;
+
+        @include tablet-only {
+          width: auto;
+        }
       }
 
       h2 {
         font-family: FranklinGothic;
         width: 50%;
         margin-top: 55px;
-        font-size: 27px;
+        font-size: 2.7rem;
         line-height: 38px;
+
+        @include tablet-only {
+          width: auto;
+        }
       }
 
       .discover {
         background-color: $yellow;
         color: $green;
-        font-size: 30px;
+        font-size: 3.0rem;
         padding: 13px 50px;
         margin-top: 150px;
         display: inline-block;
         font-weight: bold;
+
+        @include large-only {
+          margin-top: 50px;
+        }
       }
 
       .perso-aac {
         position: absolute;
         bottom: 0;
         right: 0;
-        max-width: 900px;
+        max-width: 78%;
+
+        @include large-only {
+          max-width: 60%;
+        }
       }
 
       .startup {
@@ -44,6 +75,10 @@
         top: 10%;
         right: 7%;
         max-width: 250px;
+
+        @include large-only {
+          right: 0;
+        }
       }
     }
   }
@@ -63,8 +98,8 @@
     }
 
     h2 {
-      margin-top: 100px;
-      margin-bottom: 40px;
+      margin-top: 18%;
+      margin-bottom: 7%;
       font-weight: bold;
 
       span {
@@ -73,7 +108,7 @@
     }
 
     .link-carto {
-      font-size: 20px;
+      font-size: 2.0rem;
       display: inline-block;
       margin-top: 20px;
       margin-bottom: 30px;
@@ -91,8 +126,14 @@
       bottom: 5%;
       left: 15px;
       font-family: dinbold;
-      font-size: 20px;
+      font-size: 2.0rem;
       font-weight: bold;
+
+      @include large-only {
+        position: unset;
+        display: inline-block;
+        margin-bottom: 20px;
+      }
     }
   }
 
@@ -108,7 +149,7 @@
 
     h2 {
       text-align: center;
-      font-size: 40px;
+      font-size: 4.0rem;
       font-weight: bold;
       margin-bottom: 70px;
 
@@ -126,7 +167,7 @@
       padding: 10px 40px;
       position: absolute;
       bottom: 0;
-      font-size: 23px;
+      font-size: 2.3rem;
 
       a {
         color: $green;
@@ -147,7 +188,7 @@
 
     h2 {
       margin-bottom: 50px;
-      font-size: 40px;
+      font-size: 4.0rem;
       font-weight: bold;
     }
 
@@ -156,7 +197,7 @@
       padding: 15px 15px;
       border: 2px solid $yellow;
       margin-top: 40px;
-      font-size: 23px;
+      font-size: 2.3rem;
 
       a {
         color: #FFF;

assets/app/frontend/scss/mixin_responsive.scss

@@ -0,0 +1,23 @@
+@mixin mobile-only {
+  @media screen and (max-width: $sm) {
+    @content;
+  }
+}
+
+@mixin tablet-only {
+  @media screen and (max-width: $md) {
+    @content;
+  }
+}
+
+@mixin desktop-only {
+  @media screen and (max-width: $lg) {
+    @content;
+  }
+}
+
+@mixin large-only {
+  @media screen and (max-width: $xl) {
+    @content;
+  }
+}

assets/app/frontend/scss/vars.scss

@@ -8,8 +8,31 @@ $blue: #17428c;
 $green: #568b6f;
 $maron: #925038;
 
+//taille du menu
 $headerheight: 122px;
 
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+
+//Bootstrap
+$grid-columns: 12;
+$grid-gutter-width: 30px;
+
+$grid-breakpoints: (
+  // Extra small screen / phone
+        xs: 0,
+  // Small screen / phone
+        sm: $sm,
+  // Medium screen / tablet
+        md: $md,
+  // Large screen / desktop
+        lg: $lg,
+  // Extra large screen / wide desktop
+        xl: $xl
+);
+
 @font-face {
   font-family: 'dinregular';
   src: url($dir-fonts + 'din_regular-webfont.eot');

public/build/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "adminlte-plugins": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
@@ -17,7 +17,7 @@
     },
     "adminlte-index": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
@@ -30,7 +30,7 @@
     },
     "adminlte-form": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
         "/build/adminlte-form.4079807b.js"
@@ -41,7 +41,7 @@
     },
     "adminlte-sort": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
@@ -55,7 +55,7 @@
     },
     "adminlte-field-filemanager": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/adminlte-field-filemanager.d8302fb7.js"
       ],
@@ -65,7 +65,7 @@
     },
     "adminlte-field-collection": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
@@ -79,7 +79,7 @@
     },
     "adminlte-main": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/adminlte-main.e8feeffc.js"
@@ -90,7 +90,7 @@
     },
     "sov-reminder": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/sov-reminder.27580486.js"
       ],
       "css": [
@@ -99,13 +99,13 @@
     },
     "sov-ticket": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/sov-ticket.df76c7a0.js"
       ]
     },
     "app-backend": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
         "/build/app-backend.9246973d.js"
@@ -116,7 +116,7 @@
     },
     "app-frontend": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_jquery_src_jquery_js.2a8ff255.js",
@@ -125,12 +125,12 @@
         "/build/app-frontend.32a560b0.js"
       ],
       "css": [
-        "/build/app-frontend.ec892e82.css"
+        "/build/app-frontend.8f351579.css"
       ]
     },
     "app-bulle": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_amcharts_amcharts4_charts_js-node_modules_amcharts_amcharts4_core_js-nod-e7c189.7a170faa.js",
         "/build/app-bulle.08404383.js"
       ]

public/build/manifest.json

@@ -17,10 +17,10 @@
   "build/sov-ticket.js": "/build/sov-ticket.df76c7a0.js",
   "build/app-backend.css": "/build/app-backend.3d882954.css",
   "build/app-backend.js": "/build/app-backend.9246973d.js",
-  "build/app-frontend.css": "/build/app-frontend.ec892e82.css",
+  "build/app-frontend.css": "/build/app-frontend.8f351579.css",
   "build/app-frontend.js": "/build/app-frontend.32a560b0.js",
   "build/app-bulle.js": "/build/app-bulle.08404383.js",
-  "build/runtime.js": "/build/runtime.56247ca7.js",
+  "build/runtime.js": "/build/runtime.f492d833.js",
   "build/pdfmake.js": "/build/pdfmake.fbf70324.js",
   "build/canvg.js": "/build/canvg.5e04b23d.js",
   "build/xlsx.js": "/build/xlsx.05855660.js",

templates/frontend/header.html.twig

@@ -9,7 +9,7 @@
                 </div>
             </div>
             <div class="row row-list">
-                <nav class="col-6">
+                <nav class="col-12 col-sm-6">
                     <ul>
                         <li>
                             <span class="yellow-trait"></span>
@@ -17,6 +17,11 @@
                                 Accueil
                             </a>
                         </li>
+                        <li class="participate-mobile">
+                            <a class="participate" href="{{ path('app_contribuate') }}">
+                                Participer
+                            </a>
+                        </li>
                         <li>
                             <a href="{{ path('app_carto_interactive') }}" title="Cartographie rêvolutionnaire">
                                 Cartographie rêvolutionnaire
@@ -44,7 +49,7 @@
                         </li>
                     </ul>
                 </nav>
-                <div class="col-6 col-logo">
+                <div class="col-6 d-none d-sm-block col-logo">
                     <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.png' }}" alt="Logo AAC">
                 </div>
             </div>

templates/frontend/home.html.twig

@@ -28,18 +28,20 @@
         <div class="bloc-cartographie">
             <div class="container">
                 <div class="row frame-yellow">
-                    <div class="col-6">
+                    <div class="col-6 d-none d-sm-block">
                         <img class="cartographie" src="{{ 'assets/img/Cartographie-Reve.png' }}" alt="cartographie">
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-sm-6">
                         <h2>La cartographie r<span>ê</span>volutionnaire</h2>
                         <div class="description">
                             {{ blockCarto.description|raw }}
                         </div>
                         <a class="link-carto link-slide" href="{{ path('app_carto_interactive') }}"
                            title="Découvrir la cartographie">Découvrir la cartographie</a>
-                        <a class="link-concert" href="" title="Participer à la concertation">Participer à la
-                            concertation</a>
+                        <div>
+                            <a class="link-concert" href="" title="Participer à la concertation">Participer à la
+                                concertation</a>
+                        </div>
                     </div>
                 </div>
             </div>

webpack.config.js

@@ -95,9 +95,6 @@ Encore
     })
 
 
-// enables Sass/SCSS support
-//.enableSassLoader()
-
 // uncomment if you use TypeScript
 // .enableTypeScriptLoader()