summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/banner.scss91
-rw-r--r--css/footer.scss33
-rw-r--r--css/glyph.scss20
-rw-r--r--css/header.scss89
-rw-r--r--css/main.scss5
-rw-r--r--css/navBar.scss43
-rw-r--r--css/page.scss2
-rw-r--r--css/sideMenu.scss102
8 files changed, 168 insertions, 217 deletions
diff --git a/css/banner.scss b/css/banner.scss
deleted file mode 100644
index 04c0956..0000000
--- a/css/banner.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-#banner {
- align-items: center;
- background-size: cover;
- display: flex;
- height: 100%;
- image-rendering: pixelated;
- justify-content: center;
- padding-bottom: 1rem;
- position: absolute;
- top: 0;
- width: 100%;
-
- body[data-page = "achernar"] & {
- --textColour: #FFFFFF;
-
- background-color: #007B34;
-
- @media not (prefers-reduced-motion) {
- background-image: url("/image/vertex.webp");
- }
- }
-
- body[data-page = "agbsum"] & {
- --textColour: #FFFFFF;
-
- background-color: #422984;
- }
-
- body[data-page = "ax"] & {
- --textColour: #FFFFFF;
-
- background-color: #422984;
- }
-
- body[data-page = "backspace"] & {
- --textColour: #000000;
-
- background-color: #FFFFFF;
- }
-
- body[data-page = "benoit"] & {
- --textColour: #FFFFFF;
-
- background-image: url("/svg/benoitBackground.svg");
- }
-
- body[data-page = "bowshock"] & {
- --textColour: #FFEEE0;
-
- background-color: #B61833;
- }
-
- body[data-page = "bzipper"] & {
- --textColour: #B4202D;
-
- background-color: #FFFFFF;
- }
-
- body[data-page = "deltaWorld"] & {
- --textColour: #FFFFFF;
-
- background-color: #000000;
- }
-
- body[data-page = "eas"] & {
- --textColour: #00291B;
-
- background-color: #01CD93;
- }
-
- body[data-page = "luma"] & {
- --textColour: #FFFFFF;
-
- background-color: #6051B2;
- }
-
- body[data-page = "pollex"] & {
- --textColour: #FFFFFF;
-
- background-color: #4D4084;
- }
-
- body[data-page = "u8c"] & {
- --textColour: #A9E13D;
-
- background-color: #444747;
- }
-
- @import "navBar";
- @import "glyph";
-}
diff --git a/css/footer.scss b/css/footer.scss
index 06243b0..0a1867f 100644
--- a/css/footer.scss
+++ b/css/footer.scss
@@ -4,6 +4,7 @@
font-family: $monospaceFont;
margin-top: 1rem;
padding: 1rem;
+ text-align: center;
h1 {
font-size: 2em;
@@ -21,38 +22,22 @@
}
}
- table {
- border-collapse: collapse;
-
- tr {
- th, td {
- line-height: 2em;
- }
-
- th {
- text-align: left;
-
- &::before {
- content: "\00B7\0020";
- }
- }
-
- td {
- padding-left: 2rem;
- }
- }
+ #cvrNumber {
+ font-weight: bold;
}
#emailAddress {
+ aspect-ratio: 183/8;
background-color: var(--textColour);
- display: inline-block;
- height: 1em;
+ display: block;
image-rendering: pixelated;
+ margin: auto;
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAYAAAC78m4/AAAA/UlEQVRYw+1XQQ7EIAiExv9/2T01IQQJDNZ0rdyEFmEcBJmIqPfe6ciRzYRvYjMzS4Mk/Mim9RXbbY/YkGLM5BDdI4PZKAe5zuJi+fDWmTPK5F3hS2RPNPdLK/RHnk1ulLFJnbWWOsuGEhuNJetT27I5eP95WFskqJ5fJM4oX1Cso3FqXUNvrZHTWSNO5Zb+i5bpkGhmh/rMCGJwsEWJ6oEmq4mZefRftkpXEmq1T3Q0QPGMFNNul8kVBRYdD9CW94TMGHFW+ETx9OLw4nzTGVVw0cXa5INlxq2APEisNow8cN8EtMYzE2clP+9humIUqHKpwjOd+9Zz7ZFvyw87v+eHE6E5DAAAAABJRU5ErkJggg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: cover;
- vertical-align: middle;
- width: calc(183em / 8);
+ max-height: 1em;
+ max-width: calc(183em / 8);
+ width: 100%;
}
}
diff --git a/css/glyph.scss b/css/glyph.scss
index 9a91b28..04d6568 100644
--- a/css/glyph.scss
+++ b/css/glyph.scss
@@ -9,20 +9,14 @@
body[data-page = "achernar"] & {
$pixelWIdth: calc(100vmax / 256);
- @media not (prefers-reduced-motion) {
- background-image: url("/image/achernarPixelated.webp");
- height: floor(calc($pixelWIdth * 42));
- width: floor(calc($pixelWIdth * 154));
+ background-image: url("/image/achernarPixelated.webp");
+ height: floor(calc($pixelWIdth * 42));
+ width: floor(calc($pixelWIdth * 154));
- @media (orientation: portrait) {
- background-image: url("/image/achernarVerticalPixelated.webp");
- height: floor(calc($pixelWIdth * 90));
- width: floor(calc($pixelWIdth * 74));
- }
- }
-
- @media (prefers-reduced-motion) {
- background-image: url("/svg/glyph/achernar.svg");
+ @media (orientation: portrait) {
+ 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 c6c0213..423d0f5 100644
--- a/css/header.scss
+++ b/css/header.scss
@@ -1,17 +1,94 @@
#header {
$slideDuration: 0.5s;
- --hamburgerWidth: 2rem;
+ --hamburgerHeight: 2rem;
+ align-items: center;
+ background-color: var(--backgroundColour);
+ background-size: cover;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
+ display: flex;
height: calc(100vh + 1rem);
+ image-rendering: pixelated;
+ justify-content: center;
overflow: hidden;
+ padding-bottom: 1rem;
position: relative;
width: 100%;
+ body[data-page = "achernar"] & {
+ --backgroundColour: #007B34;
+ --textColour: #FFFFFF;
+
+ @media not (prefers-reduced-motion) {
+ background-image: url("/image/vertex.webp");
+ }
+ }
+
+ body[data-page = "agbsum"] & {
+ --backgroundColour: #422984;
+ --textColour: #FFFFFF;
+ }
+
+ body[data-page = "ax"] & {
+ --backgroundColour: #422984;
+ --textColour: #FFFFFF;
+ }
+
+ body[data-page = "backspace"] & {
+ --backgroundColour: #FFFFFF;
+ --textColour: #000000;
+ }
+
+ body[data-page = "benoit"] & {
+ --backgroundColour: #BA0035;
+ --textColour: #FFFFFF;
+
+ background-image: url("/svg/benoitBackground.svg");
+ }
+
+ body[data-page = "bowshock"] & {
+ --backgroundColour: #B61833;
+ --textColour: #FFEEE0;
+ }
+
+ body[data-page = "bzipper"] & {
+ --backgroundColour: #FFFFFF;
+ --textColour: #B4202D;
+ }
+
+ body[data-page = "deltaWorld"] & {
+ --backgroundColour: #000000;
+ --textColour: #FFFFFF;
+ }
+
+ body[data-page = "eas"] & {
+ --backgroundColour: #01CD93;
+ --textColour: #00291B;
+ }
+
+ body[data-page = "luma"] & {
+ --backgroundColour: #6051B2;
+ --textColour: #FFFFFF;
+ }
+
+ body[data-page = "pollex"] & {
+ --backgroundColour: #4D4084;
+ --textColour: #FFFFFF;
+ }
+
+ body[data-page = "u8c"] & {
+ --backgroundColour: #444747;
+ --textColour: #A9E13D;
+ }
+
@media (pointer: coarse) {
- --hamburgerWidth: 4rem;
+ --hamburgerHeight: 4rem;
+ }
+
+ p, a, a:hover {
+ color: var(--textColour)
}
a {
@@ -19,14 +96,18 @@
font-weight: bold;
text-decoration: underline;
text-decoration-color: #00000000;
- transition: text-decoration-color 0.125s;
user-select: none;
+ @media not (prefers-reduced-motion) {
+ transition: text-decoration-color 0.125s;
+ }
+
&:hover {
text-decoration-color: var(--textColour);
}
}
- @import "banner";
+ @import "navBar";
@import "sideMenu";
+ @import "glyph";
}
diff --git a/css/main.scss b/css/main.scss
index 6f4025d..8e5960f 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -2,6 +2,7 @@
$monospaceFont: "Fira Mono", "monospace";
+$contentWidth: 72rem;
$separatorWidth: 0.25rem;
:root {
@@ -16,8 +17,8 @@ $separatorWidth: 0.25rem;
}
body {
- --backgroundColour: oklch( 20% 0.014800 253.71);
- --foregroundColour: oklch( 25% 0.014800 253.71);
+ --backgroundColour: oklch( 20% 0.029600 253.71);
+ --foregroundColour: oklch( 25% 0.029600 253.71);
--textColour: oklch(100% 0 0);
background-color: var(--backgroundColour);
diff --git a/css/navBar.scss b/css/navBar.scss
index 9eba669..16c003e 100644
--- a/css/navBar.scss
+++ b/css/navBar.scss
@@ -1,19 +1,25 @@
#navBar {
- $gap: 1rem;
-
align-items: center;
display: flex;
- height: calc($gap * 2 + var(--hamburgerWidth));
+ height: calc(2rem + var(--hamburgerHeight));
justify-content: space-between;
- padding: $gap;
+ padding: 1rem;
position: absolute;
top: 0;
+ max-width: $contentWidth;
width: 100%;
+ body[data-page = "achernar"] & {
+ a, #home, #hamburger {
+ mix-blend-mode: difference;
+ }
+ }
+
section {
- display: flex;
- flex: 1;
- gap: $gap;
+ display: flex;
+ flex: 1;
+ gap: 1rem;
+ justify-content: center;
&:first-of-type {
justify-content: start;
@@ -25,7 +31,10 @@
a {
text-decoration-color: #00000000;
- transition: opacity $slideDuration, text-decoration-color 0.125s;
+
+ @media not (prefers-reduced-motion) {
+ transition: opacity $slideDuration, text-decoration-color 0.125s;
+ }
@media (orientation: portrait) or (pointer: coarse) {
display: none;
@@ -34,28 +43,20 @@
&:hover {
text-decoration-color: var(--textColour);
}
+ }
- &.hidden:not(#home) {
- opacity: 0;
- pointer-events: none;
- }
+ #home {
+ z-index: 255;
}
#hamburger {
aspect-ratio: 1;
background-color: var(--textColour);
cursor: pointer;
+ height: var(--hamburgerHeight);
mask-image: url("/svg/hamburger.svg");
mask-size: cover;
- width: var(--hamburgerWidth);
- }
-
- body[data-page = "achernar"] & {
- a, div {
- @media not (prefers-reduced-motion) {
- mix-blend-mode: difference;
- }
- }
+ z-index: 255;
}
}
}
diff --git a/css/page.scss b/css/page.scss
index 13c0aa2..de9edd7 100644
--- a/css/page.scss
+++ b/css/page.scss
@@ -2,7 +2,7 @@
$padding: 1rem;
margin: auto;
- max-width: 72rem;
+ max-width: $contentWidth;
padding: $padding;
a, a:visited {
diff --git a/css/sideMenu.scss b/css/sideMenu.scss
index b9c0614..480d35c 100644
--- a/css/sideMenu.scss
+++ b/css/sideMenu.scss
@@ -1,86 +1,66 @@
#sideMenu {
- backdrop-filter: blur(1rem);
- -webkit-backdrop-filter: blur(1rem);
- background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%);
- box-shadow: 0 0 1rem color-mix(in srgb, black, transparent 50%);;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- height: calc(100vh - var(--hamburgerWidth) - 3rem);
- justify-content: space-between;
- left: 100%;
- overflow: scroll;
- padding: 1rem;
- position: absolute;
- top: calc(var(--hamburgerWidth) + 2rem);
- transition: left $slideDuration;
- width: 100vw;
- z-index: 255;
+ align-items: center;
+ background-color: var(--backgroundColour);
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ height: calc(100% + 1rem);
+ justify-content: space-between;
+ left: 100%;
+ overflow: hidden;
+ padding: 1rem;
+ padding-bottom: 2rem;
+ padding-top: calc(var(--hamburgerHeight) + 2rem);
+ position: absolute;
+ width: 100%;
+ z-index: 127;
- &.visible {
- left: 0;
+ body[data-page = "achernar"] & {
+ background-color: var(--backgroundColour);
}
- @media (orientation: landscape) and (pointer: fine) {
- border-bottom-left-radius: 1rem;
- border-top-left-radius: 1rem;
- width: 50vw;
-
- &.visible {
- left: 50%;
- }
+ @media (pointer: fine) and (not (prefers-reduced-motion)) {
+ transition: left $slideDuration;
+ transition-timing-function: ease-in-out;
}
@media (pointer: coarse) {
- border-style: solid;
- border-width: $separatorWidth;
- font-size: 2em;
+ font-size: 2em;
+ overflow: scroll;
+ }
+
+ &.visible {
+ left: 0;
}
div.links {
- display: flex;
- gap: 1rem;
+ display: flex;
+ gap: 1rem;
+ max-width: $contentWidth;
+ padding: 1rem;
+ width: 100%;
@media (pointer: coarse) {
flex-direction: column;
}
section {
- $gap: 0.25rem;
-
display: flex;
flex-direction: column;
- gap: $gap;
+ gap: 0.25rem;
p {
- text-align: center;
-
- &::after {
- background-color: var(--textColour);
- border-radius: calc($separatorWidth / 2);
- content: "";
- display: block;
- height: $separatorWidth;
- margin-top: $gap;
- width: 100%;
- }
+ background-color: var(--textColour);
+ border-radius: 0.25rem;
+ color: var(--backgroundColour);
+ font-weight: bold;
+ padding: 0.25rem 1rem;
+ text-align: center;
+ }
- @media (pointer: coarse) {
- &::before {
- background-color: var(--textColour);
- border-radius: calc($separatorWidth / 2);
- content: "";
- display: block;
- height: $separatorWidth;
- margin-top: $gap;
- width: 100%;
- }
- }
+ a {
+ padding: 0.25rem;
}
}
}
-
- #themeToggler {
- align-self: center;
- }
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 05:29:07 +0100