From c4de87fe497147b99f40993c171836fc63dd434b Mon Sep 17 00:00:00 2001 From: Simon C Date: Thu, 5 Nov 2020 14:14:55 +0100 Subject: [PATCH] feat: Ajout du menu mobile --- assets/styles/header.sass | 151 +++++++++++++++++++++++++++++++++++ assets/styles/main.sass | 86 ++------------------ layouts/index.html | 14 +--- layouts/partials/header.html | 29 ++++--- static/icons/burger.svg | 1 + 5 files changed, 176 insertions(+), 105 deletions(-) create mode 100644 assets/styles/header.sass create mode 100644 static/icons/burger.svg diff --git a/assets/styles/header.sass b/assets/styles/header.sass new file mode 100644 index 0000000..65c742f --- /dev/null +++ b/assets/styles/header.sass @@ -0,0 +1,151 @@ +// HEADER + +.header + height: 80vh + position: relative + + .hero + position: absolute + top: 0 + bottom: 0 + left: 0 + right: 0 + z-index: -1 + object-fit: cover + width: 100% + height: 100% + + .nav + position: absolute + top: 50px + bottom: 0 + left: 0 + right: 0 + background-color: $vert + height: 70px + + @media screen and (max-width: $size-md) + top: 30px + height: 50px + + .container + display: flex + align-items: center + justify-content: center + + @media screen and (max-width: $size-md) + justify-content: space-between + + .logo + $size-border-logo: 20px + position: relative + padding-left: $size-border-logo + z-index: 20 + margin-right: 40px + + &::after + position: absolute + content: "" + top: -$size-border-logo + bottom: -$size-border-logo + left: 0 + right: -$size-border-logo + background-color: white + z-index: 10 + + a + display: block + + img + position: relative + height: 70px + z-index: 30 + + @media screen and (max-width: $size-md) + height: 50px + + #menu + list-style-type: none + display: flex + align-items: center + padding: 0 + margin: 0 + + @media screen and (max-width: $size-xl) + font-size: .95rem + + @media screen and (max-width: $size-md) + display: none + position: fixed + top: 0 + bottom: 0 + left: 0 + right: 0 + z-index: 100 + background: $vert + flex-direction: column + justify-content: center + + &:hover + display: inherit + + &:hover + .close-button + display: inherit + + img + display: inherit + + li + display: flex + align-items: center + + &:last-child::after + content: none + + &::after + content: "" + border-right: 2px white solid + height: 20px + + @media screen and (max-width: $size-md) + content: none + + a + color: white + display: flex + align-items: center + padding: 10px + text-decoration: none + border-top: 1px dashed transparent + border-bottom: 1px dashed transparent + + &:hover + border-top-color: white + border-bottom-color: white + + img + padding: 0 10px + + @media screen and (max-width: $size-lg) and (min-width: $size-md) + display: none + + span + white-space: nowrap + + .open-button + display: none + white-space: nowrap + + &:focus + #menu + display: inherit + + &:focus + #menu + .close-button + display: inherit + + @media screen and (max-width: $size-md) + display: inherit + + .close-button + white-space: nowrap + display: none + z-index: 200 diff --git a/assets/styles/main.sass b/assets/styles/main.sass index 9a1af35..d2a572f 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -13,88 +13,14 @@ $size-xl: 1280px @import "./reset" @import "./html" +@import "./header" img display: block -// HEADER +// CONTAINER -.header - height: 80vh - position: relative - - .hero - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - z-index: -1 - object-fit: cover - min-width: 100% - min-height: 100% - - .nav - position: absolute - top: 50px - bottom: 0 - left: 0 - right: 0 - - background-color: $vert - height: 70px - - ol - list-style-type: none - margin: 0 auto - padding: 0 - width: $size-xl - display: flex - align-items: center - - li - display: inline-block - - .logo - $size-border-logo: 20px - position: relative - padding-left: $size-border-logo - z-index: 20 - margin-right: 40px - - &::after - position: absolute - content: "" - top: -70px - bottom: -$size-border-logo - left: 0 - right: -$size-border-logo - background-color: white - z-index: 10 - img - position: relative - height: 70px - z-index: 30 - - - .link - display: flex - align-items: center - - &:last-child::after - content: none - - &::after - content: "" - border-right: 2px white solid - height: 20px - - a - color: white - display: flex - align-items: center - padding: 10px - text-decoration: none - - img - padding: 0 10px +.container + max-width: $size-xl + margin: 0 auto + padding: 0 20px diff --git a/layouts/index.html b/layouts/index.html index 601df81..dd96306 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,18 +1,6 @@ {{ define "all" }} - {{ $image := .Resources.GetMatch "*" }} - {{ $resized := $image.Fill "1400x600 Top"}} -
-
-
-
-
-

Bienvenue sur le nouveau site de Crémeaux

-
-
-
-
-
+

{{ .Title }}

diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 023f583..eb10990 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,23 +1,28 @@ +
{{ $headless := .Site.GetPage "/" }} {{ $image := $headless.Resources.GetMatch "*" }} {{ $resized := $image.Fill "1400x600 Top"}} {{ .Title }}
+ + + +
diff --git a/static/icons/burger.svg b/static/icons/burger.svg new file mode 100644 index 0000000..1503735 --- /dev/null +++ b/static/icons/burger.svg @@ -0,0 +1 @@ +