From 8c604d12c903aa871f049b73755f6919d0f56e06 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Tue, 16 Dec 2025 18:36:28 +0100 Subject: [PATCH] menu --- assets/css/base/_var.scss | 1 + assets/css/components/_buttons.scss | 18 ++++++ assets/css/partials/_site-footer.scss | 2 +- assets/css/partials/_site-header.scss | 17 +----- assets/css/partials/_site-menu.scss | 86 +++++++++++++++++++++++++++ assets/css/style.scss | 1 + assets/icons/search.svg | 1 + components/site-footer.html | 8 +-- components/site-header.html | 5 +- components/site-menu.html | 24 ++++++++ index.html | 5 +- 11 files changed, 140 insertions(+), 28 deletions(-) create mode 100644 assets/css/partials/_site-menu.scss create mode 100644 assets/icons/search.svg create mode 100644 components/site-menu.html diff --git a/assets/css/base/_var.scss b/assets/css/base/_var.scss index 8726e9f..1a3d2c9 100644 --- a/assets/css/base/_var.scss +++ b/assets/css/base/_var.scss @@ -45,6 +45,7 @@ --color-accent: #00ff00; --color-accent-50: #e9ffe9; --color-accent-100: #d8fdd8; + --dark: black; diff --git a/assets/css/components/_buttons.scss b/assets/css/components/_buttons.scss index 433bea8..f1ccd41 100644 --- a/assets/css/components/_buttons.scss +++ b/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{ diff --git a/assets/css/partials/_site-footer.scss b/assets/css/partials/_site-footer.scss index b477eb1..3ee329a 100644 --- a/assets/css/partials/_site-footer.scss +++ b/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); diff --git a/assets/css/partials/_site-header.scss b/assets/css/partials/_site-header.scss index 66b32f2..7b06eaf 100644 --- a/assets/css/partials/_site-header.scss +++ b/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; diff --git a/assets/css/partials/_site-menu.scss b/assets/css/partials/_site-menu.scss new file mode 100644 index 0000000..93c6f10 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index ed69ba5..23a36d3 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -14,6 +14,7 @@ @import 'partials/site-header'; +@import 'partials/site-menu'; @import 'partials/site-footer'; @import 'partials/main-layout'; diff --git a/assets/icons/search.svg b/assets/icons/search.svg new file mode 100644 index 0000000..5ea9712 --- /dev/null +++ b/assets/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/site-footer.html b/components/site-footer.html index a2a5417..a0472c6 100644 --- a/components/site-footer.html +++ b/components/site-footer.html @@ -46,13 +46,7 @@

Suivez Index sur les réseaux sociaux

-
- -
- - - - +
diff --git a/components/site-header.html b/components/site-header.html index cb5859f..65c12b8 100644 --- a/components/site-header.html +++ b/components/site-header.html @@ -13,13 +13,10 @@ - - diff --git a/components/site-menu.html b/components/site-menu.html new file mode 100644 index 0000000..b6f8ee6 --- /dev/null +++ b/components/site-menu.html @@ -0,0 +1,24 @@ +

Index est une ONG d’investigation numérique au service du public, +de la vérité et de la justice.

+ +
+ + +
+ + + + +
\ No newline at end of file diff --git a/index.html b/index.html index 59ce055..ac19030 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,8 @@ - + +
@@ -24,7 +25,7 @@
-
+ \ No newline at end of file