summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/font.scss (renamed from css/fonts.scss)0
-rw-r--r--css/footer.scss68
-rw-r--r--css/glyph.scss78
-rw-r--r--css/header.scss117
-rw-r--r--css/main.scss20
-rw-r--r--css/navBar.scss43
-rw-r--r--css/noScript.scss4
-rw-r--r--css/overview.scss42
-rw-r--r--css/page.scss126
-rw-r--r--css/sideMenu.scss75
10 files changed, 186 insertions, 387 deletions
diff --git a/css/fonts.scss b/css/font.scss
index 603c9ec..603c9ec 100644
--- a/css/fonts.scss
+++ b/css/font.scss
diff --git a/css/footer.scss b/css/footer.scss
index 159fa10..4095b0f 100644
--- a/css/footer.scss
+++ b/css/footer.scss
@@ -1,26 +1,38 @@
+@use "sass:list";
+
#footer {
- background-color: var(--foregroundColour);
- border-radius: 1rem;
- font-family: $monospaceFont;
- margin-top: 1rem;
- padding: 1rem;
- text-align: center;
+ background-color: var(--foregroundColour);
+ border-top-left-radius: $padding;
+ border-top-right-radius: $padding;
+ font-family: $monospaceFont;
+ margin: auto;
+ max-width: calc($contentWidth + $padding * 2);
+ padding: $padding;
+ text-align: center;
+ width: 100%;
- h1 {
- font-size: 2em;
- font-weight: bold;
- text-align: center;
+ #romanisation {
+ $width: 31;
+ $height: 11;
- &::after {
- background-color: var(--textColour);
- border-radius: $separatorWidth;
- content: "";
- display: block;
- height: $separatorWidth;
- margin-bottom: 1rem;
- margin-top: $separatorWidth;
- width: 100%;
- }
+ $actualHeight: 4em;
+
+ aspect-ratio: list.slash($width, $height);
+ background-color: var(--textColour);
+ image-rendering: pixelated;
+ margin: auto;
+ mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAALCAQAAAAt4J4/AAAAS0lEQVQoz9WRMQ4AIAgDW+P/v1xHIKIRNhlpuQYgmqWG4nVBqVObL+fGvtHu85YpYDgcnzamB87A3fNCMEFlQXG4cO55vEz1H//VAg5FJOyjOJa9AAAAAElFTkSuQmCC");
+ mask-size: cover;
+ max-height: $actualHeight;
+ max-width: calc($actualHeight * ($width / $height));
+ }
+
+ #systemDescription {
+ font-style: italic;
+ margin: $padding auto;
+ max-width: calc($contentWidth / 2);
+ text-align: justify;
+ text-align-last: center;
}
#cvrNumber {
@@ -30,17 +42,20 @@
}
#emailAddress {
- aspect-ratio: 183/8;
+ $width: 183;
+ $height: 8;
+
+ $actualHeight: 1em;
+
+ aspect-ratio: list.slash($width, $height);
background-color: var(--textColour);
display: block;
image-rendering: pixelated;
margin: auto;
- mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAYAAAC78m4/AAAA80lEQVRYw+1YQQ7EIAiETf//ZfeyJqRRhAFN18rNEhGGAbFMRFRKKXTkyEbCzMyV2MzMUikJ39Pdv0d0VW/RIcXoicF6hgezXgxy7cWlZUNbe3LkiTvCF8uZo33d86yAZ+ruTo++WXQWcLy+oDY9MWTua9mJ5igaewbWHr7I9YV2rV5lZY04kS79L9fmjNg1u2+Ty0pUDTRZNXLUiRB/BqlnJB61iY4GKJ6WYtqtmXyswJafIEkczVyrBI1htU0UT80Pzc8n5Si9c9dZKaMrIA8SbZbyPFieIi08kXkevfFWEbSV9yiXvHzRztt6rj3y7l+BX5T3s/pA2wdgAAAAAElFTkSuQmCC");
- mask-position: center;
- mask-repeat: no-repeat;
+ mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAQAAAAR+6a0AAAA0klEQVRIx+1W0Q4CMQhrzf3/L9eHM25zwJAzi4nyomSw0kLYEYDwtz1GQgD4cE/he4/P0MgDZHh+G+neEkWO+Ozy5dbSIsZfm5GNHesyZ76edXk0C895cP7N3lyOglwv0kbInbWYFaMV+rpqWxcC0BHOVt+tzMrh5tXEN9D5DdvkMEUdSzt7w+HMpqWiUNXIaB1EdbI4TpftZharAFzT7qqY0vRUFELGq2Tf+RlG6ekWmJgF/ymh+Zh4VK+0iOGdMZ5KgjbuK5U8XYa83dv2xz8E70XwbQlyNNhzAAAAAElFTkSuQmCC");
mask-size: cover;
- max-height: 1em;
- max-width: calc(183em / 8);
+ max-height: $actualHeight;
+ max-width: calc($actualHeight * $width / $height);
width: 100%;
}
@@ -49,7 +64,6 @@
font-weight: bold;
gap: 1rem;
margin: auto;
- margin-top: 1rem;
width: fit-content;
a {
diff --git a/css/glyph.scss b/css/glyph.scss
deleted file mode 100644
index d547bc2..0000000
--- a/css/glyph.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-#glyph {
- aspect-ratio: 1;
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
- left: 50vw;
- position: absolute;
- 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: calc($pixelWIdth * var(--glyphHeight));
- width: calc($pixelWIdth * var(--glyphWidth));
-
- @media (orientation: portrait) {
- --glyphWidth: 90;
- --glyphHeight: 74;
-
- background-image: url("/image/achernarVerticalPixelated.webp");
- }
- }
-
- body[data-page = "agbsum"] & {
- background-image: url("/svg/glyph/ax.svg");
- }
-
- body[data-page = "ax"] & {
- background-image: url("/svg/glyph/ax.svg");
- }
-
- body[data-page = "backspace"] & {
- background-image: url("/svg/glyph/backspace.svg");
- }
-
- body[data-page = "benoit"] & {
- background-image: url("/svg/glyph/benoit.svg");
- }
-
- body[data-page = "bowshock"] & {
- background-image: url("/svg/glyph/bowshock.svg");
- }
-
- body[data-page = "bzipper"] & {
- background-image: url("/svg/glyph/bzipper.svg");
- }
-
- body[data-page = "deltaWorld"] & {
- background-image: url("/svg/glyph/deltaWorld.svg");
- filter: drop-shadow(0 0 calc(100vmin / 128) var(--textColour));
- }
-
- body[data-page = "dux"] & {
- background-image: url("/svg/glyph/dux.svg");
- }
-
- body[data-page = "eas"] & {
- background-image: url("/svg/glyph/eas.svg");
- }
-
- body[data-page = "luma"] & {
- background-image: url("/svg/glyph/luma.svg");
- }
-
- body[data-page = "pollex"] & {
- background-image: url("/svg/glyph/pollex.svg");
- }
-
- body[data-page = "u8c"] & {
- background-image: url("/svg/glyph/u8c.svg");
- }
-}
diff --git a/css/header.scss b/css/header.scss
index a90ff5d..49e6597 100644
--- a/css/header.scss
+++ b/css/header.scss
@@ -1,114 +1,31 @@
#header {
- $gap: 1rem;
- $hamburgerHeight: 2rem;
- $sideMenuToggleDuration: 0.5s;
+ $gap: 1rem;
+ --foregroundColour: var(--backgroundColour);
+
+ align-items: center;
background-color: var(--backgroundColour);
background-size: cover;
- border-bottom-left-radius: var(--padding);
- border-bottom-right-radius: var(--padding);
- height: fit-content;
+ border-bottom-left-radius: $padding;
+ border-bottom-right-radius: $padding;
+ box-shadow: 0 0 calc($padding / 2) $shadowColour;
+ display: flex;
+ height: 100vh;
image-rendering: pixelated;
+ justify-content: center;
overflow: hidden;
position: relative;
user-select: none;
width: 100%;
- body[data-page = "achernar"] & {
- --backgroundColour: #007B34;
- --textColour: white;
-
- @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: #000000;
- --textColour: #FFFFFF;
- }
-
- 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 = "dux"] & {
- --backgroundColour: #131313;
- --textColour: #06fbb2;
-
- background-image: url("/image/duxBackground.webp");
- }
-
- 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;
- }
-
- p, a {
- @media not (prefers-reduced-motion) {
- transition-timing-function: ease-in-out;
- }
- }
-
- a {
- cursor: pointer;
- font-weight: bold;
- text-decoration: underline;
- text-decoration-color: #00000000;
-
- @media not (prefers-reduced-motion) {
- transition: text-decoration-color 0.125s;
- }
-
- &:hover {
- text-decoration-color: var(--textColour);
- }
+ #glyph {
+ aspect-ratio: 1;
+ display: block;
+ image-rendering: pixelated;
+ object-fit: contain;
+ pointer-events: none;
+ width: 50vmin;
}
@import "navBar";
- @import "sideMenu";
- @import "glyph";
}
diff --git a/css/main.scss b/css/main.scss
index d408d19..7687479 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,12 +1,15 @@
-@import "fonts";
-
$monospaceFont: "Fira Mono", "monospace";
$contentWidth: 72rem;
+$padding: 1rem;
$separatorWidth: 0.25rem;
+$shadowColour: color-mix(in srgb, black, transparent 50%);
+
:root {
font-family: "Raleway", "sans-serif";
+
+ scroll-behavior: smooth;
}
* {
@@ -17,19 +20,16 @@ $separatorWidth: 0.25rem;
}
body {
- --backgroundColour: oklch( 20% 0.029600 253.71);
- --foregroundColour: oklch( 25% 0.029600 253.71);
- --textColour: oklch(100% 0 0);
-
- --padding: 1rem;
+ --backgroundColour: oklch( 25% 0 0);
+ --foregroundColour: oklch( 20% 0 0);
+ --textColour: oklch(100% 0 0);
background-color: var(--backgroundColour);
color: var(--textColour);
z-index: -1;
- @media (pointer: coarse) {
- --padding: 2rem;
- }
+ // Default.
+ //&.dark { }
&.light {
--backgroundColour: oklch(96.875% 0 0);
diff --git a/css/navBar.scss b/css/navBar.scss
index 60f4d8d..2ef4d3a 100644
--- a/css/navBar.scss
+++ b/css/navBar.scss
@@ -2,36 +2,39 @@
align-items: center;
display: flex;
justify-content: space-between;
- padding: var(--padding);
+ left: 50%;
+ max-width: calc($contentWidth + $padding * 2);
+ padding: $padding;
position: absolute;
top: 0;
+ transform: translateX(-50%);
width: 100%;
- body[data-page = "achernar"] & {
- a, #home, #hamburger {
- mix-blend-mode: difference;
- }
- }
-
section {
display: flex;
- flex: 1;
+ flex: 1 1 0;
gap: $gap;
justify-content: center;
+ text-align: center;
&:first-of-type {
justify-content: start;
+ text-align: left;
}
&:last-of-type {
justify-content: end;
+ text-align: right;
}
a {
+ cursor: pointer;
+ font-weight: bold;
position: relative;
+ text-decoration: underline;
text-decoration-color: #00000000;
- &[aria-current = "page"]:not(#home)::after {
+ &[aria-current = "page"]::after {
background-color: var(--textColour);
border-radius: $separatorWidth;
content: "";
@@ -45,11 +48,12 @@
}
@media not (prefers-reduced-motion) {
- transition: opacity $sideMenuToggleDuration, text-decoration-color 0.125s;
+ transition: text-decoration-color 0.125s;
+ transition-timing-function: ease-in-out;
}
@media (orientation: portrait) or (pointer: coarse) {
- &:not(#home, #hamburger) {
+ &:not(#home, #themeToggler) {
display: none;
}
}
@@ -58,22 +62,5 @@
text-decoration-color: var(--textColour);
}
}
-
- #home, #hamburger {
- aspect-ratio: 1;
- background-color: var(--textColour);
- cursor: pointer;
- height: $hamburgerHeight;
- mask-size: cover;
- z-index: 255;
- }
-
- #home {
- mask-image: url("/svg/icon/home.svg");
- }
-
- #hamburger {
- mask-image: url("/svg/icon/hamburger.svg");
- }
}
}
diff --git a/css/noScript.scss b/css/noScript.scss
index c76d9e2..4cc630c 100644
--- a/css/noScript.scss
+++ b/css/noScript.scss
@@ -1,7 +1,3 @@
-#navBar {
- display: none;
-}
-
#themeToggler {
display: none;
}
diff --git a/css/overview.scss b/css/overview.scss
new file mode 100644
index 0000000..874ae2b
--- /dev/null
+++ b/css/overview.scss
@@ -0,0 +1,42 @@
+#overview {
+ $cardsPerRow: 3;
+
+ align-items: center;
+ background-color: var(--foregroundColour);
+ border-radius: $padding;
+ display: flex;
+ flex-wrap: wrap;
+ gap: $padding;
+ padding: $padding;
+ width: 100%;
+
+ a {
+ --foregroundColour: var(--backgroundColour);
+
+ align-items: center;
+ aspect-ratio: 1;
+ background-color: var(--backgroundColour);
+ background-size: cover;
+ border-radius: $padding;
+ display: flex;
+ flex-basis: calc((100% - $padding * ($cardsPerRow - 1)) / $cardsPerRow);
+ justify-content: center;
+ padding: $padding;
+ width: $padding;
+
+ @media not (prefers-reduced-motion) {
+ transition: box-shadow 0.25s;
+ transition-timing-function: steps(4);
+ }
+
+ &:hover {
+ box-shadow: inset 0 0 $padding $shadowColour;
+ }
+
+ img {
+ display: block;
+ pointer-events: none;
+ width: 50%;
+ }
+ }
+}
diff --git a/css/page.scss b/css/page.scss
index 6033f34..3ede81a 100644
--- a/css/page.scss
+++ b/css/page.scss
@@ -1,8 +1,6 @@
#page {
- $padding: var(--padding);
-
margin: auto;
- max-width: $contentWidth;
+ max-width: calc($contentWidth + $padding * 2);
padding: $padding;
a, a:visited {
@@ -11,10 +9,9 @@
}
h1 {
- font-size: 2em;
- font-weight: bold;
- margin-bottom: 1rem;
- width: 100%;
+ font-size: 2em;
+ font-weight: bold;
+ width: 100%;
&:nth-of-type(even) {
text-align: right;
@@ -26,42 +23,58 @@
content: "";
display: block;
height: $separatorWidth;
- margin-bottom: 1rem;
margin-top: $separatorWidth;
width: 100%;
- };
+ }
+
+ a.anchor {
+ aspect-ratio: 1;
+ background-color: var(--textColour);
+ display: inline-block;
+ mask-image: url("/svg/glyph/chain.svg");
+ mask-size: cover;
+ vertical-align: middle;
+ width: 0.5em;
+ }
}
section {
- font-family: "Montserrat";
+ font-family: "Montserrat", "sans-serif";
line-height: 2em;
max-width: calc($contentWidth / 2 - $padding);
text-align: justify;
width: 100%;
- &:nth-of-type(even) {
- margin-left: auto;
-
- ol, ul {
- margin-left: auto;
- text-align: left
- }
+ &:nth-of-type(even):not(.fullWidth) {
+ margin-left: auto;
+ text-align-last: right;
}
&.fullWidth {
- max-width: 100%;
+ max-width: 100%;
+ text-align: center;
}
- & + h1 {
- margin-top: 1rem;
+ p.codeblock {
+ background-color: var(--textColour);
+ border-radius: $padding;
+ color: var(--backgroundColour);
+ font-family: $monospaceFont;
+ line-height: normal;
+ padding: $padding;
+ text-align: left;
+ text-align-last: left;
+ white-space: preserve;
}
p.note {
- font-weight: bold;
- text-align: center;
+ font-style: italic;
+ font-weight: bold;
+ text-align: left;
+ text-align-last: left;
&::before {
- content: "Note:\0020";
+ content: "\2014\0020Note:\0020";
}
}
@@ -73,60 +86,43 @@
padding: $padding;
}
- em {
- font-style: normal;
- font-weight: bold;
- }
-
ul {
background-color: var(--foregroundColour);
- border-radius: 1rem;
- padding: 1rem;
+ border-radius: $padding;
+ display: block;
+ padding: $padding;
text-align: left;
+ text-align-last: left;
width: 100%;
}
- div.codeblock {
- background-color: var(--textColour);
- border-radius: 1rem;
- color: var(--backgroundColour);
- font-family: $monospaceFont;
- line-height: normal;
- padding: 1rem;
- white-space: preserve;
- }
- }
-
- x-image {
- display: block;
- position:relative;
- width: 100%;
-
- &:nth-of-type(odd) {
- margin-right: auto;
- }
-
- &:nth-of-type(even) {
- margin-left: auto;
- }
-
- img.blur {
- filter: blur(1rem) saturate(200%);
- position: absolute;
+ div.image {
+ position: relative;
width: 100%;
- }
- a {
- position: relative;
+ a {
+ border-radius: $padding;
+ display: block;
+ position: relative;
+ }
img {
- border-radius: 1rem;
- display: block;
- image-rendering: pixelated;
- width: 100%;
+ border-radius: $padding;
+ display: block;
+ width: 100%;
+
+ &.blur {
+ filter: blur($padding) saturate(200%);
+ pointer-events: none;
+ position: absolute;
+ }
}
}
}
- @import "footer";
+ h1 + section, section + h1 {
+ margin-top: $padding;
+ }
+
+ @import "overview";
}
diff --git a/css/sideMenu.scss b/css/sideMenu.scss
deleted file mode 100644
index 7fea9f2..0000000
--- a/css/sideMenu.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-#sideMenu {
- align-items: center;
- background-color: var(--backgroundColour);
- display: flex;
- flex-direction: column;
- gap: $separatorWidth;
- justify-content: space-between;
- left: 100vw;
- min-height: calc(100vh + var(--padding));
- padding: 1rem;
- padding-bottom: 2rem;
- padding-top: calc($hamburgerHeight + var(--padding) * 2);
- position: relative;
- width: 100%;
- z-index: 127;
-
- body[data-page = "achernar"] & {
- background-color: var(--backgroundColour);
- }
-
- @media (pointer: fine) and (not (prefers-reduced-motion)) {
- transition: left $sideMenuToggleDuration;
- transition-timing-function: ease-in-out;
- }
-
- &.visible {
- left: 0;
- }
-
- section.links {
- display: flex;
- gap: $separatorWidth;
- justify-content: end;
- max-width: $contentWidth;
- padding: 0 1rem;
- width: 100%;
-
- @media (orientation: portrait) {
- flex-direction: column;
- }
-
- section {
- display: flex;
- flex-direction: column;
- gap: $separatorWidth;
-
- p {
- background-color: var(--textColour);
- border-radius: $separatorWidth;
- color: var(--backgroundColour);
- font-weight: bold;
- padding: $separatorWidth 1rem;
- text-align: center;
- }
-
- a {
- padding: 0 calc($separatorWidth * 2);
- position: relative;
-
- &[aria-current = "page"]::after {
- background-color: var(--textColour);
- border-radius: $separatorWidth;
- content: "";
- display: block;
- height: 100%;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- width: $separatorWidth;
- }
- }
- }
- }
-}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 16:30:42 +0100