This commit is contained in:
parent
246417a553
commit
155d47222e
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
|
|
@ -129,14 +129,23 @@
|
|||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary))
|
||||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-secondary))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
}
|
||||
.dark .light-only {
|
||||
display: none;
|
||||
|
|
@ -163,8 +172,9 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
|
||||
}
|
||||
|
|
@ -190,14 +200,23 @@
|
|||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary))
|
||||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-secondary))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
}
|
||||
html .light-only {
|
||||
display: none;
|
||||
|
|
@ -223,8 +242,9 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
|
||||
}
|
||||
|
|
@ -257,8 +277,9 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
|
||||
}
|
||||
|
|
@ -282,14 +303,23 @@
|
|||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary))
|
||||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-secondary))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
}
|
||||
html:has(#themeDark:checked) .light-only {
|
||||
display: none;
|
||||
|
|
@ -385,12 +415,18 @@ body {
|
|||
font-family: "Athiti", ui-sans, sans-serif;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 1rem 0;
|
||||
|
|
@ -496,7 +532,9 @@ a {
|
|||
color: var(--color-accent-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus {
|
||||
color: var(--color-accent-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -504,7 +542,9 @@ a:visited {
|
|||
color: var(--color-accent-2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:visited:hover, a:visited:active, a:visited:focus {
|
||||
a:visited:hover,
|
||||
a:visited:active,
|
||||
a:visited:focus {
|
||||
color: var(--color-accent-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,16 +145,24 @@ $mobile-navigation-height: 4rem;
|
|||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary))
|
||||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-secondary))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
|
||||
.light-only {
|
||||
display: none;
|
||||
|
|
@ -184,13 +192,13 @@ $mobile-navigation-height: 4rem;
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
|
||||
|
||||
|
||||
.light-only {
|
||||
display: initial;
|
||||
}
|
||||
|
|
@ -237,91 +245,91 @@ $mobile-navigation-height: 4rem;
|
|||
// fonts
|
||||
|
||||
@font-face {
|
||||
font-family: 'Athiti';
|
||||
font-family: "Athiti";
|
||||
font-weight: 700;
|
||||
src: url('../font/athiti/Athiti-Bold.woff2') format('woff2');
|
||||
src: url("../font/athiti/Athiti-Bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Athiti';
|
||||
font-family: "Athiti";
|
||||
font-weight: 600;
|
||||
src: url('../font/athiti/Athiti-SemiBold.woff2') format('woff2');
|
||||
src: url("../font/athiti/Athiti-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Athiti';
|
||||
font-family: "Athiti";
|
||||
font-weight: 500;
|
||||
src: url('../font/athiti/Athiti-Medium.woff2') format('woff2');
|
||||
src: url("../font/athiti/Athiti-Medium.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Athiti';
|
||||
font-family: "Athiti";
|
||||
font-weight: 400;
|
||||
src: url('../font/athiti/Athiti-Regular.woff2') format('woff2');
|
||||
src: url("../font/athiti/Athiti-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Athiti';
|
||||
font-family: "Athiti";
|
||||
font-weight: 300;
|
||||
src: url('../font/athiti/Athiti-Light.woff2') format('woff2');
|
||||
src: url("../font/athiti/Athiti-Light.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Athiti';
|
||||
font-family: "Athiti";
|
||||
font-weight: 200;
|
||||
src: url('../font/athiti/Athiti-ExtraLight.woff2') format('woff2');
|
||||
src: url("../font/athiti/Athiti-ExtraLight.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Departure Mono';
|
||||
src: url('../font/departuremono/DepartureMono-Regular.woff2') format('woff2');
|
||||
font-family: "Departure Mono";
|
||||
src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 100;
|
||||
src: url('../font/argonglow/ArgonGlow-Thin.woff2') format('woff2');
|
||||
src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 200;
|
||||
src: url('../font/argonglow/ArgonGlow-ExtraLight.woff2') format('woff2');
|
||||
src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 300;
|
||||
src: url('../font/argonglow/ArgonGlow-Light.woff2') format('woff2');
|
||||
src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 400;
|
||||
src: url('../font/argonglow/ArgonGlow-Regular.woff2') format('woff2');
|
||||
src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 500;
|
||||
src: url('../font/argonglow/ArgonGlow-Medium.woff2') format('woff2');
|
||||
src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 600;
|
||||
src: url('../font/argonglow/ArgonGlow-SemiBold.woff2') format('woff2');
|
||||
src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 700;
|
||||
src: url('../font/argonglow/ArgonGlow-Bold.woff2') format('woff2');
|
||||
src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Argon Glow';
|
||||
src: url('../font/argonglow/ArgonGlow-VariableVF.woff2') format('woff2');
|
||||
font-family: "Argon Glow";
|
||||
src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
}
|
||||
|
||||
|
|
@ -334,22 +342,26 @@ $mobile-navigation-height: 4rem;
|
|||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
font-family: 'Athiti', ui-sans, sans-serif;
|
||||
font-family: "Athiti", ui-sans, sans-serif;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6,
|
||||
{
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: var(--text-5xl);
|
||||
|
|
@ -387,7 +399,7 @@ h6,
|
|||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Departure Mono', ui-monospace, monospace;
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
font-size: 0.8em;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
|
|
@ -404,7 +416,7 @@ pre {
|
|||
|
||||
code,
|
||||
.code {
|
||||
font-family: 'Departure Mono', ui-monospace, monospace;
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
font-size: 0.8em;
|
||||
background-color: var(--color-shade-2);
|
||||
border-radius: 0.2em;
|
||||
|
|
@ -415,7 +427,6 @@ table {
|
|||
width: fit-content;
|
||||
border-collapse: collapse;
|
||||
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
|
|
@ -493,7 +504,7 @@ figure {
|
|||
object-position: center;
|
||||
|
||||
&.glitch {
|
||||
filter: url('glitch.svg#glitch');
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -506,6 +517,6 @@ img {
|
|||
margin: 0 auto;
|
||||
|
||||
&.glitch {
|
||||
filter: url('glitch.svg#glitch');
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
i[data-icon] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
|
|
@ -8,7 +7,7 @@ i[data-icon] {
|
|||
box-sizing: content-box;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -18,39 +17,39 @@ i[data-icon] {
|
|||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&[data-icon='arrow-left']::before {
|
||||
mask-image: url('../icon/arrow_left.svg');
|
||||
&[data-icon="arrow-left"]::before {
|
||||
mask-image: url("../icon/arrow_left.svg");
|
||||
}
|
||||
|
||||
&[data-icon='arrow-up']::before {
|
||||
mask-image: url('../icon/arrow_up.svg');
|
||||
&[data-icon="arrow-up"]::before {
|
||||
mask-image: url("../icon/arrow_up.svg");
|
||||
}
|
||||
|
||||
&[data-icon='arrow-right']::before {
|
||||
mask-image: url('../icon/arrow_right.svg');
|
||||
&[data-icon="arrow-right"]::before {
|
||||
mask-image: url("../icon/arrow_right.svg");
|
||||
}
|
||||
|
||||
&[data-icon='arrow-down']::before {
|
||||
mask-image: url('../icon/arrow_down.svg');
|
||||
&[data-icon="arrow-down"]::before {
|
||||
mask-image: url("../icon/arrow_down.svg");
|
||||
}
|
||||
|
||||
&[data-icon='info']::before {
|
||||
mask-image: url('../icon/info.svg');
|
||||
&[data-icon="info"]::before {
|
||||
mask-image: url("../icon/info.svg");
|
||||
}
|
||||
|
||||
&[data-icon='home']::before {
|
||||
mask-image: url('../icon/home.svg');
|
||||
&[data-icon="home"]::before {
|
||||
mask-image: url("../icon/home.svg");
|
||||
}
|
||||
|
||||
&[data-icon='menu-small']::before {
|
||||
mask-image: url('../icon/menu_small.svg');
|
||||
&[data-icon="menu-small"]::before {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
}
|
||||
|
||||
&[data-icon='light']::before {
|
||||
mask-image: url('../icon/lightbulb.svg');
|
||||
&[data-icon="light"]::before {
|
||||
mask-image: url("../icon/lightbulb.svg");
|
||||
}
|
||||
|
||||
&[data-icon='warning']::before {
|
||||
mask-image: url('../icon/warning.svg');
|
||||
&[data-icon="warning"]::before {
|
||||
mask-image: url("../icon/warning.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,13 +86,13 @@ table td.val:not(.empty).hover {
|
|||
table td.val:not(.empty):hover {
|
||||
background-color: var(--color-shade-3);
|
||||
}
|
||||
table td.val.highlighted[data-dim=A] {
|
||||
table td.val.highlighted[data-dim="A"] {
|
||||
background-color: rgb(96, 165, 249);
|
||||
}
|
||||
table td.val.highlighted[data-dim=B] {
|
||||
table td.val.highlighted[data-dim="B"] {
|
||||
background-color: rgb(211, 129, 247);
|
||||
}
|
||||
table td.val.highlighted[data-dim=C] {
|
||||
table td.val.highlighted[data-dim="C"] {
|
||||
background-color: rgb(255, 121, 117);
|
||||
}
|
||||
table td.val.currentDimension:not(.hover) {
|
||||
|
|
@ -165,7 +165,7 @@ div.filterBox > div label {
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
div.filterBox > div label input[type=checkbox] {
|
||||
div.filterBox > div label input[type="checkbox"] {
|
||||
appearance: none;
|
||||
background-color: var(--color-shade-1);
|
||||
margin: 0;
|
||||
|
|
@ -178,7 +178,7 @@ div.filterBox > div label input[type=checkbox] {
|
|||
position: relative;
|
||||
font-family: inherit;
|
||||
}
|
||||
div.filterBox > div label input[type=checkbox]::before {
|
||||
div.filterBox > div label input[type="checkbox"]::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "x";
|
||||
|
|
@ -188,7 +188,7 @@ div.filterBox > div label input[type=checkbox]::before {
|
|||
transform: scale(0);
|
||||
transition: 120ms transform ease-in-out;
|
||||
}
|
||||
div.filterBox > div label input[type=checkbox]:checked::before {
|
||||
div.filterBox > div label input[type="checkbox"]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
tr:first-child > th[colspan='15'] {
|
||||
tr:first-child > th[colspan="15"] {
|
||||
background-color: var(--color-shade-2);
|
||||
color: var(--color-dark-foreground);
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@ table {
|
|||
|
||||
td {
|
||||
&.val {
|
||||
font-family: 'Departure Mono', ui-monospace, monospace;
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
|
||||
&.hover {
|
||||
background-color: transparent;
|
||||
|
|
@ -105,15 +105,15 @@ table {
|
|||
}
|
||||
|
||||
&.highlighted {
|
||||
&[data-dim='A'] {
|
||||
&[data-dim="A"] {
|
||||
background-color: rgb(96, 165, 249);
|
||||
}
|
||||
|
||||
&[data-dim='B'] {
|
||||
&[data-dim="B"] {
|
||||
background-color: rgb(211, 129, 247);
|
||||
}
|
||||
|
||||
&[data-dim='C'] {
|
||||
&[data-dim="C"] {
|
||||
background-color: rgb(255, 121, 117);
|
||||
}
|
||||
}
|
||||
|
|
@ -122,7 +122,7 @@ table {
|
|||
background-color: var(--color-shade-2);
|
||||
}
|
||||
|
||||
&:not([data-diff=''])::after {
|
||||
&:not([data-diff=""])::after {
|
||||
content: attr(data-diff);
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -135,8 +135,8 @@ table {
|
|||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
&[data-diff='']::after {
|
||||
content: '';
|
||||
&[data-diff=""]::after {
|
||||
content: "";
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
background-color: transparent;
|
||||
|
|
@ -155,9 +155,9 @@ table {
|
|||
}
|
||||
|
||||
&.currentDimension::after {
|
||||
content: '>';
|
||||
content: ">";
|
||||
/*color: var(--color-secondary);*/
|
||||
font-family: 'Departure Mono', ui-monospace, monospace;
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
position: relative;
|
||||
right: calc(-0.5rem - 0.5ch);
|
||||
margin-left: -1ch;
|
||||
|
|
@ -172,7 +172,7 @@ div.filterBox {
|
|||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
font-family: 'Departure Mono', ui-monospace, monospace;
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 4rem;
|
||||
|
|
@ -180,7 +180,7 @@ div.filterBox {
|
|||
width: fit-content;
|
||||
|
||||
&::before {
|
||||
content: 'filter';
|
||||
content: "filter";
|
||||
position: absolute;
|
||||
top: -0.6lh;
|
||||
background-color: var(--color-background);
|
||||
|
|
@ -198,7 +198,7 @@ div.filterBox {
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
input[type='checkbox'] {
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
background-color: var(--color-shade-1);
|
||||
margin: 0;
|
||||
|
|
@ -214,7 +214,7 @@ div.filterBox {
|
|||
&::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: 'x';
|
||||
content: "x";
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
line-height: 0.7;
|
||||
|
|
@ -228,4 +228,4 @@ div.filterBox {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,14 +129,23 @@
|
|||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary))
|
||||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-secondary))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
}
|
||||
.dark .light-only {
|
||||
display: none;
|
||||
|
|
@ -163,8 +172,9 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
|
||||
}
|
||||
|
|
@ -190,14 +200,23 @@
|
|||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary))
|
||||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-secondary))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
}
|
||||
html .light-only {
|
||||
display: none;
|
||||
|
|
@ -223,8 +242,9 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
|
||||
}
|
||||
|
|
@ -257,8 +277,9 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
|
||||
}
|
||||
|
|
@ -282,14 +303,23 @@
|
|||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary))
|
||||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-secondary))
|
||||
drop-shadow(0 0 0.125em var(--color-secondary));
|
||||
}
|
||||
html:has(#themeDark:checked) .light-only {
|
||||
display: none;
|
||||
|
|
@ -385,12 +415,18 @@ body {
|
|||
font-family: "Athiti", ui-sans, sans-serif;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 1rem 0;
|
||||
|
|
@ -496,7 +532,9 @@ a {
|
|||
color: var(--color-accent-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus {
|
||||
color: var(--color-accent-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -504,7 +542,9 @@ a:visited {
|
|||
color: var(--color-accent-2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:visited:hover, a:visited:active, a:visited:focus {
|
||||
a:visited:hover,
|
||||
a:visited:active,
|
||||
a:visited:focus {
|
||||
color: var(--color-accent-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -553,31 +593,31 @@ i[data-icon]::before {
|
|||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
i[data-icon][data-icon=arrow-left]::before {
|
||||
i[data-icon][data-icon="arrow-left"]::before {
|
||||
mask-image: url("../icon/arrow_left.svg");
|
||||
}
|
||||
i[data-icon][data-icon=arrow-up]::before {
|
||||
i[data-icon][data-icon="arrow-up"]::before {
|
||||
mask-image: url("../icon/arrow_up.svg");
|
||||
}
|
||||
i[data-icon][data-icon=arrow-right]::before {
|
||||
i[data-icon][data-icon="arrow-right"]::before {
|
||||
mask-image: url("../icon/arrow_right.svg");
|
||||
}
|
||||
i[data-icon][data-icon=arrow-down]::before {
|
||||
i[data-icon][data-icon="arrow-down"]::before {
|
||||
mask-image: url("../icon/arrow_down.svg");
|
||||
}
|
||||
i[data-icon][data-icon=info]::before {
|
||||
i[data-icon][data-icon="info"]::before {
|
||||
mask-image: url("../icon/info.svg");
|
||||
}
|
||||
i[data-icon][data-icon=home]::before {
|
||||
i[data-icon][data-icon="home"]::before {
|
||||
mask-image: url("../icon/home.svg");
|
||||
}
|
||||
i[data-icon][data-icon=menu-small]::before {
|
||||
i[data-icon][data-icon="menu-small"]::before {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
}
|
||||
i[data-icon][data-icon=light]::before {
|
||||
i[data-icon][data-icon="light"]::before {
|
||||
mask-image: url("../icon/lightbulb.svg");
|
||||
}
|
||||
i[data-icon][data-icon=warning]::before {
|
||||
i[data-icon][data-icon="warning"]::before {
|
||||
mask-image: url("../icon/warning.svg");
|
||||
}
|
||||
|
||||
|
|
@ -617,10 +657,14 @@ body header #backToWiki > img {
|
|||
body header #backToWiki:hover > img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
body h1, body .h1,
|
||||
body h2, body .h2,
|
||||
body h3, body .h3,
|
||||
body h4, body .h4 {
|
||||
body h1,
|
||||
body .h1,
|
||||
body h2,
|
||||
body .h2,
|
||||
body h3,
|
||||
body .h3,
|
||||
body h4,
|
||||
body .h4 {
|
||||
filter: var(--text-glow-primary);
|
||||
}
|
||||
body > div {
|
||||
|
|
@ -706,10 +750,12 @@ body > div nav ul li.link-back {
|
|||
body > div nav ul li.active {
|
||||
background-color: var(--color-shade-2);
|
||||
}
|
||||
body > div nav ul li.link-back a, body > div nav ul li.active a {
|
||||
body > div nav ul li.link-back a,
|
||||
body > div nav ul li.active a {
|
||||
border-color: var(--color-shade-4);
|
||||
}
|
||||
body > div nav ul li > a, body > div nav ul li label {
|
||||
body > div nav ul li > a,
|
||||
body > div nav ul li label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -724,26 +770,60 @@ body > div nav ul li > a, body > div nav ul li label {
|
|||
transition-duration: 400ms;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active, body > div nav ul li > a:hover, body > div nav ul li label:visited, body > div nav ul li label:focus, body > div nav ul li label:active, body > div nav ul li label:hover {
|
||||
body > div nav ul li > a:visited,
|
||||
body > div nav ul li > a:focus,
|
||||
body > div nav ul li > a:active,
|
||||
body > div nav ul li > a:hover,
|
||||
body > div nav ul li label:visited,
|
||||
body > div nav ul li label:focus,
|
||||
body > div nav ul li label:active,
|
||||
body > div nav ul li label:hover {
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
body > div nav ul li:hover, body > div nav ul li:focus-within {
|
||||
body > div nav ul li:hover,
|
||||
body > div nav ul li:focus-within {
|
||||
background-color: transparent;
|
||||
}
|
||||
body > div nav ul li:hover a, body > div nav ul li:hover label, body > div nav ul li:focus-within a, body > div nav ul li:focus-within label {
|
||||
body > div nav ul li:hover a,
|
||||
body > div nav ul li:hover label,
|
||||
body > div nav ul li:focus-within a,
|
||||
body > div nav ul li:focus-within label {
|
||||
border: solid 0.1em var(--color-glow-primary);
|
||||
background-color: transparent;
|
||||
filter: var(--filter-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
}
|
||||
body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:hover a:hover, body > div nav ul li:hover label:visited, body > div nav ul li:hover label:focus, body > div nav ul li:hover label:active, body > div nav ul li:hover label:hover, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active, body > div nav ul li:focus-within a:hover, body > div nav ul li:focus-within label:visited, body > div nav ul li:focus-within label:focus, body > div nav ul li:focus-within label:active, body > div nav ul li:focus-within label:hover {
|
||||
body > div nav ul li:hover a:visited,
|
||||
body > div nav ul li:hover a:focus,
|
||||
body > div nav ul li:hover a:active,
|
||||
body > div nav ul li:hover a:hover,
|
||||
body > div nav ul li:hover label:visited,
|
||||
body > div nav ul li:hover label:focus,
|
||||
body > div nav ul li:hover label:active,
|
||||
body > div nav ul li:hover label:hover,
|
||||
body > div nav ul li:focus-within a:visited,
|
||||
body > div nav ul li:focus-within a:focus,
|
||||
body > div nav ul li:focus-within a:active,
|
||||
body > div nav ul li:focus-within a:hover,
|
||||
body > div nav ul li:focus-within label:visited,
|
||||
body > div nav ul li:focus-within label:focus,
|
||||
body > div nav ul li:focus-within label:active,
|
||||
body > div nav ul li:focus-within label:hover {
|
||||
color: var(--color-glow-primary);
|
||||
}
|
||||
body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a {
|
||||
body > div nav ul li:hover.link-back a,
|
||||
body > div nav ul li:focus-within.link-back a {
|
||||
border: solid 0.1em var(--color-glow-secondary);
|
||||
filter: var(--filter-glow-secondary);
|
||||
}
|
||||
body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
|
||||
body > div nav ul li:hover.link-back a:visited,
|
||||
body > div nav ul li:hover.link-back a:focus,
|
||||
body > div nav ul li:hover.link-back a:active,
|
||||
body > div nav ul li:hover.link-back a:hover,
|
||||
body > div nav ul li:focus-within.link-back a:visited,
|
||||
body > div nav ul li:focus-within.link-back a:focus,
|
||||
body > div nav ul li:focus-within.link-back a:active,
|
||||
body > div nav ul li:focus-within.link-back a:hover {
|
||||
color: var(--color-glow-secondary);
|
||||
}
|
||||
body > div nav ul li:not(.themeToggle) i[data-icon] {
|
||||
|
|
@ -779,15 +859,23 @@ body > div main {
|
|||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
|
||||
a.a-regular,
|
||||
a.a-regular:hover,
|
||||
a.a-regular:active,
|
||||
a.a-regular:focus,
|
||||
a.a-regular:visited {
|
||||
color: var(--color-accent-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.a-hover, a.a-hover:visited {
|
||||
a.a-hover,
|
||||
a.a-hover:visited {
|
||||
color: var(--color-accent-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
a.a-visited, a.a-visited:hover, a.a-visited:active, a.a-visited:focus {
|
||||
a.a-visited,
|
||||
a.a-visited:hover,
|
||||
a.a-visited:active,
|
||||
a.a-visited:focus {
|
||||
color: var(--color-accent-2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -873,11 +961,15 @@ main > div.generator img {
|
|||
width: 400px;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
}
|
||||
main > div.generator i {
|
||||
font-size: 3em;
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import 'base';
|
||||
@import 'icons';
|
||||
@import "base";
|
||||
@import "icons";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -40,10 +40,14 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4, {
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4 {
|
||||
filter: var(--text-glow-primary);
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +147,8 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
> a, label {
|
||||
> a,
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -171,7 +176,8 @@ body {
|
|||
&:focus-within {
|
||||
background-color: transparent;
|
||||
|
||||
a, label {
|
||||
a,
|
||||
label {
|
||||
border: solid 0.1em var(--color-glow-primary);
|
||||
background-color: transparent;
|
||||
filter: var(--filter-glow-primary);
|
||||
|
|
@ -242,7 +248,6 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
|
||||
&.a-regular,
|
||||
&.a-regular:hover,
|
||||
&.a-regular:active,
|
||||
|
|
@ -294,7 +299,7 @@ a {
|
|||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 1rem;
|
||||
|
|
@ -344,24 +349,26 @@ pre,
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
main > div.generator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
|
||||
|
||||
img {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 3em;
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white))
|
||||
drop-shadow(0 0 0.125em var(--color-primary))
|
||||
drop-shadow(0 0 0.25em var(--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -399,7 +406,7 @@ main > div.generator {
|
|||
}
|
||||
|
||||
span {
|
||||
font-family: 'Departure Mono', ui-monospace, monospace;
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
color: var(--color-foreground);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -408,113 +415,113 @@ main > div.generator {
|
|||
}
|
||||
|
||||
.glow-16-primary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur16Primary')
|
||||
filter: url("glows.svg#textBlur16Primary");
|
||||
}
|
||||
|
||||
.glow-18-primary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur18Primary')
|
||||
filter: url("glows.svg#textBlur18Primary");
|
||||
}
|
||||
|
||||
.glow-24-primary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur24Primary')
|
||||
filter: url("glows.svg#textBlur24Primary");
|
||||
}
|
||||
|
||||
.glow-32-primary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur32Primary')
|
||||
filter: url("glows.svg#textBlur32Primary");
|
||||
}
|
||||
|
||||
.glow-48-primary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur48Primary')
|
||||
filter: url("glows.svg#textBlur48Primary");
|
||||
}
|
||||
|
||||
.glow-72-primary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 72px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur72Primary')
|
||||
filter: url("glows.svg#textBlur72Primary");
|
||||
}
|
||||
|
||||
.glow-160-primary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 160px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur160Primary')
|
||||
filter: url("glows.svg#textBlur160Primary");
|
||||
}
|
||||
|
||||
.glow-16-secondary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur16Secondary')
|
||||
filter: url("glows.svg#textBlur16Secondary");
|
||||
}
|
||||
|
||||
.glow-18-secondary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur18Secondary')
|
||||
filter: url("glows.svg#textBlur18Secondary");
|
||||
}
|
||||
|
||||
.glow-24-secondary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur24Secondary')
|
||||
filter: url("glows.svg#textBlur24Secondary");
|
||||
}
|
||||
|
||||
.glow-32-secondary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur32Secondary')
|
||||
filter: url("glows.svg#textBlur32Secondary");
|
||||
}
|
||||
|
||||
.glow-48-secondary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur48Secondary')
|
||||
filter: url("glows.svg#textBlur48Secondary");
|
||||
}
|
||||
|
||||
.glow-72-secondary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 72px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur72Secondary')
|
||||
filter: url("glows.svg#textBlur72Secondary");
|
||||
}
|
||||
|
||||
.glow-160-secondary {
|
||||
font-family: 'Argon Glow', ui-sans, sans-serif;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 160px;
|
||||
color: var(--color-white);
|
||||
filter: url('glows.svg#textBlur160Secondary')
|
||||
}
|
||||
filter: url("glows.svg#textBlur160Secondary");
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue