menu

assets/css/base/_var.scss

@@ -45,6 +45,7 @@
   --color-accent: #00ff00;
   --color-accent-50: #e9ffe9;
   --color-accent-100: #d8fdd8;
+  --dark: black;
 
 
 

assets/css/components/_buttons.scss

@@ -19,6 +19,24 @@ button:disabled{
 
 }
 
+.soutenir{
+    a{
+        color: var(--color-accent);
+        &:hover{
+            color: var(--color-accent)!important;
+            text-decoration: underline!important;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+// DELETE ?
 
 .btn__default{
 

assets/css/partials/_site-footer.scss

@@ -1,6 +1,6 @@
 #site-footer{
 
-   background-color: black;
+   background-color: var(--dark);
    padding: calc(var(--padding-body)*2) var(--padding-body);
 
 

assets/css/partials/_site-header.scss

@@ -17,7 +17,7 @@
   width: calc(100vw - var(--padding-body)*2);
   height: var(--header-h);
   background-color: var(--color-bg);
-  border-bottom: var(--border-light);
+  // border-bottom: var(--border-light);
 
   display: flex;
   align-items: center;
@@ -43,21 +43,10 @@
     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{
+    gap: var(--gap); 
     text-transform: uppercase;
   }
- 
+
 
   #lang-toggle{
     display: flex;

assets/css/partials/_site-menu.scss

@@ -0,0 +1,86 @@
+#site-menu{
+    position: fixed;
+    width: 420px;
+    height: calc(100dvh - var(--header-h));
+    height: calc(100vh - var(--header-h));
+    top: var(--header-h);
+    right: 0;
+    background-color: var(--color-bg);
+    border-left: var(--border-light);
+    padding: var(--padding-body);
+    // background-color: red;
+
+    display: flex;
+    flex-direction: column;
+
+    .baseline{
+        font-size: var(--fs-medium);
+    }
+
+    form{
+        margin-top: calc(var(--spacing)*1);
+        margin-bottom: calc(var(--spacing)*1);
+        --icon: 40px;
+        display: grid;
+        grid-template-columns: var(--icon) 1fr;
+        input{
+            grid-column: 1/3;
+            grid-row: 1;
+            height: calc(var(--h-block) * 1.5);
+            width: 100%;
+            background: var(--color-bg);
+            border: 1px solid var(--color-txt);
+            padding-left: var(--icon);
+            font-family: var(--font);
+            font-size: var(--fs-normal);
+            color: var(--color-txt);
+            padding-top: 3px;
+            &::placeholder{
+                font-family: var(--font);
+                font-size: var(--fs-normal);
+                color: var(--color-txt);
+            }
+            &:focus{
+                border-color: var(--color-accent);
+                outline: none;
+            }
+        }
+
+        .icon{
+            grid-column: 1;
+            grid-row: 1;
+            z-index: 10;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            svg{
+                width: 20px;
+            }
+        }
+    }
+
+
+    nav{
+        flex-grow: 1;
+        ul{ 
+            list-style-type: none;
+            text-transform: uppercase;
+            li{
+                font-size: var(--fs-medium);
+                a{
+                    display: block;
+                    text-decoration: none;
+                    padding: 0.5em 0;
+                    &:hover{
+                        color: var(--grey-200);
+                    }
+                }
+            }
+
+            .highlight{
+                text-transform: uppercase;
+            }
+        }
+    }
+}

assets/css/style.scss

@@ -14,6 +14,7 @@
 
 
 @import 'partials/site-header';
+@import 'partials/site-menu';
 @import 'partials/site-footer';
 @import 'partials/main-layout';