diff options
Diffstat (limited to 'css/header.scss')
| -rw-r--r-- | css/header.scss | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/css/header.scss b/css/header.scss new file mode 100644 index 0000000..44b18a0 --- /dev/null +++ b/css/header.scss @@ -0,0 +1,210 @@ +#header { + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + box-shadow: $shadow; + color: var(--pageHighlightColour); + height: calc(100vh + 1rem); + padding-bottom: 1rem; + position: absolute; + top: 0; + user-select: none; + 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: fine) { + #hamburger { + left: 1rem; + width: 2rem; + } + + #clickMe { + left: 4rem; + top: 1rem; + } + } + + @media (pointer: coarse) { + #hamburger { + left: 50%; + transform: translateX(-50%); + width: 4rem; + } + + #clickMe { + left: calc(50% + 3rem); + top: 2rem; + } + } +} |