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

Fix lightmode glow & make merch.scss inherit from styleguide.scss

Browse source
This commit is contained in:
lilith 2025-03-04 20:12:48 +01:00
commit 130a1cb5b7
Signed by: traumweh
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
11 changed files with 1188 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -137,8 +137,7 @@
drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 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)) --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.0625em var(--color-primary))
@ -168,15 +167,14 @@
--color-accent-1: var(--color-light-accent-1); --color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2); --color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3); --color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-800);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 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-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
} }
.light .light-only { .light .light-only {
display: initial; display: initial;
@ -208,8 +206,7 @@
drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 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)) --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.0625em var(--color-primary))
@ -238,15 +235,14 @@
--color-accent-1: var(--color-light-accent-1); --color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2); --color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3); --color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-800);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 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-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
} }
html:has(#themeLight:checked) .light-only { html:has(#themeLight:checked) .light-only {
display: initial; display: initial;
@ -254,6 +250,7 @@
html:has(#themeLight:checked) .dark-only { html:has(#themeLight:checked) .dark-only {
display: none; display: none;
} }
#themeToggleDark { #themeToggleDark {
display: none; display: none;
} }
@ -273,15 +270,14 @@
--color-accent-1: var(--color-light-accent-1); --color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2); --color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3); --color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-800);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 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-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
} }
html .light-only { html .light-only {
display: initial; display: initial;
@ -311,8 +307,7 @@
drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 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)) --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.0625em var(--color-primary))
@ -327,6 +322,7 @@
html:has(#themeDark:checked) .dark-only { html:has(#themeDark:checked) .dark-only {
display: initial; display: initial;
} }
#themeToggleLight { #themeToggleLight {
display: none; display: none;
} }
@ -532,9 +528,7 @@ a {
color: var(--color-accent-1); color: var(--color-accent-1);
text-decoration: underline; text-decoration: underline;
} }
a:hover, a:hover, a:active, a:focus {
a:active,
a:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
@ -542,9 +536,7 @@ a:visited {
color: var(--color-accent-2); color: var(--color-accent-2);
text-decoration: underline; text-decoration: underline;
} }
a:visited:hover, a:visited:hover, a:visited:active, a:visited:focus {
a:visited:active,
a:visited:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }

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

File diff suppressed because one or more lines are too long

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

@ -153,8 +153,7 @@ $mobile-navigation-height: 4rem;
drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 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)) --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
@ -188,16 +187,15 @@ $mobile-navigation-height: 4rem;
--color-accent-2: var(--color-light-accent-2); --color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3); --color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-800);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 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-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
.light-only { .light-only {
display: initial; display: initial;

1089
styleguide/assets/style/merch.css
View file

File diff suppressed because it is too large Load diff

8
styleguide/assets/style/merch.css.map
View file

File diff suppressed because one or more lines are too long

2
styleguide/assets/style/merch.scss
View file

@ -1,3 +1,5 @@
@import "styleguide";
main { main {
max-width: 100%; max-width: 100%;
height: 100vh; height: 100vh;

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

@ -137,8 +137,7 @@
drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 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)) --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.0625em var(--color-primary))
@ -168,15 +167,14 @@
--color-accent-1: var(--color-light-accent-1); --color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2); --color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3); --color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-800);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 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-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
} }
.light .light-only { .light .light-only {
display: initial; display: initial;
@ -208,8 +206,7 @@
drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 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)) --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.0625em var(--color-primary))
@ -238,15 +235,14 @@
--color-accent-1: var(--color-light-accent-1); --color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2); --color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3); --color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-800);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 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-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
} }
html:has(#themeLight:checked) .light-only { html:has(#themeLight:checked) .light-only {
display: initial; display: initial;
@ -254,6 +250,7 @@
html:has(#themeLight:checked) .dark-only { html:has(#themeLight:checked) .dark-only {
display: none; display: none;
} }
#themeToggleDark { #themeToggleDark {
display: none; display: none;
} }
@ -273,15 +270,14 @@
--color-accent-1: var(--color-light-accent-1); --color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2); --color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3); --color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-800);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 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-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
} }
html .light-only { html .light-only {
display: initial; display: initial;
@ -311,8 +307,7 @@
drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 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)) --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.0625em var(--color-primary))
@ -327,6 +322,7 @@
html:has(#themeDark:checked) .dark-only { html:has(#themeDark:checked) .dark-only {
display: initial; display: initial;
} }
#themeToggleLight { #themeToggleLight {
display: none; display: none;
} }
@ -532,9 +528,7 @@ a {
color: var(--color-accent-1); color: var(--color-accent-1);
text-decoration: underline; text-decoration: underline;
} }
a:hover, a:hover, a:active, a:focus {
a:active,
a:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
@ -542,9 +536,7 @@ a:visited {
color: var(--color-accent-2); color: var(--color-accent-2);
text-decoration: underline; text-decoration: underline;
} }
a:visited:hover, a:visited:hover, a:visited:active, a:visited:focus {
a:visited:active,
a:visited:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
@ -666,6 +658,7 @@ body .h3,
body h4, body h4,
body .h4 { body .h4 {
filter: var(--text-glow-primary); filter: var(--text-glow-primary);
color: var(--color-glow-primary);
} }
body > div { body > div {
display: flex; display: flex;
@ -750,8 +743,7 @@ body > div nav ul li.link-back {
body > div nav ul li.active { body > div nav ul li.active {
background-color: var(--color-shade-2); background-color: var(--color-shade-2);
} }
body > div nav ul li.link-back a, body > div nav ul li.link-back a, body > div nav ul li.active a {
body > div nav ul li.active a {
border-color: var(--color-shade-4); border-color: var(--color-shade-4);
} }
body > div nav ul li > a, body > div nav ul li > a,
@ -770,60 +762,40 @@ body > div nav ul li label {
transition-duration: 400ms; transition-duration: 400ms;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
body > div nav ul li > a:visited, 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: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:visited,
body > div nav ul li label:focus, body > div nav ul li label:focus,
body > div nav ul li label:active, body > div nav ul li label:active,
body > div nav ul li label:hover { body > div nav ul li label:hover {
color: var(--color-foreground); color: var(--color-foreground);
} }
body > div nav ul li:hover, body > div nav ul li:hover, body > div nav ul li:focus-within {
body > div nav ul li:focus-within {
background-color: transparent; background-color: transparent;
} }
body > div nav ul li:hover a, body > div nav ul li:hover a,
body > div nav ul li:hover label, body > div nav ul li:hover label, body > div nav ul li:focus-within a,
body > div nav ul li:focus-within a,
body > div nav ul li:focus-within label { body > div nav ul li:focus-within label {
border: solid 0.1em var(--color-glow-primary); border: solid 0.1em var(--color-glow-primary);
background-color: transparent; background-color: transparent;
filter: var(--filter-glow-primary); filter: var(--filter-glow-primary);
transition: var(--transition-glow); transition: var(--transition-glow);
} }
body > div nav ul li:hover a:visited, 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 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:visited,
body > div nav ul li:hover label:focus, body > div nav ul li:hover label:focus,
body > div nav ul li:hover label:active, body > div nav ul li:hover label:active,
body > div nav ul li:hover label:hover, 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 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:visited,
body > div nav ul li:focus-within label:focus, 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:active,
body > div nav ul li:focus-within label:hover { body > div nav ul li:focus-within label:hover {
color: var(--color-glow-primary); color: var(--color-glow-primary);
} }
body > div nav ul li:hover.link-back a, body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a {
body > div nav ul li:focus-within.link-back a {
border: solid 0.1em var(--color-glow-secondary); border: solid 0.1em var(--color-glow-secondary);
filter: var(--filter-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: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: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); color: var(--color-glow-secondary);
} }
body > div nav ul li:not(.themeToggle) i[data-icon] { body > div nav ul li:not(.themeToggle) i[data-icon] {
@ -859,23 +831,15 @@ body > div main {
background-color: var(--color-background); background-color: var(--color-background);
} }
a.a-regular, a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
a.a-regular:hover,
a.a-regular:active,
a.a-regular:focus,
a.a-regular:visited {
color: var(--color-accent-1); color: var(--color-accent-1);
text-decoration: underline; text-decoration: underline;
} }
a.a-hover, a.a-hover, a.a-hover:visited {
a.a-hover:visited {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
a.a-visited, a.a-visited, a.a-visited:hover, a.a-visited:active, a.a-visited:focus {
a.a-visited:hover,
a.a-visited:active,
a.a-visited:focus {
color: var(--color-accent-2); color: var(--color-accent-2);
text-decoration: underline; text-decoration: underline;
} }
@ -961,15 +925,11 @@ main > div.generator img {
width: 400px; width: 400px;
height: 300px; height: 300px;
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 0 0.0625em var(--color-white)) 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));
drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
} }
main > div.generator i { main > div.generator i {
font-size: 3em; font-size: 3em;
filter: drop-shadow(0 0 0.0625em var(--color-white)) 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));
drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
} }
.swatch-grid { .swatch-grid {

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

File diff suppressed because one or more lines are too long

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

@ -49,6 +49,7 @@ body {
h4, h4,
.h4 { .h4 {
filter: var(--text-glow-primary); filter: var(--text-glow-primary);
color: var(--color-glow-primary);
} }
> div { > div {

5
styleguide/merch/de/index.html
View file

@ -7,11 +7,6 @@
content="width=device-width, user-scalable=no, initial-scale=1.0" content="width=device-width, user-scalable=no, initial-scale=1.0"
/> />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
type="text/css"
href="../../assets/style/styleguide.css"
/>
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"

5
styleguide/merch/en/index.html
View file

@ -7,11 +7,6 @@
content="width=device-width, user-scalable=no, initial-scale=1.0" content="width=device-width, user-scalable=no, initial-scale=1.0"
/> />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
type="text/css"
href="../../assets/style/styleguide.css"
/>
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"