summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/banner.scss93
-rw-r--r--css/footer.scss42
-rw-r--r--css/glyph.scss65
-rw-r--r--css/header.scss217
-rw-r--r--css/main.scss43
-rw-r--r--css/navBar.scss115
-rw-r--r--css/page.scss133
-rw-r--r--css/sideMenu.scss86
8 files changed, 406 insertions, 388 deletions
diff --git a/css/banner.scss b/css/banner.scss
new file mode 100644
index 0000000..fc14f9f
--- /dev/null
+++ b/css/banner.scss
@@ -0,0 +1,93 @@
+#banner {
+ --textColour: var(--bannerHighlightColour);
+
+ 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"] & {
+ --bannerHighlightColour: #FFFFFF;
+
+ background-color: #007B34;
+
+ @media not (prefers-reduced-motion) {
+ background-image: url("/image/vertexAnimated.webp");
+ }
+ }
+
+ body[data-page = "agbsum"] & {
+ --bannerHighlightColour: #FFFFFF;
+
+ background-color: #422984;
+ }
+
+ body[data-page = "ax"] & {
+ --bannerHighlightColour: #FFFFFF;
+
+ background-color: #422984;
+ }
+
+ body[data-page = "backspace"] & {
+ --bannerHighlightColour: var(--textColour);
+
+ background-color: var(--backgroundColour);
+ }
+
+ body[data-page = "benoit"] & {
+ --bannerHighlightColour: #FFFFFF;
+
+ background-image: url("/svg/benoit-background.svg");
+ }
+
+ body[data-page = "bowshock"] & {
+ --bannerHighlightColour: #FFEEE0;
+
+ background-color: #B61833;
+ }
+
+ body[data-page = "bzipper"] & {
+ --bannerHighlightColour: #B4202D;
+
+ background-color: #FFFFFF;
+ }
+
+ body[data-page = "deltaWorld"] & {
+ --bannerHighlightColour: var(--textColour);
+
+ background-color: var(--backgroundColour);
+ }
+
+ body[data-page = "eas"] & {
+ --bannerHighlightColour: #00291B;
+
+ background-color: #01CD93;
+ }
+
+ body[data-page = "luma"] & {
+ --bannerHighlightColour: #FFFFFF;
+
+ background-color: #6051B2;
+ }
+
+ body[data-page = "pollex"] & {
+ --bannerHighlightColour: #FFFFFF;
+
+ background-color: #4D4084;
+ }
+
+ body[data-page = "u8c"] & {
+ --bannerHighlightColour: #A9E13D;
+
+ background-color: #444747;
+ }
+
+ @import "navBar";
+ @import "glyph";
+}
diff --git a/css/footer.scss b/css/footer.scss
index 36a2752..06243b0 100644
--- a/css/footer.scss
+++ b/css/footer.scss
@@ -1,45 +1,26 @@
#footer {
background-color: var(--foregroundColour);
border-radius: 1rem;
- font-family: "Martian Mono", "monospace";
- font-size: 0.75em;
+ font-family: $monospaceFont;
margin-top: 1rem;
padding: 1rem;
- #emailAddress {
- background-color: var(--textColour);
- display: inline-block;
- height: 1em;
- image-rendering: pixelated;
- 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);
- }
-
- #footerHeading {
+ h1 {
font-size: 2em;
font-weight: bold;
&::after {
background-color: var(--textColour);
- border-radius: 0.25rem;
+ border-radius: $separatorWidth;
content: "";
display: block;
- height: 0.25rem;
+ height: $separatorWidth;
margin-bottom: 1rem;
- margin-top: 0.25rem;
+ margin-top: $separatorWidth;
width: 100%;
}
}
- img {
- display: block;
- margin: auto;
- }
-
table {
border-collapse: collapse;
@@ -61,4 +42,17 @@
}
}
}
+
+ #emailAddress {
+ background-color: var(--textColour);
+ display: inline-block;
+ height: 1em;
+ image-rendering: pixelated;
+ 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);
+ }
}
diff --git a/css/glyph.scss b/css/glyph.scss
new file mode 100644
index 0000000..c1f6235
--- /dev/null
+++ b/css/glyph.scss
@@ -0,0 +1,65 @@
+#glyph {
+ aspect-ratio: 1;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ transition: transform 0.125s;
+ transition-timing-function: steps(4);
+ width: 50vmin;
+
+ body[data-page = "achernar"] & {
+ $pixelWIdth: calc(100vmax / 256);
+
+ background-image: url("/image/achernar.webp");
+ height: floor(calc($pixelWIdth * 42));
+ width: floor(calc($pixelWIdth * 154));
+
+ @media (aspect-ratio < 1) {
+ transform: rotate(0.25turn);
+ }
+ }
+
+ 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");
+ }
+
+ 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 44b18a0..1b53bb7 100644
--- a/css/header.scss
+++ b/css/header.scss
@@ -1,210 +1,33 @@
#header {
+ $slideDuration: 0.5s;
+
+ --hamburgerWidth: 2rem;
+
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
- box-shadow: $shadow;
- color: var(--pageHighlightColour);
+ box-shadow: $defaultShadow;
height: calc(100vh + 1rem);
- padding-bottom: 1rem;
- position: absolute;
- top: 0;
- user-select: none;
+ overflow: hidden;
+ position: relative;
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;
- mask-image: url("/svg/hamburger.svg");
- mask-position: center;
- mask-repeat: no-repeat;
- mask-size: cover;
- position: absolute;
- top: 1rem;
- transition: background-color $navBarSlideDuration;
- z-index: 255;
-
- &[data-navBarState = "Visible"] {
- background-color: var(--textColour);
- }
- }
-
- #clickMe {
- background-color: var(--pageHighlightColour);
- height: 2rem;
- mask-image: url("/image/clickMe.webp");
- mask-position: center;
- mask-repeat: no-repeat;
- mask-size: cover;
- position: absolute;
- width: 16rem;
- }
-
- @import "navBar";
-
- #glyph {
- 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;
+ @media (pointer: coarse) {
+ --hamburgerWidth: 4rem;
}
- @media (pointer: fine) {
- #hamburger {
- left: 1rem;
- width: 2rem;
- }
+ a {
+ cursor: pointer;
+ font-weight: bold;
+ text-decoration: underline;
+ text-decoration-color: #00000000;
+ transition: text-decoration-color 0.125s;
+ user-select: none;
- #clickMe {
- left: 4rem;
- top: 1rem;
+ &:hover {
+ text-decoration-color: var(--textColour);
}
}
- @media (pointer: coarse) {
- #hamburger {
- left: 50%;
- transform: translateX(-50%);
- width: 4rem;
- }
-
- #clickMe {
- left: calc(50% + 3rem);
- top: 2rem;
- }
- }
+ @import "banner";
+ @import "sideMenu";
}
diff --git a/css/main.scss b/css/main.scss
index 31312e4..08ed76c 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,11 +1,10 @@
@import "fonts";
-$achernarColour: #007B34;
+$monospaceFont: "Fira Mono", "monospace";
-$headerHeight: calc(100vh + 1rem);
-$navBarSlideDuration: 0.5s;
+$defaultShadow: 0 0 1rem color-mix(in srgb, black, transparent 50%);;
-$shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);;
+$separatorWidth: 0.25rem;
:root {
font-family: "Raleway", "sans-serif";
@@ -18,31 +17,39 @@ $shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);;
box-sizing: border-box;
}
-#body {
+body {
+ --backgroundColour: oklch( 20% 0.014800 253.71);
+ --foregroundColour: oklch( 25% 0.014800 253.71);
+ --textColour: oklch(100% 0 0);
+
background-color: var(--backgroundColour);
color: var(--textColour);
+ font-size: 1.25em;
z-index: -1;
- &[data-theme = "Light"] {
- --backgroundColour: oklch(100% 0 0);
- --foregroundColour: oklch( 96.875% 0 0);
- --textColour: oklch( 25% 0 0);
+ &.light {
+ --backgroundColour: oklch(96.875% 0 0);
+ --foregroundColour: oklch(93.750% 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);
- }
+a, a:visited {
+ color: var(--textColour);
}
-ol, ul {
- list-style-type: none;
+code {
+ font-family: $monospaceFont;
}
-li p::before {
- content: "\2014\0020";
+ul {
+ list-style: none;
+
+ li p::before {
+ content: "\2014\0020";
+ }
}
@import "header.scss";
@import "page.scss";
+@import "footer.scss";
diff --git a/css/navBar.scss b/css/navBar.scss
index 1ab49bd..9c4338e 100644
--- a/css/navBar.scss
+++ b/css/navBar.scss
@@ -1,97 +1,50 @@
#navBar {
- box-shadow: $shadow;
- color: var(--textColour);
- display: flex;
- gap: 1rem;
- left: 0;
- min-height: calc(100vh + 1rem);
- padding: 1rem;
- position: absolute;
- transform: translateX(-100%);
- transition: transform $navBarSlideDuration;
- z-index: 127;
+ $gap: 1rem;
- &[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);
- }
- }
+ align-items: center;
+ display: flex;
+ height: calc($gap * 2 + var(--hamburgerWidth));
+ justify-content: space-between;
+ padding: $gap;
+ position: absolute;
+ top: 0;
+ width: 100%;
section {
- display: flex;
- flex-direction: column;
- gap: 0.5em;
+ display: flex;
+ gap: $gap;
- p.heading {
- text-align: center;
+ a {
+ text-decoration-color: #00000000;
+ transition: opacity $slideDuration, text-decoration-color 0.125s;
- &::after {
- background-color: var(--textColour);
- border-radius: 0.25rem;
- content: "";
- display: block;
- height: 0.25rem;
- margin-top: 0.5rem;
- width: 100%;
+ @media (orientation: portrait) or (pointer: coarse) {
+ display: none;
}
- }
- }
-
- #themeToggler {
- bottom: 2rem;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
- @media (pointer: fine) {
- backdrop-filter: blur(1rem);
- background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%);
- padding-top: 4rem;
-
- @media (orientation: landscape) {
- border-bottom-right-radius: 1rem;
- border-top-right-radius: 1rem;
- width: 50%;
- }
+ &:hover {
+ text-decoration-color: var(--textColour);
+ }
- @media (orientation: portrait) {
- width: 100%;
+ &.hidden:not(#home) {
+ opacity: 0;
+ pointer-events: none;
+ }
}
}
- @media (pointer: coarse) {
- background-color: var(--backgroundColour);
- flex-direction: column;
- font-size: 4rem;
- padding-top: 6rem;
- width: 100%;
-
-
- p.clickable, a {
- text-align: center;
- }
+ #hamburger {
+ aspect-ratio: 1;
+ background-color: var(--textColour);
+ cursor: pointer;
+ mask-image: url("/svg/hamburger.svg");
+ mask-size: cover;
+ width: var(--hamburgerWidth);
+ }
- p.heading::before {
- background-color: var(--textColour);
- border-radius: 0.25rem;
- content: "";
- display: block;
- height: 0.25rem;
- margin-bottom: 0.5rem;
- width: 100%;
+ body[data-page = "achernar"] & {
+ section a, #hamburger {
+ mix-blend-mode: difference;
}
}
}
diff --git a/css/page.scss b/css/page.scss
index c0c26c9..c850071 100644
--- a/css/page.scss
+++ b/css/page.scss
@@ -1,92 +1,91 @@
#page {
- margin: auto;
- max-width: 72rem;
- padding: 1rem;
- padding-top: calc($headerHeight + 1rem);
+ $padding: 1rem;
- p:not(.heading, #pageHeading, #footer p) {
- line-height: 2em;
- }
+ margin: auto;
+ max-width: 72rem;
+ padding: $padding;
- p.link, a, a:visited {
- color: var(--textColour);
+ a, a:visited {
+ cursor: pointer;
+ text-decoration: underline;
}
- em {
- font-style: normal;
- font-weight: bold;
+ h1 {
+ font-size: 2em;
+ font-weight: bold;
+ margin-bottom: 1rem;
+ width: 100%;
+
+ &:nth-of-type(even) {
+ text-align: right;
+ }
+
+ &::after {
+ background-color: var(--textColour);
+ border-radius: $separatorWidth;
+ content: "";
+ display: block;
+ height: $separatorWidth;
+ margin-bottom: 1rem;
+ margin-top: $separatorWidth;
+ width: 100%;
+ };
}
- span {
- &.code {
- background-color: var(--foregroundColour);
- border-radius: 0.25rem;
- font-family: "Fira Mono", "monospace";
- padding: 0.25rem;
+ section {
+ line-height: 2em;
+ max-width: calc(36rem - $padding);
+ width: 100%;
- a {
- font-weight: normal;
+ &:nth-of-type(odd) {
+ p.note {
+ text-align: right;
}
}
- &.small {
- font-size: 0.75em;
- }
- }
+ &:nth-of-type(even) {
+ margin-left: auto;
- p.heading, #pageHeading {
- font-family: "Martian Mono", "monospace";
- }
+ ol, ul {
+ margin-left: auto;
+ text-align: left
+ }
+ }
- #pageHeading {
- background-color: var(--foregroundColour);
- border-radius: 1rem;
- display: block;
- font-size: 4em;
- font-weight: bold;
- margin: auto;
- margin-bottom: 1rem;
- padding: 1rem;
- text-align: center;
-
- span.small {
- font-size: 0.5em;
+ &.fullWidth {
+ max-width: 100%;
}
- }
- section {
- & + section {
+ & + h1 {
margin-top: 1rem;
}
- &:nth-of-type(even) p.heading {
- text-align: right;
+ p.note {
+ font-weight: bold;
+
+ &::before {
+ content: "Note:\0020";
+ }
}
- }
- p.heading {
- font-size: 2em;
- font-weight: bold;
- width: 100%;
+ code {
+ $padding: 0.25rem;
- &::after {
- background-color: var(--textColour);
- border-radius: 0.25rem;
- content: "";
- display: block;
- height: 0.25rem;
- margin-bottom: 1rem;
- margin-top: 0.25rem;
- width: 100%;
+ background-color: var(--foregroundColour);
+ border-radius: $padding;
+ padding: $padding;
+ }
+
+ em {
+ font-style: normal;
+ font-weight: bold;
}
}
x-image {
- background-position: center;
- background-repeat: no-repeat;
- display: block;
- position: relative;
- width: 100%;
+ display: block;
+ position:relative;
+ width: 100%;
&:nth-of-type(odd) {
margin-right: auto;
@@ -97,15 +96,13 @@
}
img.blur {
- filter: blur(1rem);
+ filter: blur(1rem) saturate(200%);
position: absolute;
- z-index: 1;
width: 100%;
}
a {
position: relative;
- z-index: 1;
img {
border-radius: 1rem;
@@ -117,4 +114,4 @@
}
@import "footer";
-} \ No newline at end of file
+}
diff --git a/css/sideMenu.scss b/css/sideMenu.scss
new file mode 100644
index 0000000..9f57eab
--- /dev/null
+++ b/css/sideMenu.scss
@@ -0,0 +1,86 @@
+#sideMenu {
+ backdrop-filter: blur(1rem);
+ -webkit-backdrop-filter: blur(1rem);
+ background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%);
+ box-shadow: $defaultShadow;
+ 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;
+
+ &.visible {
+ left: 0;
+ }
+
+ @media (orientation: landscape) and (pointer: fine) {
+ border-bottom-left-radius: 1rem;
+ border-top-left-radius: 1rem;
+ width: 50vw;
+
+ &.visible {
+ left: 50%;
+ }
+ }
+
+ @media (pointer: coarse) {
+ border-style: solid;
+ border-width: $separatorWidth;
+ font-size: 2em;
+ }
+
+ div.links {
+ display: flex;
+ gap: 1rem;
+
+ @media (pointer: coarse) {
+ flex-direction: column;
+ }
+
+ section {
+ $gap: 0.25rem;
+
+ display: flex;
+ flex-direction: column;
+ gap: $gap;
+
+ p {
+ text-align: center;
+
+ &::after {
+ background-color: var(--textColour);
+ border-radius: calc($separatorWidth / 2);
+ content: "";
+ display: block;
+ height: $separatorWidth;
+ margin-top: $gap;
+ width: 100%;
+ }
+
+ @media (pointer: coarse) {
+ &::before {
+ background-color: var(--textColour);
+ border-radius: calc($separatorWidth / 2);
+ content: "";
+ display: block;
+ height: $separatorWidth;
+ margin-top: $gap;
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+
+ #themeToggler {
+ align-self: center;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 13:22:14 +0100