maj grav

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{