masonry

user/themes/gilles_acezat/scss/theme.scss

@@ -9,6 +9,7 @@
 
 @import 'theme/all';
 @import 'theme/header';
-@import 'theme/home'; 
+@import 'theme/home';
 @import 'theme/blog';
+@import 'theme/item';
 @import 'theme/footer';

user/themes/gilles_acezat/scss/theme/_blog.scss

@@ -1,7 +1,6 @@
 .card{
   width: calc(100% / 3);
-  height: 100%;
-  padding: 0 5px;
+  padding: 0 10px;
   .card-header{
     display: inline-flex;
     & > div{
@@ -15,3 +14,35 @@
     }
   }
 }
+
+#items{
+  .full-works{
+    width: 100%;
+  }
+  .card{
+    margin-bottom: 20px;
+    min-width: 200px;
+  }
+}
+
+#body-wrapper.blog-listing{
+  border-top: 1px solid black;
+  padding-top: 20px;
+  #items{
+    .content-title{
+      display: inline-flex;
+      align-items: baseline;
+    }
+    .e-content{
+      width: calc(33% * 2);
+      column-count: 2;
+      margin: 20px  0;
+      & > p{
+      }
+    }
+    .top{
+      text-align: center;
+      margin-bottom: 20px;
+    }
+  }
+}

user/themes/gilles_acezat/scss/theme/_header.scss

@@ -1,84 +1,85 @@
-header{
-  h1{
-    font-size: 11.2vw;
-    line-height: 7vw!important;
-  }
-  h2{
-    font-size: 3.7vw;
-  }
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  nav{
-    position: relative;
-    height: 100%;
-    .logo{
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-  .contact{
-    position: fixed;
-    top: 50px;
-    right: 50px;
-    transform: scale(1);
-    transition: transform 0.5s ease;
-    cursor: pointer;
-    &:hover{
-      transition: transform 0.5s ease;
-      transform: scale(0.9);
-    }
-    svg{
-      animation: rotation 6s infinite linear;
-      width: 90.4px;
-      height: 87.45px;
-    }
-    h3{
-      transform: rotate(35deg);
-    }
-    p{
-      display: none;
-    }
-  }
-  & > section{
-    height: 100%;
-    &.works-mea{
-      height: auto!important;
+// home
+body{
+  &> .blog{
+    header{
+      width: 100%;
+      height: 100vh;
       display: inline-flex;
-      flex-wrap: wrap;
-      margin-bottom: 10px;
-      .card{
-        line-height: 0.8!important;
-        .card-header{
-          margin-top: 10px;
+      flex-direction: column;
+      & > section{
+        position: relative;
+        height: 50vh;
+        min-height: 250px;
+        &.works-mea{
+          display: inline-flex;
+          flex-wrap: wrap;
+          // margin-bottom: 70px;
+          align-items: flex-end;
+          height: 100%;
+          .card{
+            line-height: 0.8!important;
+            .card-header{
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+      h1{
+        font-size: 11.2vw;
+        line-height: 7vw!important;
+      }
+      h2{
+        font-size: 3.7vw;
+      }
+      nav{
+        margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
+        transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
+      }
+      .scroll{
+        width: 50px;
+        height: 15px;
+        margin: 0 auto 10px auto;
+        overflow: hidden;
+        position: relative;
+        & > p:nth-child(1){
+          text-align: center;
+          position: absolute;
+          top: -20px;
+          animation: translatep1 2s infinite linear;
+        }
+        & > p:nth-child(2){
+          text-align: center;
+          position: absolute;
+          top: -20px;
+          animation: translatep1 2s infinite linear;
+          animation-delay: 1s;
         }
       }
     }
   }
-  h2{
-    margin-left: 10px;
-  }
-  .scroll{
-    width: 50px;
-    height: 40px;
-    margin: 0 auto 10px auto;
-    overflow: hidden;
-    position: relative;
-    & > p:nth-child(1){
-      text-align: center;
-      position: absolute;
-      top: -20px;
-      animation: translatep1 2s infinite linear;
-    }
-    & > p:nth-child(2){
-      text-align: center;
-      position: absolute;
-      top: -20px;
-      animation: translatep1 2s infinite linear;
-      animation-delay: 1s;
+}
+
+
+// page
+body{
+  & > .item{
+    header{
+      height: 100px;
+      position: relative;
+      nav{
+        position: absolute;
+        margin-top: 50px; /* poussé de la moitié de hauteur de viewport */
+        transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
+      }
+      h1{
+        color: black;
+      }
+      h2{
+        display: none;
+      }
+      .scroll{
+        display: none;
+      }
     }
   }
 }

user/themes/gilles_acezat/scss/theme/_typography.scss

@@ -3,11 +3,23 @@ h1, h2{
   font-weight: normal;
 }
 
-h1{
-  font-size: $fh1;
-  -webkit-text-stroke:.1rem #111;
-  color: transparent;
-  line-height: 7rem;
+body{
+  &>.blog{
+    h1{
+      font-size: $fh1;
+      -webkit-text-stroke:.1rem #111;
+      color: transparent;
+      line-height: 7rem;
+    }
+  }
+}
+
+body{
+  &>.item{
+    h1{
+      font-size: $fh2;
+    }
+  }
 }
 
 h2{
@@ -21,7 +33,7 @@ h3{
 }
 
 h5{
-  font-size: 1rem;
+  font-size: $fh5;
   font-family: $bold;
   font-weight: normal;
 }
@@ -55,6 +67,10 @@ header{
   .card-category{
       font-family: $italic;
       font-weight: normal;
+      font-size: $fs;
+  }
+  .card-date{
+    font-size: $fs;
   }
   .card-footer{
     span{
@@ -72,6 +88,7 @@ header{
 
 .scroll{
   p{
+    font-size: $fs;
     font-family: $bold;
     font-weight: normal;
   }
@@ -104,3 +121,12 @@ header{
     }
   }
 }
+
+
+body{
+  & > .item{
+    h2{
+      font-size: $fh2-i;
+    }
+  }
+}

user/themes/gilles_acezat/scss/theme/_variables.scss

@@ -11,8 +11,9 @@ $fh1: 11rem;
 $fh2:3rem;
 $fh2-i: 1.3rem;
 $fh3: 1rem;
+$fh5:0.8rem;
 $fp: 1rem;
-$fs:0.9rem;
+$fs:0.8rem;
 // interline
 
 //interlettre

user/themes/gilles_acezat/scss/theme/all.scss

@@ -1,3 +1,32 @@
 body{
   padding: 0 2%;
 }
+
+header{
+  .contact{
+    position: fixed;
+    top: 50px;
+    right: 50px;
+    transform: scale(1);
+    transition: transform 0.5s ease;
+    cursor: pointer;
+    &:hover{
+      transition: transform 0.5s ease;
+      transform: scale(0.9);
+    }
+    svg{
+      animation: rotation 6s infinite linear;
+      width: 90.4px;
+      height: 87.45px;
+    }
+    h3{
+      transform: rotate(35deg);
+    }
+    p{
+      display: none;
+    }
+  }
+  h2{
+    margin-left: 10px;
+  }
+}