diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/footer.scss | 15 | ||||
| -rw-r--r-- | css/glyph.scss | 16 | ||||
| -rw-r--r-- | css/header.scss | 1 | ||||
| -rw-r--r-- | css/navBar.scss | 4 | ||||
| -rw-r--r-- | css/sideMenu.scss | 9 |
5 files changed, 32 insertions, 13 deletions
diff --git a/css/footer.scss b/css/footer.scss index 8d0787b..9015abd 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -9,6 +9,7 @@ h1 { font-size: 2em; font-weight: bold; + text-align: center; &::after { background-color: var(--textColour); @@ -24,6 +25,8 @@ #cvrNumber { font-weight: bold; + margin: auto; + width: fit-content; } #emailAddress { @@ -40,4 +43,16 @@ max-width: calc(183em / 8); width: 100%; } + + #socials { + display: flex; + font-weight: bold; + gap: 1rem; + margin: auto; + width: fit-content; + + @media (orientation: portrait) { + flex-direction: column; + } + } } diff --git a/css/glyph.scss b/css/glyph.scss index d2dbce9..d547bc2 100644 --- a/css/glyph.scss +++ b/css/glyph.scss @@ -3,23 +3,27 @@ background-position: center; background-repeat: no-repeat; background-size: contain; - left: 50%; + left: 50vw; position: absolute; - top: 50%; + top: 50vh; transform: translate(-50%, -50%); width: 50vmin; body[data-page = "achernar"] & { $pixelWIdth: calc(100vmax / 256); + --glyphWidth: 154; + --glyphHeight: 42; + background-image: url("/image/achernarPixelated.webp"); - height: floor(calc($pixelWIdth * 42)); - width: floor(calc($pixelWIdth * 154)); + height: calc($pixelWIdth * var(--glyphHeight)); + width: calc($pixelWIdth * var(--glyphWidth)); @media (orientation: portrait) { + --glyphWidth: 90; + --glyphHeight: 74; + background-image: url("/image/achernarVerticalPixelated.webp"); - height: floor(calc($pixelWIdth * 90)); - width: floor(calc($pixelWIdth * 74)); } } diff --git a/css/header.scss b/css/header.scss index f30afb0..61f0ffd 100644 --- a/css/header.scss +++ b/css/header.scss @@ -1,4 +1,5 @@ #header { + $gap: 1rem; $hamburgerHeight: 2rem; $sideMenuToggleDuration: 0.5s; diff --git a/css/navBar.scss b/css/navBar.scss index b057673..32ec7bd 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -3,7 +3,7 @@ display: flex; height: calc(2rem + $hamburgerHeight); justify-content: space-between; - padding: 1rem; + padding: $gap; position: absolute; top: 0; width: 100%; @@ -17,7 +17,7 @@ section { display: flex; flex: 1; - gap: 1rem; + gap: $gap; justify-content: center; &:first-of-type { diff --git a/css/sideMenu.scss b/css/sideMenu.scss index bf2a97a..68e0804 100644 --- a/css/sideMenu.scss +++ b/css/sideMenu.scss @@ -5,13 +5,12 @@ flex-direction: column; gap: 1rem; justify-content: space-between; - left: 100%; + left: 100vw; min-height: calc(100vh + 1rem); padding: 1rem; padding-bottom: 2rem; - padding-top: calc($hamburgerHeight + 1rem); + padding-top: calc($hamburgerHeight + $gap * 2); position: relative; - top: 0; width: 100%; z-index: 127; @@ -30,10 +29,10 @@ section.links { display: flex; - gap: 1rem; + gap: $gap; justify-content: end; max-width: $contentWidth; - padding: 1rem; + padding: 0 1rem; width: 100%; @media (orientation: portrait) { |