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/home.md

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

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/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/themes/labonneadresse/bower_components/foundation/scss/foundation/_settings.scss

@@ -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/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>