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

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

@ -1,4 +1,5 @@
@import "base";
@import "icons";
* {
box-sizing: border-box;
@ -31,7 +32,7 @@ body {
}
}
>div {
> div {
display: flex;
gap: 1rem;
flex-grow: 1;
@ -127,7 +128,7 @@ body {
}
}
>a {
> a {
display: flex;
align-items: center;
gap: 0.5rem;
@ -149,13 +150,6 @@ body {
&:hover {
color: var(--color-foreground);
}
i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
}
&:hover,
@ -189,6 +183,25 @@ body {
}
}
}
li:not(.toggleTheme) {
i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
}
li.toggleTheme {
font-size: 1.4em;
width: fit-content;
a {
justify-content: center;
padding: 0.25em;
}
}
}
}
@ -205,55 +218,6 @@ body {
}
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
&[data-icon='arrow-left']::before {
mask-image: url('../icon/arrow_left.svg');
}
&[data-icon='arrow-top']::before {
mask-image: url('../icon/arrow_top.svg');
}
&[data-icon='arrow-right']::before {
mask-image: url('../icon/arrow_right.svg');
}
&[data-icon='arrow-down']::before {
mask-image: url('../icon/arrow_down.svg');
}
&[data-icon='info']::before {
mask-image: url('../icon/info.svg');
}
&[data-icon='home']::before {
mask-image: url('../icon/home.svg');
}
&[data-icon='menu-small']::before {
mask-image: url('../icon/menu_small.svg');
}
}
a {
&.a-regular,
@ -290,14 +254,14 @@ pre,
display: flex;
width: 100%;
&>* {
& > * {
width: 100%;
}
@media (max-width: $breakpoint-mobile) {
flex-wrap: wrap;
&>* {
& > * {
width: 100%;
}
}
@ -307,7 +271,7 @@ pre,
display: flex;
align-items: center;
&>* {
& > * {
width: 100%;
}
@ -315,7 +279,7 @@ pre,
flex-wrap: wrap;
justify-content: center;
&>* {
& > * {
width: 100%;
}
}
@ -323,7 +287,7 @@ pre,
main.generator {
>div {
> div {
display: flex;
flex-direction: column;
gap: 1em;
@ -354,7 +318,7 @@ main.generator {
gap: 1rem;
margin-top: 2rem;
&>span {
& > span {
width: 100%;
font-size: var(--text-xl);
}