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

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

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

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({
+  var $grid = $cards.masonry({
-        itemSelector: '.card',
+      itemSelector: '.card',
-        columnWidth: '.card',
+      columnWidth: '.card',
-        percentPosition: true,
+      percentPosition: true,
-        gutter: 10,
+      gutter: 10,
-        transitionDuration: '0.2s'
+      isAnimated: true,
-    });
+      transitionDuration: '0.5s'
-    var $grid2 = $img.masonry({
+  });
-        itemSelector: '.img-card',
+
-        columnWidth: '.img-card',
+  var $grid2 = $img.masonry({
-        percentPosition: true,
+      itemSelector: '.img-card',
-        gutter: 10,
+      columnWidth: '.img-card',
-        transitionDuration: '0.2s'
+      percentPosition: true,
-    });
+      gutter: 10,
-    $grid.imagesLoaded().progress(function() {
+      transitionDuration: '0.2s'
-        $grid.masonry();
+  });
-    });
+
-    $grid2.imagesLoaded().progress(function() {
+  $(".cat-list .btn a").click(function(e) {
-        $grid2.masonry();
+    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');
+  var $card = $('#body > .card');
-
+  var $cat = $('.cat a');
-    $cards.multipleFilterMasonry({
+  var $img = $('#body .img');
-        itemSelector: '.card',
-        filtersGroupSelector: '.cat-list'
-    });
 }
 
 function contact() {
@@ -49,41 +67,41 @@ function contact() {
     })
 }
 
-function customscroll() {
+function customscroll($page_item) {
-  var $page = $('#page-wrapper.blog')
+  var $page = $('#page-wrapper.blog');
   var $page_item = $("body.blog #start, body.item");
 
-  $("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")
-              }
-          }
-      }
-  });
-
   $page_item.mCustomScrollbar({
     theme: "dark",
     scrollbarPosition: "outside",
     scrollInertia: 1000,
+    callbacks: {
+      onInit: function(){
+        $('.top').on('click', function() {
+          event.preventDefault()
+          $page_item.mCustomScrollbar('scrollTo',['top',null]);
+        });
+      }
+    }
   });
-}
 
-function scrolltop() {
+  $("body").mCustomScrollbar({
-  var $top = $('.top');
+      theme: "dark",
-
+      scrollbarPosition: "outside",
-  $top.on('click', function(e) {
+      callbacks: {
-    // e.preventDefault()
+        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);
+        }
+      }
+  });
 }
 
 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;
-    // line-height: 6.5rem;
-
   }
 
   100%{
     font-size: $min-h1;
-    -webkit-text-stroke : 0px;
+    -webkit-text-stroke : 0px black;
     color: black;
     line-height: 5rem;
   }
 }
 
-@keyframes translateY{
+@keyframes reducH{
   0%{
-    transform: translateY(0px);
+    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 black;
+    color: black;
+    line-height: 5rem;
+  }
+}
+
+@-webkit-keyframes translateY{
+  0%{
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
     opacity: 1;
   }
 
   100%{
-    transform: translateY(-20px);
+    -webkit-transform: translateY(-20px);
+            transform: translateY(-20px);
     opacity: 0;
   }
 }
 
+@keyframes translateY{
+  0%{
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+    opacity: 1;
+  }
+
+  100%{
+    -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 @@
   }
 }
 
-@keyframes ultranslate {
+@-webkit-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);
+  }
+}
+
+@keyframes ultranslate {
+  0%{
+    opacity: 0;
+    -webkit-transform: translateX(0px);
+            transform: translateX(0px);
+  }
+  100%{
+    opacity: 1;
+    -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;
       }
     }
   }
 }
-
+.blog{
-#items{
+  #items{
-  .full-works{
-    width: 100%;
-    margin-top: 30px;
-  }
-  .card{
     opacity: 0;
-    margin-bottom: 10px;
+    .full-works{
-    min-width: 200px;
+      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 {
+  .blog {
-        header {
+    margin: 0 10px;
-            height:100vh;
+      header {
-            width: 100%;
+          height:100vh;
-            display: inline-flex;
+          width: calc(100% - 20px);
-            flex-direction: column;
+          display: -webkit-inline-box;
-            align-content: space-around;
+          display: -ms-inline-flexbox;
-            & > div{
+          display: inline-flex;
-              position: fixed;
+          -webkit-box-orient: vertical;
-              &.head{
+          -webkit-box-direction: normal;
-                width: 100%;
+              -ms-flex-direction: column;
-                z-index: 999;
+                  flex-direction: column;
-                padding-top: 70px;
+          -ms-flex-line-pack: distribute;
-                h2 {
+              align-content: space-around;
-                  margin-left: 8px;
+          & > div{
-                  position: absolute;
+            position: fixed;
-                }
+            width: calc(100% - 20px);
-                &::after {
+            &.head{
-                  display: block;
+              z-index: 999;
-                  content: " ";
+              padding-top: 4vw;
-                  width: 0%;
+              h2 {
-                  height: 1px;
+                margin-left: 8px;
-                  background: black;
+                position: absolute;
-                }
+                left: 0;
-
               }
-              &.works-mea {
+              &::after {
-                display: -webkit-inline-box;
+                display: block;
-                display: -ms-inline-flexbox;
+                content: " ";
-                display: inline-flex;
+                width: 0%;
-                align-self: flex-end;
+                height: 1px;
-                height: calc(100% - 20px);
+                background: black;
-                align-items: flex-end;
-                .card{
-                  &:nth-child(2){
-                    margin:0 10px;
-                  }
-                  &:not(:nth-child(2)){
-                    margin: 0;
-                  }
-                }
-              }
-              &.scroll{
-                width: 100%;
-                bottom: 0;
-                text-align: center;
               }
             }
+            &.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;
+                }
+              }
+            }
+            &.scroll{
+              bottom: 0;
+              text-align: center;
+            }
+          }
+      }
+      &.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;
+            }
+            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;
+            }
+          }
+        .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;
+          }
         }
-        &.down{
+        .scroll{
-          header{
+          opacity: 0;
-            height: 5rem;
+          -webkit-transition: all 1s ease;
-            .head{
+          transition: all 1s ease;
-              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%;
-              }
-            }
-          .card{
-            &:nth-child(1){
-              animation: translateY 1s ease forwards;
-            }
-            &:nth-child(2){
-              animation: translateY 1.3s ease forwards;
-            }
-            &:nth-child(3){
-              animation: translateY 1.6s ease forwards;
-            }
-          }
-          .scroll{
-            opacity: 0;
-            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 {
+  #page-wrapper.item {
-        header {
+    header {
-            border-bottom: 1px solid black;
+      border-bottom: 1px solid black;
-            position: fixed;
+      position: fixed;
-            height: 112px;
+      height: 5rem;
-            top: 0;
+      background: white;
-            left: 10px;
+      top: 0;
-            right: 10px;
+      left: 10px;
-            background: white;
+      right: 10px;
-            z-index: 999;
+      z-index: 999;
-            nav {
+      h1 {
-              margin-top: 25px;
+        color: black;
-            }
+        line-height: 5rem;
-
+      }
-            h1 {
+      h2, .scroll {
-                color: black;
+        display: none;
-            }
+      }
-
-            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-family: $bold;
-        font-size: $fh2-i;
+        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-family: $bold;
-  font-size: $fs-i;
+  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{
+#start{
-  .contact{
+  width: 100%;
-    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;
-      }
-    }
-  }
 }
 
 .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;
+        margin-bottom: 1.5rem;
-        padding-top: 20px;
+        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) %}
+      {% for first_item in parent.collection.slice(0, 1) %}
-        <a class="cc" href="{{item.url}}">
+
-          <div class="btn-info">
+      <a class="btn" href="{{ first_item.url }}">
-            <span class="title">Home</span>
+        <div class="btn-info">
-          </div>
+        <span class="title">{{ first_item.title }}</span>
-          <img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
+        {% if first_item.taxonomy.category %}
-        </a>
+        <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 }}" >
+            <a href="#" data-filter="{{ tax }}">{{tax}}</a>
-            {{tax}}
           </label>
         </div>
     {% endfor %}