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;
+$fh1: 11rem;
-$fh2:5rem;
+$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;
+}

user/themes/gilles_acezat/templates/partials/base.html.twig

@@ -37,8 +37,8 @@
             <section class="container {{ grid_size }}">
                 <nav class="navbar">
                     <section class="navbar-section logo">
-                      <a href="/"><h1>{{site.title|lower}}</h1></a>
+                      <a href="/"><h1>{{site.title|capitalize}}</h1></a>
-                      <h2>{{site.header.status|capitalize}}</h2>
+                      <h2>{{site.header.status|upper}}</h2>
                     </section>
                     <section class="navbar-section desktop-menu">
 
@@ -49,6 +49,25 @@
                     </section>
                 </nav>
                 <div class="contact">
+                  <svg>
+                    <path
+                       transform="matrix(3.2731668,1.8897638,-1.8897638,3.2731668,-1501.4361,-950.09606)"
+                       inkscape:transform-center-x="-3.8790373e-06"
+                       d="m 494.32891,31.578537 -6.59395,3.359786 -7.30945,-1.157703 -5.23299,-5.232988 -1.1577,-7.309449 3.35978,-6.59395 6.59395,-3.359785 7.30945,1.157703 5.23299,5.232988 1.1577,7.309449 z"
+                       inkscape:randomized="0"
+                       inkscape:rounded="0"
+                       inkscape:flatsided="false"
+                       sodipodi:arg2="1.4137167"
+                       sodipodi:arg1="0.78539816"
+                       sodipodi:r2="11.974361"
+                       sodipodi:r1="11.974361"
+                       sodipodi:cy="23.111385"
+                       sodipodi:cx="485.86176"
+                       sodipodi:sides="5"
+                       style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16906723;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                       sodipodi:type="star"/>
+                  </svg>
+
                   {% include 'partials/navigation.html.twig' %}
                 </div>
             </section>

user/themes/gilles_acezat/templates/partials/blog-list-item.html.twig

@@ -2,7 +2,7 @@
     {% set image = page.media.images|first %}
     {% if image %}
     <div class="card-image">
-        <a href="{{ page.url }}">{{ image.cropZoom(800,400).html }}</a>
+        <a href="{{ page.url }}">{{ image.html }}</a>
     </div>
     {% endif %}
 
@@ -11,17 +11,18 @@
         {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
         </div>
 
-        {% if page.date %}
-        <div class="card-date">
-          {% include 'partials/blog/date.html.twig' %}
-        </div>
-        {% endif %}
 
         {% if page.taxonomy.category %}
           <div class="card-category">
             {% include 'partials/blog/category.html.twig' %}
           </div>
       {% endif %}
+
+      {% if page.date %}
+      <div class="card-date">
+        {% include 'partials/blog/date.html.twig' %}
+      </div>
+      {% endif %}
     </div>
 
     {% if page.taxonomy.tag %}