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

SVG filters of glow effect for different font sizes

Browse source
This commit is contained in:
lilith 2025-02-12 02:59:41 +01:00
commit 21d165efb1
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
4 changed files with 558 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,8 @@ a {
}
}
code, .code {
code,
.code {
max-width: 100%;
overflow-x: auto;
}
@ -47,13 +48,14 @@ code, .code {
.layout-column {
display: flex;
& > * {
&>* {
width: 100%;
}
@media (max-width: $breakpoint-md) {
flex-wrap: wrap;
& > * {
&>* {
width: 100%;
}
}
@ -70,7 +72,7 @@ code, .code {
gap: 1rem;
margin-top: 2rem;
& > span {
&>span {
width: 100%;
font-size: var(--text-xl);
}
@ -99,4 +101,116 @@ code, .code {
}
}
}
}
.glow-16-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
filter: url('glows.svg#textBlur16Primary')
}
.glow-18-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
filter: url('glows.svg#textBlur18Primary')
}
.glow-24-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
filter: url('glows.svg#textBlur24Primary')
}
.glow-32-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
filter: url('glows.svg#textBlur32Primary')
}
.glow-48-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
filter: url('glows.svg#textBlur48Primary')
}
.glow-72-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
filter: url('glows.svg#textBlur72Primary')
}
.glow-160-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);
filter: url('glows.svg#textBlur160Primary')
}
.glow-16-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
filter: url('glows.svg#textBlur16Secondary')
}
.glow-18-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
filter: url('glows.svg#textBlur18Secondary')
}
.glow-24-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
filter: url('glows.svg#textBlur24Secondary')
}
.glow-32-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
filter: url('glows.svg#textBlur32Secondary')
}
.glow-48-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
filter: url('glows.svg#textBlur48Secondary')
}
.glow-72-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
filter: url('glows.svg#textBlur72Secondary')
}
.glow-160-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);
filter: url('glows.svg#textBlur160Secondary')
}