css card + header

user/themes/gilles_acezat/scss/theme.scss

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

user/themes/gilles_acezat/scss/theme/_animation.scss

@@ -0,0 +1,31 @@
+@keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+
+
+@keyframes translatep1{
+  0%{
+    transform: translateY(-0px);
+  }
+
+  100%{
+    transform: translateY(35px);
+    visibility: hidden;
+  }
+}
+
+@keyframes translatep2{
+  0%{
+    transform: translateY(-20px);
+  }
+
+  100%{
+    transform: translateY(40px);
+    visibility: hidden;
+  }
+}

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

@@ -0,0 +1,17 @@
+.card{
+  width: calc(100% / 3);
+  height: 100%;
+  padding: 0 5px;
+  .card-header{
+    display: inline-flex;
+    & > div{
+      margin-right: 5px;
+      & > a{
+        vertical-align:  baseline;
+      }
+      & > time{
+        vertical-align:  baseline;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+header{
+  width: 100%;
+  height: 50vh;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  .contact{
+    position: fixed;
+    top: 50px;
+    right: 50px;
+    svg{
+      animation: rotation 6s infinite linear;
+      width: 90.4px;
+      height: 87.45px;
+    }
+    h3{
+      transform: rotate(35deg);
+    }
+    p{
+      display: none;
+    }
+  }
+  h2{
+    margin-left: 10px;
+  }
+}

user/themes/gilles_acezat/scss/theme/_home.scss

@@ -0,0 +1,58 @@
+#body-wrapper{
+  #items{
+      .works-mea{
+        display: inline-flex;
+        width: 100%;
+        height: 50vh;
+        align-items: flex-end;
+        .card{
+          .card-image{
+            img{
+              width: 100%;
+              height: auto;
+            }
+          }
+        }
+      }
+      .scroll{
+        width: 100%;
+        height: 15px;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+        width: 50px;
+        
+        & > 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;
+        }
+      }
+      .cat-list{
+        width: 100%;
+        height: auto;
+        border-top: 1px solid black;
+        border-bottom: 1px solid black;
+        padding: 10px 0;
+        margin:  20px 0;
+        ul{
+          display: inline-flex;
+          li{
+            margin-right: 10px;
+          }
+        }
+      }
+      .full-works{
+        display: inline-flex;
+        flex-wrap: wrap;
+      }
+  }
+}

user/themes/gilles_acezat/scss/theme/_reset.scss

@@ -15,6 +15,7 @@
 html {
   margin: 0;
   padding: 0;
+  font-size: 18px;
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }

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

@@ -5,6 +5,10 @@ h1, h2{
 
 h1{
   font-size: $fh1;
+  -webkit-text-stroke-width: 2px;
+  -webkit-text-stroke-color: black;
+  color: transparent;
+  line-height: 7rem;
 }
 
 h2{
@@ -18,6 +22,7 @@ h3{
 }
 
 h5{
+  font-size: 1rem;
   font-family: $bold;
   font-weight: normal;
 }
@@ -33,13 +38,25 @@ time{
   font-weight: normal;
 }
 
-.card{
 
+header{
+  .contact{
+    h3{
+      text-transform: lowercase;
+      color:white;
+      margin-top:-52px;
+      margin-left: 18px;
+    }
+  }
+}
+.card{
+  h5{
+    text-transform: uppercase;
+  }
   .card-category{
       font-family: $italic;
       font-weight: normal;
   }
-
   .card-footer{
     span{
       font-family: $medium;

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

@@ -7,16 +7,14 @@
 
 // font-size
 
-$fh1: 15rem;
-$fh2:5rem;
+$fh1: 11rem;
+$fh2:3rem;
 $fh2-i: 1.3rem;
 $fh3: 1rem;
-
 $fp: 1rem;
 
 // interline
 
-
 //interlettre
 $letterI1: 0.1rem;
 

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

@@ -0,0 +1,3 @@
+body{
+  padding: 0 50px;
+}