masonry

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;
+      }
     }
   }
 }