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

fix img src path, add theme toggle button
All checks were successful
/ build (push) Successful in 10s
Details

Browse source
This commit is contained in:
kritzl 2025-02-17 00:32:34 +01:00
commit f3b5be3c50
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
10 changed files with 181 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

103
styleguide/assets/style/styleguide.css
View file

@ -491,6 +491,49 @@ img.glitch {
filter: url("glitch.svg#glitch");
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
}
i[data-icon]::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
i[data-icon][data-icon=arrow-left]::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon][data-icon=arrow-up]::before {
mask-image: url("../icon/arrow_up.svg");
}
i[data-icon][data-icon=arrow-right]::before {
mask-image: url("../icon/arrow_right.svg");
}
i[data-icon][data-icon=arrow-down]::before {
mask-image: url("../icon/arrow_down.svg");
}
i[data-icon][data-icon=info]::before {
mask-image: url("../icon/info.svg");
}
i[data-icon][data-icon=home]::before {
mask-image: url("../icon/home.svg");
}
i[data-icon][data-icon=menu-small]::before {
mask-image: url("../icon/menu_small.svg");
}
i[data-icon][data-icon=light]::before {
mask-image: url("../icon/lightbulb.svg");
}
* {
box-sizing: border-box;
}
@ -625,12 +668,6 @@ body > div nav ul li > a {
body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active, body > div nav ul li > a:hover {
color: var(--color-foreground);
}
body > div nav ul li > a i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
body > div nav ul li:hover, body > div nav ul li:focus-within {
background-color: transparent;
}
@ -650,6 +687,20 @@ body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-b
body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
color: var(--color-glow-secondary);
}
body > div nav ul li:not(.toggleTheme) i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
body > div nav ul li.toggleTheme {
font-size: 1.4em;
width: fit-content;
}
body > div nav ul li.toggleTheme a {
justify-content: center;
padding: 0.25em;
}
body > div main {
max-width: min(var(--container-4xl), 100vw);
width: 100%;
@ -662,46 +713,6 @@ body > div main {
}
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
}
i[data-icon]::before {
content: '';
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
i[data-icon][data-icon='arrow-left']::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon][data-icon='arrow-top']::before {
mask-image: url("../icon/arrow_top.svg");
}
i[data-icon][data-icon='arrow-right']::before {
mask-image: url("../icon/arrow_right.svg");
}
i[data-icon][data-icon='arrow-down']::before {
mask-image: url("../icon/arrow_down.svg");
}
i[data-icon][data-icon='info']::before {
mask-image: url("../icon/info.svg");
}
i[data-icon][data-icon='home']::before {
mask-image: url("../icon/home.svg");
}
i[data-icon][data-icon='menu-small']::before {
mask-image: url("../icon/menu_small.svg");
}
a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
color: var(--color-accent-1);
text-decoration: underline;