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

glow-filter and -transition for light mode
All checks were successful
/ build (push) Successful in 10s
Details

Browse source
This commit is contained in:
lilith 2025-02-16 19:37:08 +01:00
commit a0f7ad1666
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
6 changed files with 104 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,7 @@ body {
}
}
> div {
>div {
display: flex;
gap: 1rem;
flex-grow: 1;
@ -61,6 +61,7 @@ body {
top: 1rem;
height: fit-content;
overflow: visible;
button {
display: none;
}
@ -119,13 +120,14 @@ body {
background-color: var(--color-shade-2);
}
&.link-back, &.active {
&.link-back,
&.active {
a {
border-color: var(--color-shade-4);
}
}
> a {
>a {
display: flex;
align-items: center;
gap: 0.5rem;
@ -141,7 +143,10 @@ body {
transition-duration: 400ms;
transition-timing-function: ease-in;
&:visited, &:focus, &:active, &:hover {
&:visited,
&:focus,
&:active,
&:hover {
color: var(--color-foreground);
}
@ -153,7 +158,8 @@ body {
}
}
&:hover, &:focus-within {
&:hover,
&:focus-within {
background-color: transparent;
a {
@ -162,15 +168,22 @@ body {
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
&:visited, &:focus, &:active, &:hover {
&:visited,
&:focus,
&:active,
&:hover {
color: var(--color-glow-primary);
}
}
&.link-back a {
border: solid 0.1em var(--color-glow-secondary);
filter: var(--filter-glow-secondary);
&:visited, &:focus, &:active, &:hover {
&:visited,
&:focus,
&:active,
&:hover {
color: var(--color-glow-secondary);
}
}
@ -277,14 +290,14 @@ pre,
display: flex;
width: 100%;
& > * {
&>* {
width: 100%;
}
@media (max-width: $breakpoint-mobile) {
flex-wrap: wrap;
& > * {
&>* {
width: 100%;
}
}
@ -294,7 +307,7 @@ pre,
display: flex;
align-items: center;
& > * {
&>* {
width: 100%;
}
@ -302,7 +315,7 @@ pre,
flex-wrap: wrap;
justify-content: center;
& > * {
&>* {
width: 100%;
}
}
@ -310,7 +323,7 @@ pre,
main.generator {
> div {
>div {
display: flex;
flex-direction: column;
gap: 1em;
@ -341,7 +354,7 @@ main.generator {
gap: 1rem;
margin-top: 2rem;
& > span {
&>span {
width: 100%;
font-size: var(--text-xl);
}