responsive

.htaccess

@@ -9,7 +9,7 @@ RewriteEngine On
 # along the lines of: RewriteBase /<your_sub_folder>
 ##
 
- RewriteBase /
+ # RewriteBase /
 
 ## End - RewriteBase
 

user/pages/01.home/01.contact/item.md

@@ -1,6 +1,6 @@
 ---
 title: contact
-media_order: 'Logo Le Campus VD Quadri.svg,logo_le_campus_black.svg,Logo_Val_de_Drome_quadri_3Black.svg'
+media_order: 'Logo_Val_de_Drome_quadri_3Black.svg,logo_le_campus_black.svg'
 ---
 
 ![logo_le_campus](logo_le_campus_black.svg)

user/themes/lecampus/blueprints/event.yaml

@@ -21,20 +21,7 @@ form:
                       type: datetime
                       label: Début de l'événement
                       help: PLUGIN_ADMIN.DATE_HELP
-
-                    header.public:
-                      type: selectize
-                      label: Type de publique
-                      help: indiquer le type de publique concerné par l'événement
-                      validate:
-                        type: commalist
-                    header.rs:
-                       type: array
-                       label: Resaux sociaux
-                       help:
-                       placeholder_key: PLUGIN_ADMIN.METADATA_KEY
-                       placeholder_value: PLUGIN_ADMIN.METADATA_VALUE
-
+                      
                 column2:
                   type: column
                   fields:

user/themes/lecampus/js/site.js

@@ -123,6 +123,31 @@ function addclass() {
 
 }
 
+function mapsalles() {
+  var $salles = $('.fond svg path');
+  var $content = $('.content .content_salle');
+  arrayid = [];
+
+  $salles.on('click', function() {
+    var idsalle = this.id;
+    arrayid.push(idsalle);
+    $salles.css("fill", "white");
+    $(this).css("fill", "#0093a3");
+    $('.content .content_salle').css("display", "none");
+    $('.content .content_salle#'+arrayid).css("display", "block");
+    arrayid.length = 0;
+  });
+
+};
+
+function burger() {
+  $('.navTrigger').click(function(){
+    $(this).toggleClass('active');
+    $('.dropmenu').toggleClass('active');
+  });
+}
+
+
 jQuery(document).ready(function(){
   addclass();
   clickbutton();
@@ -130,5 +155,6 @@ jQuery(document).ready(function(){
   slide();
   filteritem();
   map();
-
+  mapsalles();
+  burger();
 });

user/themes/lecampus/scss/theme.scss

@@ -11,6 +11,7 @@
 @import 'theme/header';
 @import 'theme/menu';
 @import 'theme/footer';
+@import 'theme/mobile'; 
 
 // Extra Skeleton Styling
 @import 'theme/blog';

user/themes/lecampus/scss/theme/_blog.scss

@@ -404,7 +404,7 @@
 .sidebar{
   position: absolute;
   right: 0;
-  width: 250px;
+  width: 300px;
   margin: -55px auto 0 20px;
   h2{
     background: $red;
@@ -432,6 +432,7 @@
     }
   }
   .side-all-agenda{
+    background: white;
     width: auto;
     padding: 10px 20px;
     margin-bottom: 10px;
@@ -544,7 +545,7 @@
     .images_s{
       // width: calc(100% / 2 - 15px);
       width: 40%;
-      min-width: 300px;
+      // min-width: 300px;
       margin-right: 15px;
       img{
         margin-bottom: 15px;
@@ -588,7 +589,7 @@
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
-  height: 300px;
+  // height: 300px;
   .title{
     width: 200px;
     height: 200px;
@@ -848,7 +849,6 @@
   }
 }
 
-
 #sublog{
   .body-wrapper{
     background-image: url('../images/Trame-gris.svg');
@@ -858,6 +858,8 @@
   .content{
     @include inlineflex;
     width: 90%;
+    flex-direction: row-reverse;
+    justify-content: start;
     & > p{
         font-size: 1.2rem;
         font-family: $Bold;
@@ -868,15 +870,25 @@
   }
   .mapsalles{
     width: 50%;
+    position: relative;
     .contour{
       position: relative;
       z-index: 1;
       pointer-events: none;
+      display: inline-block;
+      width: 100%;
+      vertical-align: middle;
+      overflow: hidden;
     }
     .fond{
       position: absolute;
+      display: inline-block;
+      width: 100%;
+      vertical-align: middle;
+      overflow: hidden;
       z-index:0;
-      top: 110px;
+      left: 0;
+      top: 5.3%;
       path{
         fill: none;
         pointer-events: all;
@@ -888,11 +900,14 @@
       }
     }
   }
+  .txt{
+    width: 30%;
+  }
   .content_salle{
     position: absolute;
     left: 50%;
     top: 300px;
-    width: 35%;
+    width: 30%;
     background: white;
     & > p{
       padding-left: 10px;

user/themes/lecampus/scss/theme/_header.scss

@@ -10,9 +10,10 @@ header{
   nav{
     @include inlineflex();
     -ms-flex-pack: distribute;
-        justify-content: space-around;
+    justify-content: space-around;
     height: 100px;
     width: 70%;
+    flex-wrap: nowrap;
     .logo{
       display: -webkit-box;
       display: -ms-flexbox;

user/themes/lecampus/scss/theme/_mobile.scss

@@ -0,0 +1,550 @@
+@media screen and (max-width: 960px) {
+  header nav{
+    position: relative;
+    width: 90%;
+    .dropmenu{
+      background: white;
+      display: none;
+      position: absolute;
+      left: -6%;
+      top: 100px;
+      width: auto!important;
+      height: auto;
+      &>ul{
+        -webkit-box-orient: vertical!important;
+        -webkit-box-direction: normal!important;
+            -ms-flex-direction: column!important;
+                flex-direction: column!important;
+        &>li{
+          text-align: left;
+          &>ul{
+            margin: auto;
+            &>li{
+              text-align: left;
+              margin-left: 10px;
+              a{
+                font-family: $Regular;
+              }
+            }
+          }
+          &> a{
+            border: none;
+            line-height: 2rem;
+          }
+        }
+      }
+      &.active{
+        display: block;
+
+      }
+    }
+    .logo{
+      margin: auto;
+    }
+    .navTrigger {
+      cursor: pointer;
+      width: 30px;
+      height: 25px;
+      margin: auto 0;
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+    .navTrigger i {
+      background-color: $light-blue;
+      border-radius: 2px;
+      content: '';
+      display: block;
+      width: 100%;
+      height: 4px;
+    }
+    .navTrigger i:nth-child(1) {
+      -webkit-animation: outT 0.8s backwards;
+      animation: outT 0.8s backwards;
+      -webkit-animation-direction: reverse;
+      animation-direction: reverse;
+    }
+    .navTrigger i:nth-child(2) {
+      margin: 5px 0;
+      -webkit-animation: outM 0.8s backwards;
+      animation: outM 0.8s backwards;
+      -webkit-animation-direction: reverse;
+      animation-direction: reverse;
+    }
+    .navTrigger i:nth-child(3) {
+      -webkit-animation: outBtm 0.8s backwards;
+      animation: outBtm 0.8s backwards;
+      -webkit-animation-direction: reverse;
+      animation-direction: reverse;
+    }
+    .navTrigger.active i:nth-child(1) {
+      -webkit-animation: inT 0.8s forwards;
+      animation: inT 0.8s forwards;
+    }
+    .navTrigger.active i:nth-child(2) {
+      -webkit-animation: inM 0.8s forwards;
+      animation: inM 0.8s forwards;
+    }
+    .navTrigger.active i:nth-child(3) {
+      -webkit-animation: inBtm 0.8s forwards;
+      animation: inBtm 0.8s forwards;
+    }
+    @-webkit-keyframes inM {
+      50% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(45deg);
+      }
+    }
+    @keyframes inM {
+      50% {
+        -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(45deg);
+                transform: rotate(45deg);
+      }
+    }
+    @-webkit-keyframes outM {
+      50% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(45deg);
+      }
+    }
+    @keyframes outM {
+      50% {
+        -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(45deg);
+                transform: rotate(45deg);
+      }
+    }
+    @-webkit-keyframes inT {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @keyframes inT {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+                transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+                transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+                transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @-webkit-keyframes outT {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @keyframes outT {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+                transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+                transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+                transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @-webkit-keyframes inBtm {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+      }
+    }
+    @keyframes inBtm {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+                transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+                transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+                transform: translateY(-9px) rotate(135deg);
+      }
+    }
+    @-webkit-keyframes outBtm {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+      }
+    }
+    @keyframes outBtm {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+                transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+                transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+                transform: translateY(-9px) rotate(135deg);
+      }
+    }
+  }
+  .gal{
+    .title_gal{
+      max-width: 80%!important;
+      top: 15vw!important;
+    }
+    .content_gal{
+      width: 2%!important;
+    }
+  }
+  .entete .entete_c{
+    width: 95%!important;
+    margin: 30px auto!important;
+  }
+  .content{
+    width: 80%!important;
+  }
+  .sidebar{
+    position: relative!important;
+    width: 350px!important;
+    margin: 0 auto!important;
+  }
+  #devis{
+    .title{
+      width: 100%!important;
+      height: auto!important;
+      -webkit-transform: translateX(0px)!important;
+              transform: translateX(0px)!important;
+      border-radius: 0px!important;
+      h4{
+        font-size: 1.3rem!important;
+        margin: 15px auto!important;
+        -webkit-transform: translateY(0%)!important;
+                transform: translateY(0%)!important;
+      }
+    }
+    .txt{
+      width: 100%!important;
+      height: auto!important;
+      background: $red!important;
+      margin: auto!important;
+      p{
+        color: white!important;
+        padding: 15px 55px !important;
+        strong{
+          font-size: 1rem!important;
+        }
+      }
+    }
+    .img{
+      width: auto!important;
+    }
+    .demander-votre-devis{
+      -webkit-transform: translate(0px, 40%)!important;
+              transform: translate(0px, 40%)!important;
+      right: 30px!important;
+    }
+  }
+
+  #devis.item .title, #devis.sublog .title{
+    border-radius: 30px!important;
+  }
+  #sublog{
+    .txt{
+      width:100%!important;
+      p{
+        padding: 0!important;
+      }
+    }
+    .content_salle{
+      z-index: 2;
+      left: 60%!important;
+    }
+    .mapsalles{
+      width: 60%!important;
+    }
+  }
+  #item .demander-votre-devis, #sublog .demander-votre-devis{
+    width: 300px!important;
+    height: 110px!important;
+    margin-top: -55px!important;
+    a{
+      display: -webkit-inline-box!important;
+      display: -ms-inline-flexbox!important;
+      display: inline-flex!important;
+    }
+    p:nth-of-type(2){
+      display: none!important;
+    }
+    img{
+      margin-left: 20px!important;
+      margin-top: 0px!important;
+    }
+  }
+  .start:not(#form)#archive, .start:not(#form)#calendrier{
+    width: 80%!important;
+  }
+
+  .start:not(#form) .body-wrapper .card{
+    width: calc((100% / 3) - 7.5px)!important;
+  }
+  .start#form .body-wrapper form{
+    width: 90%!important;
+  }
+  .start#form .body-wrapper form > div.button-wrapper button{
+    margin-right: 5%!important;
+  }
+  .sidebar{
+    width: 50%!important;
+    padding: 20px 0;
+    &::before{
+      display: block;
+      width: 100vw;
+      height: 100%;
+      content: '';
+      background-image: url(/user/themes/lecampus/images/Trame-bleu.svg);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      position: absolute;
+      top: 0;
+      margin-left: -10vw;
+      z-index: -1;
+    }
+  }
+  .start:not(#form) .body-wrapper .event{
+    width: 90%!important;
+  }
+  .start:not(#form)#event .title{
+    width: 90%!important;
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .start{
+    .demander-votre-devis{
+      display: none;
+    }
+  }
+  #item{
+    .body-wrapper{
+      .images_s{
+        display: none;
+      }
+      .content_s{
+        width: 90%!important;
+        p{
+          padding: 0!important;
+        }
+      }
+      .icones{
+        margin: 20px 0 0 0!important;
+        .icon{
+          height: auto!important;
+          max-width: 100%!important;
+          p{
+            padding: 0!important;
+          }
+        }
+      }
+    }
+  }
+  .content{
+    margin: 2rem auto!important;
+    width: 90%!important;
+    p{
+      padding: 40px 20px!important;
+    }
+  }
+  .gal .title_gal{
+    display: none!important;
+  }
+  .entete{
+    padding: 0!important;
+     p{
+      font-size: 1.1rem;
+      line-height: 1.5rem;
+    }
+  }
+  #home .content > p{
+    width: 100%!important;
+    &:not(:last-child){
+      strong{
+        font-size: 1.1rem;
+      }
+    }
+  }
+  #reco{
+    .item{
+      border: none!important;
+      margin: 10px 0!important;
+      padding-left: 0!important;
+    }
+  }
+  .sidebar{
+    width: 90%!important;;
+    text-align: center;
+    h2{
+      margin: auto;
+    }
+    h3{
+      font-size: 1.1rem;
+    }
+    .side-all-agenda{
+      margin: auto;
+      float: none!important;
+    }
+  }
+  #devis{
+    .title, .txt{
+      padding: 0 5%;
+      p{
+        padding: 15px 0!important;
+      }
+    }
+
+  }
+  #newsletter{
+     #mc_embed_signup{
+       border: none!important;
+      width: 280px!important;
+      padding: 0!important;
+      #mc_embed_signup_scroll{
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        input{
+          width: 280px!important;
+        }
+      }
+      #form{
+        width: auto;
+      }
+      label{
+        width: 280px!important;
+        border: 2px solid white;
+        border-radius: 20px;
+        margin-bottom: 10px;
+      }
+      & > input{
+        margin-top: 10px;
+      }
+      .clear{
+        input{
+          margin: 10px 0 0 0!important;
+        }
+      }
+    }
+  }
+  #footer .block{
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    p{
+      margin-bottom: 10px;
+      text-align: center;
+      border: none!important;
+      &:nth-of-type(1){
+        img{
+          float: none;
+        }
+      }
+    }
+  }
+  #sublog {
+    .content_salle{
+      width: 90%!important;
+      left: 5%!important;
+      top: 250px!important;
+      p{
+        padding: 0px 10px!important;
+      }
+    }
+    .mapsalles{
+      width: 100%!important;
+    }
+
+  }  .start:not(#form)#archive, .start:not(#form)#calendrier{
+    width: 90%!important;
+    .cat {
+      height: auto!important;
+      .btn-group{
+        &:nth-child(1){
+          width: 75%;
+        }
+        label{
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+  .start:not(#form) .body-wrapper .card{
+    width: 100%!important;
+  }
+  .start:not(#form) .body-wrapper .event .card-content{
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    .reso{
+      width: 100%!important;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-pack: distribute;
+          justify-content: space-around;
+    }
+    .txt{
+      width: 100%!important;
+    }
+  }
+  #default{
+    .header-wrapper{
+      width: 100%!important;
+      text-align: center;
+      .title{
+        width: 90%!important;
+      }
+    }
+  }
+}

user/themes/lecampus/templates/archive.html.twig

@@ -31,7 +31,7 @@
           {% block item %}
             {% for child in page.find('/agenda').children %}
 
-              {% if child.header.date_end|date("d/m/y") <= "now"|date("d/m/y") %}
+              {% if child.header.date_end|date("ymd") <= "now"|date("ymd") %}
                 {% include 'partials/cal-list-event.html.twig' with {blog: page, page: child} %}
               {% endif %}
 

user/themes/lecampus/templates/calendrier.html.twig

@@ -18,8 +18,8 @@
   </section>
   <section class="body-wrapper">
     {% block item %}
-      {% for child in collection %}
-        {% if child.header.date_end|date("d/m/y") >= "now"|date("d/m/y") %}
+      {% for child in collection.order('folder','asc') %}
+        {% if child.header.date_end|date("ymd") >= "now"|date("ymd") %}
           {% include 'partials/cal-list-event.html.twig' with {blog: page, page: child} %}
         {% endif %}
       {% endfor %}

user/themes/lecampus/templates/css/bricklayer.css

@@ -0,0 +1,49 @@
+.bricklayer {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: start;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.bricklayer-column-sizer {
+    width: 100%;
+    display: none;
+}
+
+@media screen and (min-width: 640px) {
+    .bricklayer-column-sizer {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 980px) {
+    .bricklayer-column-sizer {
+        width: 50%;
+    }
+}
+
+/*@media screen and (min-width: 1200px) {*/
+    /*.bricklayer-column-sizer {*/
+        /*width: 33.33333%;*/
+    /*}*/
+/*}*/
+
+.bricklayer-column {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    padding-left: 5px;
+    padding-right: 5px;
+}

user/themes/lecampus/templates/js/masonry.filter.js

@@ -0,0 +1,51 @@
+/* -- Filter Plugin -- */
+(function ($) {
+    'use strict';
+    $.fn.masonryFilter = function (options) {
+        //reload masonry
+        var reload = function ($container) {
+            setTimeout(function () {
+                $container.masonry("layout");
+            }, 100);
+        };
+
+        var process = function ($container) {
+            var items = $container.masonry("getAllItems"),
+                revealItems = [],
+                hideItems = [];
+
+            $.each(items, function(i) {
+                var item = items[i];
+                var elm = $(item.element),
+                    shouldShow = options.filter && options.filter.call(elm);
+
+                if (shouldShow) {
+                    if (item.isHidden) {
+                        // -- Have to set this property so masonry does
+                        //    not include hidden items when calling "layout"
+                        item.isIgnored = false;
+                        revealItems.push(item);
+                    }
+                } else {
+                    if (!item.isHidden) {                        
+                        // -- Easier to set this property directy rather than
+                        //    using the "ignore" method, as it takes in a DOM
+                        //    element rather than the masonry item object.
+                        item.isIgnored = true;
+                        hideItems.push(item);
+                    }
+                }
+            });
+
+            $container.masonry('hide', hideItems);
+            $container.masonry('reveal', revealItems);
+
+            reload($container);
+        };
+
+        return this.each(function () {
+            var self = $(this);
+            process(self);
+        });
+    };
+}(window.jQuery));

user/themes/lecampus/templates/js/multipleFilterMasonry.js

@@ -0,0 +1,97 @@
+(function($){
+  'use strict';
+  $.fn.multipleFilterMasonry = function(options){
+    var cache=[];
+    var filters = [];
+
+    if(options.selectorType === 'list') {
+      $(options.filtersGroupSelector).children().each(function() {
+        filters.push($(this).data('filter'));
+      });
+    }
+
+    //the main job of the function is to cache the item,because we are going to filter the items later
+    var init = function($container){
+      $container.find(options.itemSelector).each(function(){
+        cache.push($(this));
+      });
+      $container.masonry(options);
+    };
+
+    //filter items in cache
+    var filterItems = function(selector){
+      var result=[];
+      $(cache).each(function(item){
+        $(selector).each(function(index,sel) {
+          if(cache[item].is(sel)){
+            if($.inArray(cache[item], result) === -1) result.push(cache[item]);
+          }
+        });
+      });
+      return result;
+    };
+
+    //reload masonry
+    var reload = function($container,items){
+      $container.empty();
+      $(items).each(function(){
+        $($container).append($(this));
+      });
+      $container.masonry('reloadItems');
+      $container.masonry();
+    };
+
+    // Hash filter
+    var hashFilter = function($container) {
+      var hash = window.location.hash.replace("#", "");
+      if($.inArray(hash, filters) !== -1) {
+        reload($container, $('.' + hash));
+      }
+    };
+
+    var proc = function($container){
+      $(options.filtersGroupSelector).find('input[type=checkbox]').each(function(){
+        $(this).change(function(){
+          var selector = [];
+          $(options.filtersGroupSelector).find('input[type=checkbox]').each( function() {
+            if ( $(this).is(':checked') ) {
+              selector.push( '.' + $(this).val() );
+            }
+          });
+          var items = cache;
+          if (selector.length > 0) {
+            items = filterItems(selector);
+          }
+          reload($container,items);
+        });
+      });
+    };
+
+    var procUL = function($container){
+      $(options.filtersGroupSelector).children().each(function(){
+        $(this).click(function(){
+          $(options.filtersGroupSelector).children().removeClass('selected');
+          window.location.hash = $(this).data('filter');
+          var selector = [];
+          selector.push( '.' + $(this).data('filter') );
+          $(this).addClass('selected');
+          var items = cache;
+          if (selector.length > 0) {
+            items = filterItems(selector);
+          }
+          reload($container,items);
+        });
+      });
+
+      hashFilter($container);
+      $(options.filtersGroupSelector).children().removeClass('selected');
+      $('.filters li[data-filter='+window.location.hash.replace("#", "")+']').addClass('selected');
+    };
+
+    return this.each(function() {
+      var $$ = $(this);
+      init($$);
+      options.selectorType === 'list' ? procUL($$) : proc($$);
+    });
+  };
+}(window.jQuery));

user/themes/lecampus/templates/js/site.js

@@ -0,0 +1,160 @@
+function map() {
+  var $carte = $('#carte');
+  if ( $carte.length ) {
+
+    var mymap = L.map('carte').setView([44.7365818, 4.9776488], 13);
+
+    var greenIcon = L.icon({
+        iconUrl: '/user/themes/lecampus/images/mappoint.svg',
+
+        iconSize:     [38, 95], // size of the icon
+        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
+        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+    });
+
+  	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+  		maxZoom: 18,
+  		id: 'mapbox.streets'
+  	}).addTo(mymap);
+
+  	L.marker([44.7365818, 4.9776488], {icon: greenIcon}).addTo(mymap)
+  		.bindPopup("<b>Hello world!</b><br />I am le campus.").openPopup();
+
+  	function onMapClick(e) {
+  		popup
+  			.setLatLng(e.latlng)
+  			.setContent("You clicked the map at " + e.latlng.toString())
+  			.openOn(mymap);
+  	}
+
+  	mymap.on('click', onMapClick);
+
+  }
+}
+
+function filteritem() {
+  var $card = $('.body-wrapper > .card');
+  var $cat = $('.cat a');
+  var $img = $('.body-wrapper .img');
+
+  $(".filters .btn").click(function(e) {
+    e.preventDefault();
+
+    var filter = $(this).attr("data-filter");
+    var self = $('.body-wrapper');
+
+    self.masonryFilter({
+        filter: function () {
+            if (!filter) return true;
+            return $(this).attr("data-filter") == filter;
+        }
+    });
+});
+
+  var $grid = $('#archive .body-wrapper, #calendrier .body-wrapper').masonry({
+    // columnWidth: 200,
+    itemSelector: '.card',
+    gutter: 10,
+    transitionDuration: '0.2s'
+  });
+
+// $( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
+  $grid.imagesLoaded().progress(function() {
+      $grid.masonry();
+  });
+
+}
+
+function slide() {
+  $('.gal').bxSlider({
+    responsive: true,
+    infiniteLoop: true,
+    preloadImages:'visible',
+    pager:false,
+    auto:true,
+  });
+}
+
+function links() {
+  var $a = $('li a[href="/organisez-vos-evenements"],li a[href="/qui-sommes-nous"] ');
+  var $map = $('a#carte');
+
+  $a.on('click', function(e) {
+    e.preventDefault();
+  })
+
+  $map.on('click', function(e) {
+    e.preventDefault();
+  })
+}
+
+function clickbutton() {
+  var $button = $('#ajax-test-form .radio');
+
+  $button.on('click', function(){
+    $(this).parent('.form-data').find('.check').removeClass('check');
+    $(this).addClass('check');
+  });
+
+}
+
+function clicksenddevis() {
+  var $ok = $('.ok');
+  var $send = $('#send-valide');
+
+  $ok.on('click', function () {
+    $(this).parent('#send-valide').remove();
+  })
+
+}
+
+function addclass() {
+  var $map = $('a#carte');
+
+  $map.parents('.content_s').addClass('map')
+
+  var $reco_click = $('#reco .title');
+  var $reco_txt = $('#reco .txt');
+
+  $reco_click.on('click', function() {
+    $reco_txt.toggleClass('open');
+    $(this).toggleClass('open');
+  })
+
+}
+
+function mapsalles() {
+  var $salles = $('.fond svg path');
+  var $content = $('.content .content_salle');
+  arrayid = [];
+
+  $salles.on('click', function() {
+    var idsalle = this.id;
+    arrayid.push(idsalle);
+    $salles.css("fill", "white");
+    $(this).css("fill", "#0093a3");
+    $('.content .content_salle').css("display", "none");
+    $('.content .content_salle#'+arrayid).css("display", "block");
+    arrayid.length = 0;
+  });
+
+};
+
+function burger() {
+  $('.navTrigger').click(function(){
+    $(this).toggleClass('active');
+    $('.dropmenu').toggleClass('active');
+  });
+}
+
+
+jQuery(document).ready(function(){
+  addclass();
+  clickbutton();
+  links();
+  slide();
+  filteritem();
+  map();
+  mapsalles();
+  burger();
+});

user/themes/lecampus/templates/partials/base.html.twig

@@ -31,7 +31,7 @@
           {% do assets.addJs('theme://js/masonry.filter.js', {group:'bottom'}) %}
           {% do assets.addJs('theme://js/masonry.pkgd.min.js', {group:'bottom'}) %}
           {% do assets.addJs('theme://js/jquery.bxslider.min.js', {group:'bottom'}) %}
-          {% do assets.addJs('theme://js/site.min.js', {group:'bottom'}) %}
+          {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
 
       {% endblock %}
 
@@ -96,6 +96,10 @@
 
       <header>
         <nav>
+          <div class="navTrigger">
+            <i></i><i></i><i></i>
+          </div>
+          
           <div class="logo">
             <a href="/"><img alt="le_campus_biovallee" src="/user/themes/lecampus/images/logo_lecampus.svg" alt="logo_lecampus"></a>
           </div>

user/themes/lecampus/templates/partials/blog/taxonomy.html.twig

@@ -4,8 +4,8 @@
 {% import _self as macro %}
 
 {% for tag in page.taxonomy.tag %}
-<span class="tags {{ macro.pageLinkName(tag) }}">
+  <span class="tags {{ macro.pageLinkName(tag) }}">
     <a class="label">{{ tag }}</a>
+  </span>
     {% endfor %}
 {% endif %}
-</span>

user/themes/lecampus/templates/partials/cal-event.html.twig

@@ -24,7 +24,13 @@
 {% set image = page.media.images|first %}
   <div class="event">
 
-    <div class="card-header">
+  {% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
+  {% import _self as macro %}
+
+  {% for tag in page.taxonomy.tag %}
+    <div class="card-header {{ macro.pageLinkName(tag) }}">
+  {% endfor %}
+
       {% include 'partials/blog/public.html.twig' %}
     </div>
 
@@ -63,9 +69,7 @@
     </div>
 
     <div class="txt">
-      {% if page.summary != page.content %}
-        {{ page.summary(100)|raw }}
-      {% endif %}
+  
       {{page.content}}
     </div>
   </div>

user/themes/lecampus/templates/scss/configurations/_fonts.scss

@@ -0,0 +1,154 @@
+// Font Family
+$font-family-default:  			"Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+$font-family-header:  			"Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+$font-family-mono: 				"Inconsolata", monospace;
+$font-family-serif:				"Georgia", "Times", "Times New Roman", serif;
+// @font-face
+
+$typo: "aileron_regular";
+$category: "sans-serif";
+$file: "Aileron-Regular-webfont";
+$Regular: "Regular";
+
+@mixin font-face($Regular, $file, $typo, $category:"") {
+    $filepath: "../fonts/" + $typo + "/" + $file;
+    @font-face {
+        font-family: "#{$Regular}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
+              url($filepath + ".woff") format('woff'),
+              url($filepath + ".ttf")  format('truetype'),
+              url($filepath + ".svg#" + $Regular + "") format('svg');
+    }
+
+    %#{$Regular} {
+        font: {
+            @if $category != "" {
+                family: "#{$Regular}", #{$category};
+                weight: normal;
+            }
+            @else {
+                family: "#{$Regular}";
+                weight: normal;
+            }
+        }
+    }
+}
+
+$typo2: "aileron_bold";
+$file2: "Aileron-Bold-webfont";
+$Bold: "bold";
+
+@mixin font-face($Bold, $file2, $typo2, $category:"") {
+    $filepath: "../fonts/" + $typo2 + "/" + $file2;
+    @font-face {
+        font-family: "#{$Bold}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
+              url($filepath + ".woff") format('woff'),
+              url($filepath + ".ttf")  format('truetype'),
+              url($filepath + ".svg#" + $Bold + "") format('svg');
+    }
+
+    %#{$Bold} {
+        font: {
+            @if $category != "" {
+                family: "#{$Bold}", #{$category};
+                weight: normal;
+            }
+            @else {
+                family: "#{$Bold}";
+                weight: normal;
+            }
+        }
+    }
+}
+
+
+$typo3: "now_alt";
+$file3: "nowalt-bold-webfont";
+$now_alt_bold: "now_alt_bold";
+
+@mixin font-face($now_alt_bold, $file3, $typo3, $category:"") {
+    $filepath: "../fonts/" + $typo3 + "/" + $file3;
+    @font-face {
+        font-family: "#{$now_alt_bold}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
+              url($filepath + ".woff") format('woff'),
+              url($filepath + ".ttf")  format('truetype'),
+              url($filepath + ".svg#" + $now_alt_bold + "") format('svg');
+    }
+
+    %#{$now_alt_bold} {
+        font: {
+            @if $category != "" {
+                family: "#{$now_alt_bold}", #{$category};
+                weight: normal;
+            }
+            @else {
+                family: "#{$now_alt_bold}";
+                weight: normal;
+            }
+        }
+    }
+}
+
+
+$typo4: "now_alt";
+$file4: "nowalt-light-webfont";
+$now_alt_light: "now_alt_light";
+
+@mixin font-face($now_alt_light, $file4, $typo4, $category:"") {
+    $filepath: "../fonts/" + $typo4 + "/" + $file4;
+    @font-face {
+        font-family: "#{$now_alt_light}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
+              url($filepath + ".woff") format('woff'),
+              url($filepath + ".ttf")  format('truetype'),
+              url($filepath + ".svg#" + $now_alt_light + "") format('svg');
+    }
+
+    %#{$now_alt_light} {
+        font: {
+            @if $category != "" {
+                family: "#{$now_alt_light}", #{$category};
+                weight: normal;
+            }
+            @else {
+                family: "#{$now_alt_light}";
+                weight: normal;
+            }
+        }
+    }
+}
+
+$typo5: "now_alt";
+$file5: "nowalt-medium-webfont";
+$now_alt_medium: "now_alt_medium";
+
+@mixin font-face($now_alt_medium, $file5, $typo5, $category:"") {
+    $filepath: "../fonts/" + $typo5 + "/" + $file5;
+    @font-face {
+        font-family: "#{$now_alt_medium}";
+        src: url($filepath + ".eot");
+        src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
+              url($filepath + ".woff") format('woff'),
+              url($filepath + ".ttf")  format('truetype'),
+              url($filepath + ".svg#" + $now_alt_medium + "") format('svg');
+    }
+
+    %#{$now_alt_medium} {
+        font: {
+            @if $category != "" {
+                family: "#{$now_alt_medium}", #{$category};
+                weight: normal;
+            }
+            @else {
+                family: "#{$now_alt_medium}";
+                weight: normal;
+            }
+        }
+    }
+}

user/themes/lecampus/templates/scss/configurations/_mixins.scss

@@ -0,0 +1,50 @@
+@mixin vertical-align($position: relative) {
+  position: $position;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+@mixin flexNowrap() {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+  height: $Hh;
+}
+
+@mixin inlineflex(){
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+@mixin flexcenter(){
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+@mixin upper(){
+  text-transform: uppercase;
+}
+
+@mixin flexcenter_column(){
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}

user/themes/lecampus/templates/scss/configurations/_reset.scss

@@ -0,0 +1,390 @@
+*{
+  -webkit-box-sizing : border-box;
+          box-sizing : border-box;
+}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  height: 100%;
+  width: 100%;
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2rem;
+  margin:0;
+}
+
+h1,h2,h3,h4,h5,p,em,strong,ul,li,a{
+  margin:0;
+  padding:0;
+}
+
+ul, li ,ol{
+  list-style:none;
+}
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+header span{
+  white-space: nowrap;
+}
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+ul{
+  list-style: none;
+}
+ul,li{
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  background-color: transparent;
+  color: black;
+  text-decoration: none;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+  width: 100%;
+  height: auto;
+  vertical-align: bottom;
+}
+
+iframe{
+  border: none;
+}
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

user/themes/lecampus/templates/scss/configurations/_variables.scss

@@ -0,0 +1,40 @@
+// fonts
+@include font-face($Regular, $file, $typo, $category);//1
+@include font-face($Bold, $file2, $typo2, $category);//1
+@include font-face($now_alt_bold, $file3, $typo3, $category);//1
+@include font-face($now_alt_light, $file4, $typo4, $category);//1
+@include font-face($now_alt_medium, $file5, $typo5, $category);//1
+
+// fontsize
+  // title
+  // $fzh1:
+  // $fzh2:
+  // $fzh3:
+  // $fzh4:
+  // $fzh5:
+  // $fzh6:
+
+  // paragraphe
+  // $fzp: 1rem;
+  // $fzs:
+  // $fzb:
+  // $fzi:
+
+// line-height
+  // $lhp
+
+// color
+$light-blue: #0093a3;
+$dark-blue: #00407d;
+$green: #b5cb3a;
+$red: #9e0027;
+$light-grey: #d8dadbff;
+$grey: #6e6f70;
+$white: #ffffff;
+$black: #231f20;
+
+// header
+$Hh: 70px;
+$Hn: calc( 100vh - #{$Hh} );
+$Wn: 50vw;
+$Hc: calc( #{$Hn} - 150px );

user/themes/lecampus/templates/scss/theme.scss

@@ -0,0 +1,17 @@
+// Core variables and mixins
+@import 'configurations/fonts';
+@import 'configurations/reset';
+@import 'configurations/variables';
+@import 'configurations/mixins';
+
+@import 'theme/animation';
+@import 'theme/typography';
+@import 'theme/hover';
+
+@import 'theme/header';
+@import 'theme/menu';
+@import 'theme/footer';
+@import 'theme/mobile'; 
+
+// Extra Skeleton Styling
+@import 'theme/blog';

user/themes/lecampus/templates/scss/theme/_animation.scss

@@ -0,0 +1,23 @@
+.default-animation {
+  transition: all 0.5s ease;
+}
+
+// Pulse Animation
+.pulse {
+  animation-name: pulse_animation;
+  animation-duration: 2000ms;
+  transform-origin:70% 70%;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes pulse_animation {
+  0% { transform: scale(1); }
+  30% { transform: scale(1); }
+  40% { transform: scale(1.08); }
+  50% { transform: scale(1); }
+  60% { transform: scale(1); }
+  70% { transform: scale(1.05); }
+  80% { transform: scale(1); }
+  100% { transform: scale(1); }
+}

user/themes/lecampus/templates/scss/theme/_blog.scss

@@ -0,0 +1,935 @@
+.gal{
+  margin-left: 15%;
+  .content_gal{
+    width: 2.2%!important;
+    &[aria-hidden="false"]{
+      .title_gal{
+        opacity: 1;
+        right: 70px;
+        -webkit-transition: all 1s ease;
+        transition: right 1s ease, opacity 1s ease;
+      }
+    }
+  }
+  .title_gal{
+    position: absolute;
+    right: 50px;
+    max-width: 50%;
+    background: $light-blue;
+    padding: 25px;
+    top: 20vw;
+    color: $white;
+    opacity: 0;
+  }
+}
+
+.cat{
+  height: 50px;
+  z-index: 999;
+  margin: 20px 0;
+  .btn-group{
+    @include inlineflex();
+    &:nth-of-type(1){
+      label{
+        margin-right: 20px;
+      }
+    }
+    &:nth-of-type(2){
+      float: right;
+    }
+  }
+  label{
+    padding: 10px;
+    cursor: pointer;
+    &.tous{
+      border-top: 2px solid $green;
+      border-bottom: 2px solid $green;
+    }
+    &.professionnels{
+      border-top: 2px solid $red;
+      border-bottom: 2px solid $red;
+    }
+    &.grand_public{
+      border-top: 2px solid $light-blue;
+      border-bottom: 2px solid $light-blue;
+    }
+    &.formations{
+      border-top: 2px solid $grey;
+      border-bottom: 2px solid $grey;
+    }
+    &.archive{
+      border-top: 2px solid $dark-blue;
+      border-bottom: 2px solid $dark-blue;
+    }
+  }
+  input{
+    visibility: hidden;
+    position: absolute;
+  }
+}
+
+.bandeau{
+  width: 100%;
+  max-height: 554px;
+  overflow: hidden;
+}
+
+.container{
+  & > .title{
+    background: $red;
+    border-radius: 30px;
+    width: auto;
+    float:left;
+    padding: 10px 20px;
+    color: white;
+  }
+}
+
+.start{
+  min-height: calc(100vh - 325px);
+  &:not(#home){
+    .entete{
+      border-bottom: 10px solid $light-blue;
+    }
+  }
+}
+
+.start:not(#form){
+  &#calendrier,   &#archive{
+      width: 70%;
+      margin: 40px auto 40px auto;
+      .header-wrapper{
+        .title{
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+        h1{
+          width: auto;
+          margin-bottom: 20px;
+          background: $red;
+          border-radius: 30px;
+          padding: 10px 20px;
+          color: white;
+          font-size: 1.2rem;
+        }
+      }
+    }
+  }
+  &#event{
+    margin: 40px auto 40px auto;
+    .title{
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+    h1{
+      width: auto;
+      margin-bottom: 20px;
+      background: $red;
+      border-radius: 30px;
+      padding: 10px 20px;
+      color: white;
+      font-size: 1.2rem;
+    }
+  }
+
+  }
+  .body-wrapper{
+    @include inlineflex();
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    width: 100%;
+    position: relative;
+    .card{
+      width: calc( (100% / 4) - 7.5px);
+      min-width: 200px;
+      margin: 0 0 10px 0 ;
+      .card-header{
+        position: absolute;
+        width: 100%;
+        right: 0;
+        text-align: right;
+        &.professionnels{
+          background-color: $red;
+        }
+        &.grand_public{
+          background-color: $light-blue;
+        }
+        &.formations{
+          background-color: $grey;
+        }
+        .publics{
+          padding: 2.5px 10px;
+          color: white;
+        }
+      }
+      .card-body{
+        padding: 15px;
+        background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
+    .event{
+      width: 45%;
+      .card-content{
+        @include inlineflex;
+        -ms-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+        -webkit-box-pack: justify;
+            -ms-flex-pack: justify;
+                justify-content: space-between;
+        .reso{
+          width: 20%;
+          a{
+            display: block;
+            margin-bottom: 10px;
+            img{
+              margin-left: 10px;
+              width: 20px;
+            }
+          }
+        }
+        .txt{
+          width: 80%;
+        }
+      }
+    }
+  }
+}
+
+.start#form{
+  .entete{
+    border-top: 1px solid $light-blue
+  }
+  h2{
+    margin-top: 0;
+  }
+  .body-wrapper{
+    width: 100%;
+    min-width: 250px;
+    margin: auto auto 140px auto;
+    form{
+      width: calc( (100% / 2));
+      margin-top: 20px;
+      margin: auto;
+      & > div{
+        width: 100%;
+        margin: 20px 0;
+        border-bottom: 1px solid $red;
+        .form-data{
+          @include inlineflex();
+          margin: 20px 0px;
+          &> div{
+            margin: 10px 10px;
+            min-width: 100px;
+            border: 2px solid $red;
+            border-radius: 30px;
+            padding: 10px 20px;
+            &.check{
+              background: $red;
+              color: white;
+            }
+            input{
+              border: none;
+            }
+            input[type='radio'] {
+              visibility: hidden;
+              position: absolute;
+            }
+          }
+        }
+        &:nth-of-type(n+5):not(:nth-of-type(n+11)){
+          width: 50%;
+          float: left;
+          border-bottom: 0px;
+          .form-data{
+            width: 100%;
+            & > div{
+              width: 100%;
+            }
+          }
+        }
+        &:nth-of-type(9), &:nth-of-type(10){
+          border-bottom: 1px solid $red !important;
+        }
+        &.button-wrapper{
+          background: $red;
+          height: 100px;
+          position: absolute;
+          left: 0;
+          width: 100%;
+          button{
+            margin-right: 25%;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+                    transform: translateY(-50%);
+            background: white;
+            border-radius: 30px;
+            padding: 10px 35px;
+            -webkit-box-shadow:none;
+                    box-shadow:none;
+            border:0;
+          }
+        }
+      }
+    }
+    #send-valide{
+      -webkit-transform: translate(-50%, -50%);
+              transform: translate(-50%, -50%);
+      background: $red;
+      border-radius: 20px;
+      position: fixed;
+      width: 30%;
+      height: 30%;
+      left: 50%;
+      top: 50%;
+      padding: 50px;
+      .toast{
+        position: relative;
+        text-align: center;
+        color: white;
+      }
+      .ok{
+        color: white;
+        position: absolute;
+        right: 20px;
+        bottom: 20px;
+      }
+    }
+  }
+}
+
+.header-wrapper{
+.title{
+  h2{
+    width: auto;
+    margin-bottom: 20px;
+    background: $red;
+    border-radius: 30px;
+    width: auto;
+    padding: 10px 20px;
+    color: white;
+    font-size: 1.2rem;
+    width:115px;
+  }
+}
+}
+
+.content{
+  width: 50%;
+  margin: 4rem auto;
+  p{
+    margin: 10px 0;
+  }
+}
+
+.content_s{
+  margin: auto!important;
+}
+
+.entete{
+  @include inlineflex;
+  padding: 20px;
+  background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: auto;
+  border-top: 10px solid $green;
+  .entete_c{
+    @include inlineflex;
+    text-align: center;
+    width: 66%;
+    margin: 50px auto;
+    position: relative;
+
+    h1{
+      width: auto;
+      margin-bottom: 20px;
+      background: $red;
+      border-radius: 30px;
+      width: auto;
+      padding: 10px 20px;
+    }
+  }
+}
+
+.body-wrapper{
+  .content{
+    h4{
+      &:not(:first-of-type){
+        border-top: 1px solid black;
+        padding-top: 30px;
+        margin: 30px 0 0 0;
+      }
+    }
+  }
+  .sub-content{
+    border-top: 1px solid black;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    & > img{
+      width: 33%;
+      float: left;
+      margin: 20px 10px 0px 0px;
+    }
+  }
+}
+
+#event{
+  margin-bottom: 20px;
+  .content{
+    margin-top: 50px;
+    h2{
+      float: left;
+      margin-right: 20px;
+    }
+    .reso{
+      @include inlineflex;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+      width: 50px;
+      height: 25px;
+    }
+  }
+  .sidebar{
+    margin-top: 50px;
+  }
+}
+
+.sidebar{
+  position: absolute;
+  right: 0;
+  width: 300px;
+  margin: -55px auto 0 20px;
+  h2{
+    background: $red;
+    border-radius: 100px;
+    width: 100px;
+    height: 100px;
+  }
+  .side-agenda{
+    padding: 10px 20px 10px 0;
+    &:not(:nth-of-type(1)){
+      border-top: 1px solid $light-blue;
+      &::before{
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        margin-top: -13px;
+        border-radius: 10px;
+        background: $light-blue;
+      }
+    }
+    &:nth-of-type(3){
+      margin-bottom: 10px;
+    }
+  }
+  .side-all-agenda{
+    background: white;
+    width: auto;
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    float: left;
+    border: 2px solid $red;
+    border-radius: 30px;
+    -webkit-transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease;
+    a{
+      color: black;
+    }
+    &:hover{
+      background-color: $red;
+      -webkit-transition: background-color 0.3s ease;
+      transition: background-color 0.3s ease;
+      a{
+        color: white;
+      }
+    }
+  }
+
+}
+
+#newsletter{
+  padding: 20px;
+  background: $light-blue;
+  #mc_embed_signup{
+    width: 600px;
+    margin: auto;
+    padding: 0 0 0 10px;
+    border-radius: 100px;
+    border: 1px solid $white;
+    form{
+      @include inlineflex();
+      width: 100%;
+      #mc_embed_signup_scroll{
+        @include inlineflex();
+        width: 100%;
+        margin: auto;
+        label{
+          text-align: center;
+          color: $white;
+          margin-right: 10px;
+          width: 260px;
+        }
+        &>input{
+          width: 315px;
+          padding-left: 20px;
+        }
+        input{
+          border-radius: 30px;
+          height: 31px;
+          -webkit-box-shadow: none;
+                  box-shadow: none;
+          border: none;
+        }
+        .clear{
+          input{
+            background: $white;
+            margin-left: -30px;
+          }
+        }
+      }
+    }
+  }
+}
+
+#home{
+  .content{
+    @include inlineflex();
+    & > p{
+      position: relative;
+      width: calc(100% / 3);
+      padding: 50px 20px;
+      margin-top: 10px;
+      img{
+        position: absolute;
+        width: auto;
+        height: 50px;
+        top: -20px;
+        left: 50%;
+        -webkit-transform: translate(-50%);
+                transform: translate(-50%);
+      }
+      &:nth-of-type(n+4){
+        width: calc(100% / 4);
+      }
+      &:last-child{
+        width: auto!important;
+        margin-top: 0!important;
+        margin: auto;
+        a{
+          display: block;
+          padding: 10px 20px;
+          text-align: center;
+          border: 2px solid $green;
+          border-radius: 30px;
+          margin: auto;
+          -webkit-transition: background-color 0.3s ease;
+          transition: background-color 0.3s ease;
+        }
+      }
+    }
+  }
+}
+
+#item{
+  .content{
+    @include inlineflex;
+    .images_s{
+      // width: calc(100% / 2 - 15px);
+      width: 40%;
+      // min-width: 300px;
+      margin-right: 15px;
+      img{
+        margin-bottom: 15px;
+      }
+    }
+    .content_s{
+      width: calc(60% - 30px);
+    }
+    .icones{
+      margin: 70px 0;
+      @include inlineflex;
+      -ms-flex-pack: distribute;
+          justify-content: space-around;
+      width: 100%;
+      .icon{
+        height: 50px;
+        width: auto;
+        max-width: 200px;
+        img{
+          height: 50px;
+          width: 100%;
+        }
+        p{
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+#devis{
+  @include inlineflex();
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  // height: 300px;
+  .title{
+    width: 200px;
+    height: 200px;
+    background: $red;
+    border-radius: 200px;
+    -webkit-transform: translateX(80px);
+            transform: translateX(80px);
+    h4{
+      text-align: center;
+      color: white;
+      margin: 50% 10px 0 10px;
+      -webkit-transform: translateY(-50%);
+              transform: translateY(-50%);
+    }
+  }
+  .txt{
+    @include inlineflex();
+    background: white;
+    width: 25%;
+    margin-right: 20px;
+    height: 250px;
+    p{
+      padding: 20px 20px 20px 100px;
+      color: black;
+      text-align: left;
+      strong{
+        font-size: 1.3rem;
+      }
+    }
+  }
+  .demander-votre-devis{
+    margin-top: 0;
+    -webkit-transform: translateX(-200px);
+            transform: translateX(-200px);
+  }
+  .img{
+    width: 400px;
+    height: 300px;
+    overflow: hidden;
+    img{
+      width: auto;
+      height: 400px;
+    }
+  }
+}
+
+#devis{
+  &.item, &.sublog{
+    background: $red;
+    height: auto;
+    padding: 20px 0;
+    a{
+      color: white;
+    .title{
+      vertical-align: baseline;
+      border-radius: 30px;
+      border: 1px solid white;
+      padding: 5px 20px;
+      height: 35px;
+      width: auto;
+      -webkit-transform: translateX(0);
+              transform: translateX(0);
+      }
+      &:hover{
+        color: black;
+        .title{
+          background: white;
+          -webkit-transition: background 0.3s ease;
+          transition: background 0.3s ease;
+        }
+      }
+    }
+  }
+}
+
+// .bx-viewport{
+//     height: 30vw!important;
+// }
+
+#reco{
+  background: $dark-blue;
+  .title{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    cursor: pointer;
+    width: 100%;
+    padding: 10px;
+    h2{
+      width: auto;
+      margin: auto;
+      color: white;
+      padding: 10px;
+      text-align: center;
+      border-top: 1px solid white;
+      border-bottom: 1px solid white;
+      font-size: 1rem;
+      &::after{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        margin-left: 10px;
+        content: " ";
+        background: url('../images/fleche-top.svg');
+        background-size: 15px 18px;
+        background-repeat: no-repeat;
+        width: 15px;
+        height: 18px;
+      }
+    }
+    &.open{
+      h5:after{
+        -webkit-transform: rotate(180deg);
+                transform: rotate(180deg);
+      }
+    }
+  }
+  .txt{
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    padding-top: 20px;
+    @include inlineflex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+    p{
+      color: white;
+      width: 300px;
+      a{
+        color: white;
+        text-decoration: underline;
+      }
+    }
+    &.open{
+      z-index: 999;
+      background: $dark-blue;
+      .item{
+        display: block;
+      }
+    }
+    h3{
+      color: $green;
+    }
+  }
+  .item{
+    display: none;
+    margin: 0 0px 20px 20px;
+    border-left: 1px solid white;
+    padding-left: 20px;
+    img{
+      width: 50px;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.content_s{
+  &.map{
+    width: 100%!important;
+    height: auto;
+    p{
+      &:last-child{
+        height: 500px;
+      }
+    }
+    a#carte{
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+#event{
+  .title{
+    width: 45%;
+    margin: auto;
+  }
+  .head-event{
+    .tags{
+      width: 100%;
+      &.professionnels{
+        background-color: $red;
+      }
+      &.grand_public{
+        background-color: $light-blue;
+      }
+      &.formations{
+        background-color: $grey;
+      }
+      &.publics{
+        padding: 2.5px 10px;
+        color: white;
+      }
+    }
+}
+.card-header{
+  @include inlineflex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+  &.professionnels{
+    background-color: $red;
+  }
+  &.grand_public{
+    background-color: $light-blue;
+  }
+  &.formations{
+    background-color: $grey;
+  }
+  .publics{
+    text-align: right;
+
+    &.publics{
+      padding: 2.5px 10px;
+      color: white;
+    }
+  }
+}
+.card-body{
+  padding: 15px;
+  background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  }
+  .card-content{
+    margin-top: 20px;
+  }
+}
+
+.demander-votre-devis{
+  padding: 10px;
+  z-index: 999;
+  background: $red;
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  right: 100px;
+  margin-top: -100px;
+  color: white;
+  text-align: center;
+  strong{
+    font-weight: bold!important;
+  }
+  a{
+    color: white;
+  }
+  img{
+    margin-top: 10px;
+    width: 50px;
+  }
+}
+
+
+#sublog{
+  .body-wrapper{
+    background-image: url('../images/Trame-gris.svg');
+    background-repeat: no-repeat;
+
+  }
+  .content{
+    @include inlineflex;
+    width: 90%;
+    & > p{
+        font-size: 1.2rem;
+        font-family: $Bold;
+      }
+  }
+  svg{
+      pointer-events: none;
+  }
+  .mapsalles{
+    width: 50%;
+    .contour{
+      position: relative;
+      z-index: 1;
+      pointer-events: none;
+    }
+    .fond{
+      position: absolute;
+      z-index:0;
+      top: 110px;
+      path{
+        fill: none;
+        pointer-events: all;
+        transition: fill 0.3s ease;
+        &:hover{
+          fill: $light-blue!important;
+          transition: fill 0.3s ease;
+        }
+      }
+    }
+  }
+  .content_salle{
+    position: absolute;
+    left: 50%;
+    top: 300px;
+    width: 35%;
+    background: white;
+    & > p{
+      padding-left: 10px;
+    }
+    h3{
+      background: $light-blue;
+      padding: 5px 10px;
+      color: white;
+      margin-top: 0;
+    }
+    h4{
+      background: $green;
+      font-size: 1.2rem;
+      font-family: $Bold;
+      padding: 5px 10px;
+    }
+  }
+}
+
+#default{
+  .header-wrapper{
+    width: 45%;
+    margin-top: 50px;
+    margin: auto;
+  }
+  .body-wrapper{
+    margin-bottom: 50px;
+  }
+  .title{
+    width: 80%;
+    margin: auto;
+  }
+  .txt{
+    margin:auto;
+  }
+  p{
+    margin-bottom: 10px;
+  }
+}

user/themes/lecampus/templates/scss/theme/_footer.scss

@@ -0,0 +1,29 @@
+#footer{
+  width: 100%;
+  background: $light-grey;
+  .block{
+    @include inlineflex;
+    width: 100%;
+    margin: 20px 0;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    p{
+      padding: 0 20px;
+
+      img{
+        width: 100%;
+        max-width: 150px;
+        height: auto;
+      }
+      &:nth-of-type(1){
+        img{
+          float: right;
+        }
+      }
+      &:not(:nth-of-type(1)){
+        border-left: 1px solid black;
+      }
+    }
+  }
+}

user/themes/lecampus/templates/scss/theme/_header.scss

@@ -0,0 +1,98 @@
+header{
+  z-index: 999;
+  position: relative;
+  @include inlineflex();
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 100%;
+  border-bottom: 1px solid $light-blue;
+  nav{
+    @include inlineflex();
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    height: 100px;
+    width: 70%;
+    flex-wrap: nowrap;
+    .logo{
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      a{
+        display: block;
+        margin: auto;
+      }
+    }
+    &.dropmenu{
+      a{
+        padding: 10px;
+      }
+      & > ul{
+        @include inlineflex();
+        -ms-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+        & > li{
+          text-align: center;
+          max-width: 250px;
+          &>a{
+            line-height: 6rem;
+            border-top: 1px solid $light-blue;
+            border-bottom: 3px solid $green;
+
+          }
+          padding: 0 20px;
+          & > ul{
+            display: none;
+            margin-top: -1.5rem;
+            li{
+              background-color: white;
+              text-align: center;
+              a{
+                display: block;
+                padding: 10px;
+                position: relative;
+                &:before{
+                  content: "";
+                  position: absolute;
+                  width: 100%;
+                  height: 3px;
+                  bottom: 0;
+                  left: 0;
+                  background-color: $green;
+                  visibility: hidden;
+                  -webkit-transform: scaleX(0);
+                  transform: scaleX(0);
+                  -webkit-transition: all 0.3s ease-in-out 0s;
+                  transition: all 0.3s ease-in-out 0s;
+                }
+              }
+            }
+
+          }
+          &:hover{
+            & > ul{
+              display: block;
+              li:hover{
+                a:hover:before {
+                  visibility: visible;
+                  -webkit-transform: scaleX(1);
+                  transform: scaleX(1);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .reso{
+      @include inlineflex;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+      a{
+        display: block;
+        width: 35px;
+        margin: auto 5px;
+      }
+    }
+  }
+}

user/themes/lecampus/templates/scss/theme/_hover.scss

@@ -0,0 +1,12 @@
+#home{
+  .content{
+    p:last-child{
+      a:hover{
+        color: white;
+        background-color: $green;
+        -webkit-transition: background-color 0.3s ease;
+        transition: background-color 0.3s ease;
+      }
+    }
+  }
+}

user/themes/lecampus/templates/scss/theme/_mobile.scss

@@ -0,0 +1,336 @@
+@media screen and (max-width: 960px) {
+  header nav{
+    position: relative;
+    width: 90%;
+    .dropmenu{
+      background: white;
+      display: none;
+      position: absolute;
+      left: -6%;
+      top: 100px;
+      width: auto!important;
+      height: auto;
+      &>ul{
+        flex-direction: column!important;
+        &>li{
+          text-align: left;
+          &>ul{
+            margin: auto;
+            &>li{
+              text-align: left;
+              margin-left: 10px;
+              a{
+                font-family: $Regular;
+              }
+            }
+          }
+          &> a{
+            border: none;
+            line-height: 2rem;
+          }
+        }
+      }
+      &.active{
+        display: block;
+
+      }
+    }
+    .logo{
+      margin: auto;
+    }
+    .navTrigger {
+      cursor: pointer;
+      width: 30px;
+      height: 25px;
+      margin: auto 0;
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+    .navTrigger i {
+      background-color: $light-blue;
+      border-radius: 2px;
+      content: '';
+      display: block;
+      width: 100%;
+      height: 4px;
+    }
+    .navTrigger i:nth-child(1) {
+      -webkit-animation: outT 0.8s backwards;
+      animation: outT 0.8s backwards;
+      -webkit-animation-direction: reverse;
+      animation-direction: reverse;
+    }
+    .navTrigger i:nth-child(2) {
+      margin: 5px 0;
+      -webkit-animation: outM 0.8s backwards;
+      animation: outM 0.8s backwards;
+      -webkit-animation-direction: reverse;
+      animation-direction: reverse;
+    }
+    .navTrigger i:nth-child(3) {
+      -webkit-animation: outBtm 0.8s backwards;
+      animation: outBtm 0.8s backwards;
+      -webkit-animation-direction: reverse;
+      animation-direction: reverse;
+    }
+    .navTrigger.active i:nth-child(1) {
+      -webkit-animation: inT 0.8s forwards;
+      animation: inT 0.8s forwards;
+    }
+    .navTrigger.active i:nth-child(2) {
+      -webkit-animation: inM 0.8s forwards;
+      animation: inM 0.8s forwards;
+    }
+    .navTrigger.active i:nth-child(3) {
+      -webkit-animation: inBtm 0.8s forwards;
+      animation: inBtm 0.8s forwards;
+    }
+    @-webkit-keyframes inM {
+      50% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(45deg);
+      }
+    }
+    @keyframes inM {
+      50% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(45deg);
+      }
+    }
+    @-webkit-keyframes outM {
+      50% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(45deg);
+      }
+    }
+    @keyframes outM {
+      50% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(45deg);
+      }
+    }
+    @-webkit-keyframes inT {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @keyframes inT {
+      0% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @-webkit-keyframes outT {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @keyframes outT {
+      0% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        transform: translateY(9px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(9px) rotate(135deg);
+      }
+    }
+    @-webkit-keyframes inBtm {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+      }
+    }
+    @keyframes inBtm {
+      0% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(-9px) rotate(135deg);
+      }
+    }
+    @-webkit-keyframes outBtm {
+      0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+      }
+    }
+    @keyframes outBtm {
+      0% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      50% {
+        transform: translateY(-9px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(-9px) rotate(135deg);
+      }
+    }
+  }
+  .gal{
+    .title_gal{
+      max-width: 80%!important;
+      top: 15vw!important;
+    }
+    .content_gal{
+      width: 2%!important;
+    }
+  }
+  .entete .entete_c{
+    width: 95%!important;
+    margin: 30px auto!important;
+  }
+  .content{
+    width: 80%!important;
+  }
+  .sidebar{
+    position: relative!important;
+    width: 350px!important;
+    margin: 0 auto!important;
+  }
+  #devis{
+    .title{
+      width: 100%!important;
+      height: auto!important;
+      transform: translateX(0px)!important;
+      border-radius: 0px!important;
+      h4{
+        margin-top: 15px!important;
+        font-size: 1.3rem!important;
+        margin: auto!important;
+        transform: translateY(0%)!important;
+      }
+    }
+    .txt{
+      width: 100%!important;
+      height: auto!important;
+      background: $red!important;
+      margin: auto!important;
+      p{
+        color: white!important;
+        padding: 15px 55px !important;
+        strong{
+          font-size: 1rem!important;
+        }
+      }
+    }
+    .img{
+      width: auto!important;
+    }
+    .demander-votre-devis{
+      transform: translate(0px, 40%)!important;
+      right: 30px!important;
+    }
+  }
+
+  #devis.item .title, #devis.sublog .title{
+    border-radius: 30px!important;
+  }
+  #item .demander-votre-devis, #sublog .demander-votre-devis{
+    width: 300px!important;
+    height: 110px!important;
+    margin-top: -55px!important;
+    a{
+      display: inline-flex!important;
+    }
+    p:nth-of-type(2){
+      display: none!important;
+    }
+    img{
+      margin-left: 20px!important;
+      margin-top: 0px!important;
+    }
+  }
+  .start:not(#form)#archive, .start:not(#form)#calendrier{
+    width: 80%!important;
+  }
+
+  .start:not(#form) .body-wrapper .card{
+    width: calc((100% / 3) - 7.5px)!important;
+  }
+  .start#form .body-wrapper form{
+    width: 90%!important;
+  }
+  .start#form .body-wrapper form > div.button-wrapper button{
+    margin-right: 5%!important;
+  }
+  .sidebar{
+    padding: 20px 0;
+    ::before{
+      display: block;
+      width: 100vw;
+      height: 100%;
+      content: '';
+      background-image: url(/user/themes/lecampus/images/Trame-bleu.svg);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      position: absolute;
+      top: 0;
+      margin-left: -90%;
+      z-index: -1;
+    }
+  }
+  .start:not(#form) .body-wrapper .event{
+    width: 90%!important;
+  }
+  .start:not(#form)#event .title{
+    width: 90%!important;
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .gal .title_gal{
+    display: none!important;
+  }
+  .entete{
+    padding: 0!important;  
+     p{
+      font-size: 1rem;
+      line-height: 1.4rem;
+    }
+  }
+  #home .content > p{
+    width: 100%!important;
+  }
+}

user/themes/lecampus/templates/scss/theme/_typography.scss

@@ -0,0 +1,263 @@
+html, body{
+  font-family: $Regular;
+  line-height: 1.35;
+}
+
+h2{
+  font-size: 2rem;
+}
+
+h4{
+  font-weight: normal;
+  font-size: 2rem;
+}
+
+h5{
+  font-weight: normal;
+  font-size: 1.2rem;
+}
+
+nav{
+  a{
+    font-family: $Bold;
+    font-size: 0.9rem;
+  }
+}
+
+.container{
+  & > .title{
+    font-family: $Bold;
+  }
+}
+
+.card-header{
+  .publics{
+    font-size: 0.8rem;
+    font-family: $Bold;
+  }
+}
+.card-title{
+  h2{
+    font-family:$now_alt_bold;
+    font-weight: 400;
+
+    font-size: 1.2rem!important;
+  }
+  .date{
+    font-size: 0.8rem;
+  }
+}
+.card-content{
+  .reso{
+    a{
+      font-family: $Bold;
+      font-weight: 400;
+    }
+  }
+}
+
+p{
+  font-size: 0.9rem;
+  strong{
+    font-family: $Bold;
+    font-weight: normal;
+  }
+}
+
+.gal{
+  p{
+    font-family:$now_alt_bold;
+    font-weight: 400;
+    font-size: 1.2rem;
+    line-height: 2.2rem;
+  }
+}
+
+.entete{
+  h1{
+    font-size: 1.2rem;
+    color: white;
+  }
+  p{
+    font-family:$now_alt_bold;
+    font-weight: 400;
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+#home{
+  p:not(:last-child){
+    strong{
+      font-size: 1.3rem;
+    }
+  }
+  .content{
+     p{
+       strong{
+         font-family:$now_alt_bold;
+         font-weight: 400;
+       }
+      &:nth-of-type(n+4):not(:last-child){
+        text-align: center;
+        strong{
+          color: $red;
+          font-family:$now_alt_bold;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
+#item{
+  .content{
+    .content_s{
+      h2{
+        font-family: $Bold;
+        font-size: 1.3rem;
+      }
+    }
+  }
+  .icones{
+    p{
+      font-family: $now_alt_bold;
+      font-weight: 400;
+      color: $red;
+      font-size: 1.2rem;
+    }
+  }
+}
+
+.sidebar{
+  .date{
+    font-size: 0.8rem;
+  }
+  h2{
+    font-family:$now_alt_bold;
+    font-weight: 400;
+    font-size: 1.4rem;
+    line-height: 100px;
+    color: white;
+    text-align: center;
+  }
+  h3{
+    font-size: 1.3rem;
+    font-family:$now_alt_bold;
+    font-weight: 400;
+    }
+  .date{
+    color: $grey;
+  }
+
+  .side-all-agenda{
+    a{
+      font-size: 0.9rem;
+      font-family: $Bold;
+    }
+  }
+}
+
+#newsletter{
+  label{
+    font-size: 1rem;
+    line-height: 1.9rem;
+    font-weight: normal;
+    font-family: $Bold;
+  }
+}
+
+.cat{
+  width: 100%;
+  a, label{
+    font-family: $Bold;
+  }
+}
+
+.dt{
+  font-family: $Bold;
+  color: $red;
+}
+
+#ajax-test-form{
+  .form-label{
+    font-size: 1.2rem;
+    font-family: $Bold;
+  }
+  .radio{
+    .form-radio{
+      font-size: 1rem;
+      font-family: $Bold;
+    }
+  }
+  .button-wrapper{
+    button{
+      font-family: $Bold;
+    }
+  }
+}
+#send-valide{
+  .toast{
+    font-size: 1.3rem;
+    font-family: $Bold;
+  }
+  .ok{
+    font-family: $Bold;
+  }
+}
+
+#devis{
+  h4{
+    font-size: 1rem;
+    font-family:$now_alt_bold;
+    font-weight: 400;
+  }
+  p{
+    &:nth-of-type(1){
+      color: white;
+      text-align: center;
+    }
+    strong{
+      font-family:$now_alt_bold;
+      font-weight: 400;
+    }
+  }
+
+  &.item{
+    .title{
+      font-family: $Bold;
+    }
+  }
+}
+
+.demander-votre-devis{
+  a{
+    p:nth-of-type(1){
+      font-size: 2rem;
+
+    }
+    color: white;
+    strong{
+      font-family:$now_alt_bold;
+      font-weight: 400;
+    }
+  }
+}
+
+#reco{
+  h5{
+    font-family:$Bold;
+    font-weight: 400;
+  }
+}
+
+#footer{
+  font-family:$now_alt_medium;
+  font-weight: 400;
+  p{
+    font-size: 0.8rem;
+    a{
+      font-family: $Bold;
+    }
+  }
+}

user/themes/lecampus/templates/sublog.html.twig

@@ -1,3 +1,6 @@
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
+{% import _self as macro %}
+
 {% extends 'partials/base.html.twig' %}
 {% set collection = page.collection() %}
 {% set image = page.media.images|first %}
@@ -10,20 +13,16 @@
 
     <section class="body-wrapper">
       <div class="content">
+        <div class="txt">
+          {{content}}
+        </div>
         <div class="mapsalles">
           <div class="contour">
             <svg
-               xmlns:dc="http://purl.org/dc/elements/1.1/"
-               xmlns:cc="http://creativecommons.org/ns#"
-               xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-               xmlns:svg="http://www.w3.org/2000/svg"
-               xmlns="http://www.w3.org/2000/svg"
-               xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-               xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                version="1.1"
                id="svg986"
-               width="636.37305"
-               height="882.22363">
+               preserveAspectRatio="xMinYMin meet"
+               viewBox="0 0 640 885">
               <metadata
                  id="metadata992">
                 <rdf:RDF>
@@ -903,17 +902,10 @@
           </div>
           <div class="fond">
             <svg
-               xmlns:dc="http://purl.org/dc/elements/1.1/"
-               xmlns:cc="http://creativecommons.org/ns#"
-               xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-               xmlns:svg="http://www.w3.org/2000/svg"
-               xmlns="http://www.w3.org/2000/svg"
-               xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-               xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                version="1.1"
                id="svg829"
-               width="631.85046"
-               height="763.57861">
+               preserveAspectRatio="xMinYMin meet"
+               viewBox="0 0 640 885">
               <metadata
                  id="metadata835">
                 <rdf:RDF>
@@ -945,29 +937,29 @@
                  max="744.48242,1017.896" />
               <path
                  inkscape:connector-curvature="0"
-                 id="path1133"
+                 id="salle_druise"
                  d="M 361.63462,74.160968 291.5256,0 250.04658,40.038841 216.67774,75.6762 l 57.07361,56.94734 15.5311,15.84677 z"
                  style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
               <path
                  inkscape:connector-curvature="0"
-                 id="path1135"
+                 id="salle_trois_becs"
                  d="m 361.63462,74.160968 70.96324,72.225902 -34.85027,35.86042 10.35406,10.35405 -131.31398,131.38839 -79.55537,-79.87061 z"
                  style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
               <path
                  inkscape:connector-curvature="0"
-                 id="path1137"
+                 id="salle_drôme"
                  d="M 631.85044,614.34004 498.00523,476.45421 H 287.64096 l 0.50506,276.27674 h 211.12191 z"
                  style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
               <path
                  sodipodi:nodetypes="ccccccccccccc"
                  inkscape:connector-curvature="0"
-                 id="path1131"
+                 id="amphithéatre_jean-marie_pelt"
                  d="M 227.91568,694.45767 25.253828,694.14208 25.00128,641.36162 0.25254803,639.08876 0,407.76383 h 36.870569 v -13.13197 c 26.377554,-64.00017 143.740291,-81.30599 178.797001,1.51522 v 12.12185 h 37.37563 l -0.75761,229.80972 -25.00127,3.03042 z"
                  style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
               <path
                  sodipodi:nodetypes="ccccccc"
                  inkscape:connector-curvature="0"
-                 id="path1129"
+                 id="salle_printegarde"
                  d="m 25.253828,694.14208 202.661852,0.31559 -0.63134,34.5346 c 0,0 -25.00127,20.32932 -52.27539,27.4004 -27.27412,7.07105 -62.12438,11.36421 -91.166272,1.01016 C 54.800799,747.04874 25.001292,727.98212 25.001292,727.98212 Z"
                  style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00157475;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
               <g
@@ -1005,12 +997,9 @@
             </svg>
           </div>
         </div>
-        <div class="txt">
-          {{content}}
-        </div>
 
         {% for item in page.collection %}
-          <div class="content_salle">
+          <div class="content_salle" id="{{ macro.pageLinkName(item.title) }}">
             {% set child_image = item.media.images|first %}
             <h3>{{item.title}}</h3>
             {% if image %}