summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/content.scss35
-rw-r--r--css/frontPage.scss26
-rw-r--r--css/main.scss70
-rw-r--r--css/navigationBar.scss64
-rw-r--r--css/noScript.scss3
5 files changed, 114 insertions, 84 deletions
diff --git a/css/content.scss b/css/content.scss
index 147bf20..515044f 100644
--- a/css/content.scss
+++ b/css/content.scss
@@ -8,7 +8,7 @@
}
a, a:visited {
- color: $textColour;
+ color: var(--textColour);
}
em {
@@ -18,7 +18,7 @@
span {
&.code {
- background-color: $foregroundColour;
+ background-color: var(--foregroundColour);
border-radius: 0.25rem;
font-family: "Fira Mono", "monospace";
padding: 0.25rem;
@@ -38,7 +38,7 @@
}
#contentHeading {
- background-color: $foregroundColour;
+ background-color: var(--foregroundColour);
border-radius: 1rem;
display: block;
font-size: 4em;
@@ -68,7 +68,7 @@
width: 100%;
&::after {
- background-color: $textColour;
+ background-color: var(--textColour);
border-radius: 0.125rem;
content: "";
display: block;
@@ -96,11 +96,14 @@
img.blur {
filter: blur(1rem);
position: absolute;
- z-index: -1;
- width: 100%;
+ z-index: 1;
+ width: 100%;
}
a {
+ position: relative;
+ z-index: 1;
+
img {
border-radius: 1rem;
display: block;
@@ -111,7 +114,7 @@
}
#footnote {
- background-color: $foregroundColour;
+ background-color: var(--foregroundColour);
border-radius: 1rem;
font-family: "Martian Mono", "monospace";
font-size: 0.75em;
@@ -119,8 +122,9 @@
padding: 1rem;
.separator {
- background-color: $textColour;
- height: 0.125rem;
+ background-color: var(--textColour);
+ border-radius: 0.125rem;
+ height: 0.25rem;
margin: 1rem auto;
width: 100%;
}
@@ -130,13 +134,18 @@
font-weight: bold;
}
+ .obfuscatedText {
+ background-color: var(--textColour);
+ height: 1rem;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ width: 100%;
+ }
+
img {
display: block;
margin: auto;
-
- &.obfuscatedText {
- height: 1rem;
- }
}
table {
diff --git a/css/frontPage.scss b/css/frontPage.scss
index fe34a92..0c6247a 100644
--- a/css/frontPage.scss
+++ b/css/frontPage.scss
@@ -9,48 +9,48 @@
pointer-events: none;
width: 100%;
- body.about & {
+ body[data-page = "about"] & {
background-color: $achernarColour;
}
- body.ax & {
+ body[data-page = "ax"] & {
background-color: #422984;
}
- body.backspace & {
- background-color: $backgroundColour;
+ body[data-page = "backspace"] & {
+ background-color: var(--backgroundColour);
}
- body.benoit & {
+ body[data-page = "benoit"] & {
background-image: url("/svg/benoit-background.svg");
background-size: cover;
}
- body.bowshock & {
+ body[data-page = "bowshock"] & {
background-color: #B61833;
}
- body.bzipper & {
+ body[data-page = "bzipper"] & {
background-color: #FFFFFF;
}
- body.deltaWorld & {
- background-color: $backgroundColour;
+ body[data-page = "deltaWorld"] & {
+ background-color: var(--backgroundColour);
}
- body.eas & {
+ body[data-page = "eas"] & {
background-color: #01CD93;
}
- body.luma & {
+ body[data-page = "luma"] & {
background-color: #6051B2;
}
- body.pollex & {
+ body[data-page = "pollex"] & {
background-color: #4D4084;
}
- body.u8c & {
+ body[data-page = "u8c"] & {
background-color: #444747;
}
diff --git a/css/main.scss b/css/main.scss
index 46e22fc..3d0a211 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,17 +1,9 @@
@import "fonts";
-$backgroundColour: oklch(20% 0.041075 270);
-$foregroundColour: oklch(25% 0.041075 270);
-$textColour: oklch(100% 0 0);
-$highlightColour: oklch(75% 0.292700 149.34);
-
$achernarColour: #007B34;
:root {
font-family: "Raleway", "sans-serif";
-
- background-color: $backgroundColour;
- color: $textColour;
}
* {
@@ -21,6 +13,68 @@ $achernarColour: #007B34;
box-sizing: border-box;
}
+#body {
+ background-color: var(--backgroundColour);
+ color: var(--textColour);
+ z-index: -1;
+
+ &[data-theme = "light"] {
+ --backgroundColour: oklch(100% 0 0);
+ --foregroundColour: oklch( 96.875% 0 0);
+ --textColour: oklch( 25% 0 0);
+ }
+
+ &[data-theme = "dark"] {
+ --backgroundColour: oklch( 20% 0.041075 270);
+ --foregroundColour: oklch( 25% 0.041075 270);
+ --textColour: oklch(100% 0 0);
+ }
+
+ &[data-page = "about"] {
+ --pageHighlightColour: #FFFFFF;
+ }
+
+ &[data-page = "ax"] {
+ --pageHighlightColour: #FFFFFF;
+ }
+
+ &[data-page = "backspace"] {
+ --pageHighlightColour: #FFFFFF;
+ }
+
+ &[data-page = "benoit"] {
+ --pageHighlightColour: #FFFFFF;
+ }
+
+ &[data-page = "bowshock"] {
+ --pageHighlightColour: #FFEEE0;
+ }
+
+ &[data-page = "bzipper"] {
+ --pageHighlightColour: #B4202D;
+ }
+
+ &[data-page = "deltaWorld"] {
+ --pageHighlightColour: #FFFFFF;
+ }
+
+ &[data-page = "eas"] {
+ --pageHighlightColour: #00291B;
+ }
+
+ &[data-page = "luma"] {
+ --pageHighlightColour: #FFFFFF;
+ }
+
+ &[data-page = "pollex"] {
+ --pageHighlightColour: #FFFFFF;
+ }
+
+ &[data-page = "u8c"] {
+ --pageHighlightColour: #A9E13D;
+ }
+}
+
ol, ul {
list-style-type: none;
}
diff --git a/css/navigationBar.scss b/css/navigationBar.scss
index 75541ff..6b17412 100644
--- a/css/navigationBar.scss
+++ b/css/navigationBar.scss
@@ -4,71 +4,35 @@
display: flex;
gap: 1rem;
justify-content: center;
- padding: 1rem 0;
position: absolute;
- top: 0;
+ top: 1rem;
user-select: none;
width: 100%;
z-index: 1;
- body.about & {
- --foregroundColour: #FFFFFF;
- }
-
- body.ax & {
- --foregroundColour: #FFFFFF;
- }
-
- body.backspace & {
- --foregroundColour: #FFFFFF;
- }
-
- body.benoit & {
- --foregroundColour: #FFFFFF;
- }
-
- body.bowshock & {
- --foregroundColour: #FFEEE0;
- }
-
- body.bzipper & {
- --foregroundColour: #B4202D;
- }
-
- body.deltaWorld & {
- --foregroundColour: #FFFFFF;
- }
-
- body.eas & {
- --foregroundColour: #00291B;
- }
-
- body.luma & {
- --foregroundColour: #FFFFFF;
- }
-
- body.pollex & {
- --foregroundColour: #FFFFFF;
- }
-
- body.u8c & {
- --foregroundColour: #A9E13D;
- }
-
- a {
- color: var(--foregroundColour);
+ a, p {
+ color: var(--pageHighlightColour);
+ cursor: pointer;
font-weight: bold;
+ text-decoration: underline;
text-decoration-color: #00000000;
transition: text-decoration-color 0.125s;
+ width: fit-content;
&:hover {
- text-decoration-color: var(--foregroundColour);
+ text-decoration-color: var(--pageHighlightColour);
transition: text-decoration-color 0.125s;
}
}
+ #themeToggler {
+ display: block;
+ left: 1rem;
+ position: absolute;
+ }
+
.separator {
- background-color: var(--foregroundColour);
+ background-color: var(--pageHighlightColour);
border-radius: 0.125rem;
height: 0.25rem;
width: 1rem;
diff --git a/css/noScript.scss b/css/noScript.scss
new file mode 100644
index 0000000..4cc630c
--- /dev/null
+++ b/css/noScript.scss
@@ -0,0 +1,3 @@
+#themeToggler {
+ display: none;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 05:44:54 +0100