menu

user/accounts/maud.yaml

@@ -3,12 +3,17 @@ fullname: 'Maud Boyer'
 title: admin
 state: enabled
 access:
+  site:
+    login: 'true'
   admin:
     super: 'true'
     login: 'true'
-  site:
-    login: 'true'
-hashed_password: $2y$10$XYIFrVemvj0aLeoCYJ1TeeYDU7iQYyii4cNEFv0I5sUOtyhjv0YQ.
-language: en
+  admin-addon-user-manager: {  }
+hashed_password: $2y$10$1ol4B2jLfCtepiNBZ4/iveJmFLJn7PSTfEzlHJFSCNP9KymqCdC.C
+language: fr
 twofa_enabled: false
-twofa_secret: JLF5HJJ3IK434NGYAR5TMGBNNH5Y2CBP
+twofa_secret: WMHLTUSQZKFSK6YN4IUE34USJK2CG727
+_json:
+  avatar: '[]'
+  state: '"enabled"'
+  hashed_password: '"$2y$10$1ol4B2jLfCtepiNBZ4\/iveJmFLJn7PSTfEzlHJFSCNP9KymqCdC.C"'

user/accounts/sandrine.yaml

@@ -3,12 +3,17 @@ fullname: 'Sandrine Ripoll'
 title: admin
 state: enabled
 access:
+  site:
+    login: 'true'
   admin:
     super: 'true'
     login: 'true'
-  site:
-    login: 'true'
-hashed_password: $2y$10$D9vJo2awuCuqEFQDHkP7BupvYBTy/SABVQcejFDkwGguhH9TPnZKq
+  admin-addon-user-manager: {  }
+hashed_password: $2y$10$TfBKArG7nwy2kiDWywLru.JFOL/4luotf9djMRz488FDZVzQzmlf2
 language: en
 twofa_enabled: false
-twofa_secret: 4UOFFQ7LRK4DVI52655LAEZ3533LGDVW
+twofa_secret: T6KECXE5A4XT7V6T4VQEEOHQVOXFZPLP
+_json:
+  avatar: '[]'
+  state: '"enabled"'
+  hashed_password: '"$2y$10$OCR3MkWPb41krOmdZFrJae0L0.iI4d79Rv5Z.pZ68py4gsz\/RWfK2"'

user/config/site.yaml

@@ -1,7 +1,17 @@
-title: Grav
+title: 'Figures Libres'
+default_lang: en
 author:
-  name: Joe Bloggs
-  email: 'joe@example.com'
+  name: 'Joe Bloggs'
+  email: joe@example.com
+taxonomies:
+  - category
+  - tag
 metadata:
-    description: 'Grav is an easy to use, yet powerful, open source flat-file CMS'
-
+  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

user/themes/figureslibres/js/site.js

@@ -31,7 +31,7 @@ function click_link() {
           lazy();
           },
         complete: function(data) {
-          console.log('cat', cat);
+            // console.log('cat', cat);
             $loader.hide();
             click_img(e, $this, $href, url, page, cat, project_name);
             closeAjax();
@@ -45,6 +45,7 @@ function click_list() {
   var $link = $('.list-projets li > a');
 
   $link.click(function(e) {
+    $('.sidebar-right, .sidebar-right button.hamburger').removeClass('is-active');
     e.preventDefault();
     var $this = $(this);
         $href = $this.attr("href");
@@ -58,10 +59,8 @@ function click_list() {
     var $link_card = $('.card > #'+project_name + ' a');
 
     if ($link_txt.hasClass('open') && $link_card.parent().hasClass('open') ) {
-
       anchor($href);
-
-    }else if ($link_txt.hasClass('open')) {
+    } else if ($link_txt.hasClass('open')) {
       anchor($href);
       $.ajax({
         url :  '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
@@ -78,10 +77,12 @@ function click_list() {
         complete: function(data) {
           marg_item(project_name);
           closeAjax();
+          anchor($href);
         },
       });
 
     } else {
+
       $('#item_list').remove();
       $('.open').removeClass('open');
 
@@ -100,11 +101,11 @@ function click_list() {
           click_img(e, $this, $href, url, page, cat, project_name)
         },
         complete: function(data) {
-          console.log('cat', cat);
+          // console.log('cat', cat);
               var $link_card = $('.card > #'+project_name + ' a');
               setTimeout( function(){
-                console.log('project_name', project_name);
-                console.log('$link_card', $link_card);
+                // console.log('project_name', project_name);
+                // console.log('$link_card', $link_card);
                 if ($link_card.hasClass('open')) {
                 }else {
                   anchor($href);
@@ -121,6 +122,7 @@ function click_list() {
                       marg_item(project_name);
                       closeAjax();
                       anchor($href);
+                      scrollTop();
                     },
                   });
               }
@@ -132,6 +134,7 @@ function click_list() {
 }
 
 function click_img(e, $this, $href, url, page, cat, project_name) {
+
   $('section.' + cat +' .card-image > a').click(function(e) {
     var $this = $(this);
         $href = $this.attr("href");
@@ -161,24 +164,30 @@ function click_img(e, $this, $href, url, page, cat, project_name) {
             marg_item(project_name);
             anchor($href);
             lazy();
+            scrollTop();
+
+            // ScrollReveal().reveal($('#item_list > .card'), {
+            //   duration:  1000,
+            //   distance: '10px',
+            // });
+
           },
           complete:function() {
             closeAjax();
             $('.loader').hide();
-            scrollTop();
           }
         });
 
       }
     });
-
 }
 
 function anchor($href) {
 
-  var aTag = $("a[href='"+ $href +"']");
+  var aTag = $("#text_figli a[href='"+ $href +"']");
+  console.log(aTag);
   // console.log('aTag.offset()', aTag.offset().top+10);
-  $('html,body').animate({scrollTop: aTag.offset().top-7},'slow');
+  $('html,body').animate({scrollTop: aTag.offset().top - 7},'slow');
 
 }
 
@@ -209,7 +218,7 @@ function mouseHover() {
     link_id = $(this).attr("id");
 
     $('html').append("<div class=circle_hover ></div>");
-    console.log('link_id',link_id);
+    // console.log('link_id',link_id);
 
     setTimeout(function () {
       $('.circle_hover').addClass('open '+ link_id);
@@ -245,14 +254,6 @@ function lazy() {
   });
 }
 
-function redirection() {
-    var url = document.location.href;
-    console.log(url);
-    if (url != 'https://figureslibres.kevintessier.net/') {
-      document.location.href="https://figureslibres.kevintessier.net/"
-    }
-}
-
 function animate_burger() {
   var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
   var hamburgers = document.querySelectorAll(".hamburger");
@@ -297,12 +298,55 @@ function scrollTop() {
   })
 }
 
+function imgmouse() {
+  var currentMousePos = { x: 0, y: 0 };
+  var $img = $('.list-projets .img');
+
+  $(document).mousemove(function(event) {
+    currentMousePos.x = event.pageX;
+    currentMousePos.y = event.pageY;
+
+    $img.css('left', currentMousePos.x );
+    $img.css('top', currentMousePos.y );
+  });
+}
+
+function scrollreveal() {
+  var $txt = $('#text_figli p');
+
+  ScrollReveal().reveal($txt, {
+    duration:  1000,
+    distance: '10px',
+ });
+
+ var $button = $('.sidebar button');
+ var $title_menu = $('.title-menu h2');
+
+$button.click(function() {
+  ScrollReveal().destroy($txt, {
+    duration:  1000,
+    distance: '10px',
+  });
+});
+
+
+}
+
+function clickmenu() {
+  var $menu = $('.sidebar-right button');
+
+  $menu.click(function() {
+    $('#text_figli').toggleClass('hidden');
+  })
+}
 
 $(document).ready(function($){
-  // redirection();
+  scrollreveal();
   click_link();
   click_list();
   mouseHover();
   animate_burger();
   croix();
+  imgmouse();
+  clickmenu();
 });

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

@@ -24,7 +24,7 @@ $txt-figli-m: 1.5rem;
 
 // line-height
 $Flhome-m: 2rem;
-$Wi-m: calc( 100% - 0.5rem);
+$Wi-m: calc( 100% - 1rem);
 $Wi80-m: 80%;
 $Wi33-m: calc(( 100% / 3 ) - 0.5rem);
 

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

@@ -2,6 +2,7 @@ $animate: all 0.2s ease-in-out;
 
 #text_figli{
   z-index: 999;
+  opacity: 1;
   p{
     & > a{
       z-index: 999;
@@ -70,6 +71,10 @@ $animate: all 0.2s ease-in-out;
       }
     }
   }
+  &.hidden{
+    opacity: 0;
+    transition: 0.3s opacity ease;
+  }
 }
 
 .circle_hover{
@@ -87,7 +92,7 @@ $animate: all 0.2s ease-in-out;
   &.publique{
       background:
       url("/user/themes/figureslibres/images/forme2.svg") center no-repeat;
-      background-size: cover;
+      background-size: contain;
   }
   &.sociale{
     background: $color_sociale;
@@ -96,11 +101,11 @@ $animate: all 0.2s ease-in-out;
   &.culturelle{
     background:
     url("/user/themes/figureslibres/images/forme3.svg") center no-repeat;
-    background-size: cover;
+    background-size: contain;
   }
   &.commanditaires{
     background:
     url("/user/themes/figureslibres/images/forme4.svg") center no-repeat;
-    background-size: cover;
+    background-size: contain;
   }
 }

user/themes/figureslibres/scss/theme/_blog.scss

@@ -4,6 +4,7 @@
     width: 100%;
   .card{
     width: $Wi50;
+    height: 100%;
     &:nth-child(odd){
       margin-right: $margI;
     }
@@ -11,7 +12,6 @@
       z-index: 999;
       display: inline-flex;
       width: 100%;
-      // margin-bottom: $marg;
       & > * {
         margin-right: $marg;
       }

user/themes/figureslibres/scss/theme/_footer.scss

@@ -13,13 +13,13 @@ body.sticky-footer {
 .home{
   footer{
     color: #acb3c2;
+    display: inline-flex;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
     p{
       font-size: 1rem!important;
       line-height: 1rem!important;
-      display: inline-flex;
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
       a{
       img{
           width: 20px!important;

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

@@ -20,13 +20,23 @@
   body{
     #start{
       width: $Wi-m;
+      margin: 0rem auto 2rem auto;
+      padding-right: 2rem; 
       #text_figli{
         p{
           font-size: 1.7rem;
           line-height: 2.3rem;
+          a{
+            &:before,
+            &:after {
+              width: 50%;
+              opacity: 1;
+              background-color: black;
+            }
+          }
         }
         #item_list{
-          width: $Wi-m;
+          width: 100%;
           .card{
             width: calc(100%);
             margin: 0 0 0.5rem 0;
@@ -49,11 +59,51 @@
       }
     }
     .sidebar-right{
-      display: none;
+      width: 100%;
+      right: -100%;
+      #icone_list{
+        z-index: 0;
+        width: 100%;
+        // background-color: #f9f9f9fe;
+        .hamburger{
+          float: right;
+          z-index: 999;
+        }
+      }
+      .list-projets{
+        z-index: 999;
+        ul{
+          text-align: center;
+          span{
+            text-align: center;
+          }
+          li{
+            text-align: center;
+            margin-top: 0!important;
+            &::before{
+              width: 100%;
+            }
+            a{
+              padding: 0.5rem;
+            }
+          }
+        }
+      }
     }
   }
+
+  footer{
+    z-index: 999;
+    justify-content: center;
+    width: 100%;
+    bottom: 0!important;
+    left: 0!important;
+    padding: 0.5rem;
+    background-color: #f9f9f9fe;
+  }
+
   .circle_hover.open{
-    width: 0!important;
-    height: 0!important;
+    width: 100px!important;
+    height: 100px!important;
   }
 }

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

@@ -1,82 +1,159 @@
 .sidebar-right{
   position: fixed;
-  width: 20%;
+  width: 100%;
   height: 100%;
-  right: calc( -20% + 0.5rem);
+  // right: calc( -20% + 0.5rem);
+  left: -100vw;
   top: 0;
   transition: 0.3s right ease;
-  background: #f9f9f9fe;
-  z-index: 999;
+  background: white;
+  z-index: 1000;
+  ul{
+    & > *:not(span) {
+      // border: 2px solid black;
+      // border-radius: 50px;
+    }
+  }
+
   #icone_list{
-    z-index: 999;
+    z-index: 1000;
     position: fixed;
     top: 0;
     right: 0;
   }
   .list-projets{
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
+    .title-menu{
+      padding-left: 0.5rem;
+      &::after{
+        content: " ";
+        width: 0;
+        height: 1px;
+        display: block;
+        margin-top: 0.5rem;
+      }
+    }
     .container{
-      margin: auto;
+      overflow: auto;
+      padding: 1rem 2rem 2rem 0.5rem;
+      width: 85%;
+      float: left;
     ul{
-      text-align: left;
-      margin: 0;
+      margin-bottom: 20px;
       span.cat{
         display: block;
         line-height: 3rem;
-        font-weight: bold;
-        padding-left: 23px;
       }
       li{
         display: inline-flex;
-        width: 100%;
-        margin-top: -6px;
+        align-items: flex-end;
+        width: auto;
         position: relative;
-        &::before{
-          position: absolute;
-          content: " ";
-          display: inline-block;
-          min-width: 10px;
-          height: 100%;
-
-        }
-        &.culturelle{
-          &::before{
-            background: $color_culturelle;
+        a{
+          z-index: 0;
+          display: block;
+          background: white;
+          transition: 0.6s background;
+          .img{
+            pointer-events: none;
+            display: none;
+            position: fixed;
+            width: 300px;
+            height: auto;
+            z-index: 999;
+            transform-origin: center center;
+            transform: rotate(0deg);
+            border-radius: 10px;
+            overflow: hidden;
           }
-        }
-        &.sociale{
-          &::before{
-            background: $color_sociale;
-          }
-        }
-        &.publique{
-          &::before{
-            background: $color_publique;
+          &:hover{
+            z-index: 999;
+            .img{
+              display: block;
+              transition: all 1s ease;
+            }
           }
         }
+        // &::before{
+        //   position: absolute;
+        //   content: " ";
+        //   display: inline-block;
+        //   height: 100%;
+        //   transition: 0.6s background;
+        // }
         &:hover{
+          &.culturelle{
+            a{
+              background: $color_culturelle;
+              transition: 0.6s background;
+            }
+            // &::before{
+            // }
+          }
+          &.sociale{
+            a{
+              background: $color_sociale;
+              transition: 0.6s background;
+            }
+            // &::before{}
+          }
+          &.publique{
+            a{
+              background: $color_publique;
+              transition: 0.6s background;
+            }
+            &::before{}
+          }
           &::before{
             min-width: 100%;
-            transition: 0.6s min-width;
+            transition: 0.3s background;
           }
         }
       }
       a{
         color: black;
-        display: block;
-        padding-left: 1rem;
         z-index: 999;
-        width: 100%;
         &.active{
           color: black;
         }
       }
     }
     }
+    .informations{
+      position: relative;
+      float: right;
+      width: 15%;
+      min-width: 250px;
+      height: 100%;
+      &::after{
+        content: " ";
+        height: 0;
+        width: 1px;
+        display: block;
+        position: absolute;
+        top: 0;
+        margin-right: 1rem;
+        left:0;
+      }
+     }
   }
   &.is-active{
-      right: 0;
-      transition: 0.3s right ease;
+    left: 0;
+    transition: 0.5s 0.3s left ease;
+    .title-menu{
+      &::after{
+        width: 100%;
+        background: black;
+        transition: 1s 0.9s width ease;
+      }
+    }
+    .informations{
+      &::after{
+        background: black;
+        transition: 1s 0.9s height ease;
+        height: 100%;
+      }
+    }
   }
 }

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

@@ -10,8 +10,13 @@ header{
   }
 }
 
+a, button{
+  border: none;
+  outline: none!important;
+}
+
 .home{
-  p{
+  h2, p{
     font-size: $txt-figli;
     line-height: 3rem;
   }
@@ -46,8 +51,8 @@ header{
     #item{
       .e-content{
         p{
-          font-size: 1rem;
-          line-height: 1.2rem;
+          font-size: 1.5rem;
+          line-height: 3rem;
           strong{
             font-weight: bold!important;
           }
@@ -67,7 +72,6 @@ header{
           line-height: normal;
         }
       }
-
     }
   }
 }
@@ -124,9 +128,38 @@ a.culturelle, span.culturelle{
 }
 
 .sidebar-right{
-  ul, a{
-    font-size: 0.9rem;
-    line-height: 1.2rem;
+  h2{
+    margin: .5rem 0rem 0rem 0rem;
+  }
+  ul > span{
+    font-size: 0.8rem;
+    line-height: 1rem!important;
+    text-decoration: underline;
+    margin-bottom: 0.5rem;
+  }
+  ul > li{
+    font-size: 1.7rem;
+    line-height: 2rem;
+     a{
+      font-size: 1.7rem;
+      line-height: 2rem;
+      border-radius: 50px;
+    }
+  }
+  .informations{
+    padding: 1rem;
+    &> div{
+      margin-bottom: 1rem;
+    }
+    h3{
+      font-size: 1.5rem;
+      line-height: 2rem;
+      margin: 0;
+    }
+    p{
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
   }
 }
 

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

@@ -11,11 +11,23 @@
 
 {% block body %}
     <section class="body-wrapper" id="item_list">
+      <script type="text/javascript">
+      var $card = $('.card');
+        ScrollReveal().reveal($card, {
+          delay: 1000,
+          distance: '20px',
+          interval: 100,
+        });
+      </script>
+
       {% block item %}
+      <!-- <div> -->
           {% for child in collection %}
               {% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
           {% endfor %}
+        <!-- </div> -->
       {% endblock %}
+
     </section>
 
     {% block aside %}

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

@@ -25,6 +25,7 @@
     {% block javascripts %}
         {% do assets.addJs('theme://js/jquery-3.4.1.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/jquery.lazy.min.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/scrollreveal.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
     {% endblock %}
 
@@ -38,17 +39,15 @@
 
 
     <section id="start">
+      {% block aside %}
+        {% include 'partials/sidebar.html.twig' %}
+      {% endblock %}
 
       {% block body %}
         <div class="body-center" id="text_figli">
             {% block content %}{% endblock %}
         </div>
       {% endblock %}
-
-      {% block aside %}
-        {% include 'partials/sidebar.html.twig' %}
-      {% endblock %}
-
     </section>
 
     {% block footer %}

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

@@ -13,9 +13,9 @@
 <div class="card-image">
 
   {% for image in page.media.images %}
-  {% set services_image = image.derivatives(1920).sizes('100vw') %}
+    {% set services_image = image.derivatives(1920).sizes('100vw') %}
 
-    <img class="lazy" data-src="{{ services_image.url() }}" data-srcset="{{ services_image.srcset() }}">
+      <img class="lazy" data-src="{{ services_image.url() }}" data-srcset="{{ services_image.srcset() }}">
 
   {% endfor %}
 </div>

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

@@ -3,7 +3,9 @@
 {% import _self as macro %}
 
 {% set image = page.media.images|first %}
-{% set services_image = page.media.images|first.derivatives(100, 200, 300, 400, 600).sizes('50vw, 30vw') %}
+{# {% set services_image = page.media.images|first.derivatives(320,1600,300).sizes('(max-width:26em) 100vw, 50vw') %} #}
+
+{% set services_image = page.media.images|first%}
 
 {% if image %}
 <!-- card projet -->
@@ -25,12 +27,13 @@
           {% include 'partials/blog/date.html.twig' %}
           {% endif %}
         </div>
-
-        <img class="lazy" data-src="{{ services_image.url() }}" data-srcset="{{ services_image.srcset() }}">
+        {{ services_image.derivatives(200,600,100).sizes('(max-width:26em) 100vw, 50vw').html(page.header.title, 'images projets', '')}}
 
       </a>
     </div>
+
   </div>
+
  {% else %}
 
    {% include 'partials/blog/title.html.twig' with {title_level: 'p'} %}

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

@@ -8,8 +8,29 @@
   </div>
 
   <div class="list-projets close">
+
+    <div class="title-menu">
+      <h2>{{site.title}}</h2>
+    </div>
+
     <div class="container">
       {% include 'partials/taxonomylist.html.twig' with { 'taxonomy':'category'} %}
     </div>
+    <div class="informations">
+      <div class="equipes">
+        <h3>L'équipes : </h3>
+        <p>Bachir Soussi-Chiadmi</p>
+        <p>Maud Boyer</p>
+        <p>Sanrine Ripoll</p>
+        <p>Ouidade Soussi-Chiadmi</p>
+        <p>Kévin Tessier</p>
+      </div>
+      <div class="contact">
+        <h3>Nous contacter : </h3>
+        <a href="mailto:bonjour@figureslibres.io">bonjour@figureslibres.io</a>
+      </div>
+      <div class="follow">
+      </div>
+    </div>
   </div>
 </div>

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

@@ -13,13 +13,22 @@
     {% set options = { items: {'@taxonomy': {'category': tax} } } %}
     {% set my_collection = page.collection(options) %}
 
+
     {% for i in my_collection %}
-    {% if i.media.images|first %}
-      <li class="{{i.parent.folder}}">
-        <a id="{{i.parent.folder}}" href="{{i.url}}">{{i.title}}</a>
-        {% set image = page.media.images|first %}
-      </li>
-      {% endif %}
+      {% if i.media.images|first %}
+        <li class="{{i.parent.folder}}">
+          <a id="{{i.parent.folder}}" href="{{i.url}}">{{i.title}}
+            {% set images = i.media.images|slice(0,1) %}
+
+            {% for image in images  %}
+            {% set services_image = image.derivatives(320,1600,300).sizes('(max-width:26em) 100vw, 50vw').html(i.title) %}
+              <div class="img">
+                {{services_image}}
+              </div>
+            {% endfor %}
+           </a> /
+        </li>
+        {% endif %}
     {% endfor %}
   </ul>
 {% endfor %}