css

user/themes/gilles_acezat/images/arrow-top.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   width="28.016001"
+   height="67.656998"
+   viewBox="0 0 7.4125668 17.900914"
+   version="1.1"
+   id="svg1128"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="arrow-top.svg">
+  <defs
+     id="defs1122" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="176.08617"
+     inkscape:cy="56.734642"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1125">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-279.09905)">
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 3.6527257,296.99997 v -17.63979 m 3.64617,6.12178 -3.64617,-6.12144 -3.53818997,6.12144"
+       id="path1716"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+  </g>
+</svg>

user/themes/gilles_acezat/images/arrow.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   width="419.60901"
+   height="108.986"
+   viewBox="0 0 111.02155 28.83588"
+   version="1.1"
+   id="svg1128"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="arrow.svg">
+  <defs
+     id="defs1122" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="176.08617"
+     inkscape:cy="56.734642"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1125">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-268.16409)">
+    <g
+       id="g1693">
+      <path
+         inkscape:connector-curvature="0"
+         id="path2602"
+         d="M 0,282.72013 H 110.95891 L 80.568843,268.2957"
+         style="display:inline;fill:none;stroke:#000000;stroke-width:0.29156002px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         sodipodi:nodetypes="ccc" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path2604"
+         d="M 110.95891,282.72013 80.530163,296.86781"
+         style="display:inline;fill:none;stroke:#000000;stroke-width:0.29156002px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>

user/themes/gilles_acezat/js/site.js

@@ -1,6 +1,7 @@
 var $cards = $('#items .full-works');
 var $card = $('#items .card');
 var $cat = $('.cat-list .cat a');
+var $img = $('.item #items .img');
 
 function masonry() {
   var $grid = $cards.masonry({
@@ -10,9 +11,21 @@ function masonry() {
     transitionDuration: '0.2s'
   });
 
+  var $grid2 = $img.masonry({
+    itemSelector: '.img-card',
+    columnWidth: '.img-card',
+    percentPosition: true,
+    transitionDuration: '0.2s'
+  });
+
   $grid.imagesLoaded().progress( function() {
     $grid.masonry();
   });
+
+  $grid2.imagesLoaded().progress( function() {
+    $grid2.masonry();
+  });
+
 }
 
 function isotype() {
@@ -55,8 +68,17 @@ function ajax() {
     });
 }
 
+function contact() {
+  var $contact = $('header .contact');
+
+  $contact.on('click',function() {
+    
+  })
+}
+
 jQuery(document).ready(function($){
   masonry();
+  contact();
   // card();
   // ajax();
   // isotype();

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

@@ -1,4 +1,21 @@
 #items{
+  .cat-list{
+    padding: 0 5px;
+    ul{
+      li{
+        display: flex;
+        &::after{
+          width: 5px;
+          content: " ";
+        }
+        &:hover{
+          &::after{
+            content: "\002022";
+          }
+        }
+      }
+    }
+  }
   .full-works{
     width: 100%;
   }

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

@@ -57,11 +57,11 @@ body{
 body{
   & > .item{
     header{
-      height: 100px;
+      height: 130px;
       position: relative;
       nav{
         position: absolute;
-        margin-top: 50px; /* poussé de la moitié de hauteur de viewport */
+        margin-top: 65px; /* poussé de la moitié de hauteur de viewport */
         transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
       }
       h1{

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

@@ -121,7 +121,7 @@ body{
     .tags{
         font-family: $medium;
         font-weight: normal;
-        font-size: $fs-i;
+        font-size: 0.8rem;
         text-transform: capitalize;
         a{
           color: $grey;
@@ -134,3 +134,26 @@ body{
     }
   }
 }
+
+.prev-next{
+  .title{
+    font-family: $bold;
+    font-size: $fs;
+  }
+  .tags{
+    font-family: $italic;
+    font-size: $fs!important;
+  }
+  .blog-date{
+    time{
+      font-family: $italic;
+      font-size: $fs!important;
+    }
+  }
+}
+
+.top{
+  p{
+    font-size: 0.8rem;
+  }
+}

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

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

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

@@ -4,9 +4,10 @@ body{
 
 header{
   .contact{
+    z-index: 9999;
     position: fixed;
-    top: 50px;
-    right: 50px;
+    top: 20px;
+    right: 40px;
     transform: scale(1);
     transition: transform 0.5s ease;
     cursor: pointer;

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

@@ -3,6 +3,15 @@ body{
     #body-wrapper.blog-listing{
       border-top: 1px solid black;
       padding-top: 20px;
+      .img-card{
+        width: 50%;
+        &:nth-child(odd){
+          padding-right: 10px;
+        }
+        &:nth-child(even){
+          padding-left: 10px;
+        }
+      }
       .header-item{
         position: relative;
         .title{
@@ -20,21 +29,40 @@ body{
         }
         .content{
           width: calc((100% / 3) * 2);
+          margin: 20px  0;
           .txt{
             column-count: 2;
-            margin: 20px  0;
           }
         }
         .prev-next{
-          position: absolute;
           width: calc(100% / 3);
+          padding-left: 20px;
+          position: absolute;
           top: 0;
           right: 0;
+          .btn-info{
+            position: absolute;
+            transform: rotate(-15deg);
+            margin-left: 40px;
+            margin-top: 20px;
+          }
+          img{
+            float: right;
+            width: 80%;
+          }
         }
-        .top{
-          text-align: center;
-          margin-bottom: 20px;
-        }
+      }
+    }
+    .top{
+      text-align: center;
+      margin: 20px auto 20px auto;
+      width: 50px;
+      img{
+        width: 20px;
+        margin-bottom:5px;
+      }
+      p{
+        transform: rotate(-10deg);
       }
     }
   }

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

@@ -5,8 +5,8 @@
           {% if page.header.subtitle %}
           <h3 >{{ page.header.subtitle }}</h3>
           {% endif %}
-          {% include 'partials/blog/date.html.twig' %}
           {% include 'partials/blog/category.html.twig' %}
+          {% include 'partials/blog/date.html.twig' %}
       </div>
       <div class="tags">
         {% include 'partials/blog/taxonomy.html.twig' %}
@@ -24,6 +24,7 @@
 
     {% if not page.isLast %}
     <a class="btn" href="{{ page.prevSibling.url }}">
+      <div class="btn-info">
 
       <span class="title">{{ page.prevSibling.title }}</span>
 
@@ -40,41 +41,38 @@
           {{ page.prevSibling.date|date("Y") }}
         </time>
       </span>
+      </div>
+      <img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
+
     </a>
     {% endif %}
 
-    {% if not page.isFirst %}
-    <a class="btn" href="{{ page.nextSibling.url }}">
-      <span class="title">{{ page.nextSibling.title }}</span>
+    {% if page.isLast %}
 
-      {% if page.nextSibling.taxonomy.category %}
-      <span class="tags">
-        {% for category in page.nextSibling.taxonomy.category %}
-        {{ category }}
-        {% endfor %}
-      </span>
-      {% endif %}
+    <a class="cc" href="/">
+      <div class="btn-info">
 
-      <span class="blog-date">
-        <time class="dt-published" datetime="{{ page.date|date("c") }}">
-          {{ page.nextSibling.date|date("Y") }}
-        </time>
-      </span>
+      <span class="title">Home</span>
+
+      </div>
+      <img src="user/themes/gilles_acezat/images/arrow.svg" alt="">
     </a>
     {% endif %}
+
   </div>
 </div>
 
   <div class="img">
-  {% set image = page.media.images|first %}
-  {% if image %}
-  {{ image.cropZoom(800,400).html }}
-  {% endif %}
+  {% for image in page.media.images %}
+    <div class="img-card">
+     {{ image.html }}
+   </div>
+  {% endfor %}
 </div>
 
   <div class="top">
     <a href="#page-wrapper">
-      <img src="" alt="">
+      <img src="user/themes/gilles_acezat/images/arrow-top.svg" alt="">
       <p>top</p>
     </a>
   </div>