summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/fonts.scss96
-rw-r--r--css/glyph.scss15
-rw-r--r--css/header.scss27
-rw-r--r--css/navBar.scss34
-rw-r--r--css/page.scss15
-rw-r--r--css/sideMenu.scss50
6 files changed, 146 insertions, 91 deletions
diff --git a/css/fonts.scss b/css/fonts.scss
index 33f1cee..603c9ec 100644
--- a/css/fonts.scss
+++ b/css/fonts.scss
@@ -1,93 +1,109 @@
@font-face {
- font-family: "Fira Mono";
- src: url("/font/FiraMono-Regular.ttf");
+ font-display: fallback;
+ font-family: "Fira Mono";
+ src: url("/font/FiraMono-Regular.ttf");
}
@font-face {
- font-family: "Fira Mono";
- font-weight: bold;
- src: url("/font/FiraMono-Bold.ttf");
+ font-display: fallback;
+ font-family: "Fira Mono";
+ font-weight: bold;
+ src: url("/font/FiraMono-Bold.ttf");
}
@font-face {
- font-family: "Martian Mono";
- src: url("/font/MartianMono-Regular.ttf");
+ font-display: fallback;
+ font-family: "Martian Mono";
+ src: url("/font/MartianMono-Regular.ttf");
}
@font-face {
- font-family: "Martian Mono";
- font-weight: bold;
- src: url("/font/MartianMono-Bold.ttf");
+ font-display: fallback;
+ font-family: "Martian Mono";
+ font-weight: bold;
+ src: url("/font/MartianMono-Bold.ttf");
}
@font-face {
- font-family: "Montserrat";
- src: url("/font/Montserrat-Regular.ttf");
+ font-display: fallback;
+ font-family: "Montserrat";
+ src: url("/font/Montserrat-Regular.ttf");
}
@font-face {
- font-family: "Montserrat";
+ font-display: fallback;
+ font-family: "Montserrat";
font-style: italic;
- src: url("/font/Montserrat-Italic.ttf");
+ src: url("/font/Montserrat-Italic.ttf");
}
@font-face {
- font-family: "Montserrat";
- font-weight: bold;
- src: url("/font/Montserrat-Bold.ttf");
+ font-display: fallback;
+ font-family: "Montserrat";
+ font-weight: bold;
+ src: url("/font/Montserrat-Bold.ttf");
}
@font-face {
- font-family: "Montserrat";
+ font-display: fallback;
+ font-family: "Montserrat";
font-style: italic;
- font-weight: bold;
- src: url("/font/Montserrat-BoldItalic.ttf");
+ font-weight: bold;
+ src: url("/font/Montserrat-BoldItalic.ttf");
}
@font-face {
- font-family: "Playfair Display";
- src: url("/font/PlayfairDisplay-Regular.ttf");
+ font-display: fallback;
+ font-family: "Playfair Display";
+ src: url("/font/PlayfairDisplay-Regular.ttf");
}
@font-face {
- font-family: "Playfair Display";
- font-weight: bold;
- src: url("/font/PlayfairDisplay-Regular.ttf");
+ font-display: fallback;
+ font-family: "Playfair Display";
+ font-weight: bold;
+ src: url("/font/PlayfairDisplay-Regular.ttf");
}
@font-face {
- font-family: "Playfair Display";
+ font-display: fallback;
+ font-family: "Playfair Display";
font-style: italic;
- src: url("/font/PlayfairDisplay-Italic.ttf");
+ src: url("/font/PlayfairDisplay-Italic.ttf");
}
@font-face {
- font-family: "Playfair Display";
+ font-display: fallback;
+ font-family: "Playfair Display";
font-style: italic;
- font-weight: bold;
- src: url("/font/PlayfairDisplay-BoldItalic.ttf");
+ font-weight: bold;
+ src: url("/font/PlayfairDisplay-BoldItalic.ttf");
}
@font-face {
- font-family: "Raleway";
- src: url("/font/Raleway-Regular.ttf");
+ font-display: fallback;
+ font-family: "Raleway";
+ src: url("/font/Raleway-Regular.ttf");
}
@font-face {
- font-family: "Raleway";
- font-weight: bold;
- src: url("/font/Raleway-Bold.ttf");
+ font-display: fallback;
+ font-family: "Raleway";
+ font-weight: bold;
+ src: url("/font/Raleway-Bold.ttf");
}
@font-face {
- font-family: "Raleway";
+ font-display: fallback;
+ font-family: "Raleway";
font-style: italic;
- src: url("/font/Raleway-Italic.ttf");
+ src: url("/font/Raleway-Italic.ttf");
}
@font-face {
- font-family: "Raleway";
+ font-display: fallback;
+ font-family: "Raleway";
font-style: italic;
- font-weight: bold;
- src: url("/font/Raleway-BoldItalic.ttf");
+ font-weight: bold;
+ src: url("/font/Raleway-BoldItalic.ttf");
}
diff --git a/css/glyph.scss b/css/glyph.scss
index 04d6568..f819298 100644
--- a/css/glyph.scss
+++ b/css/glyph.scss
@@ -3,7 +3,10 @@
background-position: center;
background-repeat: no-repeat;
background-size: contain;
- pointer-events: none;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
width: 50vmin;
body[data-page = "achernar"] & {
@@ -28,9 +31,9 @@
background-image: url("/svg/glyph/ax.svg");
}
- body[data-page = "backspace"] & {
- background-image: url("/svg/glyph/backspace.svg");
- }
+// body[data-page = "backspace"] & {
+// background-image: url("/svg/glyph/backspace.svg");
+// }
body[data-page = "benoit"] & {
background-image: url("/svg/glyph/benoit.svg");
@@ -49,6 +52,10 @@
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");
}
diff --git a/css/header.scss b/css/header.scss
index 423d0f5..cd9d63b 100644
--- a/css/header.scss
+++ b/css/header.scss
@@ -3,23 +3,20 @@
--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);
+ height: fit-content;
image-rendering: pixelated;
- justify-content: center;
overflow: hidden;
- padding-bottom: 1rem;
position: relative;
+ user-select: none;
width: 100%;
body[data-page = "achernar"] & {
--backgroundColour: #007B34;
- --textColour: #FFFFFF;
+ --textColour: white;
@media not (prefers-reduced-motion) {
background-image: url("/image/vertex.webp");
@@ -37,8 +34,8 @@
}
body[data-page = "backspace"] & {
- --backgroundColour: #FFFFFF;
- --textColour: #000000;
+ --backgroundColour: #000000;
+ --textColour: #FFFFFF;
}
body[data-page = "benoit"] & {
@@ -63,6 +60,13 @@
--textColour: #FFFFFF;
}
+ body[data-page = "dux"] & {
+ --backgroundColour: #131313;
+ --textColour: #06fbb2;
+
+ background-image: url("/image/duxBackground.webp");
+ }
+
body[data-page = "eas"] & {
--backgroundColour: #01CD93;
--textColour: #00291B;
@@ -87,8 +91,10 @@
--hamburgerHeight: 4rem;
}
- p, a, a:hover {
- color: var(--textColour)
+ p, a {
+ @media not (prefers-reduced-motion) {
+ transition-timing-function: ease-in-out;
+ }
}
a {
@@ -96,7 +102,6 @@
font-weight: bold;
text-decoration: underline;
text-decoration-color: #00000000;
- user-select: none;
@media not (prefers-reduced-motion) {
transition: text-decoration-color 0.125s;
diff --git a/css/navBar.scss b/css/navBar.scss
index 16c003e..737eb18 100644
--- a/css/navBar.scss
+++ b/css/navBar.scss
@@ -6,7 +6,6 @@
padding: 1rem;
position: absolute;
top: 0;
- max-width: $contentWidth;
width: 100%;
body[data-page = "achernar"] & {
@@ -30,14 +29,30 @@
}
a {
+ position: relative;
text-decoration-color: #00000000;
+ &[aria-current = "page"]:not(#home)::after {
+ background-color: var(--textColour);
+ border-radius: $separatorWidth;
+ content: "";
+ display: block;
+ height: $separatorWidth;
+ left: 50%;
+ position: absolute;
+ top: calc(100% + $separatorWidth);
+ transform: translateX(-50%);
+ width: 100%;
+ }
+
@media not (prefers-reduced-motion) {
transition: opacity $slideDuration, text-decoration-color 0.125s;
}
@media (orientation: portrait) or (pointer: coarse) {
- display: none;
+ &:not(#home, #hamburger) {
+ display: none;
+ }
}
&:hover {
@@ -45,18 +60,21 @@
}
}
- #home {
- z-index: 255;
- }
-
- #hamburger {
+ #home, #hamburger {
aspect-ratio: 1;
background-color: var(--textColour);
cursor: pointer;
height: var(--hamburgerHeight);
- mask-image: url("/svg/hamburger.svg");
mask-size: cover;
z-index: 255;
}
+
+ #home {
+ mask-image: url("/svg/home.svg");
+ }
+
+ #hamburger {
+ mask-image: url("/svg/hamburger.svg");
+ }
}
}
diff --git a/css/page.scss b/css/page.scss
index de9edd7..abe49e5 100644
--- a/css/page.scss
+++ b/css/page.scss
@@ -34,15 +34,10 @@
section {
line-height: 2em;
- max-width: calc(36rem - $padding);
+ max-width: calc($contentWidth / 2 - $padding);
+ text-align: justify;
width: 100%;
- &:nth-of-type(odd) {
- p.note {
- text-align: right;
- }
- }
-
&:nth-of-type(even) {
margin-left: auto;
@@ -61,7 +56,11 @@
}
p.note {
- font-weight: bold;
+ background-color: var(--foregroundColour);
+ border-radius: 1rem;
+ font-weight: bold;
+ padding: 1rem;
+ text-align: center;
&::before {
content: "Note:\0020";
diff --git a/css/sideMenu.scss b/css/sideMenu.scss
index 480d35c..59c93a3 100644
--- a/css/sideMenu.scss
+++ b/css/sideMenu.scss
@@ -4,14 +4,14 @@
display: flex;
flex-direction: column;
gap: 1rem;
- height: calc(100% + 1rem);
justify-content: space-between;
left: 100%;
- overflow: hidden;
+ min-height: calc(100vh + 1rem);
padding: 1rem;
padding-bottom: 2rem;
- padding-top: calc(var(--hamburgerHeight) + 2rem);
- position: absolute;
+ padding-top: calc(var(--hamburgerHeight) + 1rem);
+ position: relative;
+ top: 0;
width: 100%;
z-index: 127;
@@ -24,42 +24,52 @@
transition-timing-function: ease-in-out;
}
- @media (pointer: coarse) {
- font-size: 2em;
- overflow: scroll;
- }
-
&.visible {
left: 0;
}
- div.links {
- display: flex;
- gap: 1rem;
- max-width: $contentWidth;
- padding: 1rem;
- width: 100%;
+ section.links {
+ display: flex;
+ gap: 1rem;
+ justify-content: end;
+ max-width: $contentWidth;
+ padding: 1rem;
+ width: 100%;
- @media (pointer: coarse) {
+ @media (orientation: portrait) {
flex-direction: column;
}
section {
display: flex;
flex-direction: column;
- gap: 0.25rem;
+ gap: $separatorWidth;
p {
background-color: var(--textColour);
- border-radius: 0.25rem;
+ border-radius: $separatorWidth;
color: var(--backgroundColour);
font-weight: bold;
- padding: 0.25rem 1rem;
+ padding: $separatorWidth 1rem;
text-align: center;
}
a {
- padding: 0.25rem;
+ 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 17:23:59 +0100