maj

user/pages/01.projets/projet-n-1/item.md

@@ -1,8 +1,8 @@
 ---
 title: 'Projet N°1'
-media_order: 'ouvrage Edith.jpg,affiche_grainesdelecteurs_2014.jpg'
+media_order: 'ouvrage_Edith.jpg,affiche_grainesdelecteurs_2014.jpg'
 mea: true
-meaimg: 'ouvrage Edith.jpg'
+meaimg: 'ouvrage_Edith.jpg'
 taxonomy:
     category:
         - Éditions
@@ -11,4 +11,4 @@ taxonomy:
 categories: test
 ---
 
-Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices. On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". 
+Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices. On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum".

user/pages/01.projets/projet-n-2/item.md

@@ -1,8 +1,8 @@
 ---
 title: 'projet n°2'
-media_order: 'brochure ESADHaR 2017.jpg'
+media_order: 'brochure_ESADHaR_2017.jpg'
 mea: true
-meaimg: 'brochure ESADHaR 2017.jpg'
+meaimg: 'brochure_ESADHaR_2017.jpg'
 taxonomy:
     category:
         - Éditions
@@ -10,4 +10,4 @@ taxonomy:
         - mea
 ---
 
-Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices. On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". 
+Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices. On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum".

user/pages/01.projets/projet-n-3/item.md

@@ -1,8 +1,8 @@
 ---
 title: 'projet n°3'
-media_order: 'ouvrage Edith 2.jpg,brochure ESADHaR 2017.jpg,Cartevoeux2018_bdf.jpg,FLYER carnaval Colombelle.jpg,FLYER RDV.jpg'
+media_order: 'ouvrage_Edith_2.jpg,brochure_ESADHaR_2017.jpg,Cartevoeux2018_bdf.jpg,FLYER_carnaval_Colombelle.jpg,FLYER_RDV.jpg'
 mea: true
-meaimg: 'ouvrage Edith 2.jpg'
+meaimg: 'ouvrage_Edith_2.jpg'
 taxonomy:
     category:
         - logo
@@ -10,4 +10,4 @@ taxonomy:
         - mea
 ---
 
-Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices. On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". 
+Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices. On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum".

user/themes/gilles_acezat/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/gilles_acezat/js/site.js

@@ -4,35 +4,53 @@ var $cat = $('.cat-list .cat a');
 var $img = $('.item #items .img');
 
 function masonry() {
-    var $grid = $cards.masonry({
-        itemSelector: '.card',
-        columnWidth: '.card',
-        percentPosition: true,
-        gutter: 10,
-        transitionDuration: '0.2s'
-    });
-    var $grid2 = $img.masonry({
-        itemSelector: '.img-card',
-        columnWidth: '.img-card',
-        percentPosition: true,
-        gutter: 10,
-        transitionDuration: '0.2s'
-    });
-    $grid.imagesLoaded().progress(function() {
-        $grid.masonry();
-    });
-    $grid2.imagesLoaded().progress(function() {
-        $grid2.masonry();
+  var $grid = $cards.masonry({
+      itemSelector: '.card',
+      columnWidth: '.card',
+      percentPosition: true,
+      gutter: 10,
+      isAnimated: true,
+      transitionDuration: '0.5s'
+  });
+
+  var $grid2 = $img.masonry({
+      itemSelector: '.img-card',
+      columnWidth: '.img-card',
+      percentPosition: true,
+      gutter: 10,
+      transitionDuration: '0.2s'
+  });
+
+  $(".cat-list .btn a").click(function(e) {
+    e.preventDefault();
+
+    $('.active').removeClass('active');
+    $(this).addClass('active');
+
+    var filter = $(this).attr("data-filter");
+    var self = $('#body-wrapper #items .full-works');
+
+    self.masonryFilter({
+        filter: function () {
+            if (!filter) return true;
+            return $(this).attr("data-filter") == filter;
+        }
     });
+  });
+
+  $grid.imagesLoaded().progress(function() {
+      $grid.masonry();
+  });
+
+  $grid2.imagesLoaded().progress(function() {
+      $grid2.masonry();
+  });
 }
 
 function filteritem() {
-    var $container = $('#masonryContainer');
-
-    $cards.multipleFilterMasonry({
-        itemSelector: '.card',
-        filtersGroupSelector: '.cat-list'
-    });
+  var $card = $('#body > .card');
+  var $cat = $('.cat a');
+  var $img = $('#body .img');
 }
 
 function contact() {
@@ -49,41 +67,41 @@ function contact() {
     })
 }
 
-function customscroll() {
-  var $page = $('#page-wrapper.blog')
+function customscroll($page_item) {
+  var $page = $('#page-wrapper.blog');
   var $page_item = $("body.blog #start, body.item");
 
+  $page_item.mCustomScrollbar({
+    theme: "dark",
+    scrollbarPosition: "outside",
+    scrollInertia: 1000,
+    callbacks: {
+      onInit: function(){
+        $('.top').on('click', function() {
+          event.preventDefault()
+          $page_item.mCustomScrollbar('scrollTo',['top',null]);
+        });
+      }
+    }
+  });
+
   $("body").mCustomScrollbar({
       theme: "dark",
       scrollbarPosition: "outside",
       callbacks: {
-          whileScrolling: function() {
-              var pct = this.mcs.topPct;
-              if (pct < 1) {
-                $page.addClass("up");
-                $page.removeClass("down");
-              } else {
-                $page.removeClass("up");
-                $page.addClass("down")
-              }
+        whileScrolling: function() {
+          var pct = this.mcs.topPct;
+          if (pct < 1) {
+          } else {
+            $page.addClass("down");
+            $page_item.mCustomScrollbar("disable",true);
           }
+          setTimeout(function(){
+              $page_item.mCustomScrollbar("update");
+          }, 2000);
+        }
       }
   });
-
-  $page_item.mCustomScrollbar({
-    theme: "dark",
-    scrollbarPosition: "outside",
-    scrollInertia: 1000,
-  });
-}
-
-function scrolltop() {
-  var $top = $('.top');
-
-  $top.on('click', function(e) {
-    // e.preventDefault()
-
-  })
 }
 
 jQuery(document).ready(function($) {
@@ -91,10 +109,5 @@ jQuery(document).ready(function($) {
     filteritem();
     contact();
     customscroll();
-    // scrolltop();
-
-    // $(window).load(function() {
-    //     $('html, body').scrollTop(0);
-    // });
 
 });

user/themes/gilles_acezat/scss/configurations/_animation.scss

@@ -1,3 +1,12 @@
+@-webkit-keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+
 @keyframes rotation {
   from {
       -webkit-transform: rotate(0deg);
@@ -7,6 +16,25 @@
   }
 }
 
+@-webkit-keyframes translateright{
+  0%{
+    right: -50px;
+    color: transparent;
+    display: none;
+  }
+
+  30%{
+    right: 150px;
+    color: transparent;
+    display: block;
+  }
+
+  100%{
+    right: 200px;
+    color: white;
+  }
+}
+
 @keyframes translateright{
   0%{
     right: -50px;
@@ -26,6 +54,24 @@
   }
 }
 
+@-webkit-keyframes translateleft{
+  0%{
+    right: 200px;
+    color: white;
+    display: block;
+  }
+  30%{
+    right: 150px;
+    color: transparent;
+  }
+
+  100%{
+    right: -200px;
+    color: transparent;
+    display: none;
+  }
+}
+
 @keyframes translateleft{
   0%{
     right: 200px;
@@ -44,55 +90,119 @@
   }
 }
 
-@keyframes reducH{
+@-webkit-keyframes reducH{
   0%{
     font-size: $fh1;
-    -webkit-text-stroke : 1px;
+    -webkit-text-stroke : 2px black;
     color: transparent;
     line-height: 5rem;
   }
 
   70%{
-    -webkit-text-stroke : 1px;
+    -webkit-text-stroke : 1px black;
+    color: black;
+  }
+
+  100%{
+    font-size: $min-h1;
+    -webkit-text-stroke : 0px black;
     color: black;
-    // line-height: 6.5rem;
+    line-height: 5rem;
+  }
+}
+
+@keyframes reducH{
+  0%{
+    font-size: $fh1;
+    -webkit-text-stroke : 2px black;
+    color: transparent;
+    line-height: 5rem;
+  }
 
+  70%{
+    -webkit-text-stroke : 1px black;
+    color: black;
   }
 
   100%{
     font-size: $min-h1;
-    -webkit-text-stroke : 0px;
+    -webkit-text-stroke : 0px black;
     color: black;
     line-height: 5rem;
   }
 }
 
+@-webkit-keyframes translateY{
+  0%{
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+    opacity: 1;
+  }
+
+  100%{
+    -webkit-transform: translateY(-20px);
+            transform: translateY(-20px);
+    opacity: 0;
+  }
+}
+
 @keyframes translateY{
   0%{
-    transform: translateY(0px);
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
     opacity: 1;
   }
 
   100%{
-    transform: translateY(-20px);
+    -webkit-transform: translateY(-20px);
+            transform: translateY(-20px);
     opacity: 0;
   }
 }
 
+@-webkit-keyframes showcatlist {
+  0%{
+    width: 0;
+    -webkit-box-shadow: 0px 0px 0px 0px black;
+            box-shadow: 0px 0px 0px 0px black;
+    opacity: 1;
+  }
+
+  100%{
+    width: 100%;
+    -webkit-box-shadow: 0px -2px 0px -2px black;
+            box-shadow: 0px -2px 0px -2px black;
+    opacity: 1;
+  }
+}
+
 @keyframes showcatlist {
   0%{
     width: 0;
-    box-shadow: 0px 0px 0px 0px black;
+    -webkit-box-shadow: 0px 0px 0px 0px black;
+            box-shadow: 0px 0px 0px 0px black;
     opacity: 1;
   }
 
   100%{
     width: 100%;
-    box-shadow: 0px -2px 0px -2px black;
+    -webkit-box-shadow: 0px -2px 0px -2px black;
+            box-shadow: 0px -2px 0px -2px black;
     opacity: 1;
   }
 }
 
+@-webkit-keyframes showborder {
+  0%{
+    width: 0;
+    background: black;
+  }
+  100%{
+    width: 100%;
+    background: black;
+  }
+}
+
 @keyframes showborder {
   0%{
     width: 0;
@@ -104,14 +214,41 @@
   }
 }
 
+@-webkit-keyframes ultranslate {
+  0%{
+    opacity: 0;
+    -webkit-transform: translateX(0px);
+            transform: translateX(0px);
+  }
+  100%{
+    opacity: 1;
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px);
+  }
+}
+
 @keyframes ultranslate {
   0%{
     opacity: 0;
-    transform: translateX(0px);
+    -webkit-transform: translateX(0px);
+            transform: translateX(0px);
   }
   100%{
     opacity: 1;
-    transform: translateX(10px);
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px);
+  }
+}
+
+
+@-webkit-keyframes showcard {
+  0%{
+    opacity: 0;
+
+  }
+  100%{
+    opacity: 1;
+
   }
 }
 

user/themes/gilles_acezat/scss/theme.scss

@@ -13,4 +13,5 @@
 @import 'theme/home';
 @import 'theme/blog';
 @import 'theme/item';
+@import 'theme/mobile';
 // @import 'theme/footer';

user/themes/gilles_acezat/scss/theme/_blog.scss

@@ -1,14 +1,15 @@
 body{
   #start{
-    width: 100%;
     height: 100%;
   }
   #page-wrapper.blog{
     #start{
+      width: calc(100% - 20px);
       height: calc(100% - 5rem);
       position: fixed;
       top: 100vh;
-      left: 0;
+      left: 10px;
+      right: 10px;
     }
   }
   #page-wrapper.down{
@@ -16,21 +17,23 @@ body{
       top: 5rem;
     }
     #items{
+      -webkit-animation: showcard 1.5s 2.5s ease forwards;
+              animation: showcard 1.5s 2.5s ease forwards;
       .card{
-        animation: showcard 1.5s 2.5s ease forwards;
       }
     }
   }
 }
-
-#items{
-  .full-works{
-    width: 100%;
-    margin-top: 30px;
-  }
-  .card{
+.blog{
+  #items{
     opacity: 0;
-    margin-bottom: 10px;
-    min-width: 200px;
+    .full-works{
+      width: 100%;
+      margin-top: 30px;
+    }
+    .card{
+      margin-bottom: 10px;
+      min-width: 200px;
+    }
   }
 }

user/themes/gilles_acezat/scss/theme/_header.scss

@@ -1,114 +1,215 @@
 // home
 body {
-    .blog {
-        header {
-            height:100vh;
-            width: 100%;
-            display: inline-flex;
-            flex-direction: column;
-            align-content: space-around;
-            & > div{
-              position: fixed;
-              &.head{
-                width: 100%;
-                z-index: 999;
-                padding-top: 70px;
-                h2 {
-                  margin-left: 8px;
-                  position: absolute;
-                }
-                &::after {
-                  display: block;
-                  content: " ";
-                  width: 0%;
-                  height: 1px;
-                  background: black;
-                }
-
-              }
-              &.works-mea {
-                display: -webkit-inline-box;
-                display: -ms-inline-flexbox;
-                display: inline-flex;
-                align-self: flex-end;
-                height: calc(100% - 20px);
-                align-items: flex-end;
-                .card{
-                  &:nth-child(2){
-                    margin:0 10px;
-                  }
-                  &:not(:nth-child(2)){
-                    margin: 0;
-                  }
-                }
+  .blog {
+    margin: 0 10px;
+      header {
+          height:100vh;
+          width: calc(100% - 20px);
+          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;
+          -ms-flex-line-pack: distribute;
+              align-content: space-around;
+          & > div{
+            position: fixed;
+            width: calc(100% - 20px);
+            &.head{
+              z-index: 999;
+              padding-top: 4vw;
+              h2 {
+                margin-left: 8px;
+                position: absolute;
+                left: 0;
               }
-              &.scroll{
-                width: 100%;
-                bottom: 0;
-                text-align: center;
+              &::after {
+                display: block;
+                content: " ";
+                width: 0%;
+                height: 1px;
+                background: black;
               }
             }
-        }
-        &.down{
-          header{
-            height: 5rem;
-            .head{
-              padding:0;
-              transition: all 1s 0.9s ease;
-              &::after{
-                animation: showborder 2.5s 1.5s ease forwards;
-              }
-              h2{
-                opacity: 0;
-                margin-left: -100px;
-                transition: all 1s ease;
-                left: -50%;
+            &.works-mea {
+              display: -webkit-inline-box;
+              display: -ms-inline-flexbox;
+              display: inline-flex;
+              -ms-flex-item-align: end;
+                  align-self: flex-end;
+              height: calc(100% - 20px);
+              -webkit-box-align: end;
+                  -ms-flex-align: end;
+                      align-items: flex-end;
+              .card{
+                &:nth-child(2){
+                  margin:0 10px;
+                }
+                &:not(:nth-child(2)){
+                  margin: 0;
+                }
               }
             }
-          .card{
-            &:nth-child(1){
-              animation: translateY 1s ease forwards;
+            &.scroll{
+              bottom: 0;
+              text-align: center;
             }
-            &:nth-child(2){
-              animation: translateY 1.3s ease forwards;
+          }
+      }
+      &.down{
+        header{
+          height: 5rem;
+          .head{
+            padding:0;
+            -webkit-transition: all 1s 0.9s ease;
+            transition: all 1s 0.9s ease;
+            &::after{
+              -webkit-animation: showborder 2.5s 1.5s ease forwards;
+                      animation: showborder 2.5s 1.5s ease forwards;
             }
-            &:nth-child(3){
-              animation: translateY 1.6s ease forwards;
+            h2{
+              opacity: 0;
+              left: -40%;
+              -webkit-transition: left 3s linear, opacity 0.3s 0.1s ease;
+              transition: left 3s linear, opacity 0.3s 0.1s ease;
             }
           }
-          .scroll{
-            opacity: 0;
-            transition: all 1s ease;
+        .card{
+          &:nth-child(1){
+            -webkit-animation: translateY 1s ease forwards;
+                    animation: translateY 1s ease forwards;
+          }
+          &:nth-child(2){
+            -webkit-animation: translateY 1.3s ease forwards;
+                    animation: translateY 1.3s ease forwards;
+          }
+          &:nth-child(3){
+            -webkit-animation: translateY 1.6s ease forwards;
+                    animation: translateY 1.6s ease forwards;
           }
         }
+        .scroll{
+          opacity: 0;
+          -webkit-transition: all 1s ease;
+          transition: all 1s ease;
+        }
       }
     }
+  }
 }
 
-
+.contact{
+  width: 90px;
+  height: auto;
+  z-index: 999;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  -webkit-transition: width 0.5s ease;
+  transition: width 0.5s ease;
+  cursor: pointer;
+  &:hover{
+    width: 80px;
+    -webkit-transition: width 0.5s ease;
+    transition: width 0.5s ease;
+  }
+  svg{
+    cursor: pointer;
+    -webkit-animation: rotation 6s infinite linear;
+            animation: rotation 6s infinite linear;
+  }
+  h3{
+    color: white;
+    -webkit-transform: rotate(35deg);
+            transform: rotate(35deg);
+    position: absolute;
+    top: 35px;
+    left: 19px;
+  }
+  .txt{
+      position: fixed;
+      right: -200px;
+  }
+  &.open{
+    -webkit-transform: scale(15);
+            transform: scale(15);
+    height: auto;
+    -webkit-transition: -webkit-transform 0.5s ease;
+    transition: -webkit-transform 0.5s ease;
+    transition: transform 0.5s ease;
+    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
+    h3{
+      color: transparent;
+      left: 500px;
+      -webkit-transition: visibility 0.5 ease left 1s ease;
+      transition: visibility 0.5 ease left 1s ease;
+    }
+    svg{
+      -webkit-animation: rotation 12s infinite linear;
+              animation: rotation 12s infinite linear;
+    }
+   .txt{
+      position: fixed;
+      color: white;
+      -webkit-transform: scale(0.1);
+              transform: scale(0.1);
+      top: -10px;
+      right: -20px;
+      text-align: center;
+      line-height: 1.5rem;
+      z-index: 9999;
+    }
+  }
+  &.close{
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transition: -webkit-transform 0.5s 0.1s ease;
+    transition: -webkit-transform 0.5s 0.1s ease;
+    transition: transform 0.5s 0.1s ease;
+    transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
+    & + .txt{
+        top: 190px;
+        text-align: center;
+        line-height: 1.5rem;
+        z-index: 9999;
+        -webkit-animation: translateleft 1s ease forwards;
+                animation: translateleft 1s ease forwards;
+    }
+    h3{
+      -webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
+      transition: color 0.5s 0.5s ease, left 0.5s ease;
+    }
+    &:hover{
+      -webkit-transition: -webkit-transform 0.5s ease!important;
+      transition: -webkit-transform 0.5s ease!important;
+      transition: transform 0.5s ease!important;
+      transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
+      -webkit-transform: scale(0.9)!important;
+              transform: scale(0.9)!important;
+    }
+  }
+}
 // page
 body {
-    #page-wrapper.item {
-        header {
-            border-bottom: 1px solid black;
-            position: fixed;
-            height: 112px;
-            top: 0;
-            left: 10px;
-            right: 10px;
-            background: white;
-            z-index: 999;
-            nav {
-              margin-top: 25px;
-            }
-
-            h1 {
-                color: black;
-            }
-
-            h2, .scroll {
-                display: none;
-            }
-        }
+  #page-wrapper.item {
+    header {
+      border-bottom: 1px solid black;
+      position: fixed;
+      height: 5rem;
+      background: white;
+      top: 0;
+      left: 10px;
+      right: 10px;
+      z-index: 999;
+      h1 {
+        color: black;
+        line-height: 5rem;
+      }
+      h2, .scroll {
+        display: none;
+      }
     }
+  }
 }

user/themes/gilles_acezat/scss/theme/_home.scss

@@ -20,9 +20,13 @@
         }
         ul {
           opacity: 0;
+          display: -webkit-inline-box;
+          display: -ms-inline-flexbox;
           display: inline-flex;
           margin: 10px 0;
           .btn-group{
+            display: -webkit-box;
+            display: -ms-flexbox;
             display: flex;
             margin-right: 10px;
             &::after{
@@ -43,19 +47,20 @@
     #items{
       .full-works{
         .card{
-          width: calc((100vw / 3) - 6.5px);
+          width: calc( (100vw / 3 - calc( 41px / 3 ) ) );
         }
       }
     }
   }
   .down{
     .cat-list{
-      left: 0;
       &::after{
-        animation: showborder 2.5s 1.6s ease forwards;
+        -webkit-animation: showborder 2.5s 1.6s ease forwards;
+                animation: showborder 2.5s 1.6s ease forwards;
       }
       ul{
-        animation: ultranslate 1s 2.5s ease forwards;
+        -webkit-animation: ultranslate 1s 2.5s ease forwards;
+                animation: ultranslate 1s 2.5s ease forwards;
       }
     }
   }

user/themes/gilles_acezat/scss/theme/_typography.scss

@@ -17,13 +17,14 @@ h5{
   font-size: $fh5;
   font-family: $bold;
   font-weight: normal;
+  text-transform: uppercase;
 }
 
 p{
   font-family: $Regular;
   font-weight: normal;
   font-size: $fp;
-  line-height: 1.3rem;
+  line-height: 1.1rem;
 }
 
 time{
@@ -34,16 +35,17 @@ time{
 .blog{
   h1{
     font-size: $fh1;
-    line-height: 5rem;
+    line-height: 5vw;
     -webkit-text-stroke: 2px black;
     color: transparent;
   }
   h2{
-    line-height: 8rem;
+    line-height: 8vw;
   }
   &.down{
     h1{
-      animation: reducH 1s 0.9s ease forwards;
+      -webkit-animation: reducH 1s 0.9s ease forwards;
+              animation: reducH 1s 0.9s ease forwards;
     }
   }
 }
@@ -55,16 +57,23 @@ time{
   .prev-next{
     a{
       .title{
-        font-family: $medium;
-        font-size: $fh2-i;
+        font-family: $bold;
+        text-transform: uppercase;
+        font-size: 0.7rem;
       }
+      .tags, .blog-date time{
+        font-family: $italic;
+        text-transform: uppercase;
+        font-size: 0.7rem;
+      }
+
     }
   }
 }
 
 .category{
   a{
-    font-family: $Regular;
+    font-family: $italic;
     font-size: $fs-i;
   }
 }
@@ -74,27 +83,54 @@ time{
 }
 
 .tags{
-  font-family: $Regular;
-  font-size: $fs-i;
+  font-family: $bold;
+  font-size: 0.7rem;
 }
 
 #page-wrapper.blog{
   .works-mea, #items{
     .category{
       a{
-        font-family: $Regular;
+        font-family: $italic;
         font-size: $fs;
       }
     }
     time{
       font-size: $fs;
     }
+    .card-footer{
+      line-height: 0.2rem;
+      .tags{
+        a{
+          color: $grey!important;
+        }
+      }
+    }
+  }
+}
+#page-wrapper.item{
+  #items{
+    .title{
+      h2{
+        font-family: $bold;
+        font-size: 1.2rem;
+      }
+      a, time{
+        font-size: 1.2rem;
+      }
+    }
     .tags{
-      font-size: $fs;
+      span{
+        font-size: 0.8rem;
+        a{
+          color: $grey;
+        }
+      }
     }
   }
 }
 
 .cat-list{
-  font-family: $Regular;
+  font-family: $light;
+  font-size: 1rem;
 }

user/themes/gilles_acezat/scss/theme/all.scss

@@ -3,148 +3,30 @@ html, body{
 }
 
 .blog{
+  width: 100%;
   height: 100%;
   &.down{
     height: 5rem;
   }
 }
 
-header{
-  .contact{
-    width: 90px;
-    height: auto;
-    z-index: 999;
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    -webkit-transform: scale(1);
-            transform: scale(1);
-    -webkit-transition: -webkit-transform 0.5s ease;
-    transition: -webkit-transform 0.5s ease;
-    transition: transform 0.5s ease;
-    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-    cursor: pointer;
-    &:hover{
-      -webkit-transition: -webkit-transform 0.5s ease;
-      transition: -webkit-transform 0.5s ease;
-      transition: transform 0.5s ease;
-      transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-      -webkit-transform: scale(0.9);
-              transform: scale(0.9);
-    }
-    svg{
-      cursor: pointer;
-      -webkit-animation: rotation 6s infinite linear;
-              animation: rotation 6s infinite linear;
-    }
-    h3{
-      color: white;
-      -webkit-transform: rotate(35deg);
-              transform: rotate(35deg);
-      position: absolute;
-      top: 35px;
-      left: 19px;
-    }
-    .txt{
-        position: fixed;
-        right: -200px;
-        display: none;
-    }
-    &.open{
-      -webkit-transform: scale(15);
-              transform: scale(15);
-      height: auto;
-      -webkit-transition: -webkit-transform 0.5s ease;
-      transition: -webkit-transform 0.5s ease;
-      transition: transform 0.5s ease;
-      transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-      h3{
-        color: transparent;
-        left: 500px;
-        -webkit-transition: visibility 0.5 ease left 1s ease;
-        transition: visibility 0.5 ease left 1s ease;
-      }
-      svg{
-        -webkit-animation: rotation 12s infinite linear;
-                animation: rotation 12s infinite linear;
-      }
-      & + .txt{
-          position: fixed;
-          top: 190px;
-          text-align: center;
-          line-height: 1.5rem;
-          z-index: 9999;
-          -webkit-animation: translateright 1s ease forwards;
-                  animation: translateright 1s ease forwards;
-      }
-    }
-    &.close{
-      -webkit-transform: scale(1);
-              transform: scale(1);
-      -webkit-transition: -webkit-transform 0.5s 0.1s ease;
-      transition: -webkit-transform 0.5s 0.1s ease;
-      transition: transform 0.5s 0.1s ease;
-      transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
-      & + .txt{
-          top: 190px;
-          text-align: center;
-          line-height: 1.5rem;
-          z-index: 9999;
-          -webkit-animation: translateleft 1s ease forwards;
-                  animation: translateleft 1s ease forwards;
-      }
-      h3{
-
-
-        -webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
-        transition: color 0.5s 0.5s ease, left 0.5s ease;
-      }
-      &:hover{
-        -webkit-transition: -webkit-transform 0.5s ease!important;
-        transition: -webkit-transform 0.5s ease!important;
-        transition: transform 0.5s ease!important;
-        transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
-        -webkit-transform: scale(0.9)!important;
-                transform: scale(0.9)!important;
-      }
-    }
-  }
+#start{
+  width: 100%;
 }
 
 .card{
   width: calc((100% / 3));
   line-height: 0.8rem!important;
   .card-header{
-    margin-top: 10px;
+    margin-top: 5px;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
+    -webkit-box-align: baseline;
+        -ms-flex-align: baseline;
+            align-items: baseline;
     & > div{
       margin-right: 5px;
     }
   }
 }
-
-
-@media screen and (max-width: 960px) {
-  .works-mea{
-    & > div:last-child{
-      display: none;
-    }
-  }
-  .card{
-    width: calc((100% / 2) - 5px );
-  }
-
-}
-
-@media screen and (max-width: 600px) {
-  .works-mea{
-    & > div:nth-child(2){
-      display: none;
-    }
-  }
-  .card{
-    width: 100%;
-  }
-}

user/themes/gilles_acezat/scss/theme/item.scss

@@ -2,23 +2,29 @@ body{
   #page-wrapper.item{
     margin: 0 10px;
   .contact{
-    .txt{display: none}
+    .txt{
+      display: none
+    }
   }
     #start{
-      margin-top: 112px;
+      margin-top: 5rem;
     }
-    #body-wrapper.blog-listing{
+    #body-wrapper.blog-listing {
       .img-card{
-        width: calc((100% / 3) - 6.5px);
+        width: calc( (100vw / 3 - calc( 41px / 3 ) ) );
         margin-bottom: 10px;
       }
       .header-item{
         position: relative;
-        margin-bottom: 20px;
-        padding-top: 20px;
+        margin-bottom: 1.5rem;
+        padding-top: 1.5rem;
         .title{
+          display: -webkit-inline-box;
+          display: -ms-inline-flexbox;
           display: inline-flex;
-          align-items: baseline;
+          -webkit-box-align: baseline;
+              -ms-flex-align: baseline;
+                  align-items: baseline;
           h2{
             margin-right: 5px;
             text-transform: uppercase;
@@ -39,7 +45,8 @@ body{
           height: 100%;
           position: absolute;
           top: calc( 50% + 10px );
-          transform: translateY(-50%);
+          -webkit-transform: translateY(-50%);
+                  transform: translateY(-50%);
           right: 0px;
           .btn{
               display: block;
@@ -47,7 +54,8 @@ body{
               height: 100%;
           .btn-info{
             position: absolute;
-            transform: rotate(-15deg);
+            -webkit-transform: rotate(-15deg);
+                    transform: rotate(-15deg);
             margin-left: 40px;
             margin-top: 20px;
           }
@@ -68,7 +76,8 @@ body{
         margin-bottom:5px;
       }
       p{
-        transform: rotate(-10deg);
+        -webkit-transform: rotate(-10deg);
+                transform: rotate(-10deg);
       }
     }
   }
@@ -105,7 +114,8 @@ body{
           .prev-next{
             width: calc((100%) - 15px);
             position: relative;
-            transform: translateY(0%);
+            -webkit-transform: translateY(0%);
+                    transform: translateY(0%);
             .btn{
               .btn-info{
                   display: none;

user/themes/gilles_acezat/scss/theme/mobile.scss

@@ -0,0 +1,36 @@
+@media screen and (max-width: 960px) {
+  .works-mea{
+    & > div:last-child{
+      display: none;
+    }
+  }
+  .card{
+    width: calc((100% / 2) - 5px )!important;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  header{
+    .head{
+      padding: 0!important;
+    }
+    h1{
+      font-size: 2.5rem!important;
+      line-height: 5rem!important;
+      -webkit-text-stroke: 1px black!important;
+    }
+    h2{
+      font-size: 1.5rem;
+      line-height: 0rem!important;
+      margin: -0.7rem 0 0 0!important;
+    }
+  }
+  .works-mea{
+    & > div:nth-child(2){
+      display: none;
+    }
+  }
+  .card{
+    width: 100%!important;
+  }
+}

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

@@ -24,8 +24,8 @@
         {% do assets.addJs('jquery', 101) %}
         {% do assets.addJs('theme://js/jquery.easing.1.3.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/imagesloaded.pkgd.min.js', {group:'bottom'}) %}
+        {% 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/multipleFilterMasonry.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/jquery.mCustomScrollbar.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/jquery.mousewheel.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
@@ -37,7 +37,6 @@
 {% endblock head %}
 </head>
 
-
 <body id="top" class="{{page.template}}">
     <div id="page-wrapper" class=" {{page.template}}">
     {% block header %}

user/themes/gilles_acezat/templates/partials/blog-item.html.twig

@@ -1,11 +1,5 @@
   {% if not hero_image_name %}
-
-
-
   <div class="header-item">
-
-
-
       <div class="title">
           {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
           {% if page.header.subtitle %}
@@ -19,7 +13,6 @@
       </div>
   {% endif %}
 
-
   <div class="content">
     <div class="txt">
       {{ page.content|raw }}
@@ -41,7 +34,6 @@
         {% endfor %}
       </span>
       {% endif %}
-
       <span class="blog-date">
         <time class="dt-published" datetime="{{ page.date|date("c") }}">
           {{ page.prevSibling.date|date("Y") }}
@@ -49,19 +41,33 @@
       </span>
       </div>
       <img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
-
     </a>
     {% endif %}
 
     {% if page.isLast %}
     {% set parent = page.parent %}
-      {% for item in parent.collection.slice(0, 1) %}
-        <a class="cc" href="{{item.url}}">
-          <div class="btn-info">
-            <span class="title">Home</span>
-          </div>
-          <img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
-        </a>
+      {% for first_item in parent.collection.slice(0, 1) %}
+
+      <a class="btn" href="{{ first_item.url }}">
+        <div class="btn-info">
+        <span class="title">{{ first_item.title }}</span>
+        {% if first_item.taxonomy.category %}
+        <span class="tags">
+          {% for category in first_item.taxonomy.category %}
+          {{ category }}
+          {% endfor %}
+        </span>
+        {% endif %}
+
+        <span class="blog-date">
+          <time class="dt-published" datetime="{{ first_item.date|date("c") }}">
+            {{ first_item.date|date("Y") }}
+          </time>
+        </span>
+        </div>
+        <img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
+      </a>
+
     {% endfor %}
     {% endif %}
 
@@ -77,7 +83,7 @@
 </div>
 
   <div class="top">
-    <a href="#page-wrapper">
+    <a href="">
       <img src="user/themes/gilles_acezat/images/arrow-top.svg" alt="">
       <p>top</p>
     </a>

user/themes/gilles_acezat/templates/partials/blog-list-item.html.twig

@@ -1,5 +1,5 @@
 {% for category in page.taxonomy.category %}
-  <div class="card {{ category }}">
+  <div class="card" data-filter ="{{category}}">
 
       {% set image = page.media.images|first %}
       {% if image %}

user/themes/gilles_acezat/templates/partials/blog/category.html.twig

@@ -1,7 +1,7 @@
 {% if page.taxonomy.category %}
 <span class="category">
     {% for category in page.taxonomy.category %}
-    <a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-category" href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}#body-wrapper">{{ category }}</a>
+    <a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-category" href="{{page.url}}">{{ category }}</a>
     {% endfor %}
 </span>
 {% endif %}

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

@@ -1,7 +1,7 @@
 {% if page.taxonomy.tag %}
 <span class="tags">
     {% for tag in page.taxonomy.tag %}
-    <a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-tag" href="{{ blog.url|rtrim('/') }}/tag{{ config.system.param_sep }}{{ tag }}#body-wrapper">{{ tag }}</a>
+    <a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-tag" href="{{page.url}}">{{ tag }}</a>
     {% endfor %}
 </span>
 {% endif %}

user/themes/gilles_acezat/templates/partials/taxonomylist.html.twig

@@ -5,8 +5,7 @@
         {% set label_class = uri.param(taxonomy) == tax ? 'label-primary' : 'label-secondary' %}
         <div data-toggle="buttons" class="btn-group">
           <label class="btn btn-default">
-            <input type="checkbox" value="{{ tax }}" >
-            {{tax}}
+            <a href="#" data-filter="{{ tax }}">{{tax}}</a>
           </label>
         </div>
     {% endfor %}