EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update theme toggle mechanism

Browse source
This commit is contained in:
kritzl 2025-03-03 16:40:30 +01:00
commit 246417a553
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
15 changed files with 425 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

20
styleguide/assets/script/styleguide.js
View file

@ -2,13 +2,6 @@ document.querySelector('nav > button')?.addEventListener('click', (e) => {
document.querySelector('nav').classList.toggle('visible');
})
function applyTheme(theme){
const html = document.querySelector('html')
document.cookie = `theme=${theme}; path=/; expires=; SameSite=Strict; Secure`
html.classList.remove('dark', 'light')
html.classList.add(theme)
}
document.querySelectorAll('.toggleTheme')?.forEach(
element => element.addEventListener('click', (e) => {
const newTheme = element.dataset.theme;
@ -17,11 +10,10 @@ document.querySelectorAll('.toggleTheme')?.forEach(
)
);
const themeFromCookie = document.cookie
.split("; ")
.find((row) => row.startsWith("theme="))
?.split("=")[1];
document.querySelector('#themeDark').addEventListener('change', (e) => {
setTheme(e.target.checked ? 'dark' : 'system');
})
if (themeFromCookie) {
applyTheme(themeFromCookie)
}
document.querySelector('#themeLight').addEventListener('change', (e) => {
setTheme(e.target.checked ? 'light' : 'system');
})

158
styleguide/assets/style/base.css
View file

@ -175,69 +175,6 @@
display: none;
}
html,
html.light {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--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;
--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));
}
html .light-only,
html.light .light-only {
display: initial;
}
html .dark-only,
html.light .dark-only {
display: none;
}
html.dark {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--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));
--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));
}
html.dark .light-only {
display: none;
}
html.dark .dark-only {
display: initial;
}
@media (prefers-color-scheme: dark) {
html {
--color-foreground: var(--color-dark-foreground);
@ -268,6 +205,101 @@ html.dark .dark-only {
html .dark-only {
display: initial;
}
html:has(#themeLight:checked) {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--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;
--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));
}
html:has(#themeLight:checked) .light-only {
display: initial;
}
html:has(#themeLight:checked) .dark-only {
display: none;
}
#themeToggleDark {
display: none;
}
}
@media (prefers-color-scheme: light) {
html {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--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;
--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));
}
html .light-only {
display: initial;
}
html .dark-only {
display: none;
}
html:has(#themeDark:checked) {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--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));
--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));
}
html:has(#themeDark:checked) .light-only {
display: none;
}
html:has(#themeDark:checked) .dark-only {
display: initial;
}
#themeToggleLight {
display: none;
}
}
@font-face {
font-family: "Athiti";

2
styleguide/assets/style/base.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyEF;EArEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AA2CJ;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EA1CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EAlFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AAwDJ;EACE;IAvFA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;;AAgEJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KA7ZuB;EA8ZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"base.css"}
{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyEF;EArEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AA2CJ;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;EACE;IA9EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EAmDA;IA9CF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAxDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EA6BA;IA9FF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EAoEF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAxauB;EAyavB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"base.css"}

29
styleguide/assets/style/base.scss
View file

@ -208,18 +208,29 @@ $mobile-navigation-height: 4rem;
@include theme_light();
}
html,
html.light {
@include theme_light();
}
html.dark {
@include theme_dark();
}
@media (prefers-color-scheme: dark) {
html {
@include theme_dark();
&:has(#themeLight:checked) {
@include theme_light();
}
}
#themeToggleDark {
display: none;
}
}
@media (prefers-color-scheme: light) {
html {
@include theme_light();
&:has(#themeDark:checked) {
@include theme_dark();
}
}
#themeToggleLight {
display: none;
}
}

175
styleguide/assets/style/styleguide.css
View file

@ -175,69 +175,6 @@
display: none;
}
html,
html.light {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--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;
--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));
}
html .light-only,
html.light .light-only {
display: initial;
}
html .dark-only,
html.light .dark-only {
display: none;
}
html.dark {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--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));
--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));
}
html.dark .light-only {
display: none;
}
html.dark .dark-only {
display: initial;
}
@media (prefers-color-scheme: dark) {
html {
--color-foreground: var(--color-dark-foreground);
@ -268,6 +205,101 @@ html.dark .dark-only {
html .dark-only {
display: initial;
}
html:has(#themeLight:checked) {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--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;
--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));
}
html:has(#themeLight:checked) .light-only {
display: initial;
}
html:has(#themeLight:checked) .dark-only {
display: none;
}
#themeToggleDark {
display: none;
}
}
@media (prefers-color-scheme: light) {
html {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--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;
--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));
}
html .light-only {
display: initial;
}
html .dark-only {
display: none;
}
html:has(#themeDark:checked) {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--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));
--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));
}
html:has(#themeDark:checked) .light-only {
display: none;
}
html:has(#themeDark:checked) .dark-only {
display: initial;
}
#themeToggleLight {
display: none;
}
}
@font-face {
font-family: "Athiti";
@ -677,7 +709,7 @@ body > div nav ul li.active {
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 > a, body > div nav ul li label {
display: flex;
align-items: center;
gap: 0.5rem;
@ -692,19 +724,19 @@ body > div nav ul li > a {
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 > 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 {
background-color: transparent;
}
body > div nav ul li:hover a, body > div nav ul li:focus-within a {
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: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: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 {
@ -714,17 +746,20 @@ body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-b
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(.toggleTheme) i[data-icon] {
body > div nav ul li:not(.themeToggle) i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
body > div nav ul li.toggleTheme {
body > div nav ul li.themeToggle {
font-size: 1.4em;
width: fit-content;
}
body > div nav ul li.toggleTheme a {
body > div nav ul li.themeToggle input {
display: none;
}
body > div nav ul li.themeToggle label {
justify-content: center;
padding: 0.25em;
}

2
styleguide/assets/style/styleguide.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyEF;EArEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AA2CJ;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EA1CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EAlFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AAwDJ;EACE;IAvFA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;;AAgEJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KA7ZuB;EA8ZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AChfJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AClDJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;AAAA;EAIE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QF/DqB;EEgErB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAMR;EACE;;;AAKA;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAMN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyEF;EArEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AA2CJ;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;EAGA;EACA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;EACE;IA9EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EAmDA;IA9CF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAxDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EA6BA;IA9FF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;IAGA;IACA;;EAGA;IACE;;EAGF;IACE;;EAoEF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAxauB;EAyavB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC3fJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AClDJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;AAAA;EAIE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QF/DqB;EEgErB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAMR;EACE;;;AAKA;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAMN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}

14
styleguide/assets/style/styleguide.scss
View file

@ -143,7 +143,7 @@ body {
}
}
> a {
> a, label {
display: flex;
align-items: center;
gap: 0.5rem;
@ -171,7 +171,7 @@ body {
&:focus-within {
background-color: transparent;
a {
a, label {
border: solid 0.1em var(--color-glow-primary);
background-color: transparent;
filter: var(--filter-glow-primary);
@ -199,7 +199,7 @@ body {
}
}
li:not(.toggleTheme) {
li:not(.themeToggle) {
i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
@ -208,11 +208,15 @@ body {
}
}
li.toggleTheme {
li.themeToggle {
font-size: 1.4em;
width: fit-content;
a {
input {
display: none;
}
label {
justify-content: center;
padding: 0.25em;
}

32
styleguide/colors/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
@ -13,10 +24,10 @@
<a href="/" id="backToWiki">
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header>
<div>
@ -32,10 +43,18 @@
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>
@ -349,7 +368,6 @@
</section>
</div>
</main>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</div>
</body>

27
styleguide/demopage/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
@ -32,10 +43,18 @@
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
<li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>

27
styleguide/generator/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
@ -32,10 +43,18 @@
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>

27
styleguide/glow/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
@ -32,10 +43,18 @@
<li class="active"><a href=""><i data-icon="info"></i>Glow</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>

27
styleguide/iconography/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
@ -32,10 +43,18 @@
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>

31
styleguide/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
@ -13,10 +24,10 @@
<a href="/" id="backToWiki">
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header>
<div>
@ -32,10 +43,18 @@
<li><a href="glow"><i data-icon="info"></i>Glow</a></li>
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>

27
styleguide/logo/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
@ -32,10 +43,18 @@
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>

27
styleguide/typography/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
@ -32,10 +43,18 @@
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>