First commit

assets/css/partials/_site-footer.scss

@@ -0,0 +1,122 @@
+#site-footer{
+
+   background-color: black;
+
+   width: 100vw;
+   position: relative;
+   left: calc(var(--padding-body)*-1);
+   padding: calc(var(--padding-body)*2) var(--padding-body);
+//    border-top: var(--border-light);
+
+   p{
+    margin: calc(var(--spacing)*0.5) 0;
+
+    a{
+        text-decoration: none;
+        &:hover{
+            text-decoration: underline;
+        }
+    }
+   }
+
+   .p__small{
+    font-size: var(--fs-x-small);
+    // margin-top: calc(var(--spacing)*0.5)
+   }
+
+   #list-socials {
+    list-style: none;
+    columns: 2;
+    max-width: 500px;
+    margin: 0;
+    a{
+    
+        display: flex;
+        align-items: center;
+        gap: 1ch;
+        text-decoration: none;
+        height: calc(var(--spacing)*1);
+
+        &::after{
+            content: '↗';
+            color: var(--grey-300);
+        }
+    }
+
+    .text{
+        line-height: 1;
+       
+    }
+
+    .icon{
+        width: 20px;
+        height: 20px;
+        position: relative;
+        top: -2px;
+    }
+    svg{
+        display: flex;
+        align-items: center;
+        width: 20px;
+        height: 20px;
+      
+    }
+   }
+
+  
+
+
+   @media #{$small}{ 
+    margin-top: calc(var(--spacing)*2);
+    .footer__socials{
+        margin-top: calc(var(--spacing)*1.5);
+    }
+    .footer__mentions{
+        margin-top: calc(var(--spacing)*0.5);
+        p{       
+            // font-size: var(--font-size);
+            margin-top: calc(var(--spacing)*2);
+        }
+    }
+   }
+   
+
+   @media #{$small-up}{
+
+    .site-footer__container{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap:  calc(var(--spacing)*2);
+    
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+
+    .footer__mentions{
+        grid-column: span 2;
+        text-align: center;
+        p{       
+            font-size: var(--font-size);
+            margin-top: calc(var(--spacing)*2);
+        }
+
+    }
+
+   }
+
+   @media #{$medium-up}{
+        .site-footer__container{
+            column-gap:  calc(var(--spacing)*4);
+        }
+    }
+
+    @media #{$small}{
+        .footer__mentions{
+            padding-top: calc(var(--spacing)*1);
+            p{   margin-top: 0;}
+          
+            text-align: center;
+        }
+    }
+
+}

assets/css/partials/_site-header.scss

@@ -0,0 +1,78 @@
+@keyframes add-border {
+  from {
+    border-bottom-color: transparent;
+  }
+  to {
+    border-bottom: var(--grey-800);
+  }
+}
+
+#site-header {
+  position: fixed;
+  left: var(--padding-body);
+  top: 0px;
+  z-index: 900;
+
+  width: calc(100vw - var(--padding-body) * 2);
+  // padding: 0 var(--padding-body);
+  height: var(--header-h);
+  &.is-shrinked {
+    height: var(--header-h-shrinked);
+    // animation: add-border 0.2s linear 0.2s;
+    border-bottom: var(--border-light);
+  }
+  // transition: all ease-in 0.2s;
+
+  background-color: var(--color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .site-title {
+    display: flex;
+    width: 120px;
+    transition: all ease-in 0.2s;
+    overflow: hidden;
+    svg {
+      fill: var(--color-txt);
+    }
+  }
+  &.is-shrinked {
+    .site-title {
+      width: 80px !important;
+    }
+  }
+
+  .header-left,
+  .header-right {
+    width: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .header-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #toggle-lang {
+    list-style: none;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75ch;
+    text-transform: uppercase;
+    color: var(--grey-400);
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+
+    a {
+      text-decoration: none;
+    }
+    li.is-selected {
+      color: var(--color-txt);
+    }
+  }
+}