diff --git a/sass/css/base.scss b/sass/css/base.scss index 37a6322..9c722dc 100644 --- a/sass/css/base.scss +++ b/sass/css/base.scss @@ -110,6 +110,8 @@ a:hover, a:focus { } .madein { + position: relative; + z-index: -1; width: 192px; transform: rotate(-30deg); } diff --git a/sass/css/header.scss b/sass/css/header.scss index 652675e..dc5ceb8 100644 --- a/sass/css/header.scss +++ b/sass/css/header.scss @@ -1,9 +1,13 @@ @import "defs"; header { + position: sticky; + z-index: 10; + top: 0; display: flex; justify-content: space-between; max-width: 1100px; + height: 48px; margin: 0 auto 16px auto; padding: 0 4px; font-size: 24px; @@ -17,12 +21,12 @@ header { filter: drop-shadow(1px 2px 1px $violet); } -#header-menu ul { +#header-menu > ul { list-style-type: none; margin: 9px 0 0 0; } -#header-menu li { +#header-menu > ul li { display: inline-block; margin: 0 8px; } @@ -38,7 +42,7 @@ header { } @media (prefers-color-scheme: light) { - .header-menu-phone { + header, .header-menu-phone { background-color: white; } } @@ -48,41 +52,46 @@ header { color: white; } - .header-menu-phone { + header, .header-menu-phone { background-color: black; } } -@media (min-width: 768px) { +@media (min-width: 960px) { .phone-only { display: none; } } -@media (max-width: 767px) { - .header-menu-phone { - position: absolute; - top: 0; - left: 0; - display: flex; - flex-direction: column; - gap: 1em; - padding: 2em; - } - +@media (max-width: 959px) { .phone-hidden { display: none; } } +.header-menu-phone { + position: fixed; + z-index: 5; + top: 48px; + left: 0; + padding: 16px; + max-height: calc(100vh - 48px); + overflow-y: auto; + margin-top: 0; + box-sizing: border-box; + border-left: 2px solid $violet; + list-style: none; +} + +.header-menu-phone-logo { + max-width: 100%; + width: 256px; +} + .hamburger-menu { - font-size: 1.5em; + font-size: 150%; margin: 0.25em; font-family: LunaSans; - border: none; - background-color: transparent; - cursor: pointer; - opacity: 65%; } .hamburger-menu:hover, .hamburger-menu:focus { @@ -91,4 +100,5 @@ header { .hamburger-menu > summary { list-style: none; + cursor: pointer; } diff --git a/templates/base.html b/templates/base.html index 28e7ce6..5821cff 100644 --- a/templates/base.html +++ b/templates/base.html @@ -43,7 +43,7 @@ - Librezo +
  • Fonctionnement