diff options
Diffstat (limited to 'css/header.scss')
| -rw-r--r-- | css/header.scss | 217 |
1 files changed, 20 insertions, 197 deletions
diff --git a/css/header.scss b/css/header.scss index 44b18a0..1b53bb7 100644 --- a/css/header.scss +++ b/css/header.scss @@ -1,210 +1,33 @@ #header { + $slideDuration: 0.5s; + + --hamburgerWidth: 2rem; + border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; - box-shadow: $shadow; - color: var(--pageHighlightColour); + box-shadow: $defaultShadow; height: calc(100vh + 1rem); - padding-bottom: 1rem; - position: absolute; - top: 0; - user-select: none; + overflow: hidden; + position: relative; width: 100%; - body[data-page = "about"] & { - --pageHighlightColour: #FFFFFF; - - background-color: $achernarColour; - - div#glyph { - background-image: url("/svg/glyph/achernar.svg"); - } - } - - body[data-page = "agbsum"] & { - --pageHighlightColour: #FFFFFF; - - background-color: #422984; - - div#glyph { - background-image: url("/svg/glyph/ax.svg"); - } - } - - body[data-page = "ax"] & { - --pageHighlightColour: #FFFFFF; - - background-color: #422984; - - div#glyph { - background-image: url("/svg/glyph/ax.svg"); - } - } - - body[data-page = "backspace"] & { - --pageHighlightColour: var(--textColour); - - background-color: var(--backgroundColour); - - div#glyph { - background-image: url("/svg/glyph/backspace.svg"); - } - } - - body[data-page = "benoit"] & { - --pageHighlightColour: #FFFFFF; - - background-image: url("/svg/benoit-background.svg"); - background-size: cover; - - div#glyph { - background-image: url("/svg/glyph/benoit.svg"); - } - } - - body[data-page = "bowshock"] & { - --pageHighlightColour: #FFEEE0; - - background-color: #B61833; - - div#glyph { - background-image: url("/svg/glyph/bowshock.svg"); - } - } - - body[data-page = "bzipper"] & { - --pageHighlightColour: #B4202D; - - background-color: #FFFFFF; - - div#glyph { - background-image: url("/svg/glyph/bzipper.svg"); - } - } - - body[data-page = "deltaWorld"] & { - --pageHighlightColour: var(--textColour); - - background-color: var(--backgroundColour); - - div#glyph { - background-image: url("/svg/glyph/deltaWorld.svg"); - } - } - - body[data-page = "eas"] & { - --pageHighlightColour: #00291B; - - background-color: #01CD93; - - div#glyph { - background-image: url("/svg/glyph/eas.svg"); - } - } - - body[data-page = "luma"] & { - --pageHighlightColour: #FFFFFF; - - background-color: #6051B2; - - div#glyph { - background-image: url("/svg/glyph/luma.svg"); - } - } - - body[data-page = "pollex"] & { - --pageHighlightColour: #FFFFFF; - - background-color: #4D4084; - - div#glyph { - background-image: url("/svg/glyph/pollex.svg"); - } - } - - body[data-page = "u8c"] & { - --pageHighlightColour: #A9E13D; - - background-color: #444747; - - div#glyph { - background-image: url("/svg/glyph/u8c.svg"); - } - } - - #hamburger { - aspect-ratio: 1; - background-color: var(--pageHighlightColour); - cursor: pointer; - mask-image: url("/svg/hamburger.svg"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: cover; - position: absolute; - top: 1rem; - transition: background-color $navBarSlideDuration; - z-index: 255; - - &[data-navBarState = "Visible"] { - background-color: var(--textColour); - } - } - - #clickMe { - background-color: var(--pageHighlightColour); - height: 2rem; - mask-image: url("/image/clickMe.webp"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: cover; - position: absolute; - width: 16rem; - } - - @import "navBar"; - - #glyph { - display: block; - left: 50vw; - position: absolute; - top: 50vh; - transform: translate(-50%, -50%); - } - - div#glyph { - aspect-ratio: 1; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - width: calc(100vmin / 2); - } - - p#glyph { - font-size: 4em; - font-weight: bold; + @media (pointer: coarse) { + --hamburgerWidth: 4rem; } - @media (pointer: fine) { - #hamburger { - left: 1rem; - width: 2rem; - } + a { + cursor: pointer; + font-weight: bold; + text-decoration: underline; + text-decoration-color: #00000000; + transition: text-decoration-color 0.125s; + user-select: none; - #clickMe { - left: 4rem; - top: 1rem; + &:hover { + text-decoration-color: var(--textColour); } } - @media (pointer: coarse) { - #hamburger { - left: 50%; - transform: translateX(-50%); - width: 4rem; - } - - #clickMe { - left: calc(50% + 3rem); - top: 2rem; - } - } + @import "banner"; + @import "sideMenu"; } |