fix img src path, add theme toggle button
All checks were successful
/ build (push) Successful in 10s
All checks were successful
/ build (push) Successful in 10s
This commit is contained in:
parent
d4ec541814
commit
f3b5be3c50
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
10 changed files with 181 additions and 126 deletions
52
styleguide/assets/style/icons.scss
Normal file
52
styleguide/assets/style/icons.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
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-up']::before {
|
||||
mask-image: url('../icon/arrow_up.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');
|
||||
}
|
||||
|
||||
&[data-icon='light']::before {
|
||||
mask-image: url('../icon/lightbulb.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue