WIP 02: style adjustments to match eh22 styleguide

This commit is contained in:
kritzl 2025-02-20 22:03:16 +01:00
commit 0501598d41
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
75 changed files with 957 additions and 317 deletions

View file

@ -386,10 +386,6 @@ nav > ul {
/* variables */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@dropshadow: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
@neonflicker: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
:root {
--color-neutral-50: #F2F0F5;
--color-neutral-100: #D1C6E0;
@ -505,6 +501,46 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
--container-7xl: 80rem;
}
.fnButton {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
color: var(--color-foreground);
font-size: 1.2em;
border: solid 0.1em var(--color-shade-1);
transition-property: filter, border-color;
transition-duration: 200ms;
transition-timing-function: ease-out;
&:hover, &.active{
.fnActiveButton();
}
}
.fnButtonSecondary {
&:hover, &.active{
.fnActiveButtonSecondary();
}
}
.fnActiveButton {
background-color: transparent;
border: solid 0.1em var(--color-glow-primary);
text-decoration: none;
color: var(--color-glow-primary);
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
}
.fnActiveButtonSecondary {
background-color: transparent;
border: solid 0.1em var(--color-glow-secondary);
text-decoration: none;
color: var(--color-glow-secondary);
filter: var(--filter-glow-secondary);
transition: var(--transition-glow);
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* screen only */
@ -527,6 +563,21 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
--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;
.light-only {
display: none;
}
.dark-only {
display: initial;
}
}
.light {
@ -543,6 +594,21 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
--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;
.light-only {
display: initial;
}
.dark-only {
display: none;
}
}
html,
@ -590,9 +656,28 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
display: none;
}
a:active,
a:hover {
outline: 0;
a {
color: var(--color-accent-1);
text-decoration: underline;
&:hover,
&:active,
&:focus {
color: var(--color-accent-3);
text-decoration: none;
}
&:visited {
color: var(--color-accent-2);
text-decoration: underline;
&:hover,
&:active,
&:focus {
color: var(--color-accent-3);
text-decoration: none;
}
}
}
abbr[title] {