masonry

.htaccess

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

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

@@ -2,6 +2,11 @@
 title: 'Projet N°1'
 media_order: 'ouvrage Edith.jpg,affiche_grainesdelecteurs_2014.jpg'
 mea: true
+taxonomy:
+    category:
+        - Éditions
+    tag:
+        - mea
 categories: test
 ---
 

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

@@ -5,6 +5,8 @@ mea: true
 taxonomy:
     category:
         - Éditions
+    tag:
+        - 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.

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

@@ -1,5 +1,10 @@
 ---
 title: 'projet n°4'
+taxonomy:
+    category:
+        - Éditions
+    tag:
+        - 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.

user/themes/gilles_acezat/js/site.js

@@ -1,59 +1,63 @@
-var isTouch = window.DocumentTouch && document instanceof DocumentTouch;
+var $cards = $('#items .full-works');
+var $card = $('#items .card');
+var $cat = $('.cat-list .cat a');
 
-function scrollHeader() {
+function masonry() {
-    // Has scrolled class on header
+  var $grid = $cards.masonry({
-    var zvalue = $(document).scrollTop();
+    itemSelector: '.card',
-    if ( zvalue > 75 )
+    columnWidth: '.card',
-        $("#header").addClass("scrolled");
+    percentPosition: true,
-    else
+    transitionDuration: '0.2s'
-        $("#header").removeClass("scrolled");
+  });
+
+  $grid.imagesLoaded().progress( function() {
+    $grid.masonry();
+  });
 }
 
-function parallaxBackground() {
+function isotype() {
-    $('.parallax').css('background-positionY', ($(window).scrollTop() * 0.3) + 'px');
+  var $grid = $cards.isotope({
+    itemSelector: '.card',
+    layoutMode: 'fitRows'
+  });
+
+  $cat.on( 'click', function(e) {
+    e.preventDefault();
+    var filterValue = $( this ).attr('data-filter');
+    filterValue = filterFns[ filterValue ] || filterValue;
+    $grid.isotope({ filter: filterValue });
+  });
+
 }
 
-jQuery(document).ready(function($){
+function card(){
+  var $item = $('.card')
+  console.log($item);
+}
 
-    scrollHeader();
+function ajax() {
+    var form = $('#ajax-test-form');
+    form.submit(function(e) {
+        // prevent form submission
+        e.preventDefault();
 
-    // Scroll Events
+        // submit the form via Ajax
-    if (!isTouch){
+        $.ajax({
-        $(document).scroll(function() {
+            url: form.attr('action'),
-            scrollHeader();
+            type: form.attr('method'),
-            parallaxBackground();
+            dataType: 'html',
+            data: form.serialize(),
+            success: function(result) {
+                // Inject the result in the HTML
+                $('#form-result').html(result);
+            }
         });
-    };
-
-    // Touch scroll
-    $(document).on({
-        'touchmove': function(e) {
-            scrollHeader(); // Replace this with your code.
-        }
     });
 
-    //Smooth scroll to start
+}
-    $('#to-start').click(function(){
+jQuery(document).ready(function($){
-        var start_y = $('#start').position().top;
+  masonry();
-        var header_offset = 45;
+  // card();
-        window.scroll({ top: start_y - header_offset, left: 0, behavior: 'smooth' });
+  // ajax();
-        return false;
+  // isotype();
-    });
-
-    //Smooth scroll to top
-    $('#to-top').click(function(){
-        window.scroll({ top: 0, left: 0, behavior: 'smooth' });
-        return false;
-    });
-
-    // Responsive Menu
-    $('#toggle').click(function () {
-        $(this).toggleClass('active');
-        $('#overlay').toggleClass('open');
-        $('body').toggleClass('mobile-nav-open');
-    });
-
-    // Tree Menu
-    $(".tree").treemenu({delay:300});
-
 });

user/themes/gilles_acezat/scss/theme.scss

@@ -9,6 +9,7 @@
 
 @import 'theme/all';
 @import 'theme/header';
-@import 'theme/home'; 
+@import 'theme/home';
 @import 'theme/blog';
+@import 'theme/item';
 @import 'theme/footer';

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

@@ -1,7 +1,6 @@
 .card{
   width: calc(100% / 3);
-  height: 100%;
+  padding: 0 10px;
-  padding: 0 5px;
   .card-header{
     display: inline-flex;
     & > div{
@@ -15,3 +14,35 @@
     }
   }
 }
+
+#items{
+  .full-works{
+    width: 100%;
+  }
+  .card{
+    margin-bottom: 20px;
+    min-width: 200px;
+  }
+}
+
+#body-wrapper.blog-listing{
+  border-top: 1px solid black;
+  padding-top: 20px;
+  #items{
+    .content-title{
+      display: inline-flex;
+      align-items: baseline;
+    }
+    .e-content{
+      width: calc(33% * 2);
+      column-count: 2;
+      margin: 20px  0;
+      & > p{
+      }
+    }
+    .top{
+      text-align: center;
+      margin-bottom: 20px;
+    }
+  }
+}

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

@@ -1,84 +1,85 @@
-header{
+// home
-  h1{
+body{
-    font-size: 11.2vw;
+  &> .blog{
-    line-height: 7vw!important;
+    header{
-  }
+      width: 100%;
-  h2{
+      height: 100vh;
-    font-size: 3.7vw;
-  }
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  nav{
-    position: relative;
-    height: 100%;
-    .logo{
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-  .contact{
-    position: fixed;
-    top: 50px;
-    right: 50px;
-    transform: scale(1);
-    transition: transform 0.5s ease;
-    cursor: pointer;
-    &:hover{
-      transition: transform 0.5s ease;
-      transform: scale(0.9);
-    }
-    svg{
-      animation: rotation 6s infinite linear;
-      width: 90.4px;
-      height: 87.45px;
-    }
-    h3{
-      transform: rotate(35deg);
-    }
-    p{
-      display: none;
-    }
-  }
-  & > section{
-    height: 100%;
-    &.works-mea{
-      height: auto!important;
       display: inline-flex;
-      flex-wrap: wrap;
+      flex-direction: column;
-      margin-bottom: 10px;
+      & > section{
-      .card{
+        position: relative;
-        line-height: 0.8!important;
+        height: 50vh;
-        .card-header{
+        min-height: 250px;
-          margin-top: 10px;
+        &.works-mea{
+          display: inline-flex;
+          flex-wrap: wrap;
+          // margin-bottom: 70px;
+          align-items: flex-end;
+          height: 100%;
+          .card{
+            line-height: 0.8!important;
+            .card-header{
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+      h1{
+        font-size: 11.2vw;
+        line-height: 7vw!important;
+      }
+      h2{
+        font-size: 3.7vw;
+      }
+      nav{
+        margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
+        transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
+      }
+      .scroll{
+        width: 50px;
+        height: 15px;
+        margin: 0 auto 10px auto;
+        overflow: hidden;
+        position: relative;
+        & > p:nth-child(1){
+          text-align: center;
+          position: absolute;
+          top: -20px;
+          animation: translatep1 2s infinite linear;
+        }
+        & > p:nth-child(2){
+          text-align: center;
+          position: absolute;
+          top: -20px;
+          animation: translatep1 2s infinite linear;
+          animation-delay: 1s;
         }
       }
     }
   }
-  h2{
+}
-    margin-left: 10px;
+
-  }
+
-  .scroll{
+// page
-    width: 50px;
+body{
-    height: 40px;
+  & > .item{
-    margin: 0 auto 10px auto;
+    header{
-    overflow: hidden;
+      height: 100px;
-    position: relative;
+      position: relative;
-    & > p:nth-child(1){
+      nav{
-      text-align: center;
+        position: absolute;
-      position: absolute;
+        margin-top: 50px; /* poussé de la moitié de hauteur de viewport */
-      top: -20px;
+        transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
-      animation: translatep1 2s infinite linear;
+      }
-    }
+      h1{
-    & > p:nth-child(2){
+        color: black;
-      text-align: center;
+      }
-      position: absolute;
+      h2{
-      top: -20px;
+        display: none;
-      animation: translatep1 2s infinite linear;
+      }
-      animation-delay: 1s;
+      .scroll{
+        display: none;
+      }
     }
   }
 }

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

@@ -3,11 +3,23 @@ h1, h2{
   font-weight: normal;
 }
 
-h1{
+body{
-  font-size: $fh1;
+  &>.blog{
-  -webkit-text-stroke:.1rem #111;
+    h1{
-  color: transparent;
+      font-size: $fh1;
-  line-height: 7rem;
+      -webkit-text-stroke:.1rem #111;
+      color: transparent;
+      line-height: 7rem;
+    }
+  }
+}
+
+body{
+  &>.item{
+    h1{
+      font-size: $fh2;
+    }
+  }
 }
 
 h2{
@@ -21,7 +33,7 @@ h3{
 }
 
 h5{
-  font-size: 1rem;
+  font-size: $fh5;
   font-family: $bold;
   font-weight: normal;
 }
@@ -55,6 +67,10 @@ header{
   .card-category{
       font-family: $italic;
       font-weight: normal;
+      font-size: $fs;
+  }
+  .card-date{
+    font-size: $fs;
   }
   .card-footer{
     span{
@@ -72,6 +88,7 @@ header{
 
 .scroll{
   p{
+    font-size: $fs;
     font-family: $bold;
     font-weight: normal;
   }
@@ -104,3 +121,12 @@ header{
     }
   }
 }
+
+
+body{
+  & > .item{
+    h2{
+      font-size: $fh2-i;
+    }
+  }
+}

user/themes/gilles_acezat/scss/theme/_variables.scss

@@ -11,8 +11,9 @@ $fh1: 11rem;
 $fh2:3rem;
 $fh2-i: 1.3rem;
 $fh3: 1rem;
+$fh5:0.8rem;
 $fp: 1rem;
-$fs:0.9rem;
+$fs:0.8rem;
 // interline
 
 //interlettre

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

@@ -1,3 +1,32 @@
 body{
   padding: 0 2%;
 }
+
+header{
+  .contact{
+    position: fixed;
+    top: 50px;
+    right: 50px;
+    transform: scale(1);
+    transition: transform 0.5s ease;
+    cursor: pointer;
+    &:hover{
+      transition: transform 0.5s ease;
+      transform: scale(0.9);
+    }
+    svg{
+      animation: rotation 6s infinite linear;
+      width: 90.4px;
+      height: 87.45px;
+    }
+    h3{
+      transform: rotate(35deg);
+    }
+    p{
+      display: none;
+    }
+  }
+  h2{
+    margin-left: 10px;
+  }
+}

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

@@ -6,16 +6,6 @@
 {% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true)  %}
 {% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
 
-{% block stylesheets %}
-    {% do assets.addCss('theme://css/bricklayer.css') %}
-    {{ parent() }}
-{% endblock %}
-
-{% block javascripts %}
-    {{ parent() }}
-    {% do assets.add('theme://js/bricklayer.min.js') %}
-    {% do assets.add('theme://js/scopedQuerySelectorShim.min.js') %}
-{% endblock %}
 
 {% block body %}
     <section id="body-wrapper">
@@ -58,8 +48,5 @@
         {% endembed %}
         </section>
     </section>
-    <script>
+
-        //Bricklayer
-        var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
-    </script>
 {% endblock %}

user/themes/gilles_acezat/templates/modular.html.twig

@@ -6,28 +6,6 @@
 
 {% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
 
-{% block javascripts %}
-    {% if show_onpage_menu %}
-        {% do assets.add('theme://js/singlepagenav.min.js') %}
-    {% endif %}
-    {{ parent() }}
-{% endblock %}
-
-{% block bottom %}
-    {{ parent() }}
-    {% if show_onpage_menu %}
-        <script>
-        // singlePageNav initialization & configuration
-        $('ul.navigation').singlePageNav({
-            offset: $('#header').outerHeight(),
-            filter: ':not(.external)',
-            updateHash: true,
-            currentClass: 'active'
-        });
-        </script>
-    {% endif %}
-{% endblock %}
-
 {% block header_navigation %}
     {% if show_onpage_menu %}
         <ul class="navigation">

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

@@ -22,7 +22,9 @@
 
     {% block javascripts %}
         {% do assets.addJs('jquery', 101) %}
-        {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/imagesloaded.pkgd.min.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/isotope.pkgd.min.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/masonry.pkgd.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
     {% endblock %}
     {{ assets.js()|raw }}
@@ -30,23 +32,14 @@
 {% endblock head %}
 </head>
 <body id="top">
-    <div id="page-wrapper">
+    <div id="page-wrapper" class="{{page.template}}">
 
     {% block header %}
         <header>
             <section class="container {{ grid_size }}">
                 <nav class="navbar">
-                    <section class="navbar-section logo">
+                  <a href="/"><h1>{{site.title|capitalize}}</h1>
-                      <a href="/"><h1>{{site.title|capitalize}}</h1></a>
+                  <h2>{{site.header.status|upper}}</h2></a>
-                      <h2>{{site.header.status|upper}}</h2>
-                    </section>
-                    <section class="navbar-section desktop-menu">
-
-                        {% if config.plugins.login.enabled and grav.user.username %}
-                            <span class="login-status-wrapper"><i class="fa fa-user"></i> {% include 'partials/login-status.html.twig' %}</span>
-                        {% endif %}
-
-                    </section>
                 </nav>
                 <div class="contact">
                   <svg>

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

@@ -1,7 +1,3 @@
-
-
-<div class="content-item h-entry">
-
   {% if not hero_image_name %}
       <div class="content-title text-center">
           {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
@@ -62,16 +58,18 @@
 
   <div class="e-content">
       {{ page.content|raw }}
-      {% set image = page.media.images|first %}
-      {% if image %}
-          {{ image.cropZoom(800,400).html }}
-      {% endif %}
   </div>
 
+  <div class="img">  
+  {% set image = page.media.images|first %}
+  {% if image %}
+  {{ image.cropZoom(800,400).html }}
+  {% endif %}
+</div>
+
   <div class="top">
     <a href="#page-wrapper">
       <img src="" alt="">
       <p>top</p>
     </a>
   </div>
-</div>

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

@@ -1,33 +1,36 @@
-<div class="card">
+{% for category in page.taxonomy.category %}
-    {% set image = page.media.images|first %}
+  <div class="card {{ category }}" data-category= "{{ category }}">
-    {% if image %}
-    <div class="card-image">
-        <a href="{{ page.url }}">{{ image.html }}</a>
-    </div>
-    {% endif %}
 
-    <div class="card-header">
+      {% set image = page.media.images|first %}
-        <div class="card-title">
+      {% if image %}
-        {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
+      <div class="card-image">
-        </div>
+          <a href="{{ page.url }}">{{ image.html }}</a>
+      </div>
+      {% endif %}
 
-
+      <div class="card-header">
-        {% if page.taxonomy.category %}
+          <div class="card-title">
-          <div class="card-category">
+          {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
-            {% include 'partials/blog/category.html.twig' %}
           </div>
-      {% endif %}
 
-      {% if page.date %}
-      <div class="card-date">
-        {% include 'partials/blog/date.html.twig' %}
-      </div>
-      {% endif %}
-    </div>
 
-    {% if page.taxonomy.tag %}
+          {% if page.taxonomy.category %}
-      <div class="card-footer">
+            <div class="card-category">
-        {% include 'partials/blog/taxonomy.html.twig' %}
+              {% include 'partials/blog/category.html.twig' %}
+            </div>
+        {% endif %}
+
+        {% if page.date %}
+        <div class="card-date">
+          {% include 'partials/blog/date.html.twig' %}
+        </div>
+        {% endif %}
       </div>
-  {% endif %}
+
-</div>
+      {% if page.taxonomy.tag %}
+        <div class="card-footer">
+          {% include 'partials/blog/taxonomy.html.twig' %}
+        </div>
+    {% endif %}
+  </div>
+{% endfor %}

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

@@ -1,5 +1,5 @@
 {% if page.taxonomy.category %}
     {% for category in page.taxonomy.category %}
-    <a href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}">{{ category }}</a>
+    <a href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}" data-filter="{{ category }}" >{{ category }}</a>
     {% endfor %}
 {% endif %}