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: lilith
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));
--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,
--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))
@ -168,15 +167,14 @@
--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,
--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-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--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));
--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-950));
}
.light .light-only {
display: initial;
@ -208,8 +206,7 @@
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,
--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))
@ -238,15 +235,14 @@
--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,
--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-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--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));
--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-950));
}
html:has(#themeLight:checked) .light-only {
display: initial;
@ -254,6 +250,7 @@
html:has(#themeLight:checked) .dark-only {
display: none;
}
#themeToggleDark {
display: none;
}
@ -273,15 +270,14 @@
--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,
--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-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--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));
--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-950));
}
html .light-only {
display: initial;
@ -311,8 +307,7 @@
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,
--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))
@ -327,6 +322,7 @@
html:has(#themeDark:checked) .dark-only {
display: initial;
}
#themeToggleLight {
display: none;
}
@ -532,9 +528,7 @@ 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;
}
@ -542,9 +536,7 @@ 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;
}

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));
--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,
--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))
@ -188,16 +187,15 @@ $mobile-navigation-height: 4rem;
--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,
--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-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--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));
--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-950));
.light-only {
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 {
max-width: 100%;
height: 100vh;

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

@ -137,8 +137,7 @@
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,
--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))
@ -168,15 +167,14 @@
--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,
--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-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--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));
--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-950));
}
.light .light-only {
display: initial;
@ -208,8 +206,7 @@
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,
--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))
@ -238,15 +235,14 @@
--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,
--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-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--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));
--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-950));
}
html:has(#themeLight:checked) .light-only {
display: initial;
@ -254,6 +250,7 @@
html:has(#themeLight:checked) .dark-only {
display: none;
}
#themeToggleDark {
display: none;
}
@ -273,15 +270,14 @@
--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,
--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-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--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));
--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-950));
}
html .light-only {
display: initial;
@ -311,8 +307,7 @@
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,
--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))
@ -327,6 +322,7 @@
html:has(#themeDark:checked) .dark-only {
display: initial;
}
#themeToggleLight {
display: none;
}
@ -532,9 +528,7 @@ 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;
}
@ -542,9 +536,7 @@ 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;
}
@ -666,6 +658,7 @@ body .h3,
body h4,
body .h4 {
filter: var(--text-glow-primary);
color: var(--color-glow-primary);
}
body > div {
display: flex;
@ -750,8 +743,7 @@ 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,
@ -770,60 +762,40 @@ 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 > 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: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 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: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] {
@ -859,23 +831,15 @@ 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;
}
@ -961,15 +925,11 @@ 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 {

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 {
filter: var(--text-glow-primary);
color: var(--color-glow-primary);
}
> div {

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

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