summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/content.scss20
-rw-r--r--css/frontPage.scss129
-rw-r--r--css/main.scss54
-rw-r--r--css/navBar.scss71
-rw-r--r--css/navigationBar.scss40
-rw-r--r--css/noScript.scss4
6 files changed, 214 insertions, 104 deletions
diff --git a/css/content.scss b/css/content.scss
index 515044f..c80c7c7 100644
--- a/css/content.scss
+++ b/css/content.scss
@@ -1,7 +1,8 @@
#content {
- margin: auto;
- max-width: 72rem;
- padding: 2rem;
+ margin: auto;
+ max-width: 72rem;
+ padding: 1rem;
+ padding-top: calc($frontPageHeight + 1rem);
p:not(.heading, #contentHeading, #cloneNotice p) {
line-height: 2em;
@@ -53,12 +54,14 @@
}
}
- section:nth-of-type(even) p.heading {
- text-align: right;
- }
+ section {
+ & + section {
+ margin-top: 1rem;
+ }
- section + section {
- margin-top: 1rem;
+ &:nth-of-type(even) p.heading {
+ text-align: right;
+ }
}
p.heading {
@@ -119,6 +122,7 @@
font-family: "Martian Mono", "monospace";
font-size: 0.75em;
image-rendering: pixelated;
+ margin-top: 1rem;
padding: 1rem;
.separator {
diff --git a/css/frontPage.scss b/css/frontPage.scss
index 0c6247a..9ed00f4 100644
--- a/css/frontPage.scss
+++ b/css/frontPage.scss
@@ -1,65 +1,176 @@
#frontPage {
- align-items: center;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
- display: flex;
- justify-content: center;
+ box-shadow: $shadow;
+ color: var(--pageHighlightColour);
height: calc(100vh + 1rem);
padding-bottom: 1rem;
- pointer-events: none;
+ position: absolute;
+ top: 0;
+ user-select: none;
width: 100%;
body[data-page = "about"] & {
+ --pageHighlightColour: #FFFFFF;
+
background-color: $achernarColour;
+
+ div#glyph {
+ background-image: url("/svg/glyph/achernar.svg");
+ }
+ }
+
+ body[data-page = "agbsum"] & {
+ --pageHighlightColour: #FFFFFF;
+
+ background-color: #422984;
+
+ div#glyph {
+ background-image: url("/svg/glyph/ax.svg");
+ }
}
body[data-page = "ax"] & {
+ --pageHighlightColour: #FFFFFF;
+
background-color: #422984;
+
+ div#glyph {
+ background-image: url("/svg/glyph/ax.svg");
+ }
}
body[data-page = "backspace"] & {
+ --pageHighlightColour: var(--textColour);
+
background-color: var(--backgroundColour);
+
+ div#glyph {
+ background-image: url("/svg/glyph/backspace.svg");
+ }
}
body[data-page = "benoit"] & {
+ --pageHighlightColour: #FFFFFF;
+
background-image: url("/svg/benoit-background.svg");
background-size: cover;
+
+ div#glyph {
+ background-image: url("/svg/glyph/benoit.svg");
+ }
}
body[data-page = "bowshock"] & {
+ --pageHighlightColour: #FFEEE0;
+
background-color: #B61833;
+
+ div#glyph {
+ background-image: url("/svg/glyph/bowshock.svg");
+ }
}
body[data-page = "bzipper"] & {
+ --pageHighlightColour: #B4202D;
+
background-color: #FFFFFF;
+
+ div#glyph {
+ background-image: url("/svg/glyph/bzipper.svg");
+ }
}
body[data-page = "deltaWorld"] & {
+ --pageHighlightColour: var(--textColour);
+
background-color: var(--backgroundColour);
+
+ div#glyph {
+ background-image: url("/svg/glyph/deltaWorld.svg");
+ }
}
body[data-page = "eas"] & {
+ --pageHighlightColour: #00291B;
+
background-color: #01CD93;
+
+ div#glyph {
+ background-image: url("/svg/glyph/eas.svg");
+ }
}
body[data-page = "luma"] & {
+ --pageHighlightColour: #FFFFFF;
+
background-color: #6051B2;
+
+ div#glyph {
+ background-image: url("/svg/glyph/luma.svg");
+ }
}
body[data-page = "pollex"] & {
+ --pageHighlightColour: #FFFFFF;
+
background-color: #4D4084;
+
+ div#glyph {
+ background-image: url("/svg/glyph/pollex.svg");
+ }
}
body[data-page = "u8c"] & {
+ --pageHighlightColour: #A9E13D;
+
background-color: #444747;
+
+ div#glyph {
+ background-image: url("/svg/glyph/u8c.svg");
+ }
}
+ #hamburger {
+ aspect-ratio: 1;
+ background-color: var(--pageHighlightColour);
+ cursor: pointer;
+ left: 1rem;
+ mask-image: url("/svg/hamburger.svg");
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: cover;
+ position: absolute;
+ top: 1rem;
+ transition: background-color $navBarSlideDuration;
+ width: 2rem;
+ z-index: 255;
+
+ &[data-navBarState = "Visible"] {
+ background-color: var(--textColour);
+ }
+ }
+
+ @import "navBar";
+
#glyph {
- display: block;
- font-size: 4rem;
+ display: block;
+ left: 50vw;
+ position: absolute;
+ top: 50vh;
+ transform: translate(-50%, -50%);
+ }
+
+ div#glyph {
+ aspect-ratio: 1;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ width: calc(100vmin / 2);
+ }
+
+ p#glyph {
+ font-size: 4em;
font-weight: bold;
- height: fit-content;
- width: calc(100vmin / 2);
- text-align: center;
}
}
diff --git a/css/main.scss b/css/main.scss
index 8dd53c3..983c4ad 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -2,6 +2,11 @@
$achernarColour: #007B34;
+$frontPageHeight: calc(100vh + 1rem);
+$navBarSlideDuration: 0.5s;
+
+$shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);;
+
:root {
font-family: "Raleway", "sans-serif";
}
@@ -18,61 +23,17 @@ $achernarColour: #007B34;
color: var(--textColour);
z-index: -1;
- &[data-theme = "light"] {
+ &[data-theme = "Light"] {
--backgroundColour: oklch(100% 0 0);
--foregroundColour: oklch( 96.875% 0 0);
--textColour: oklch( 25% 0 0);
}
- &[data-theme = "dark"] {
+ &[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: var(--textColour);
- }
-
- &[data-page = "benoit"] {
- --pageHighlightColour: #FFFFFF;
- }
-
- &[data-page = "bowshock"] {
- --pageHighlightColour: #FFEEE0;
- }
-
- &[data-page = "bzipper"] {
- --pageHighlightColour: #B4202D;
- }
-
- &[data-page = "deltaWorld"] {
- --pageHighlightColour: var(--textColour);
- }
-
- &[data-page = "eas"] {
- --pageHighlightColour: #00291B;
- }
-
- &[data-page = "luma"] {
- --pageHighlightColour: #FFFFFF;
- }
-
- &[data-page = "pollex"] {
- --pageHighlightColour: #FFFFFF;
- }
-
- &[data-page = "u8c"] {
- --pageHighlightColour: #A9E13D;
- }
}
ol, ul {
@@ -83,6 +44,5 @@ li p::before {
content: "\2014\0020";
}
-@import "navigationBar.scss";
@import "frontPage.scss";
@import "content.scss";
diff --git a/css/navBar.scss b/css/navBar.scss
new file mode 100644
index 0000000..a915415
--- /dev/null
+++ b/css/navBar.scss
@@ -0,0 +1,71 @@
+#navBar {
+ backdrop-filter: blur(1rem);
+ background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%);
+ box-shadow: $shadow;
+ color: var(--textColour);
+ display: flex;
+ gap: 1rem;
+ left: 0;
+ min-height: calc(100vh + 1rem);
+ padding: 1rem;
+ padding-top: 4rem;
+ position: absolute;
+ transform: translateX(-100%);
+ transition: transform $navBarSlideDuration;
+ width: 50%;
+ z-index: 127;
+
+ &[data-state = "Visible"] {
+ transform: translateX(0);
+ }
+
+ p.clickable, a {
+ color: var(--textColour);
+ cursor: pointer;
+ display: block;
+ font-weight: bold;
+ text-decoration: underline;
+ text-decoration-color: #00000000;
+ transition: text-decoration-color 0.125s;
+
+ &:hover {
+ text-decoration-color: var(--textColour);
+ }
+ }
+
+ section {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+
+ p.heading {
+ text-align: center;
+
+ &::after {
+ background-color: var(--textColour);
+ border-radius: 0.25rem;
+ content: "";
+ display: block;
+ height: 0.25rem;
+ margin-top: 0.5rem;
+ width: 100%;
+ }
+ }
+ }
+
+ #themeToggler {
+ bottom: 2rem;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ @media (orientation: landscape) {
+ border-bottom-right-radius: 1rem;
+ border-top-right-radius: 1rem;
+ }
+
+ @media (orientation: portrait) {
+ width: 100%;
+ }
+}
diff --git a/css/navigationBar.scss b/css/navigationBar.scss
deleted file mode 100644
index 6b17412..0000000
--- a/css/navigationBar.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-#navigationBar {
- align-items: center;
- background-color: #00000000;
- display: flex;
- gap: 1rem;
- justify-content: center;
- position: absolute;
- top: 1rem;
- user-select: none;
- width: 100%;
- z-index: 1;
-
- 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(--pageHighlightColour);
- transition: text-decoration-color 0.125s;
- }
- }
-
- #themeToggler {
- display: block;
- left: 1rem;
- position: absolute;
- }
-
- .separator {
- background-color: var(--pageHighlightColour);
- border-radius: 0.125rem;
- height: 0.25rem;
- width: 1rem;
- }
-} \ No newline at end of file
diff --git a/css/noScript.scss b/css/noScript.scss
index 4cc630c..c76d9e2 100644
--- a/css/noScript.scss
+++ b/css/noScript.scss
@@ -1,3 +1,7 @@
+#navBar {
+ display: none;
+}
+
#themeToggler {
display: none;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 18:35:41 +0100