WIP 02: style adjustments to match eh22 styleguide
This commit is contained in:
parent
a4e83ec21a
commit
0501598d41
75 changed files with 957 additions and 317 deletions
|
@ -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] {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue