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

Add glow to headings; format style code
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
kritzl 2025-03-03 14:53:04 +01:00
commit 9c13ef2560
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
7 changed files with 326 additions and 307 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
@import "base";
@import "icons";
@import 'base';
@import 'icons';
* {
box-sizing: border-box;
@ -31,16 +31,24 @@ body {
object-fit: contain;
}
#backToWiki>img {
#backToWiki > img {
transition: transform 200ms;
}
#backToWiki:hover>img {
#backToWiki:hover > img {
transform: scale(1.05);
}
}
>div {
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4, {
filter: var(--text-glow-primary);
transition: var(--transition-glow);
}
> div {
display: flex;
gap: 1rem;
flex-grow: 1;
@ -136,7 +144,7 @@ body {
}
}
>a {
> a {
display: flex;
align-items: center;
gap: 0.5rem;
@ -302,14 +310,14 @@ pre,
display: flex;
width: 100%;
&>* {
& > * {
width: 100%;
}
@media (max-width: $breakpoint-mobile) {
flex-wrap: wrap;
&>* {
& > * {
width: 100%;
}
}
@ -319,7 +327,7 @@ pre,
display: flex;
align-items: center;
&>* {
& > * {
width: 100%;
}
@ -327,14 +335,14 @@ pre,
flex-wrap: wrap;
justify-content: center;
&>* {
& > * {
width: 100%;
}
}
}
main>div.generator {
main > div.generator {
display: flex;
flex-direction: column;
gap: 1em;
@ -365,7 +373,7 @@ main>div.generator {
gap: 1rem;
margin-top: 2rem;
&>span {
& > span {
width: 100%;
font-size: var(--text-xl);
}
@ -388,7 +396,7 @@ main>div.generator {
}
span {
font-family: "Departure Mono", ui-monospace, monospace;
font-family: 'Departure Mono', ui-monospace, monospace;
color: var(--color-foreground);
line-height: 1.5;
}
@ -397,7 +405,7 @@ main>div.generator {
}
.glow-16-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
@ -405,7 +413,7 @@ main>div.generator {
}
.glow-18-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
@ -413,7 +421,7 @@ main>div.generator {
}
.glow-24-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
@ -421,7 +429,7 @@ main>div.generator {
}
.glow-32-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
@ -429,7 +437,7 @@ main>div.generator {
}
.glow-48-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
@ -437,7 +445,7 @@ main>div.generator {
}
.glow-72-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
@ -445,7 +453,7 @@ main>div.generator {
}
.glow-160-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);
@ -453,7 +461,7 @@ main>div.generator {
}
.glow-16-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
@ -461,7 +469,7 @@ main>div.generator {
}
.glow-18-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
@ -469,7 +477,7 @@ main>div.generator {
}
.glow-24-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
@ -477,7 +485,7 @@ main>div.generator {
}
.glow-32-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
@ -485,7 +493,7 @@ main>div.generator {
}
.glow-48-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
@ -493,7 +501,7 @@ main>div.generator {
}
.glow-72-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
@ -501,7 +509,7 @@ main>div.generator {
}
.glow-160-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-family: 'Argon Glow', ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);