with alex: fixed layout, somme typo, gif

.gitignore

@@ -1,2 +1,4 @@
 cache
 logs
+images
+user/pages

fixperms.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+sudo chown bach:http .
+sudo chown -R bach:http *
+sudo sh -c "find . -type f | xargs chmod 664"
+sudo sh -c "find ./bin -type f | xargs chmod 775"
+sudo sh -c "find . -type d | xargs chmod 775"
+sudo sh -c "find . -type d | xargs chmod +s"
+sudo sh -c"umask 0002"

user/pages/01.projets/FolioPoesie/FolioPoesie_00.jpg.meta.yaml

@@ -1,3 +0,0 @@
-title: My title
-alt_text: My Alt Text
-size: 1 # can be 1 for full width OR 2 for half width

user/pages/01.projets/FolioPoesie/FolioPoesie_01.jpg.meta.yaml

@@ -1,3 +0,0 @@
-title: My title
-alt_text: My Alt Text
-size: 2 # can be 1 for full width OR 2 for half width

user/pages/01.projets/FolioPoesie/FolioPoesie_02.jpg.meta.yaml

@@ -1,3 +0,0 @@
-title: My title
-alt_text: My Alt Text
-size: 2 # can be 1 for full width OR 2 for half width

user/pages/01.projets/FolioPoesie/FolioPoesie_03.jpg.meta.yaml

@@ -1,3 +0,0 @@
-title: My title
-alt_text: My Alt Text
-size: 1 # can be 1 for full width OR 2 for half width

user/pages/01.projets/FolioPoesie/FolioPoesie_04.jpg.meta.yaml

@@ -1,3 +0,0 @@
-title: My title
-alt_text: My Alt Text
-size: 2 # can be 1 for full width OR 2 for half width

user/pages/01.projets/FolioPoesie/FolioPoesie_05.jpg.meta.yaml

@@ -1,3 +0,0 @@
-title: My title
-alt_text: My Alt Text
-size: 2 # can be 1 for full width OR 2 for half width

user/pages/01.projets/FolioPoesie/FolioPoesie_06.jpg.meta.yaml

@@ -1,3 +0,0 @@
-title: My title
-alt_text: My Alt Text
-size: 1 # can be 1 for full width OR 2 for half width

user/pages/01.projets/FolioPoesie/projet.md

@@ -1,16 +0,0 @@
----
-title: Folio poésie
-subtitle: Xavier Barral / Gallimard jeunesse - 2012
-date: 01/01/2012
-visible: true
-home: true
-taxonomy:
-  category: projets
-  tag: [édition jeunesse, art, évènement]
----
-
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam,
-
-===
-
-ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere

user/pages/01.projets/Picasso/projet.md

@@ -1,12 +0,0 @@
----
-title: Picasso
-subtitle: Xavier Barral / Gallimard jeunesse - 2012
-date: 01/01/2012
-visible: true
-home: true
-taxonomy:
-  category: projets
-  tag: [édition, art, évènement]
----
-
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus

user/pages/01.projets/Squelettes/projet.md

@@ -1,14 +0,0 @@
----
-title: Histoires de squelettes
-subtitle: Xavier Barral / Gallimard jeunesse - 2012
-date: 01/01/2012
-visible: true
-home: true
-taxonomy:
-  category: projets
-  tag: [édition, art, évènement]
----
-
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur.

user/pages/01.projets/home.md

@@ -1,10 +0,0 @@
----
-title: Home
-menu : home
-content:
-  items:
-    @self.descendants
-  order:
-    by: date
-    dir: desc
----

user/pages/01.projets/projet2/projet.md

@@ -1,12 +0,0 @@
----
-title: Projet 2
-subtitle: Xavier Barral / Gallimard jeunesse - 2012
-date: 01/01/2012
-visible: true
-taxonomy:
-  category: projets
-  tag: [édition, art, évènement]
----
-
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere
-periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere

user/pages/01.projets/projet4/projet.md

@@ -1,11 +0,0 @@
----
-title: Projet4
-subtitle: Xavier Barral / Gallimard jeunesse - 2012
-date: 01/01/2012
-visible: true
-taxonomy:
-  category: projets
-  tag: [édition]
----
-
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et

user/pages/01.projets/projet5/projet.md

@@ -1,13 +0,0 @@
----
-title: Projet5
-subtitle: Xavier Barral / Gallimard jeunesse - 2012
-date: 01/01/2012
-visible: true
-taxonomy:
-  category: projets
-  tag: [édition]
----
-
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere
-Haec Scipionis oratio, quod senatus in urbe habebatur Pompeiusque aberat, ex ipsius ore Pompei mitti videbatur. Dixerat aliquis leniorem sententiam, ut primo M. Marcellus, ingressus in eam orationem, non oportere ante de ea re ad senatum referri, quam dilectus tota Italia habiti et exercitus conscripti essent, quo praesidio tuto et libere senatus, quae vellet, decernere auderet; ut M. Calidius, qui censebat, ut Pompeius in suas provincias proficisceretur, ne qua esset armorum causa: timere Caesarem ereptis ab eo duabus legionibus, ne ad ejus periculum reservare et retinere eas ad urbem Pompeius videretur; ut M. Rufus, qui sententiam Calidii paucis fere

user/pages/02.categories/categories.md

@@ -1,7 +0,0 @@
----
-title: Catégories
-menu: false
-content:
-  items:
-    '@page': '/projets'
----

user/pages/03.apropos/default.md

@@ -1,6 +0,0 @@
----
-title: À propos
-menu: À propos
----
-
-Hello :)

user/plugins/admin/themes/grav/css/chartist.min.css

@@ -77,7 +77,7 @@ $include-html-global-classes: $include-html-classes;
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 // $include-html-grid-classes: $include-html-classes;
-// $include-xl-html-grid-classes: false;
+$include-xl-html-grid-classes: true;
 
 // $row-width: rem-calc(1000);
 // $total-columns: 12;

user/themes/labonneadresse/js/dist/script.min.js

@@ -1,3 +1,4 @@
 
-jQuery(document).ready(function($){if($('body').is('.categories')){var $diapo=$('<div id="diaporama"></div>');$("#categories-content").before($diapo).children('section.projet-block').each(function(index,el){$(this).addClass('projet-'+index).hover(function(e){$diapo.children().removeClass('visible');var c=$(this).attr('class').match('projet-[0-9]+');console.log("class",c[0]);$diapo.children('.'+c[0]).addClass('visible');}).find('.projet-img').addClass('projet-'+index).appendTo($diapo);});$diapo.children('.projet-img').first().addClass('visible');}
+jQuery(document).ready(function($){$(window).scroll(function(){var topOfWindow=$(window).scrollTop();console.log('topOfWindow',topOfWindow);if(topOfWindow>100){$("#top-bar").addClass("reduced");}
+else{$("#top-bar").removeClass("reduced");}});if($('body').is('.categories')){var $diapo=$('<div id="diaporama"></div>');$("#categories-content").before($diapo).children('section.projet-block').each(function(index,el){$(this).addClass('projet-'+index).hover(function(e){$diapo.children().removeClass('visible');var c=$(this).attr('class').match('projet-[0-9]+');console.log("class",c[0]);$diapo.children('.'+c[0]).addClass('visible');}).find('.projet-img').addClass('projet-'+index).appendTo($diapo);});$diapo.children('.projet-img').first().addClass('visible');}
 var $grid=$('.grid').masonry({itemSelector:'.grid-block'});});

user/themes/labonneadresse/js/script.js

@@ -1,5 +1,17 @@
 jQuery(document).ready(function($) {
 
+  //window scrolls check
+  $(window).scroll(function() {
+      var topOfWindow = $(window).scrollTop();
+      console.log('topOfWindow',topOfWindow);
+      if (topOfWindow > 100) {
+          $("#top-bar").addClass("reduced");
+      }
+      else {
+          $("#top-bar").removeClass("reduced");
+      }
+  });
+
   // init categories content images behaviour
   if($('body').is('.categories')){
     var $diapo = $('<div id="diaporama"></div>');
@@ -21,8 +33,6 @@ jQuery(document).ready(function($) {
     $diapo.children('.projet-img').first().addClass('visible');
   }
 
-
-
   // init Masonry
   var $grid = $('.grid').masonry({
     itemSelector: '.grid-block'

user/themes/labonneadresse/labonneadresse.php

@@ -4,6 +4,6 @@ namespace Grav\Theme;
 
 use Grav\Common\Theme;
 
-class LAbonneadresse extends Theme {
+class Labonneadresse extends Theme {
 
 }

user/themes/labonneadresse/scss/_settings.scss

@@ -80,8 +80,8 @@ $include-html-global-classes: $include-html-classes;
 // $include-xl-html-grid-classes: false;
 
 //$row-width: rem-calc(2000);
-// $total-columns: 12;
-// $column-gutter: rem-calc(30);
+$total-columns: 24;
+$column-gutter: rem-calc(5);
 
 // c. Global
 // - - - - - - - - - - - - - - - - - - - - - - - - -

user/themes/labonneadresse/scss/styles.scss

@@ -1,19 +1,61 @@
 @import '../bower_components/foundation/scss/normalize.scss';
+$include-xl-html-grid-classes: true;
 @import '../bower_components/foundation/scss/foundation.scss';
 
-@import "settings";
+@import "_settings.scss";
+
+// $include-html-grid-classes: $include-html-classes;
+
+@import '../bower_components/foundation/scss/foundation/components/_global.scss';
+@import '../bower_components/foundation/scss/foundation/components/_grid.scss';
+
+
+$column-gutter: rem-calc(15);
 
 $green: rgb(0, 255, 0);
 
 $font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 
-body{font-family: $font;}
+@mixin fontbold{
+  // TODO : media query
+  font: $font; font-size:0.87em; font-weight:bold;
+}
+@mixin fontnormal{
+  // TODO : media query
+  font: $font; font-size:0.8em; font-weight:normal;
+}
+
+body{font-family: $font; letter-spacing: 1px;}
 
 h1,h2,h3,h4,h5,h6{font-family: $font;}
 
 a, a:hover{color:inherit;}
 
-.row.fullwidth{max-width:80vw;}
+// @media $large-up {
+//   .row.fullwidth{width:1200px;}
+// }
+
+#container{
+  display: block; position: relative;
+  min-height: 100vh;
+}
+
+
+@media #{$medium-up}{
+  .row{width:41rem;}
+}
+
+@media #{$large-up}{
+  .row{width:62rem;}
+}
+
+@media #{$xlarge-up}{
+  .row{width:83rem;max-width:83rem;}
+}
+
+// @media #{$xxlarge-up}{
+//   .row{width:125rem;max-width:125rem;}
+// }
 
 /*
   _    _                _
@@ -24,9 +66,13 @@ a, a:hover{color:inherit;}
  |_|  |_|\___|\__,_|\__,_|\___|_|
 */
 $headerborderH: 0.3em;
-$headerpaddingtopH:2em;
+$headerpaddingtopH:1.3em;
 $titleareaH: 10em;
-$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH;
+$titleareaHReduced: 5em;
+$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
+$footerheight: 5em;
+$centerpaddingbottom:$footerheight+1em;
+
 header#top-bar{
   position: fixed; top:0;
   width:100%;
@@ -35,24 +81,32 @@ header#top-bar{
 
   &:before{
     content:"";
+    background: transparent!important;
     border-top: $headerborderH solid $green;
     display: block;
     padding-bottom: $headerpaddingtopH;
-    background: transparent!important;
   }
 
+  >.bg{
+    background-color: rgba(255, 255, 255, 0.95);
+  }
   >.row{
-    background-color: rgba(255, 255, 255, 0.9);
     position:relative; display:block;
   }
 
   #title-area{
-    overflow: hidden;
+    // overflow: hidden;
     position:relative;
     height:$titleareaH;
+    padding:0.2em 0 0.7em;
+    transition: height 0.4s ease-in-out;
     h1{
-      height:100%;
-      a{display: block; height:100%;
+      font-size: 1em; margin: 0;
+      height:100%; min-height:$titleareaH - 2.4em;
+      overflow: hidden;
+      a{display: block;
+        // height:100%;
+        height:$titleareaH - 0.9em;
         background: transparent url("../images/logo.png") no-repeat center center;
         background-size: contain;}
     }
@@ -61,6 +115,18 @@ header#top-bar{
     }
   }
 
+  &.reduced{
+    #title-area{
+      // height:$titleareaH*0.4;
+
+      // @media screen and (min-width:$medium-breakpoint) {
+        height:$titleareaH*0.74;
+      // }
+      // TODO: a terminer diminuer plus le logo sur mobile
+
+    }
+  }
+
   h1, h2{
     text-align: center;
     a{
@@ -68,26 +134,40 @@ header#top-bar{
   }}
 
   .nav{
+    padding:0 0.7em;
     position:relative;
     height:100%;
     ul{padding: 0; margin: 0;}
     li{list-style: none;}
-    .wrapper{padding-top: $titleareaH/2-1.5em;}
+    // @include breakpoint(medium) {
+    @media screen and (min-width:$small-breakpoint) {
+      .wrapper{padding-top: $titleareaH/2-.5em;}
+    }
   }
 
   #left-nav{
+    // margin-left: -0.1rem;
+    a{@include fontbold;}
+    a:hover{@include fontbold; text-decoration: underline;}
   }
   #right-nav{
+    // margin-right: -0.1rem;
     text-align: right;
 
-    h4{font-size: 1em; margin:0; }
-    ul{background-color: #fff;}
+    h4{
+      @include fontbold; margin:0; line-height: 1.6;
+      a:hover{text-decoration: underline;}
+    }
+    ul{background-color: transparent;}
     li{
       line-height: 1;
       // &:not(.active){
         overflow: hidden; height:1px; transition: height 0.3s ease-in;
       // }
-      a{display:block;}
+      a{
+        display:block;
+        @include fontnormal;
+      }
       // &.active span{
       //   display:inline-block;
       //   position:relative;
@@ -108,6 +188,7 @@ header#top-bar{
       }
     }
   }
+
 }
 
 /*
@@ -120,15 +201,31 @@ header#top-bar{
 */
 div#center{
   padding-top:$centerpaddingtop;
+  padding-bottom: $centerpaddingbottom;
   .columns{
     padding: 0;
   }
 
+  p{
+    @include fontnormal;
+    span.stab{
+      display:inline-block; position:relative;
+      font-weight:bold;
+      &:after{
+        content: ""; height:0;
+        display: block; margin-top:-1em; //margin-bottom:.9em;
+        border-top:0.5em solid $green;
+        // transition:border-color 0.3s ease-in;}
+      }
+    }
+
+  }
+
   /*
   * LIST PROJET
   */
   .projet-block{
-    padding:1em;
+    padding:0.7em;
     text-align: center;
 
     a{display: block;}
@@ -136,13 +233,16 @@ div#center{
     header{
       position:relative;
       // margin-top:0;padding-top:0;
-      margin-top: -3em; padding-top: 3.5em;
-      transition:background-color 0.5s ease-in;}
+      margin-top: -3em; padding-top: 3.5em; padding-bottom: 0.7em;
+      transition:background-color 0.3s ease-in;}
+
     header>*{
       font-family: $font; text-align: center;
       padding:0; margin:0;}
     h1{
-      font-size: 1.3em;font-weight: bold; margin:0; line-height: 1; height:auto;
+      // font-size: 1em; font-weight: bold;
+      @include fontbold;
+      margin:0; line-height: 1; height:auto;
       display:inline-block; position:relative;
       &:after{
         content: ""; height:0;
@@ -150,12 +250,16 @@ div#center{
         border-top:0.5em solid $green;
         transition:border-color 0.3s ease-in;}
     }
-    h2{font-size: 1em;font-weight: normal; margin:-0.7em 0 0; line-height: 1;}
+    h2{@include fontnormal; margin:-0.4em 0 0; line-height: 1;}
 
     &.projet-block-text{
       text-align: left;
       h1{margin-bottom: 0.3em;}
-      h2{font-weight:bold;margin-bottom: 0.3em;}
+      h2{
+        // font-weight:bold;
+        @include fontbold;
+        margin-bottom: 0.3em;
+      }
     }
 
     &:hover{
@@ -171,26 +275,29 @@ div#center{
   * PAGE PROJET
   */
   .projet{
+    .row{margin:0;}
     h1{
-      font-family: $font; font-size: 1.3em;font-weight: bold;line-height:1;
-      display:inline-block; position:relative;
-      margin:0; padding:0;
+      // font-family: $font; font-size: 1.05em; font-weight: bold;
+      @include fontbold;
+      line-height:0.6; display:inline-block; position:relative;
+      margin:0; padding:0 0.7em;
       // $green overline
       &:after{
         content: "";
-        display: block; margin-top:-.7em; margin-bottom:.7em;
+        display: block; margin-top:-.5em; margin-bottom:.5em;
         border-top:0.5em solid $green;
         transition:border-color 0.3s ease-in;}
     }
-    h2{font-family: $font;font-size: 1em;font-weight: bold; margin:0; padding:0;}
+    h2{@include fontnormal; margin:0; padding:0 0.7em;}
     // .block{
     //   display: inline-block;
     // }
 
+    p{padding:0.7em; margin:0;}
 
     #images{
       // .row{margin:0;}
-      .block{margin-bottom: 1.2em;}
+      .block{padding:0.7em;}
     }
 
     img{
@@ -199,6 +306,14 @@ div#center{
 
   }
 
+  body.projet{
+    nav.categories{
+      ul.tags li a:hover span{
+        text-decoration: underline;
+      }
+    }
+  }
+
   /*
   * Catégories
   */
@@ -210,11 +325,12 @@ div#center{
         list-style: none; display:inline-block;
         margin:0 1em;
         a{display:block;}
-        span{font-size: 1.3em;}
+        span{@include fontnormal;}
         &.active span{
           display:inline-block;
           position:relative;
-          font-weight: bold;
+          // font-weight: bold;
+          @include fontbold;
           border-bottom: 1px solid #000;
           line-height: 0.2;
           &:after{
@@ -251,19 +367,27 @@ div#center{
  |_| \___/ \___/ \__\___|_|
  */
 footer#bottom-bar{
+  position:absolute; bottom:0;
+  width:100%; height:$footerheight;
   background-color: $green;
   text-align: center;
-  padding: 1em 0;
-
+  padding:1em 0;
+  // margin: 5vh 0 0;
   h1{
-    font-size: 1.3em;font-weight: bold; margin:0; line-height: 1; height:auto;
-    display:inline-block; position:relative;
+    @include fontbold; height:auto; display:inline-block; position:relative; margin:0;
+    a{
+      font-weight: inherit;
+    }
     &:after{
       content: ""; height:0;
-      display: block; margin-top:-.7em; margin-bottom:.7em;
+      display: block; margin-top:-.9em; margin-bottom:1em;
       border-top:0.5em solid #fff;
       transition:border-color 0.3s ease-in;}
   }
-  address, a{font-size: 0.9em;font-weight: normal; margin:-0.7em 0 0; line-height: 1;}
-
+  address{
+    // font-size: 1em; font-weight: normal;
+    @include fontnormal;
+    margin:-0.7em 0 0; line-height: 1.1; font-style: normal;
+    a{text-decoration: underline;}
+  }
 }

user/themes/labonneadresse/templates/home.html.twig

@@ -6,7 +6,7 @@
   <div class="grid">
     {% for child in page.collection %}
       {% if child.header.home == true %}
-        <section class="projet-block projet-block-img grid-block columns large-3 medium-6 small-12">
+        <section class="projet-block projet-block-img grid-block columns xlarge-3 large-4 medium-6 small-12">
           {% include 'partials/projet-block.html.twig' with {'page':child,'display':'img'} %}
         </section>
       {% endif %}

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

@@ -34,24 +34,26 @@
 
   {% endblock head %}
   </head>
-  
+
   <body class="{{bodyclass}}">
+    <div id="container">
 
-    {# include the header + navigation #}
-    {% include 'partials/header.html.twig' %}
+      {# include the header + navigation #}
+      {% include 'partials/header.html.twig' %}
 
-    <div id="center" class="row fullwidth">
-      <div class="large-12 columns">
-        {% block content %}{% endblock %}
+      <div id="center" class="row fullwidth">
+        <div class="large-12 columns">
+          {% block content %}{% endblock %}
+        </div>
       </div>
-    </div>
 
-    {% block bottom %}{% endblock %}
+      {% block bottom %}{% endblock %}
 
 
-    {# include the footer#}
-    {% include 'partials/footer.html.twig' %}
+      {# include the footer#}
+      {% include 'partials/footer.html.twig' %}
 
+    </div>
 
     {% block javascripts %}
         {% do assets.add('theme://bower_components/jquery/dist/jquery.min.js', 101) %}

user/themes/labonneadresse/templates/partials/footer.html.twig

@@ -1,10 +1,10 @@
 <footer id="bottom-bar">
   <div class="row fullwidth">
     <section class="large-12 columns">
-      <h1><a href="/">- {{ site.title|e('html') }} -</a></h1>
+      <h1><a class="logo" href="/">- {{ site.title|e('html') }} -</a></h1>
       <address>
         {{ site.adresse|e('html') }}<br />
-        <a href="mailto:{{site.email}}">{{ site.email|e('html') }}</a>
+        <a class="mailto" href="mailto:{{site.email}}">{{ site.email|e('html') }}</a>
       </address>
     </section>
   </div>

user/themes/labonneadresse/templates/partials/header.html.twig

@@ -1,30 +1,32 @@
 <header id="top-bar">
-  <div class="row fullwidth">
+  <div class="bg">
+    <div class="row fullwidth">
 
-    <section id="title-area" class="small-8 small-push-2 columns">
-        <h1><a href="/"><span>{{ site.title|e('html') }}</span></a></h1>
-        <h2>{{ site.subtitle|e('html') }}</h2>
-    </section>
+      <section id="title-area" class="medium-8 medium-push-2 columns">
+          <h1><a href="/"><span>{{ site.title|e('html') }}</span></a></h1>
+          <h2>{{ site.subtitle|e('html') }}</h2>
+      </section>
 
-    <nav id="left-nav" class="nav small-2 small-pull-8 columns">
-      <div class="wrapper">
-        <ul class="left">
-          {% for page in pages.children %}
-            {% if page.menu != "home" and page.menu != "Catégories" %}
-              <li><a href="{{ page.url }}">{{ page.menu }}</a></li>
-            {% endif %}
-          {% endfor %}
-        </ul>
-      </div>
-    </nav>
-
-    <nav id="right-nav" class="nav small-2 columns">
-      {% if config.plugins.taxonomylist.enabled %}
+      <nav id="left-nav" class="nav small-6 medium-2 medium-pull-8 columns">
         <div class="wrapper">
-            <h4><a href="/categories">Catégories</a></h4>
-            {% include 'partials/tagslist.html.twig' with {'base_url':"/categories/", 'taxonomy':'tag'} %}
+          <ul class="left">
+            {% for page in pages.children %}
+              {% if page.menu != "home" and page.menu != "Catégories" %}
+                <li><a href="{{ page.url }}">{{ page.menu }}</a></li>
+              {% endif %}
+            {% endfor %}
+          </ul>
         </div>
-      {% endif %}
-    </nav>
+      </nav>
+
+      <nav id="right-nav" class="nav small-6 medium-2 columns">
+        {% if config.plugins.taxonomylist.enabled %}
+          <div class="wrapper">
+              <h4><a href="/categories">Catégories</a></h4>
+              {% include 'partials/tagslist.html.twig' with {'base_url':"/categories/", 'taxonomy':'tag'} %}
+          </div>
+        {% endif %}
+      </nav>
+    </div>
   </div>
 </header>

user/themes/labonneadresse/templates/partials/projet-block.html.twig

@@ -1,6 +1,12 @@
 {% if display == 'img' %}
   {% set image = page.media.images|first %}
-  <a href="{{ page.url }}">{{ image.html }}</a>
+
+  {# {% set image = child.media.files|first %} #}
+  {# {% if image == null %} #}
+  {#   {% set image = child.media.images|first %} #}
+  {# {% endif %}  #}
+
+  <a href="{{ page.url }}">{{ image.resize(500).html }}</a>
   <header>
     <h1><a href="{{ page.url }}">{{page.title}}</a></h1>
     <h2><a href="{{ page.url }}">{{page.header.subtitle}}</a></h2>
@@ -13,8 +19,7 @@
 
   {{ page.summary() }}
 
-
   {% set image = page.media.images|first %}
-  <a class="projet-img" href="{{ page.url }}">{{ image.html }}</a>
+  <a class="projet-img" href="{{ page.url }}">{{ image.resize(500).html }}</a>
 
 {% endif %}

user/themes/labonneadresse/templates/projet.html.twig

@@ -2,7 +2,8 @@
 
 {% set bodyclass = "projet" %}
 
-{% set images = page.media.images %}
+{% set images = page.media.images[1:] %}
+{% set images = images|merge(page.media.files) %}
 
 {% block content %}
   <section class="projet">
@@ -38,14 +39,14 @@
               {% if nextimage.meta.size != 1 %}
                 {% set continue = true %}
                 <div class="block block-{{loop.index}} column large-6">
-                  {{ image.html }}
+                  {{ image.resize(1000).html }}
                 </div>
                 <div class="block block-{{loop.index+1}} column large-6">
-                  {{ nextimage.html }}
+                  {{ nextimage.resize(1000).html }}
                 </div>
               {% else %}
                 <div class="block block-{{loop.index}} column large-6">
-                  {{ image.html }}
+                  {{ image.resize(1000).html }}
                 </div>
                 <div class="block empty column large-6"></div>
               {% endif %}
@@ -57,6 +58,7 @@
           {% set continue = false %}
         {% endif %}
       {% endfor %}
+
     </div>
   </section>