maj grav

user/config/plugins/admin.yaml

@@ -1,54 +0,0 @@
-enabled: true
-route: /admin
-cache_enabled: false
-theme: grav
-content_padding: true
-twofa_enabled: true
-sidebar:
-  activate: tab
-  hover_delay: 100
-  size: auto
-dashboard:
-  days_of_stats: 7
-widgets:
-  dashboard-maintenance: true
-  dashboard-statistics: true
-  dashboard-notifications: true
-  dashboard-feed: true
-  dashboard-pages: true
-pages:
-  show_parents: both
-  show_modular: true
-session:
-  timeout: 1800
-warnings:
-  delete_page: true
-edit_mode: normal
-frontend_preview_target: inline
-show_github_msg: true
-pages_list_display_field: title
-google_fonts: false
-admin_icons: line-awesome
-enable_auto_updates_check: true
-notifications:
-  feed: true
-  dashboard: true
-  plugins: true
-  themes: true
-popularity:
-  enabled: true
-  ignore:
-    - '/test*'
-    - /modular
-  history:
-    daily: '30'
-    monthly: '12'
-    visitors: '20'
-pagemedia:
-  resize_width: 0
-  resize_height: 0
-  res_min_width: 0
-  res_min_height: 0
-  res_max_width: 0
-  res_max_height: 0
-  resize_quality: 0.8

user/config/plugins/piwik.yaml

@@ -1,3 +0,0 @@
-enabled: true
-siteId: '0'
-sitePiWikURL: dev.figureslibres.net

user/config/site.yaml

@@ -1,17 +1,7 @@
-title: 'Figures Libres'
-default_lang: fr
+title: Grav
 author:
-  name: Figli
-  email: bonjour@figureslibres.io
-taxonomies:
-  - category
-  - tag
+  name: Joe Bloggs
+  email: 'joe@example.com'
 metadata:
-  description: 'Grav is an easy to use, yet powerful, open source flat-file CMS'
-summary:
-  enabled: true
-  format: short
-  size: 300
-  delimiter: '==='
-blog:
-  route: /blog
+    description: 'Grav is an easy to use, yet powerful, open source flat-file CMS'
+

user/config/system.yaml

@@ -12,7 +12,9 @@ pwd_regex: '(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}'
 intl_enabled: true
 languages:
   supported: {  }
+  default_lang: null
   include_default_lang: true
+  pages_fallback_only: false
   translations: true
   translations_fallback: true
   session_store_active: false
@@ -50,10 +52,10 @@ pages:
       '>': gt
       '<': lt
   types:
-    - txt
-    - xml
     - html
     - htm
+    - xml
+    - txt
     - json
     - rss
     - atom
@@ -72,6 +74,7 @@ pages:
     - .git
     - .idea
   ignore_hidden: true
+  hide_empty_folders: false
   url_taxonomy_filters: true
   frontmatter:
     process_twig: false
@@ -84,6 +87,9 @@ cache:
     method: file
   driver: auto
   prefix: g
+  purge_at: '0 4 * * *'
+  clear_at: '0 3 * * *'
+  clear_job_type: standard
   clear_images_by_default: true
   cli_compatibility: false
   lifetime: 604800
@@ -116,6 +122,10 @@ assets:
 errors:
   display: true
   log: true
+log:
+  handler: file
+  syslog:
+    facility: local6
 debugger:
   enabled: false
   shutdown:
@@ -127,6 +137,7 @@ images:
   cache_perms: '0755'
   debug: false
   auto_fix_orientation: false
+  seofriendly: false
 media:
   enable_media_timestamp: false
   unsupported_inline_types: {  }
@@ -138,6 +149,7 @@ session:
   initialize: true
   timeout: 1800
   name: grav-site
+  uniqueness: path
   secure: false
   httponly: true
   split: true
@@ -148,6 +160,9 @@ gpm:
   method: auto
   verify_peer: true
   official_gpm_only: true
+accounts:
+  type: data
+  storage: file
 strict_mode:
   yaml_compat: true
   twig_compat: true

user/pages/01.home/default.md

@@ -4,3 +4,4 @@ body_classes: 'title-center title-h1h2'
 ---
 
 **Figures Libres** est un collectif né de la rencontre de deux démarches citoyennes : porter des messages d'utilité [publique](/projets/publique?id=publique), [sociale](/projets/sociale?id=sociale) et [culturelle](/projets/culturelle?id=culturelle) ; Œuvrer sur logiciels libres pour créer sans consommer et libérer l'information. Nous sommes graphistes, développeurs, designers, photographes, artistes, enseignant⋅e⋅s, militant⋅e⋅s…  et croisons nos pratiques et compétences pour avancer plus loin à plusieurs. Convaincu⋅e⋅s que la création est un outil démocratique, nous partageons les convictions de nos commanditaires. Nous préférons maîtriser nos outils, plutôt que l'inverse, les adapter à nos envies et à vos besoins. Comme nous sommes joueur⋅euse⋅s et utopistes nous aimons les construire avec vous et les partager avec tous. Votre projet sera un site, une affiche, une campagne, une application, un livre, une exposition, une manifestation… tant mieux ! nous n'aimons pas les réponses toutes faites ; mais bien faites.
+ 

user/pages/02.projets/culturelle/tous-des-sang-meles/projet.md

@@ -9,8 +9,6 @@ taxonomy:
         - 'MAC VAL'
 ---
 
-Catalogue d’exposition
-
 […] Nous sommes tous des passants, des migrants, des métis, des hybrides, des étrangers, des constructions, des êtres en relation. Tous, des sang-mêlés.
 L’ouvrage met en lumière l’exposition à travers cinq carnets de tailles et de couleurs différentes, dont les titrages mélangent plusieurs polices de caractères. La diversité des formats et des couleurs exprime la notion de différence, de singularité et de multi culturalité, sujets transversaux de l’exposition. Cet objet modulable, multipliant les approches, génère plusieurs lectures différentes.
 Une expérience éditoriale menée par Maud Boyer pour le design, Bachir Soussi-Chiadmi et Kevin Tessier pour le développement du HTML2Print

user/themes/figureslibres/js/site.js

@@ -27,6 +27,7 @@ function click_link() {
         },
         complete: function(data) {
           console.log('cat', cat);
+            // animate();
             click_img(e, $this, $href, url, page, cat, project_name);
         }
       });
@@ -39,7 +40,6 @@ function click_list() {
 
   $link.click(function(e) {
     e.preventDefault();
-
     var $this = $(this);
         $href = $this.attr("href");
         url = $href.split("/");
@@ -53,18 +53,24 @@ function click_list() {
 
     if ($link_txt.hasClass('open') && $link_card.parent().hasClass('open') ) {
 
-      console.log('anchor');
       anchor($href);
 
     }else if ($link_txt.hasClass('open')) {
-
+      anchor($href);
       $.ajax({
         url :  '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
         type : 'GET', // Le type de la requête HTTP
         dataType:'html',
         success: function(data) {
+          $('#item_list.'+cat+' .card-image.open #item').remove();
+          $('#item_list.'+cat+' .card-image').removeClass('open');
           $(data).find('#item').addClass(cat).insertAfter($link_card);
           $link_card.parent().addClass('open');
+
+        },
+        complete: function(data) {
+          // animate();
+          marg_item(project_name);
         },
       });
 
@@ -77,7 +83,9 @@ function click_list() {
         success: function(data) {
           $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
           $link_txt.addClass('open');
+
           anchor($href);
+
           $('.card a').click(function (e) {
             e.preventDefault()
           })
@@ -104,11 +112,13 @@ function click_list() {
                       $(data).find('#item').addClass(cat).insertAfter($link_card);
                       $link_card.parent().addClass('open');
                     },
+                    complete: function(data) {
+                      // animate();
+                      marg_item(project_name);
+                    },
                   });
               }
-
-              }, 1500);
-
+            }, 900);
         }
       });
     }
@@ -116,7 +126,6 @@ function click_list() {
 }
 
 function click_img(e, $this, $href, url, page, cat, project_name) {
-  // $link_img = $('.card .card-image > a');
   $('section.' + cat +' .card-image > a').click(function(e) {
     var $this = $(this);
         $href = $this.attr("href");
@@ -131,14 +140,18 @@ function click_img(e, $this, $href, url, page, cat, project_name) {
         $this.parent().removeClass('open');
         $($this.parent().find('#item.'+ cat)).remove();
       } else {
-
         $.ajax({
           url :  '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
           type : 'GET', // Le type de la requête HTTP
           dataType:'html',
           success: function(data) {
+            $('#item_list.'+cat+' .card-image.open #item').remove();
+            $('#item_list.'+cat+' .card-image').removeClass('open');
+
             $(data).find('#item').addClass(cat).insertAfter($this);
             $this.parent().addClass('open');
+            marg_item(project_name);
+            anchor($href);
           },
         });
 
@@ -149,11 +162,74 @@ function click_img(e, $this, $href, url, page, cat, project_name) {
 function anchor($href) {
 
   var aTag = $("a[href='"+ $href +"']");
-  $('html,body').animate({scrollTop: aTag.offset().top},'slow');
+  // console.log('aTag.offset()', aTag.offset().top+10);
+  $('html,body').animate({scrollTop: aTag.offset().top-7},'slow');
 
 }
 
+function animate() {
+  var $item_list = $('#item_list .card > .card-image');
+  $item_list.fadeIn( "slow" );
+}
+
+function marg_item(project_name) {
+
+  var $item = $('.card-image#'+project_name+' #item');
+  var $item_offset = $item.offset().left-8;
+  var $card = $item.parents('.card');
+
+  var $item_list = $item.parents('#item_list');
+  var pos_card = $card.offset().left;
+
+  var margin_right =  $item_list.width() - (pos_card + $card.width());
+
+console.log('$card.width()',$card.width());
+console.log('pos_card',pos_card);
+
+console.log('$item_list',$item_list.width());
+
+  $item.css('margin-left', '-'+$item_offset +'px');
+  // $item.parents('.card').css('margin-right', margin_right);
+}
+
+function mouseHover() {
+
+  $link_cat = $('#text_figli p > a');
+
+  $link_cat.mouseenter(function() {
+    link_id = $(this).attr("id");
+
+    $('html').append("<div class=circle_hover ></div>");
+    console.log('link_id',link_id);
+
+    setTimeout(function () {
+      $('.circle_hover').addClass('open '+ link_id);
+    }, 10);
+
+    mousePos();
+
+  })
+  .mouseleave(function() {
+    $('html').find(".circle_hover").remove();
+  });
+
+  function mousePos() {
+    var currentMousePos = { x: 0, y: 0 };
+    var $circle = $('.circle_hover');
+
+    $(document).mousemove(function(event) {
+      currentMousePos.x = event.pageX;
+      currentMousePos.y = event.pageY;
+
+      $circle.css('left', currentMousePos.x  );
+      $circle.css('top', currentMousePos.y );
+    });
+  }
+
+};
+
 $(document).ready(function($){
   click_link();
   click_list();
+  mouseHover();
 });

user/themes/figureslibres/scss/configurations/_variable.scss

@@ -8,7 +8,7 @@ $txt-figli: 2.5rem;
 
 // line-height
 $Flhome: 3rem;
- 
+
 $marg: 0.5rem;
 $margI: 1rem;
 $Wi: 80%;
@@ -22,6 +22,9 @@ $txt-figli-m: 1.5rem;
 // line-height
 $Flhome-m: 2rem;
 $Wi-m:100%;
+$Wi80-m: calc(( 80% ));
+$Wi33-m: calc(( 100% / 3 ) - (#{$margI} / 2));
+
 
 // tablette
 $txt-figli-t: 2.5rem;
@@ -29,18 +32,7 @@ $txt-figli-t: 2.5rem;
 // line-height
 $Flhome-t: 3rem;
 
-// :root {
-//   --color: red;
-// }
-//
-// :root .category{
-//   --color:blue;
-// }
-//
-// .card{
-//   color: var(--color);
-// }
-//
-// :root .category{
-//   color: var(--color);
-// }
+// color
+$color_publique: lightyellow;
+$color_sociale: lightgreen;
+$color_culturelle: lightblue;

user/themes/figureslibres/scss/theme.scss

@@ -5,9 +5,10 @@
 @import 'theme/reset';
 @import 'theme/typography';
 
+@import 'theme/animation';
 @import 'theme/header';
 @import 'theme/start';
 @import 'theme/sidebar';
 @import 'theme/blog';
 @import 'theme/item';
-@import 'theme/mobile'; 
+@import 'theme/mobile';

user/themes/figureslibres/scss/theme/_animation.scss

@@ -1,23 +1,66 @@
-.default-animation {
-  transition: all 0.5s ease;
+$animate: all 0.2s ease-in-out;
+
+#text_figli{
+  z-index: 999;
+  p{
+    & > a{
+      z-index: 999;
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        width: 0px;
+        height: 1px;
+        margin: 1px 0 0;
+        transition: $animate;
+        transition-duration: 0.3s;
+        opacity: 0;
+        background-color: black;
+      }
+      &::before{
+        left: 50%;
+      }
+      &:after{
+        right: 50%;
+      }
+      &:hover {
+        cursor: pointer;
+        &:before,
+        &:after {
+          width: 100%;
+          opacity: 1;
+        }
+        &:before,
+        &:after {
+          width: 50%;
+        }
+      }
+    }
+  }
 }
 
-// Pulse Animation
-.pulse {
-  animation-name: pulse_animation;
-  animation-duration: 2000ms;
-  transform-origin:70% 70%;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-
-@keyframes pulse_animation {
-  0% { transform: scale(1); }
-  30% { transform: scale(1); }
-  40% { transform: scale(1.08); }
-  50% { transform: scale(1); }
-  60% { transform: scale(1); }
-  70% { transform: scale(1.05); }
-  80% { transform: scale(1); }
-  100% { transform: scale(1); }
+.circle_hover{
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  background: $color_culturelle;
+  border-radius: 500px;
+  transform: translate(-50%, -50%);
+  z-index: 0;
+  transition: height .2s, width .2s;
+  &.open{
+    width: 200px;
+    height: 200px;
+    transition: height .5s, width .5s;
+  }
+  &.publique{
+    background: $color_publique;
+  }
+  &.sociale{
+    background: $color_sociale;
+  }
+  &.culturelle{
+    background: $color_culturelle;
+  }
 }

user/themes/figureslibres/scss/theme/_item.scss

@@ -6,7 +6,7 @@
     margin-bottom: $marg;
     }
   .card-image{
-    img{
+    img:not(:last-of-type){
       margin-bottom: $marg;
     }
   }

user/themes/figureslibres/scss/theme/_mobile.scss

@@ -1,4 +1,21 @@
 @media screen and (max-width: 414px) {
+  body{
+    #start{
+      width: $Wi-m;
+      #text_figli{
+        #item_list{
+          .card{
+            width: $Wi-m;
+            #item{
+              width: calc(100% + (.5rem * 3));
+            }
+          }
+        }
+      }
+    }
+  }
+
+
   // typographie
   header{
     a{
@@ -39,7 +56,7 @@
 
   #item_list{
     .card{
-      width: calc( #{$Wi-m}  );
+      width: calc( #{$Wi-m}  )!important;
       &:nth-child(odd){
         margin-right: 0;
       }
@@ -64,6 +81,23 @@
 }
 
 @media screen and (max-width: 768px)  and (orientation: portrait) {
+
+  body{
+    #start{
+      width: $Wi80-m;
+      #text_figli{
+        #item_list{
+          .card{
+            width: $Wi33-m;
+            #item{
+              width: calc(300% + (.5rem * 3));
+            }
+          }
+        }
+      }
+    }
+  }
+
   // typographie
   header{
     a{
@@ -71,12 +105,12 @@
       line-height: 3rem;
     }
   }
-  .home{
-    p{
-      font-size: $txt-figli-t!important;
-      line-height: $Flhome-t!important;
-    }
-  }
+  // .home{
+  //   p{
+  //     font-size: $txt-figli-t!important;
+  //     line-height: $Flhome-t!important;
+  //   }
+  // }
   .other_projets{
     h3{
       font-size: $txt-figli-t;
@@ -105,9 +139,6 @@
       }
     }
   }
-
-
-
 }
 
 @media screen and (max-width: 812px) and (orientation: landscape) {
@@ -222,3 +253,21 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) and (orientation: landscape) {
+  body{
+    #start{
+      width: $Wi80-m;
+      #text_figli{
+        #item_list{
+          .card{
+            width: $Wi33-m;
+            #item{
+              width: calc(300% + (.5rem * 3));
+            }
+          }
+        }
+      }
+    }
+  }
+}

user/themes/figureslibres/scss/theme/_sidebar.scss

@@ -1,6 +1,6 @@
 .sidebar-right{
   position: fixed;
-  width: 20%;
+  width: 15%;
   height: 100%;
   right: 0;
   top: 0;
@@ -22,6 +22,33 @@
       }
       a{
         color: grey;
+        &::before{
+          content: " ";
+          width: 5px;
+          height: 5px;
+          display: inline-block;
+          border-radius: 5px;
+          vertical-align: middle;
+          margin-right: 5px;
+        }
+        &#culturelle{
+          &::before{
+            background: $color_culturelle;
+          }
+        }
+        &#sociale{
+          &::before{
+          background: $color_sociale;
+          }
+        }
+        &#publique{
+          &::before{
+          background: $color_publique;
+          }
+        }
+        &.active{
+          color: black;
+        }
       }
     }
   }

user/themes/figureslibres/scss/theme/_start.scss

@@ -1,6 +1,7 @@
 *{
   box-sizing: border-box;
 }
+
 html, body, header{
   background: #f9f9f9fe;
 }
@@ -12,7 +13,7 @@ body{
       #text_figli{
         p {
           a{
-            position: relative;
+            // position: relative;
             &.marg{
               margin-right: $marg;
             }
@@ -20,20 +21,37 @@ body{
         }
         #item_list{
           width: 80vw;
+          margin-top: 0.5rem;
         .card{
           width: calc((100% / 5) - ( #{$marg} * 2) );
-          height: auto;
-          // overflow: hidden;
           display: inline-block;
           vertical-align: top;
-          line-height: 0;
-          margin-right: $marg;
           position: relative;
-          margin-top: $marg;
+          margin: 0 $marg $marg 0;
+          height: 100%;
+          & > .card-image{
+            &.open{
+              a{
+                img{
+                  filter: grayscale(0);
+                  transition: filter 0.3s ease;
+                }
+              }
+            }
+          }
           a{
             display: block;
+            border-radius: 15px;
+            overflow: auto;
+            img{
+              filter: grayscale(1);
+              transition: filter 0.3s ease;
+            }
           }
           .card-header{
+            width: 100%;
+            padding: $marg;
+            flex-wrap: wrap;
             display: none;
             & > *{
               font-size: 0.8rem;
@@ -42,12 +60,15 @@ body{
             }
           }
           &:hover{
+            a{
+              display: block;
+              img{
+                filter: grayscale(0);
+                transition: filter 0.3s ease;
+              }
+            }
             .card-header{
-              width: 100%;
-              background: rgba(255, 255, 255, 0.5);
-              padding: $marg;
               display: inline-flex;
-              flex-wrap: wrap;
               position: absolute;
               transform: translateY(-100%);
             }
@@ -56,25 +77,69 @@ body{
             vertical-align: baseline!important;
           }
           #item{
-            width: calc( 307% - #{$marg} );
+            width: calc( 500% + ( #{$marg} * 5) );
+            padding: 2rem;
+            margin-top: $marg;
+            border-radius: 15px;
             .content-title{
-              margin: 30px auto;
+              margin: 0 auto 0 auto;
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: space-between;
+              align-items: baseline;
               a{
                 display: block;
               }
             }
             .e-content{
-              margin: 30px auto;
+              margin: 1rem auto 2rem auto;
               p{
                 font-size: 1rem;
-                line-height: 1rem;
+                line-height: 1.2rem;
+              }
+            }
+            &.publique{
+              background: $color_publique;
+
+            }
+            &.sociale{
+              background: $color_sociale;
+
+            }
+            &.culturelle{
+              background: $color_culturelle;
+            }
+          }
+        }
+        &.publique{
+          .card{
+            &:hover{
+              .card-header{
+                background: $color_publique;
+              }
+            }
+          }
+        }
+        &.sociale{
+          .card{
+            &:hover{
+              .card-header{
+                background: $color_sociale;
+              }
+            }
+          }
+        }
+        &.culturelle{
+          .card{
+            &:hover{
+              .card-header{
+                background: $color_culturelle;
               }
             }
           }
         }
       }
-
-      }
+    }
   }
   &:not(.home){
     #start{

user/themes/figureslibres/scss/theme/_typography.scss

@@ -42,23 +42,52 @@ header{
         font-family: $avara;
       }
     }
+    #item{
+      .e-content{
+        p{
+          font-size: 1rem;
+          line-height: 1.2rem;
+        }
+      }
+    }
   }
 }
 
 #item{
-  .content-title{
-    display: flex;
-    margin: $marg 0;
-    & > * {
-      margin-right: $marg;
-      font-size: 1.15rem;
-      font-weight: bold;
-    }
+  h2{
+    width: auto;
+    line-height: 4rem!important;
+    font-size: 4rem!important;
+    font-weight: normal!important;
+  }
+  span{
+    font-size: 1rem;
+ }
+ &.publique{
+   h2{
+     font-family: $playfair;
+   }
+   span{
+     font-family: $playfair;
+     font-weight: normal;
+   }
+ }
+ &.sociale{
+   h2{
+     font-family: $syne;
+   }
+   span{
+     font-family: $syne;
+     font-weight: normal;
+   }
+ }
+  &.culturelle{
     h2{
-      margin: 0 $marg 0 0;
-      a{
-        font-weight: bold;
-      }
+      font-family: $avara;
+    }
+    span{
+      font-family: $avara;
+      font-weight: normal;
     }
   }
 }
@@ -77,8 +106,8 @@ a.culturelle, span.culturelle{
 
 .sidebar-right{
   ul, a{
-    font-size: 0.8rem;
-    line-height: 1.25rem;
+    font-size: 0.7rem;
+    line-height: 0.9rem;
   }
 }
 

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

@@ -23,7 +23,6 @@
     {% block javascripts %}
         {% do assets.addJs('jquery', 101) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
-
     {% endblock %}
 
     {{ assets.js()|raw }}

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

@@ -1,7 +1,10 @@
 <div class="content-title">
   {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
-  {% include 'partials/blog/taxonomy.html.twig'  %}
-  {% include 'partials/blog/date.html.twig' %}
+  <div>
+    {% include 'partials/blog/taxonomy.html.twig'  %}
+    {% include 'partials/blog/date.html.twig' %}
+  </div>
+
 </div>
 
 <div class="e-content">

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

@@ -13,13 +13,12 @@
       {% if page.header.title %}
         {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
       {% endif %}
+        {% if page.header.taxonomy.tag %}
+          {% include 'partials/blog/taxonomy.html.twig' %}
+        {% endif %}
 
-      {% if page.header.taxonomy.tag %}
-        {% include 'partials/blog/taxonomy.html.twig' %}
-      {% endif %}
-
-      {% if page.header.date %}
-        {% include 'partials/blog/date.html.twig' %}
-      {% endif %}
+        {% if page.header.date %}
+          {% include 'partials/blog/date.html.twig' %}
+        {% endif %}
     </div>
 </div>

user/themes/figureslibres/templates/partials/blog/title.html.twig

@@ -5,8 +5,8 @@
         {% if page.header.continue_link is not same as(false) %}
         <a href="{{ page.url }}"><i></i></a>
         {% endif %}
-        <a href="{{ page.header.link }}">{{ page.title }}</a>
+        {{ page.title }}
     </{{ title_level }}>
 {% else %}
-    <{{ title_level }}><a href="{{ page.url }}">{{ page.title }}</a></{{ title_level }}>
+    <{{ title_level }}>{{ page.title }}</{{ title_level }}>
 {% endif %}