load ajax + anchorfixed

user/themes/figureslibres/images/forme4.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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="86.536003"
+   height="51.919998"
+   viewBox="0 0 22.895983 13.737167"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="forme4.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata10">
+    <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>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="956"
+     inkscape:window-height="1029"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="3.3425694"
+     inkscape:cx="52.564374"
+     inkscape:cy="34.015748"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4"
+     units="px" />
+  <rect
+     style="color:#000000;overflow:visible;isolation:auto;mix-blend-mode:normal;solid-color:#000000;solid-opacity:1;fill:#ff7f7a;fill-rule:evenodd;stroke-width:0.76318282"
+     width="13.392332"
+     height="13.392332"
+     x="6.6543446"
+     y="-6.6960573"
+     rx="0.071739182"
+     ry="0.071739182"
+     transform="matrix(0.85750175,0.51448105,-0.85750175,0.51448105,0,0)"
+     overflow="visible"
+     id="rect2" />
+</svg>

user/themes/figureslibres/js/site.js

@@ -14,10 +14,16 @@ function click_link() {
         project_name = url[3];
 
     if ($this.hasClass('open')) {
+
       $this.removeClass('open');
       $('#item_list.'+ cat).remove();
+
     } else {
+
+      $('#item_list').remove();
+      $('.open').removeClass('open');
       $loader.css('display','inline-block');
+
       $.ajax({
         url :  '/' + page + '/' + cat, // La ressource ciblée
         type : 'GET', // Le type de la requête HTTP
@@ -79,6 +85,8 @@ function click_list() {
       });
 
     } else {
+      $('#item_list').remove();
+      $('.open').removeClass('open');
 
       $.ajax({
         url :  '/' + page + '/' + cat, // La ressource ciblée
@@ -89,8 +97,6 @@ function click_list() {
           $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
           $link_txt.addClass('open');
           lazy();
-          anchor($href);
-
           $('.card a').click(function (e) {
             e.preventDefault()
           })
@@ -100,7 +106,6 @@ function click_list() {
         complete: function(data) {
           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);
@@ -119,7 +124,7 @@ function click_list() {
                     complete: function(data) {
                       marg_item(project_name);
                       closeAjax();
-
+                      anchor($href);
                     },
                   });
               }

user/themes/figureslibres/scss/configurations/_fonts.scss

@@ -116,9 +116,9 @@ $file-italic: "playfairdisplay-regularitalic";
     }
 }
 
-$moche: "Moche-Regular";
+$moche: "Moche-Bold";
 $family-regular2: "moche";
-$file-regular2: "Moche-Regular";
+$file-regular2: "Moche-Bold";
 
 @mixin font-face($moche, $file-regular2, $family-regular2, $category:"") {
     $filepath: "../fonts/" + $family-regular2 + "/" + $file-regular2;

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

@@ -38,3 +38,4 @@ $Flhome-t: 3rem;
 $color_publique: #fef86f;
 $color_sociale: lightgreen;
 $color_culturelle: #82f8ee;
+$color_commanditaire: #ff7f7a;

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

@@ -98,4 +98,9 @@ $animate: all 0.2s ease-in-out;
     url("/user/themes/figureslibres/images/forme3.svg") center no-repeat;
     background-size: cover;
   }
+  &.commanditaires{
+    background:
+    url("/user/themes/figureslibres/images/forme4.svg") center no-repeat;
+    background-size: cover;
+  }
 }

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

@@ -180,6 +180,9 @@ body{
             &.culturelle{
               background: $color_culturelle;
             }
+            &.commanditaires{
+              background: $color_commanditaire;
+            }
             #icone_list{
               position: absolute;
               top: 0px;
@@ -221,9 +224,18 @@ body{
           -moz-column-gap: 2em;
           column-gap: 2em;
           display: block;
+          margin: 1rem auto;
           p{
             font-size: 1rem;
             line-height: 1.2rem;
+            margin: 0.5rem auto;
+          }
+          .card{
+            &:hover{
+              .card-header{
+                background: $color_culturelle;
+              }
+            }
           }
         }
       }

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

@@ -14,7 +14,7 @@
 <div class="card-image">
 
   {% for image in page.media.images %}
-  {% set services_image = image.derivatives(400).sizes('(min-width:224px) 404px, 100vw') %}
+  {% set services_image = image.derivatives(1920).sizes('100vw') %}
 
     <img class="lazy" data-src="{{ services_image.url() }}" data-srcset="{{ services_image.srcset() }}">
 

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

@@ -3,7 +3,7 @@
 {% import _self as macro %}
 
 {% set image = page.media.images|first %}
-{% set services_image = page.media.images|first.derivatives(400).sizes('(min-width:224px) 404px, 100vw') %}
+{% set services_image = page.media.images|first.derivatives(100, 200, 300, 400, 600).sizes('50vw, 30vw') %}
 
 {% if image %}
 <!-- card projet -->