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

styleguide: move scripts, add mobile navigation, style generator
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
kritzl 2025-02-14 23:06:36 +01:00
commit fa75654b11
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
16 changed files with 390 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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);