base

assets/css/partials/_main-layout.scss

@@ -0,0 +1,15 @@
+body{
+    min-height: 100dvh;
+    min-height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+
+
+    main{
+        flex-grow: 1;
+        margin-top: var(--header-h);
+        padding: 0 var(--padding-body);
+    }
+    
+}

assets/css/partials/_site-footer.scss

@@ -0,0 +1,94 @@
+#site-footer{
+
+   background-color: black;
+   padding: calc(var(--padding-body)*2) var(--padding-body);
+
+
+   .logo {
+    margin-top: calc(var(--spacing)*0.25);
+    margin-bottom: calc(var(--spacing)*1);
+        svg{
+            width: 100px;
+        }
+   }
+
+   p{
+    margin: calc(var(--spacing)*0.5) 0;
+    a{
+        text-decoration: none;
+        &:hover{
+            text-decoration: underline;
+            color: currentColor;
+        }
+    }
+   }
+
+   .p__small{
+    font-size: var(--fs-x-small);
+    color: var(--grey-600);
+   }
+
+   .footer__mentions{
+        p{       
+            font-size: var(--fs-small);
+            color: var(--color-txt)
+        }
+    }
+
+
+
+   @media #{$small}{ 
+    margin-top: calc(var(--spacing)*2);
+
+ 
+    .footer__socials{
+        margin-top: calc(var(--spacing)*0.75);
+        padding-top: calc(var(--spacing)*0.25);
+        border-top: var(--border-light);
+
+        .list-socials{
+            margin-top: calc(var(--spacing)*0.5);
+            margin-bottom: calc(var(--spacing)*0.75);
+        }
+    }
+    .footer__mentions{
+       
+        border-top: var(--border-light);
+        padding-top: calc(var(--spacing)*0.25);
+        p{       
+            font-size: var(--fs-small);
+            text-align: center;
+        }
+    }
+   }
+
+
+   @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__socials .container{
+        max-width: 400px;
+        columns: 2;
+        margin-top: calc(var(--spacing)*1);
+    }
+    
+    .footer__mentions{
+        grid-column: span 2;
+        p{       
+            margin-top: calc(var(--spacing)*1);
+        }
+
+    }
+
+   }
+
+
+}

assets/css/partials/_site-header.scss

@@ -0,0 +1,84 @@
+@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;
+  --gap: 3ch;
+
+  width: calc(100vw - var(--padding-body)*2);
+  height: var(--header-h);
+  background-color: var(--color-bg);
+  border-bottom: var(--border-light);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+
+  a{
+    text-decoration: none;
+    &:hover{
+      color: var(--grey-200);
+    }
+  }
+
+
+  #site-title {
+    flex-grow: 2;
+    svg{
+      width: 100px;
+    }
+  }
+
+  ul{
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+  }
+
+  #btn--soutenir{
+    color: var(--color-accent);
+    a:hover{
+      color: var(--color-accent);
+      text-decoration: underline;
+    }
+  }
+
+  ul,  #btn--soutenir{
+    text-transform: uppercase;
+  }
+ 
+
+  #lang-toggle{
+    display: flex;
+    gap: 1ch;
+    button:disabled{ color: var(--color-txt-light); }
+  }
+
+  #menu-toggle{
+    cursor: pointer;
+    svg{
+      width: 30px;
+    }
+    .close{ display: none; }
+  
+  }
+
+  button{
+    
+    &:hover{
+      svg{ fill: var(--grey-200)!important; }
+    }
+  }
+
+}