styleguide: move scripts, add mobile navigation, style generator
All checks were successful
/ build (push) Successful in 9s
All checks were successful
/ build (push) Successful in 9s
This commit is contained in:
parent
4ebc78ae1f
commit
fa75654b11
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
16 changed files with 390 additions and 112 deletions
|
|
@ -287,7 +287,7 @@ h6,
|
|||
.h6 {
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -364,9 +364,14 @@ table tr th {
|
|||
}
|
||||
table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
top: 4rem;
|
||||
z-index: 10;
|
||||
}
|
||||
@media (min-width: 48rem) {
|
||||
table thead {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
table thead tr > th {
|
||||
outline-width: 0.1em;
|
||||
outline-style: solid;
|
||||
|
|
@ -442,48 +447,117 @@ body header {
|
|||
height: fit-content;
|
||||
flex-grow: 0;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
body header {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
body header .header-image {
|
||||
height: 200px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
body > div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (min-width: 48rem) {
|
||||
body > div {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
body > div nav {
|
||||
width: 20rem;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 0 1rem;
|
||||
background-color: var(--color-background);
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
transition: height 200ms;
|
||||
}
|
||||
@media (min-width: 48rem) {
|
||||
body > div nav {
|
||||
max-width: 15rem;
|
||||
width: fit-content;
|
||||
top: 1rem;
|
||||
height: fit-content;
|
||||
overflow: visible;
|
||||
}
|
||||
body > div nav button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
body > div nav {
|
||||
position: fixed;
|
||||
}
|
||||
body > div nav:not(.visible) ul {
|
||||
display: none;
|
||||
}
|
||||
body > div nav.visible {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
body > div nav button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--color-foreground);
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
transition: filter 400ms ease-in;
|
||||
padding: 1rem 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
body > div nav button:hover {
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
|
||||
}
|
||||
body > div nav ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body > div nav ul li {
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--color-shade-1);
|
||||
transition: background-color 150ms;
|
||||
--local-primary: var(--color-primary);
|
||||
--local-border: var(--color-shade-1);
|
||||
}
|
||||
body > div nav ul li.link-back {
|
||||
--local-primary: var(--color-secondary);
|
||||
--local-border: var(--color-shade-4);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
body > div nav ul li.active {
|
||||
background-color: var(--color-shade-2);
|
||||
--local-border: var(--color-shade-4);
|
||||
}
|
||||
body > div nav ul li > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
outline: solid 0.1em var(--color-shade-1);
|
||||
padding: 0.5rem 1rem;
|
||||
border: solid 0.1em var(--local-border);
|
||||
padding: 0.4rem 1rem;
|
||||
color: var(--color-foreground);
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
box-sizing: border-box;
|
||||
transition-property: filter, outline-color;
|
||||
transition-property: filter, border-color;
|
||||
transition-duration: 400ms;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
|
@ -500,10 +574,10 @@ body > div nav ul li:hover, body > div nav ul li:focus-within {
|
|||
background-color: transparent;
|
||||
}
|
||||
body > div nav ul li:hover a, body > div nav ul li:focus-within a {
|
||||
outline: solid 0.1em var(--color-white);
|
||||
border: solid 0.1em var(--color-white);
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
|
||||
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, outline-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
|
||||
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, border-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
|
||||
}
|
||||
body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:hover a:hover, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active, body > div nav ul li:focus-within a:hover {
|
||||
color: var(--color-white);
|
||||
|
|
@ -511,12 +585,12 @@ body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body >
|
|||
body > div main {
|
||||
max-width: min(var(--container-4xl), 100vw);
|
||||
width: 100%;
|
||||
border-left: dashed 0.25rem var(--color-foreground);
|
||||
padding: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
@media (min-width: 48rem) {
|
||||
body > div main {
|
||||
padding-left: 2rem;
|
||||
border-left: dashed 0.25rem var(--color-shade-4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -541,9 +615,24 @@ i[data-icon]::before {
|
|||
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);
|
||||
|
|
@ -597,6 +686,23 @@ pre,
|
|||
}
|
||||
}
|
||||
|
||||
main.generator > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
main.generator img {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
}
|
||||
main.generator i {
|
||||
font-size: 3em;
|
||||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue