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;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"base.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KApXuB;EAqXvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"base.css"}
|
||||
|
|
@ -4,6 +4,9 @@ $breakpoint-lg: 64rem;
|
|||
$breakpoint-xl: 80rem;
|
||||
$breakpoint-2xl: 96rem;
|
||||
|
||||
$breakpoint-mobile: $breakpoint-md;
|
||||
$mobile-navigation-height: 4rem;
|
||||
|
||||
:root {
|
||||
--color-neutral-50: #F2F0F5;
|
||||
--color-neutral-100: #D1C6E0;
|
||||
|
|
@ -292,7 +295,7 @@ h6,
|
|||
{
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -374,9 +377,13 @@ table {
|
|||
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
top: $mobile-navigation-height;
|
||||
z-index: 10;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
tr > th {
|
||||
outline-width: 0.1em;
|
||||
outline-style: solid;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["base.scss","styleguide.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC/bJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAQZ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAOF;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["base.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KApXuB;EAqXvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACtcJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YDfqB;;;ACkBvB;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QD/CqB;ECgDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EACA;IACE;;;AAIJ;EAzBF;IA0BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAQZ;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOF;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAOJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
|
||||
|
|
@ -18,53 +18,125 @@ body {
|
|||
width: 100%;
|
||||
height: fit-content;
|
||||
flex-grow: 0;
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
margin-top: $mobile-navigation-height;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
height: 200px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
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: $mobile-navigation-height;
|
||||
transition: height 200ms;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
max-width: 15rem;
|
||||
width: fit-content;
|
||||
top: 1rem;
|
||||
height: fit-content;
|
||||
overflow: visible;
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
position: fixed;
|
||||
|
||||
&:not(.visible) {
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
&: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, .99, -0.72) 50ms;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
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);
|
||||
|
||||
&.link-back {
|
||||
--local-primary: var(--color-secondary);
|
||||
background-color: var(--color-shade-2);
|
||||
--local-border: var(--color-shade-4);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-shade-2);
|
||||
--local-border: var(--color-shade-4);
|
||||
}
|
||||
|
||||
> 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;
|
||||
|
||||
|
|
@ -84,11 +156,11 @@ body {
|
|||
background-color: transparent;
|
||||
|
||||
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, .99, -0.72) 50ms,
|
||||
outline-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
|
||||
&:visited, &:focus, &:active, &:hover {
|
||||
color: var(--color-white);
|
||||
|
|
@ -102,11 +174,11 @@ body {
|
|||
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: $breakpoint-sm) {
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
padding-left: 2rem;
|
||||
border-left: dashed 0.25rem var(--color-shade-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -135,9 +207,29 @@ i[data-icon] {
|
|||
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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -181,7 +273,7 @@ pre,
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
|
|
@ -208,6 +300,28 @@ pre,
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
main.generator {
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
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));
|
||||
}
|
||||
|
||||
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