Browse Source

last batch of adjustements

Bachir Soussi Chiadmi 6 years ago
parent
commit
fdb2b653d9

+ 2 - 0
.ovhconfig

@@ -0,0 +1,2 @@
+app.engine=php
+app.engine.version=7.0

+ 2 - 2
user/config/site.yaml

@@ -1,6 +1,6 @@
 title: Ouidade Soussi Chiadmi # Name of the site
 
-subtitle: Photographie
+subtitle: Photographe
 
 adresse:
 email: contact@ouidade.com
@@ -14,7 +14,7 @@ taxonomies: [tag, category, client]                  # Arbitrary list of taxonom
 #[édition,édition jeunesse,art,identité visuelle,signalétique,évènement
 
 metadata:
-  description: 'Photographie'               # Site description
+  description: 'Ouidade Soussi Chiadmi Photographe Portfolio.'               # Site description
 
 summary:
   enabled: true                             # enable or disable summary of page

+ 6 - 6
user/config/system.yaml

@@ -11,7 +11,7 @@ pages:
     twig: false
 
 cache:
-  enabled: false
+  enabled: true
   check:
     method: file
   driver: auto
@@ -19,8 +19,8 @@ cache:
 
 twig:
   cache: true
-  debug: true
-  auto_reload: true
+  debug: false
+  auto_reload: false
   autoescape: false
 
 assets:
@@ -31,11 +31,11 @@ assets:
   js_minify: true
 
 errors:
-  display: true
+  display: false
   log: true
 
 debugger:
-  enabled: true
-  twig: true
+  enabled: false
+  twig: false
   shutdown:
     close_connection: true

+ 205 - 167
user/themes/ouidade/css/styles.css

@@ -7185,7 +7185,6 @@ header#top-bar {
       font-size: 1em;
       margin: 0;
       height: 100%;
-      min-height: 8.08em;
       overflow: hidden;
       position: relative; }
       header#top-bar #title-area h1 a {
@@ -7193,6 +7192,9 @@ header#top-bar {
         height: 9.3em;
         margin: 0.3em 0 0.5em;
         color: #e30613;
+        transition-property: color, font-size;
+        transition-duration: 0.4s;
+        transition-timing-function: ease-out;
         font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
         font-size: 0.8em;
         font-weight: 300;
@@ -7204,102 +7206,30 @@ header#top-bar {
           width: 95px;
           height: 95px;
           border-radius: 47.5px;
-          border: 17px solid #5b2d87;
+          border: 17.27273px solid #5b2d87;
+          transition-property: width, height, border-radius, border-color, border-width;
+          transition-duration: 0.4s;
+          transition-timing-function: ease-out;
           margin: 0 auto 1em; }
+    header#top-bar #title-area:hover h1 a {
+      color: #5b2d87;
+      transition-duration: 0.2s;
+      transition-timing-function: ease-in-out; }
+      header#top-bar #title-area:hover h1 a:before {
+        border-color: #e30613;
+        transition-duration: 0.2s;
+        transition-timing-function: ease-in-out; }
   header#top-bar.reduced #title-area {
-    height: 7.63055em; }
+    height: 7.07em; }
+    header#top-bar.reduced #title-area h1 a:before {
+      width: 50px;
+      height: 50px;
+      border-radius: 25px;
+      border-width: 9.09091px; }
   header#top-bar h1, header#top-bar h2 {
     text-align: center; }
     header#top-bar h1 a, header#top-bar h2 a {
       color: inherit; }
-  header#top-bar .nav {
-    padding: 0;
-    position: relative;
-    height: 100%; }
-    header#top-bar .nav ul {
-      padding: 0;
-      margin: 0; }
-    header#top-bar .nav li {
-      list-style: none; }
-    @media screen and (min-width: 40em) {
-      header#top-bar .nav .wrapper {
-        padding-top: 4.55em; } }
-  header#top-bar #left-nav {
-    text-align: left; }
-    header#top-bar #left-nav h4 {
-      font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-      font-size: 0.8em;
-      font-weight: 300;
-      font-variant: normal;
-      margin: 0;
-      line-height: 1.9; }
-      header#top-bar #left-nav h4 a {
-        color: #5b2d87; }
-    header#top-bar #left-nav ul {
-      background-color: transparent;
-      padding-bottom: 1em; }
-    header#top-bar #left-nav li {
-      line-height: 1;
-      overflow: hidden;
-      height: 0.01px;
-      transition: height 0.3s ease-in;
-      position: relative; }
-      header#top-bar #left-nav li a {
-        display: block; }
-        header#top-bar #left-nav li a:before {
-          content: "";
-          opacity: 1;
-          position: relative;
-          display: inline-block;
-          border-width: 3px;
-          border-style: solid;
-          width: 12px;
-          height: 12px;
-          border-radius: 6px; }
-        header#top-bar #left-nav li a.tag-1:before {
-          border-color: #e30613; }
-        header#top-bar #left-nav li a.tag-2:before {
-          border-color: #00acba; }
-        header#top-bar #left-nav li a.tag-3:before {
-          border-color: #5b2d87; }
-        header#top-bar #left-nav li a.tag-4:before {
-          border-color: #f7a939; }
-        header#top-bar #left-nav li a.tag-5:before {
-          border-color: #95c11f; }
-        header#top-bar #left-nav li a.tag-6:before {
-          border-color: #e5007d; }
-        header#top-bar #left-nav li a.tag-7:before {
-          border-color: #009641; }
-        header#top-bar #left-nav li a.tag-8:before {
-          border-color: #009fe3; }
-        header#top-bar #left-nav li a span {
-          font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-          font-size: 0.8em;
-          font-weight: 300;
-          font-variant: normal;
-          font-weight: 300;
-          white-space: nowrap;
-          padding: 0.15em 0.3em; }
-    @media only screen and (min-width: 40.0625em) {
-      header#top-bar #left-nav:hover li {
-        height: 1.1em;
-        transition: height 0.5s ease-out; }
-        header#top-bar #left-nav:hover li:hover span {
-          text-decoration: underline; } }
-  header#top-bar #right-nav {
-    text-align: right;
-    line-height: 0.5; }
-    header#top-bar #right-nav a {
-      font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-      font-size: 0.8em;
-      font-weight: 300;
-      font-variant: normal; }
-    header#top-bar #right-nav a:hover {
-      font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-      font-size: 0.8em;
-      font-weight: 300;
-      font-variant: normal;
-      text-decoration: underline; }
   header#top-bar div.line {
     bottom: 0;
     height: 1px;
@@ -7347,65 +7277,82 @@ div#center {
     div#center .projet-block nav.categories {
       margin: 0; }
       div#center .projet-block nav.categories ul {
-        margin: 0; }
+        margin: 0;
+        line-height: 1.2; }
         div#center .projet-block nav.categories ul li {
           position: relative;
           display: inline-block;
           min-width: 12px;
-          height: 12px;
           margin-right: -0.2em; }
           div#center .projet-block nav.categories ul li a {
-            display: block; }
-            div#center .projet-block nav.categories ul li a:before {
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            font-size: 0;
+            max-width: 15px;
+            transition: max-width 0.3s ease-in-out; }
+            div#center .projet-block nav.categories ul li a:not(.active):before {
               content: "";
               opacity: 1;
               position: relative;
               display: inline-block;
+              vertical-align: middle;
               border-width: 3px;
               border-style: solid;
               width: 12px;
               height: 12px;
               border-radius: 6px; }
+            div#center .projet-block nav.categories ul li a.active:before {
+              content: "\d7";
+              /* use the hex value here...  \274c */
+              font-size: 35px;
+              line-height: 0.4;
+              width: 12px;
+              height: 12px;
+              position: relative;
+              display: inline-block;
+              vertical-align: middle;
+              color: #000; }
             div#center .projet-block nav.categories ul li a.tag-1:before {
-              border-color: #e30613; }
+              border-color: #e30613;
+              color: #e30613; }
             div#center .projet-block nav.categories ul li a.tag-2:before {
-              border-color: #00acba; }
+              border-color: #00acba;
+              color: #00acba; }
             div#center .projet-block nav.categories ul li a.tag-3:before {
-              border-color: #5b2d87; }
+              border-color: #5b2d87;
+              color: #5b2d87; }
             div#center .projet-block nav.categories ul li a.tag-4:before {
-              border-color: #f7a939; }
+              border-color: #f7a939;
+              color: #f7a939; }
             div#center .projet-block nav.categories ul li a.tag-5:before {
-              border-color: #95c11f; }
+              border-color: #95c11f;
+              color: #95c11f; }
             div#center .projet-block nav.categories ul li a.tag-6:before {
-              border-color: #e5007d; }
+              border-color: #e5007d;
+              color: #e5007d; }
             div#center .projet-block nav.categories ul li a.tag-7:before {
-              border-color: #009641; }
+              border-color: #009641;
+              color: #009641; }
             div#center .projet-block nav.categories ul li a.tag-8:before {
-              border-color: #009fe3; }
+              border-color: #009fe3;
+              color: #009fe3; }
             div#center .projet-block nav.categories ul li a span {
-              position: absolute;
-              z-index: -1;
-              font-size: 0.7em;
+              display: inline-block;
+              vertical-align: middle;
+              letter-spacing: normal;
+              font-size: 11px;
               font-weight: 300;
               background-color: #fff;
               white-space: nowrap;
               opacity: 0;
               transition: opacity 0.3s ease-in-out;
-              padding: 0.2em 0.3em;
-              width: 0; }
-            div#center .projet-block nav.categories ul li a:hover span {
-              opacity: 1;
-              width: auto;
-              z-index: 10; }
+              padding: 1px 5px 0 1px; }
     div#center .projet-block a.image-link {
       display: block;
       overflow: hidden; }
       div#center .projet-block a.image-link img {
         transition: transform 0.4s ease-out; }
-        div#center .projet-block a.image-link img:hover {
-          transition: transform 0.2s ease-in-out;
-          transform-origin: center;
-          transform: scale(1.2); }
     div#center .projet-block header {
       position: relative;
       margin-top: -3em;
@@ -7421,12 +7368,14 @@ div#center {
       font-weight: 500;
       font-variant: normal;
       color: #5b2d87;
+      transition: color 0.4s ease-out;
       margin: 0.4em 0 0.5em 0;
       line-height: 1.6;
       height: auto; }
       div#center .projet-block h1 span.date {
         font-weight: 200;
         border-left: 1px solid #5b2d87;
+        transition: border-left-color 0.4s ease-out;
         padding: 0.2em 0 0 0.5em;
         margin-left: 0.2em; }
     div#center .projet-block h2 {
@@ -7448,62 +7397,101 @@ div#center {
         font-weight: 500;
         font-variant: normal;
         margin-bottom: 0.3em; }
+    div#center .projet-block:hover nav.categories a {
+      max-width: 300px; }
+      div#center .projet-block:hover nav.categories a span {
+        opacity: 1; }
+    div#center .projet-block:hover a.image-link img {
+      transition: transform 0.3s ease-out;
+      transform-origin: center;
+      transform: scale(1.2); }
+    div#center .projet-block:hover header h1, div#center .projet-block:hover header h2 a {
+      color: #e30613;
+      transition: color 0.2s ease-in-out; }
+    div#center .projet-block:hover header h1 span.date {
+      border-left-color: #e30613;
+      transition: border-left-color 0.2s ease-in-out; }
   div#center .projet .row {
     margin: 0; }
   div#center .projet nav.categories {
     margin: 0;
     padding: 0.7em 0.7em 0; }
     div#center .projet nav.categories ul {
-      margin: 0; }
+      margin: 0;
+      line-height: 1.2; }
       div#center .projet nav.categories ul li {
         position: relative;
         display: inline-block;
         min-width: 12px;
-        height: 12px;
         margin-right: -0.2em; }
         div#center .projet nav.categories ul li a {
-          display: block; }
-          div#center .projet nav.categories ul li a:before {
+          display: block;
+          overflow: hidden;
+          white-space: nowrap;
+          font-size: 0;
+          max-width: 15px;
+          transition: max-width 0.3s ease-in-out; }
+          div#center .projet nav.categories ul li a:not(.active):before {
             content: "";
             opacity: 1;
             position: relative;
             display: inline-block;
+            vertical-align: middle;
             border-width: 3px;
             border-style: solid;
             width: 12px;
             height: 12px;
             border-radius: 6px; }
+          div#center .projet nav.categories ul li a.active:before {
+            content: "\d7";
+            /* use the hex value here...  \274c */
+            font-size: 35px;
+            line-height: 0.4;
+            width: 12px;
+            height: 12px;
+            position: relative;
+            display: inline-block;
+            vertical-align: middle;
+            color: #000; }
           div#center .projet nav.categories ul li a.tag-1:before {
-            border-color: #e30613; }
+            border-color: #e30613;
+            color: #e30613; }
           div#center .projet nav.categories ul li a.tag-2:before {
-            border-color: #00acba; }
+            border-color: #00acba;
+            color: #00acba; }
           div#center .projet nav.categories ul li a.tag-3:before {
-            border-color: #5b2d87; }
+            border-color: #5b2d87;
+            color: #5b2d87; }
           div#center .projet nav.categories ul li a.tag-4:before {
-            border-color: #f7a939; }
+            border-color: #f7a939;
+            color: #f7a939; }
           div#center .projet nav.categories ul li a.tag-5:before {
-            border-color: #95c11f; }
+            border-color: #95c11f;
+            color: #95c11f; }
           div#center .projet nav.categories ul li a.tag-6:before {
-            border-color: #e5007d; }
+            border-color: #e5007d;
+            color: #e5007d; }
           div#center .projet nav.categories ul li a.tag-7:before {
-            border-color: #009641; }
+            border-color: #009641;
+            color: #009641; }
           div#center .projet nav.categories ul li a.tag-8:before {
-            border-color: #009fe3; }
+            border-color: #009fe3;
+            color: #009fe3; }
           div#center .projet nav.categories ul li a span {
-            position: absolute;
-            z-index: -1;
-            font-size: 0.7em;
+            display: inline-block;
+            vertical-align: middle;
+            letter-spacing: normal;
+            font-size: 11px;
             font-weight: 300;
             background-color: #fff;
             white-space: nowrap;
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
-            padding: 0.2em 0.3em;
-            width: 0; }
-          div#center .projet nav.categories ul li a:hover span {
-            opacity: 1;
-            width: auto;
-            z-index: 10; }
+            padding: 1px 5px 0 1px; }
+    div#center .projet nav.categories ul li a {
+      max-width: 500px; }
+      div#center .projet nav.categories ul li a span {
+        opacity: 1; }
   div#center .projet h1 {
     font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 0.95em;
@@ -7534,19 +7522,30 @@ div#center {
     padding: 0 0.7em 0.7em;
     margin: 0; }
   div#center .projet #images {
+    max-width: 100%;
     letter-spacing: 0px; }
     div#center .projet #images a {
+      max-width: calc(100% - 1em);
       letter-spacing: normal;
       display: inline-block;
-      margin: 0.7em 0 0 0.7em; }
+      margin: 0.4em 0 0 0.5em;
+      overflow: hidden; }
+      div#center .projet #images a:hover img {
+        transition: transform 0.4s ease-out;
+        transform-origin: center;
+        transform: scale(1.2); }
   div#center .projet img {
-    max-width: 100%;
-    height: 300px; }
+    height: 300px;
+    transition: transform 0.4s ease-out; }
+    @media only screen and (max-width: 40em) {
+      div#center .projet img {
+        max-width: 100%;
+        height: auto; } }
   div#center .default > * {
     padding-left: 0.7em;
     padding-right: 0.7em; }
   div#center nav.categories {
-    margin: 1em 0; }
+    margin: 1em 0 0; }
     div#center nav.categories ul.tags {
       margin: 0;
       padding: 0;
@@ -7554,40 +7553,63 @@ div#center {
       div#center nav.categories ul.tags li {
         list-style: none;
         display: inline-block;
-        margin: 0 1em; }
+        margin: 0 0.3em; }
         div#center nav.categories ul.tags li a {
           display: block; }
-          div#center nav.categories ul.tags li a:before {
+          div#center nav.categories ul.tags li a:not(.active):before {
             content: "";
             opacity: 1;
             position: relative;
             display: inline-block;
+            vertical-align: middle;
             border-width: 3px;
             border-style: solid;
             width: 12px;
             height: 12px;
             border-radius: 6px; }
+          div#center nav.categories ul.tags li a.active:before {
+            content: "\d7";
+            /* use the hex value here...  \274c */
+            font-size: 35px;
+            line-height: 0.4;
+            width: 12px;
+            height: 12px;
+            position: relative;
+            display: inline-block;
+            vertical-align: middle;
+            color: #000; }
           div#center nav.categories ul.tags li a.tag-1:before {
-            border-color: #e30613; }
+            border-color: #e30613;
+            color: #e30613; }
           div#center nav.categories ul.tags li a.tag-2:before {
-            border-color: #00acba; }
+            border-color: #00acba;
+            color: #00acba; }
           div#center nav.categories ul.tags li a.tag-3:before {
-            border-color: #5b2d87; }
+            border-color: #5b2d87;
+            color: #5b2d87; }
           div#center nav.categories ul.tags li a.tag-4:before {
-            border-color: #f7a939; }
+            border-color: #f7a939;
+            color: #f7a939; }
           div#center nav.categories ul.tags li a.tag-5:before {
-            border-color: #95c11f; }
+            border-color: #95c11f;
+            color: #95c11f; }
           div#center nav.categories ul.tags li a.tag-6:before {
-            border-color: #e5007d; }
+            border-color: #e5007d;
+            color: #e5007d; }
           div#center nav.categories ul.tags li a.tag-7:before {
-            border-color: #009641; }
+            border-color: #009641;
+            color: #009641; }
           div#center nav.categories ul.tags li a.tag-8:before {
-            border-color: #009fe3; }
+            border-color: #009fe3;
+            color: #009fe3; }
         div#center nav.categories ul.tags li span {
           font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
           font-size: 0.8em;
           font-weight: 300;
-          font-variant: normal; }
+          font-variant: normal;
+          display: inline-block;
+          vertical-align: middle;
+          padding: 1px 5px 0 1px; }
 
 /*
                                       _             _                         _
@@ -7601,27 +7623,31 @@ div#center {
 */
 @media only screen and (max-width: 40em) {
   header#top-bar:before {
-    padding-bottom: 0.45em; }
+    padding-bottom: 0.27em; }
   header#top-bar #title-area {
-    height: 10.1em -3.1em; }
+    height: 7.1em; }
     header#top-bar #title-area h1 {
       height: 100%;
-      min-height: 5.6em; }
+      min-height: 2.48em; }
       header#top-bar #title-area h1 a {
         display: block;
         height: 6.3em; }
+      header#top-bar #title-area h1 a:before {
+        width: 60px;
+        height: 60px;
+        border-radius: 30px;
+        border-width: 10.90909px; }
   header#top-bar.reduced #title-area {
-    height: 5.2885em; }
-  header#top-bar .nav {
-    position: absolute;
-    top: 0.75em;
-    height: auto; }
-  header#top-bar #left-nav {
-    left: 0; }
-  header#top-bar #right-nav {
-    right: 0; }
+    height: 4.9em; }
+    header#top-bar.reduced #title-area h1 {
+      font-size: 0.65em; }
+      header#top-bar.reduced #title-area h1 a:before {
+        width: 30px;
+        height: 30px;
+        border-radius: 15px;
+        border-width: 5.45455px; }
   div#center {
-    padding-top: 10.2em;
+    padding-top: 8.2em;
     padding-bottom: 6em; }
   body.categories a.projet-img {
     display: none; } }
@@ -7640,9 +7666,13 @@ footer#bottom-bar {
   width: 100%;
   height: 5em;
   background-color: #5b2d87;
+  transition: background-color 0.4s ease-out;
   color: white;
   text-align: center;
-  padding: 1em 0; }
+  padding: 0.5em 0; }
+  footer#bottom-bar:hover {
+    background-color: #e30613;
+    transition: background-color 0.2s ease-in-out; }
   footer#bottom-bar h1 {
     font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 0.95em;
@@ -7652,7 +7682,8 @@ footer#bottom-bar {
     display: inline-block;
     position: relative;
     margin: 0;
-    color: inherit; }
+    color: inherit;
+    font-size: 0.75em; }
     footer#bottom-bar h1 a {
       font-weight: inherit;
       color: inherit; }
@@ -7661,11 +7692,18 @@ footer#bottom-bar {
     font-size: 0.8em;
     font-weight: 300;
     font-variant: normal;
+    font-size: 0.6em;
     margin: -0.7em 0 0;
     line-height: 1.1;
     font-style: normal; }
     footer#bottom-bar address a {
       text-decoration: underline; }
+  footer#bottom-bar ul.footer-menu {
+    text-align: center; }
+    footer#bottom-bar ul.footer-menu li {
+      display: inline-block; }
+      footer#bottom-bar ul.footer-menu li a {
+        font-size: 0.6em; }
 
 div.featherlight:last-of-type {
   background-color: rgba(255, 255, 255, 0.9); }

+ 4 - 1
user/themes/ouidade/js/dist/script.min.js

@@ -1,2 +1,5 @@
 
-jQuery(document).ready(function($){if($(window).width()>600){var $grid=$('.grid').isotope({itemSelector:'.grid-block',transitionDuration:'0.4s'});$('#left-nav a, .projet-block nav.categories a').on('click',function(e){e.preventDefault();var filterValue=$(this).attr('data-filter');$grid.isotope({filter:filterValue});return false;});}});
+jQuery(document).ready(function($){$(window).scroll(function(){var topOfWindow=$(window).scrollTop();if(topOfWindow>100){$("#top-bar").addClass("reduced");}
+else{$("#top-bar").removeClass("reduced");}});if($(window).width()>600&&$('body').is('.home')){var $grid=$('.grid').isotope({itemSelector:'.grid-block',transitionDuration:'0.4s'});$grid.imagesLoaded().progress(function(){$grid.isotope('layout');});$('nav.categories a').on('click',function(e){e.preventDefault();if($(this).is('.active')){location.hash='';}else{var filterValue=$(this).attr('data-filter');location.hash=encodeURIComponent(filterValue);}
+return false;});function onHashchange(){var hashFilter=decodeURIComponent(location.hash.replace('#',''));$('nav.categories a').removeClass('active');if(!hashFilter){$grid.isotope({filter:'*'});}else{$('nav.categories a[data-filter='+hashFilter+']').addClass('active');$grid.isotope({filter:'.'+hashFilter});}}
+$(window).on('hashchange',onHashchange);onHashchange();}});

+ 47 - 49
user/themes/ouidade/js/script.js

@@ -1,41 +1,21 @@
 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");
-  //     }
-  // });
+  $(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
   // console.log($(window).width());
-  if( $(window).width() > 600 ){
-    // if($('body').is('.categories')){
-    //   // console.log('hello');
-    //   var $diapo = $('<div id="diaporama"></div>');
-    //   $("#categories-content")
-    //     .before($diapo)
-    //     .find('li.project').each(function(index, el) {
-    //       // console.log(index);
-    //       $(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');
-    // }
+  if( $(window).width() > 600 && $('body').is('.home')){
+
 
     // init Isotope
     var $grid = $('.grid').isotope({
@@ -43,28 +23,46 @@ jQuery(document).ready(function($) {
       transitionDuration: '0.4s'
     });
 
-    // $grid.imagesLoaded().progress(function(){
-    //   $grid.masonry('layout');
-    // });
+    // $('.grid .grid-block')
+    //   .hide()
+    //   .imagesLoaded().progress( function( imgLoad, image ) {
+    //     // get item
+    //     // image is imagesLoaded class, not <img>, <img> is image.img
+    //     var $item = $( image.img ).parents('.grid-block');
+    //     // un-hide item
+    //     $item.show();
+    //     // isotope does its thing
+    //     $grid.appended( $item );
+    //   });
+
+    $grid.imagesLoaded().progress(function(){
+      $grid.isotope('layout');
+    });
 
     // filter items on button click
-    $('#left-nav a, .projet-block nav.categories a').on( 'click', function(e) {
+    $('nav.categories a').on( 'click', function(e) {
       e.preventDefault();
-
-      var filterValue = $(this).attr('data-filter');
-      $grid.isotope({ filter: filterValue });
-
+      if($(this).is('.active')){
+        location.hash = '';
+      }else{
+        var filterValue = $(this).attr('data-filter');
+        location.hash = encodeURIComponent( filterValue );
+      }
       return false;
     });
 
-    // init Masonry
-    // var $grid = $('.grid').masonry({
-    //   itemSelector: '.grid-block',
-    //   transitionDuration: '0.4s'
-    // });
-    //
-    // $grid.imagesLoaded().progress(function(){
-    //   $grid.masonry('layout');
-    // });
+    function onHashchange() {
+      var hashFilter = decodeURIComponent(location.hash.replace('#', ''));
+      $('nav.categories a').removeClass('active');
+      if ( !hashFilter ) {
+        $grid.isotope({filter: '*'});
+      }else{
+        $('nav.categories a[data-filter='+hashFilter+']').addClass('active');
+        $grid.isotope({filter: '.'+hashFilter});
+      }
+    }
+
+    $(window).on( 'hashchange', onHashchange );
+    onHashchange();
   }
 });

+ 298 - 150
user/themes/ouidade/scss/styles.scss

@@ -85,7 +85,7 @@ $logoH: 9.3em;
 $logo_mt:0.3em;
 $logo_mb:0.5em;
 $titleareaH: $logoH+$logo_mb+$logo_mt;
-$titleReducedFactor:0.7555;
+$titleReducedFactor:0.7;
 $titleReducedFactorSmall:0.5;
 $centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH;
 $footerheight: 5em;
@@ -123,13 +123,17 @@ header#top-bar{
     h1{
       font-size: 1em; margin: 0;
       height:100%;
-      min-height:$titleareaH*0.8;
+      // min-height:$titleareaH*0.8;
       overflow: hidden;
       position: relative;
       a{display: block;
         height:$logoH;
         margin:$logo_mt 0 $logo_mb;
         color:$secondcolor;
+        transition-property: color, font-size;
+        transition-duration: 0.4s;
+        transition-timing-function: ease-out;
+        // transition: color 0.4s ease-out;
         @include fontnormal;
         font-weight: 500;
         &:before{
@@ -138,16 +142,40 @@ header#top-bar{
           $r: 95px;
           width:$r; height:$r;
           border-radius: $r/2;
-          border: 17px solid $maincolor;
+          border: $r/5.5 solid $maincolor;
+          transition-property: width, height, border-radius, border-color, border-width;
+          transition-duration: 0.4s;
+          transition-timing-function: ease-out;
+          // transition: border-color 0.4s ease-out;
           margin: 0 auto 1em;
         }
       }
     }
+    &:hover{
+      h1 a{
+        color: $maincolor;
+        transition-duration: 0.2s;
+        transition-timing-function: ease-in-out;
+        // transition: color 0.2s ease-in-out;
+        &:before{
+          border-color:$secondcolor;
+          transition-duration: 0.2s;
+          transition-timing-function: ease-in-out;
+          // transition: border-color 0.2s ease-in-out;
+        }
+      }
+    }
   }
 
   &.reduced{
     #title-area{
       height:$titleareaH*$titleReducedFactor;
+      h1 a:before{
+        $r: 50px;
+        width:$r; height:$r;
+        border-radius: $r/2;
+        border-width: $r/5.5;
+      }
       // @media #{$medium-up}{
       //   height:$titleareaH*$titleReducedFactorSmall;
       // }
@@ -161,102 +189,102 @@ header#top-bar{
     color: inherit;
   }}
 
-  .nav{
-    padding:0;
-    position:relative;
-    height:100%;
-    ul{padding: 0; margin: 0;}
-    li{list-style: none;}
-    // @include breakpoint(medium) {
-    @media screen and (min-width:$small-breakpoint) {
-      .wrapper{padding-top: $titleareaH/2-.5em;}
-    }
-  }
-
-  #left-nav{
-    // margin-right: -0.1rem;
-    text-align: left;
+  // .nav{
+  //   padding:0;
+  //   position:relative;
+  //   height:100%;
+  //   ul{padding: 0; margin: 0;}
+  //   li{list-style: none;}
+  //   // @include breakpoint(medium) {
+  //   @media screen and (min-width:$small-breakpoint) {
+  //     .wrapper{padding-top: $titleareaH/2-.5em;}
+  //   }
+  // }
 
-    h4{
-      @include fontnormal; margin:0; line-height: 1.9;
-      a{color:$maincolor;}
-      // a:hover{text-decoration: underline;}
-    }
-    ul{background-color: transparent; padding-bottom: 1em;}
-    li{
-      line-height: 1;
-      // &:not(.active){
-        overflow: hidden; height:0.01px; transition: height 0.3s ease-in;
-      // }
-      position: relative;
-      // line-height: $catRadius;
-      // min-width:$catRadius; height:$catRadius;
-      a{
-        display: block;
-        &:before{
-          content:"";
-          opacity: 1;
-          position: relative;
-          display:inline-block;
-          border-width: 3px;
-          border-style: solid;
-          // line-height: $catRadius;
-          width:$catRadius; height:$catRadius;
-          border-radius: $catRadius/2;
-        }
-        &.tag-1:before{ border-color: $cat1;}
-        &.tag-2:before{ border-color: $cat2;}
-        &.tag-3:before{ border-color: $cat3;}
-        &.tag-4:before{ border-color: $cat4;}
-        &.tag-5:before{ border-color: $cat5;}
-        &.tag-6:before{ border-color: $cat6;}
-        &.tag-7:before{ border-color: $cat7;}
-        &.tag-8:before{ border-color: $cat8;}
-        span{
-          // position: absolute;
-          // z-index: -1;
-          // font-size: 0.7em;
-          @include fontnormal;
-          font-weight: 300;
-          white-space: nowrap;
-          // opacity: 0;
-          // transition: opacity 0.3s ease-in-out;
-          padding:0.15em 0.3em;
-          // width:0;
-        }
-        // &:hover{
-        //   span{ opacity: 1; width:auto; z-index: 10;}
-        // }
-      }
-      // &.active span{
-      //   display:inline-block;
-      //   position:relative;
-      //   &:after{
-      //     content: ""; height:0;
-      //     display: block; margin-top:-.7em; margin-bottom:.7em;
-      //     border-top:0.5em solid $maincolor;}
-      // }
-    }
-    @media #{$medium-up}{
-      &:hover{
-        li{
-          height:1.1em; transition: height 0.5s ease-out;
-          &:hover span{
-            // border-bottom: 1px solid #000;
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-  }
+  // #left-nav{
+  //   // margin-right: -0.1rem;
+  //   text-align: left;
+  //
+  //   h4{
+  //     @include fontnormal; margin:0; line-height: 1.9;
+  //     a{color:$maincolor;}
+  //     // a:hover{text-decoration: underline;}
+  //   }
+  //   ul{background-color: transparent; padding-bottom: 1em;}
+  //   li{
+  //     line-height: 1;
+  //     // &:not(.active){
+  //       overflow: hidden; height:0.01px; transition: height 0.3s ease-in;
+  //     // }
+  //     position: relative;
+  //     // line-height: $catRadius;
+  //     // min-width:$catRadius; height:$catRadius;
+  //     a{
+  //       display: block;
+  //       &:before{
+  //         content:"";
+  //         opacity: 1;
+  //         position: relative;
+  //         display:inline-block;
+  //         border-width: 3px;
+  //         border-style: solid;
+  //         // line-height: $catRadius;
+  //         width:$catRadius; height:$catRadius;
+  //         border-radius: $catRadius/2;
+  //       }
+  //       &.tag-1:before{ border-color: $cat1;}
+  //       &.tag-2:before{ border-color: $cat2;}
+  //       &.tag-3:before{ border-color: $cat3;}
+  //       &.tag-4:before{ border-color: $cat4;}
+  //       &.tag-5:before{ border-color: $cat5;}
+  //       &.tag-6:before{ border-color: $cat6;}
+  //       &.tag-7:before{ border-color: $cat7;}
+  //       &.tag-8:before{ border-color: $cat8;}
+  //       span{
+  //         // position: absolute;
+  //         // z-index: -1;
+  //         // font-size: 0.7em;
+  //         @include fontnormal;
+  //         font-weight: 300;
+  //         white-space: nowrap;
+  //         // opacity: 0;
+  //         // transition: opacity 0.3s ease-in-out;
+  //         padding:0.15em 0.3em;
+  //         // width:0;
+  //       }
+  //       // &:hover{
+  //       //   span{ opacity: 1; width:auto; z-index: 10;}
+  //       // }
+  //     }
+  //     // &.active span{
+  //     //   display:inline-block;
+  //     //   position:relative;
+  //     //   &:after{
+  //     //     content: ""; height:0;
+  //     //     display: block; margin-top:-.7em; margin-bottom:.7em;
+  //     //     border-top:0.5em solid $maincolor;}
+  //     // }
+  //   }
+  //   @media #{$medium-up}{
+  //     &:hover{
+  //       li{
+  //         height:1.1em; transition: height 0.5s ease-out;
+  //         &:hover span{
+  //           // border-bottom: 1px solid #000;
+  //           text-decoration: underline;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
 
-  #right-nav{
-    text-align: right;
-    // margin-left: -0.1rem;
-    line-height:0.5;
-    a{@include fontnormal;}
-    a:hover{@include fontnormal; text-decoration: underline;}
-  }
+  // #right-nav{
+  //   text-align: right;
+  //   // margin-left: -0.1rem;
+  //   line-height:0.5;
+  //   a{@include fontnormal;}
+  //   a:hover{@include fontnormal; text-decoration: underline;}
+  // }
 
   div.line{
     // position: absolute;
@@ -279,51 +307,84 @@ header#top-bar{
 */
 
 @mixin catlist {
+    // line-height: 0.5;
+    // outline: 1px solid red;
     margin:0;
     ul{
       margin: 0;
+      line-height: 1.2;
+      // outline: 1px solid blue;
       li{
+        // line-height: 0.5;
+        // outline: 1px solid green;
         position: relative;
         display: inline-block;
         // line-height: $catRadius;
-        min-width:$catRadius; height:$catRadius;
+        min-width:$catRadius;
+        // height:$catRadius;
         margin-right: -0.2em;
         a{
+          // outline: 1px solid purple;
           display: block;
-          &:before{
+          overflow: hidden;
+          white-space: nowrap;
+          font-size: 0;
+          max-width: 15px;
+          transition: max-width 0.3s ease-in-out;
+
+          &:not(.active):before{
             content:"";
             opacity: 1;
             position: relative;
             display:inline-block;
+            vertical-align: middle;
             border-width: 3px;
             border-style: solid;
             // line-height: $catRadius;
             width:$catRadius; height:$catRadius;
             border-radius: $catRadius/2;
+            // line-height: 10px;
+          }
+          &.active:before{
+            content: "\d7"; /* use the hex value here...  \274c */
+            // font-weight: bold;
+            font-size: 35px;
+            line-height: 0.4;
+            width:$catRadius; height:$catRadius;
+            position: relative;
+            display:inline-block;
+            vertical-align: middle;
+            // outline: 1px solid red;
+            color: #000;
           }
-          &.tag-1:before{ border-color: $cat1;}
-          &.tag-2:before{ border-color: $cat2;}
-          &.tag-3:before{ border-color: $cat3;}
-          &.tag-4:before{ border-color: $cat4;}
-          &.tag-5:before{ border-color: $cat5;}
-          &.tag-6:before{ border-color: $cat6;}
-          &.tag-7:before{ border-color: $cat7;}
-          &.tag-8:before{ border-color: $cat8;}
+          &.tag-1:before{ border-color: $cat1; color:$cat1; }
+          &.tag-2:before{ border-color: $cat2; color:$cat2; }
+          &.tag-3:before{ border-color: $cat3; color:$cat3; }
+          &.tag-4:before{ border-color: $cat4; color:$cat4; }
+          &.tag-5:before{ border-color: $cat5; color:$cat5; }
+          &.tag-6:before{ border-color: $cat6; color:$cat6; }
+          &.tag-7:before{ border-color: $cat7; color:$cat7; }
+          &.tag-8:before{ border-color: $cat8; color:$cat8; }
           span{
-            position: absolute;
-            z-index: -1;
-            font-size: 0.7em;
+            // outline: 1px solid orange;
+            display: inline-block;
+            vertical-align: middle;
+            letter-spacing: normal;
+            font-size: 11px;
             font-weight: 300;
+            // line-height: 2;
             background-color: #fff;
             white-space: nowrap;
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
-            padding:0.2em 0.3em;
-            width:0;
-          }
-          &:hover{
-            span{ opacity: 1; width:auto; z-index: 10;}
+            padding:1px 5px 0 1px;
           }
+          // &:hover{
+          //   max-width:300px;
+          //   span{
+          //     opacity: 1;
+          //   }
+          // }
         }
       }
     }
@@ -367,11 +428,11 @@ div#center{
       overflow: hidden;
       img{
         transition: transform 0.4s ease-out;
-        &:hover{
-          transition: transform 0.2s ease-in-out;
-          transform-origin: center;
-          transform: scale(1.2);
-        }
+        // &:hover{
+        //   transition: transform 0.2s ease-in-out;
+        //   transform-origin: center;
+        //   transform: scale(1.2);
+        // }
       }
     }
 
@@ -390,12 +451,14 @@ div#center{
     h1{
       @include fontbold;
       color: $maincolor;
+      transition: color 0.4s ease-out;
       margin:0.4em 0 0.5em 0;
       line-height: 1.6;
       height:auto;
       span.date{
         font-weight: 200;
         border-left: 1px solid $maincolor;
+        transition: border-left-color 0.4s ease-out;
         padding:0.2em 0 0 0.5em;
         margin-left: 0.2em;
       }
@@ -419,10 +482,25 @@ div#center{
     }
 
     &:hover{
-      // header{
-      //   background-color: rgba($maincolor, 0.7); transition-timing-function: ease-out;
-      //   h1:after{border-top:0.5em solid #FFF;transition-timing-function: ease-out;}
-      // }
+      nav.categories a{
+        max-width:300px;
+        span{
+          opacity: 1;
+        }
+      }
+      a.image-link img{
+        transition: transform 0.3s ease-out;
+        transform-origin: center;
+        transform: scale(1.2);
+      }
+      header h1, header h2 a{
+        color:$secondcolor;
+        transition: color 0.2s ease-in-out;
+      }
+      header h1 span.date{
+        border-left-color: $secondcolor;
+        transition: border-left-color 0.2s ease-in-out;
+      }
     }
   }
 
@@ -437,6 +515,12 @@ div#center{
     nav.categories{
       @include catlist;
       padding:0.7em 0.7em 0;
+      ul li a{
+        max-width: 500px;
+        span{
+          opacity:1;
+        }
+      }
     }
 
     h1{
@@ -465,20 +549,34 @@ div#center{
     p{padding:0 0.7em 0.7em; margin:0;}
 
     #images{
+      max-width: 100%;
       // .row{margin:0;}
       // .block{padding:0.7em;}
       letter-spacing: 0px;
       a{
+        // box-sizing: 100%;
+        max-width: calc(100% - 1em);
         letter-spacing: normal;
         display: inline-block;
-        margin:0.7em 0 0 0.7em;
+        margin:0.4em 0 0 0.5em;
+        overflow: hidden;
+        &:hover img{
+          transition: transform 0.4s ease-out;
+          transform-origin: center;
+          transform: scale(1.2);
+        }
       }
     }
 
     img{
       // width:100%;
-      max-width:100%;
+      // max-width:100%;
       height:300px;
+      transition: transform 0.4s ease-out;
+      @media #{$small-only}{
+        max-width: 100%;
+        height: auto;
+      }
     }
 
   }
@@ -501,36 +599,54 @@ div#center{
   // body
   nav.categories{
 
-    margin: 1em 0;
+    margin: 1em 0 0;
     ul.tags{
       margin:0; padding:0; text-align:center;
       li{
         list-style: none; display:inline-block;
-        margin:0 1em;
+        margin:0 0.3em;
         a{
           display:block;
           // &:hover{text-decoration: underline;}
-          &:before{
+          &:not(.active):before{
             content:"";
             opacity: 1;
             position: relative;
             display:inline-block;
+            vertical-align: middle;
             border-width: 3px;
             border-style: solid;
             // line-height: $catRadius;
             width:$catRadius; height:$catRadius;
             border-radius: $catRadius/2;
           }
-          &.tag-1:before{ border-color: $cat1;}
-          &.tag-2:before{ border-color: $cat2;}
-          &.tag-3:before{ border-color: $cat3;}
-          &.tag-4:before{ border-color: $cat4;}
-          &.tag-5:before{ border-color: $cat5;}
-          &.tag-6:before{ border-color: $cat6;}
-          &.tag-7:before{ border-color: $cat7;}
-          &.tag-8:before{ border-color: $cat8;}
+          &.active:before{
+            content: "\d7"; /* use the hex value here...  \274c */
+            // font-weight: bold;
+            font-size: 35px;
+            line-height: 0.4;
+            width:$catRadius; height:$catRadius;
+            position: relative;
+            display:inline-block;
+            vertical-align: middle;
+            // outline: 1px solid red;
+            color: #000;
+          }
+          &.tag-1:before{ border-color: $cat1; color:$cat1; }
+          &.tag-2:before{ border-color: $cat2; color:$cat2; }
+          &.tag-3:before{ border-color: $cat3; color:$cat3; }
+          &.tag-4:before{ border-color: $cat4; color:$cat4; }
+          &.tag-5:before{ border-color: $cat5; color:$cat5; }
+          &.tag-6:before{ border-color: $cat6; color:$cat6; }
+          &.tag-7:before{ border-color: $cat7; color:$cat7; }
+          &.tag-8:before{ border-color: $cat8; color:$cat8; }
+        }
+        span{
+          @include fontnormal;
+          display:inline-block;
+          vertical-align: middle;
+          padding:1px 5px 0 1px;
         }
-        span{@include fontnormal;}
         &.active span{
           // display:inline-block;
           // position:relative;
@@ -600,19 +716,26 @@ div#center{
 @media #{$small-only}{
   header#top-bar{
     &:before{
-      padding-bottom: $headerpaddingtopH*0.5;
+      padding-bottom: $headerpaddingtopH*0.3;
     }
 
     #title-area{
-      height:$titleareaH -3.1em;
+      height:$titleareaH - 3em;
       // padding-top: $headerpaddingtopH;
       h1{
         height:100%;
-        min-height:($titleareaH - 3.1em)*0.8;
+        min-height:($titleareaH - 7em)*0.8;
         a{display: block;
           height:$logoH - 3em;
           // height:100%;
         }
+        a:before{
+          $r: 60px;
+          width:$r; height:$r;
+          border-radius: $r/2;
+          border-width: $r/5.5;
+        }
+
       }
     }
 
@@ -620,20 +743,29 @@ div#center{
       #title-area{
         height:($titleareaH - 3.1em)*$titleReducedFactor;
         // overflow: hidden;
+        h1{
+          font-size: 0.65em;
+          a:before{
+            $r: 30px;
+            width:$r; height:$r;
+            border-radius: $r/2;
+            border-width: $r/5.5;
+          }
+        }
       }
     }
 
-    .nav{
-      position:absolute;
-      top:$headerborderH+$headerpaddingtopH*0.5;
-      height:auto;
-    }
-    #left-nav{left:0;}
-    #right-nav{right:0;}
+    // .nav{
+    //   position:absolute;
+    //   top:$headerborderH+$headerpaddingtopH*0.5;
+    //   height:auto;
+    // }
+    // #left-nav{left:0;}
+    // #right-nav{right:0;}
   }
 
   div#center{
-    padding-top:$centerpaddingtop - 1.1em;
+    padding-top:$centerpaddingtop - 3.1em;
     padding-bottom: $centerpaddingbottom;
   }
 
@@ -656,13 +788,19 @@ footer#bottom-bar{
   position:absolute; bottom:0;
   width:100%; height:$footerheight;
   background-color: $maincolor;
+  transition: background-color 0.4s ease-out;
   color: white;
   text-align: center;
-  padding:1em 0;
+  padding:0.5em 0;
   // margin: 5vh 0 0;
+  &:hover{
+    background-color: $secondcolor;
+    transition: background-color 0.2s ease-in-out;
+  }
   h1{
     @include fontbold; height:auto; display:inline-block; position:relative; margin:0;
     color: inherit;
+    font-size: 0.75em;
     a{
       font-weight: inherit;
       color: inherit;
@@ -676,9 +814,19 @@ footer#bottom-bar{
   address{
     // font-size: 1em; font-weight: normal;
     @include fontnormal;
+    font-size: 0.6em;
     margin:-0.7em 0 0; line-height: 1.1; font-style: normal;
     a{text-decoration: underline;}
   }
+  ul.footer-menu{
+    text-align: center;
+    li{
+      display:inline-block;
+      a{
+        font-size: 0.6em;
+      }
+    }
+  }
 }
 
 div.featherlight:last-of-type{

+ 8 - 0
user/themes/ouidade/templates/error.html.twig

@@ -0,0 +1,8 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+  <section class="default">
+    <h1>Error {{ header.http_response_code }}</h1>
+    <p>{{ page.content }}</p>
+  </section>
+{% endblock %}

+ 5 - 0
user/themes/ouidade/templates/home.html.twig

@@ -10,4 +10,9 @@
       {% endif %}
     {% endfor %}
   </div>
+
+  <nav class="categories">
+    {% include 'partials/tagslist.html.twig' with {'base_url':"/", 'taxonomy':'tag', 'display':'inline'} %}
+  </nav>
+
 {% endblock %}

+ 7 - 0
user/themes/ouidade/templates/partials/footer.html.twig

@@ -6,6 +6,13 @@
         {{ site.adresse|e('html') }}<br />
         <a class="mailto" href="mailto:{{site.email}}">{{ site.email|e('html') }}</a>
       </address>
+      <ul class="footer-menu">
+        {% 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>
     </section>
   </div>
 </header>

+ 5 - 5
user/themes/ouidade/templates/partials/header.html.twig

@@ -6,16 +6,16 @@
           <h1><a href="/">{{ site.title|e('html') }}<br/><span>{{ site.subtitle|e('html') }}</span></a></h1>
       </section>
 
-      <nav id="left-nav" class="nav small-6 medium-2 medium-pull-8 columns">
+      <!-- <nav id="left-nav" class="nav small-6 medium-2 medium-pull-8 columns">
         {% if config.plugins.taxonomylist.enabled %}
           <div class="wrapper">
               <h4><a data-filter="*" href="/categories">Catégories</a></h4>
               {% include 'partials/tagslist.html.twig' with {'base_url':"/categories/", 'taxonomy':'tag'} %}
           </div>
         {% endif %}
-      </nav>
+      </nav> -->
 
-      <nav id="right-nav" class="nav small-6 medium-2 columns">
+      <!-- <nav id="right-nav" class="nav small-6 medium-2 columns">
         <div class="wrapper">
           <ul class="right">
             {% for page in pages.children %}
@@ -25,9 +25,9 @@
             {% endfor %}
           </ul>
         </div>
-      </nav>
+      </nav> -->
 
-      <div class="line small-6 medium-12 columns"></div>
+      <div class="line small-12 medium-12 columns"></div>
 
     </div>
   </div>

+ 3 - 3
user/themes/ouidade/templates/partials/projet-block.html.twig

@@ -1,7 +1,7 @@
 {% set blockclass = "" %}
 {% if page.taxonomy.tag %}
   {% for tag in page.taxonomy.tag %}
-    {% set blockclass = blockclass ~ " tag-" ~ catlist[(tag|e('url'))]  %}
+    {% set blockclass = blockclass ~ " " ~ tag|replace({'|': "-", " " : ""}) %}
   {% endfor %}
 {% endif %}
 
@@ -21,8 +21,8 @@
           <li>
             <a
               class="tag-{{ catlist[(tag|e('url'))] }}"
-              data-filter=".tag-{{ catlist[(tag|e('url'))] }}"
-              href="/categories/tag{{ config.system.param_sep }}{{ tag|e('url') }}">
+              data-filter="{{ tag|replace({'|': "-", " " : ""}) }}"
+              href="{{ base_url }}#{{ tag|replace({'|': "-", " " : ""}) }}">
                 <span>{{ tag }}</span>
             </a>
           </li>

+ 2 - 2
user/themes/ouidade/templates/partials/tagslist.html.twig

@@ -7,8 +7,8 @@
         <li class="{{ active }}">
           <a
             class="tag-{{ catlist[(tag|e('url'))] }}{{ active }}"
-            data-filter=".tag-{{ catlist[(tag|e('url'))] }}"
-            href="{{ base_url }}{{ taxonomy }}{{ config.system.param_sep }}{{ tag|e('url') }}">
+            data-filter="{{ tag|replace({'|': "-", " " : ""}) }}"
+            href="{{ base_url }}#{{ tag|replace({'|': "-", " " : ""}) }}">
               <span>{{ tag }}</sapn>
           </a>
         </li>

+ 6 - 2
user/themes/ouidade/templates/projet.html.twig

@@ -14,7 +14,11 @@
         <ul>
           {% for tag in page.taxonomy.tag %}
             <li>
-              <a class="tag-{{ catlist[(tag|e('url'))] }}" href="/categories/tag{{ config.system.param_sep }}{{ tag|e('url') }}"><span>{{ tag }}</span></a>
+              <a
+                class="tag-{{ catlist[(tag|e('url'))] }}"
+                href="/#{{ tag|replace({'|': "-", " " : ""}) }}">
+                  <span>{{ tag }}</span>
+              </a>
             </li>
           {% endfor %}
         </ul>
@@ -35,7 +39,7 @@
   </section>
 
   <nav class="categories">
-    {% include 'partials/tagslist.html.twig' with {'base_url':"/categories/", 'taxonomy':'tag', 'display':'inline'} %}
+    {% include 'partials/tagslist.html.twig' with {'base_url':"/", 'taxonomy':'tag', 'display':'inline'} %}
   </nav>
 
 {% endblock %}