diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/banner.scss | 30 | ||||
| -rw-r--r-- | css/glyph.scss | 32 | ||||
| -rw-r--r-- | css/header.scss | 1 | ||||
| -rw-r--r-- | css/main.scss | 2 | ||||
| -rw-r--r-- | css/navBar.scss | 35 | ||||
| -rw-r--r-- | css/page.scss | 7 | ||||
| -rw-r--r-- | css/sideMenu.scss | 2 |
7 files changed, 65 insertions, 44 deletions
diff --git a/css/banner.scss b/css/banner.scss index 36154e6..e1256d2 100644 --- a/css/banner.scss +++ b/css/banner.scss @@ -1,6 +1,4 @@ #banner { - --textColour: var(--bannerHighlightColour); - align-items: center; background-size: cover; display: flex; @@ -13,7 +11,7 @@ width: 100%; body[data-page = "achernar"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #007B34; @@ -23,67 +21,67 @@ } body[data-page = "agbsum"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #422984; } body[data-page = "ax"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #422984; } body[data-page = "backspace"] & { - --bannerHighlightColour: var(--textColour); + --textColour: #000000; - background-color: var(--backgroundColour); + background-color: #FFFFFF; } body[data-page = "benoit"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-image: url("/svg/benoit-background.svg"); } body[data-page = "bowshock"] & { - --bannerHighlightColour: #FFEEE0; + --textColour: #FFEEE0; background-color: #B61833; } body[data-page = "bzipper"] & { - --bannerHighlightColour: #B4202D; + --textColour: #B4202D; background-color: #FFFFFF; } body[data-page = "deltaWorld"] & { - --bannerHighlightColour: var(--textColour); + --textColour: #FFFFFF; - background-color: var(--backgroundColour); + background-color: #000000; } body[data-page = "eas"] & { - --bannerHighlightColour: #00291B; + --textColour: #00291B; background-color: #01CD93; } body[data-page = "luma"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #6051B2; } body[data-page = "pollex"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #4D4084; } body[data-page = "u8c"] & { - --bannerHighlightColour: #A9E13D; + --textColour: #A9E13D; background-color: #444747; } diff --git a/css/glyph.scss b/css/glyph.scss index c1f6235..50297f0 100644 --- a/css/glyph.scss +++ b/css/glyph.scss @@ -1,21 +1,28 @@ #glyph { - aspect-ratio: 1; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - transition: transform 0.125s; - transition-timing-function: steps(4); - width: 50vmin; + aspect-ratio: 1; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + pointer-events: none; + width: 50vmin; body[data-page = "achernar"] & { $pixelWIdth: calc(100vmax / 256); - background-image: url("/image/achernar.webp"); - height: floor(calc($pixelWIdth * 42)); - width: floor(calc($pixelWIdth * 154)); + @media not (prefers-reduced-motion) { + background-image: url("/image/achernarPixelated.webp"); + height: floor(calc($pixelWIdth * 42)); + transition-timing-function: steps(4); + transition: transform 0.125s; + width: floor(calc($pixelWIdth * 154)); - @media (aspect-ratio < 1) { - transform: rotate(0.25turn); + @media (aspect-ratio < 1) { + transform: rotate(0.25turn); + } + } + + @media (prefers-reduced-motion) { + background-image: url("/svg/glyph/achernar.svg"); } } @@ -45,6 +52,7 @@ body[data-page = "deltaWorld"] & { background-image: url("/svg/glyph/deltaWorld.svg"); + filter: drop-shadow(0 0 calc(100vmin / 128) var(--textColour)); } body[data-page = "eas"] & { diff --git a/css/header.scss b/css/header.scss index 1b53bb7..c6c0213 100644 --- a/css/header.scss +++ b/css/header.scss @@ -5,7 +5,6 @@ border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; - box-shadow: $defaultShadow; height: calc(100vh + 1rem); overflow: hidden; position: relative; diff --git a/css/main.scss b/css/main.scss index 08ed76c..6f4025d 100644 --- a/css/main.scss +++ b/css/main.scss @@ -2,8 +2,6 @@ $monospaceFont: "Fira Mono", "monospace"; -$defaultShadow: 0 0 1rem color-mix(in srgb, black, transparent 50%);; - $separatorWidth: 0.25rem; :root { diff --git a/css/navBar.scss b/css/navBar.scss index 9c4338e..9eba669 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -12,8 +12,17 @@ section { display: flex; + flex: 1; gap: $gap; + &:first-of-type { + justify-content: start; + } + + &:last-of-type { + justify-content: end; + } + a { text-decoration-color: #00000000; transition: opacity $slideDuration, text-decoration-color 0.125s; @@ -31,20 +40,22 @@ pointer-events: none; } } - } - #hamburger { - aspect-ratio: 1; - background-color: var(--textColour); - cursor: pointer; - mask-image: url("/svg/hamburger.svg"); - mask-size: cover; - width: var(--hamburgerWidth); - } + #hamburger { + aspect-ratio: 1; + background-color: var(--textColour); + cursor: pointer; + mask-image: url("/svg/hamburger.svg"); + mask-size: cover; + width: var(--hamburgerWidth); + } - body[data-page = "achernar"] & { - section a, #hamburger { - mix-blend-mode: difference; + body[data-page = "achernar"] & { + a, div { + @media not (prefers-reduced-motion) { + mix-blend-mode: difference; + } + } } } } diff --git a/css/page.scss b/css/page.scss index c850071..13c0aa2 100644 --- a/css/page.scss +++ b/css/page.scss @@ -80,6 +80,13 @@ font-style: normal; font-weight: bold; } + + ul { + background-color: var(--foregroundColour); + border-radius: 1rem; + padding: 1rem; + width: 100%; + } } x-image { diff --git a/css/sideMenu.scss b/css/sideMenu.scss index 9f57eab..b9c0614 100644 --- a/css/sideMenu.scss +++ b/css/sideMenu.scss @@ -2,7 +2,7 @@ backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); - box-shadow: $defaultShadow; + box-shadow: 0 0 1rem color-mix(in srgb, black, transparent 50%);; display: flex; flex-direction: column; gap: 1rem; |