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

Styleguide Update 1
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
kritzl 2025-04-05 23:50:54 +02:00
commit 93fdf66b0a
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
28 changed files with 696 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

41
styleguide/assets/style/merch.css
View file

@ -54,6 +54,17 @@
--color-red-800: #780404;
--color-red-900: #5c0202;
--color-red-950: #3f0101;
--color-yellow-50: #fefce8;
--color-yellow-100: #fef9c2;
--color-yellow-200: #fff085;
--color-yellow-300: #ffdf20;
--color-yellow-400: #fdc700;
--color-yellow-500: #efb100;
--color-yellow-600: #d08700;
--color-yellow-700: #a65f00;
--color-yellow-800: #894b00;
--color-yellow-900: #733e0a;
--color-yellow-950: #432004;
--color-white: #ffffff;
--color-dark-foreground: var(--color-neutral-50);
--color-dark-background: var(--color-neutral-950);
@ -69,6 +80,7 @@
--color-dark-secondary: var(--color-krypton-300);
--color-dark-error: var(--color-red-500);
--color-dark-success: var(--color-green-500);
--color-dark-warning: var(--color-yellow-500);
--color-dark-accent-1: #60a5f9;
--color-dark-accent-2: #d381f7;
--color-dark-accent-3: #ff7975;
@ -86,6 +98,7 @@
--color-light-secondary: var(--color-krypton-500);
--color-light-error: var(--color-red-600);
--color-light-success: var(--color-green-600);
--color-light-warning: var(--color-yellow-600);
--color-light-accent-1: #303ec0;
--color-light-accent-2: #6c366c;
--color-light-accent-3: #932f0a;
@ -137,6 +150,7 @@
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--color-warning: var(--color-dark-warning);
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
@ -185,6 +199,7 @@
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-warning: var(--color-light-warning);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
@ -226,6 +241,7 @@
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--color-warning: var(--color-dark-warning);
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
@ -275,6 +291,7 @@
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-warning: var(--color-light-warning);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
@ -321,6 +338,7 @@
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-warning: var(--color-light-warning);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
@ -362,6 +380,7 @@
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--color-warning: var(--color-dark-warning);
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
@ -564,7 +583,7 @@ code,
.code {
font-family: "Departure Mono", ui-monospace, monospace;
font-size: 0.8em;
border: solid 0.15em var(--color-shade-2);
border: solid 0.15em var(--color-shade-3);
border-radius: 0.2em;
padding: 0 0.2em;
}
@ -804,6 +823,9 @@ i[data-icon=login]::before {
i[data-icon=logout]::before {
mask-image: url("../icon/logout.svg");
}
i[data-icon=looping]::before {
mask-image: url("../icon/looping.svg");
}
i[data-icon=menu]::before {
mask-image: url("../icon/menu.svg");
}
@ -822,6 +844,9 @@ i[data-icon=microphone]::before {
i[data-icon=network]::before {
mask-image: url("../icon/network.svg");
}
i[data-icon=paperplane]::before {
mask-image: url("../icon/paperplane.svg");
}
i[data-icon=pen]::before {
mask-image: url("../icon/pen.svg");
}
@ -1083,6 +1108,7 @@ body > div main {
max-width: min(var(--container-4xl), 100vw);
width: 100%;
padding: 0 1rem;
overflow-x: hidden;
}
@media (min-width: 48rem) {
body > div main {
@ -1238,13 +1264,14 @@ main > div.generator i {
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);
padding: 1rem;
padding: 0.5rem;
}
.swatch-grid section {
display: flex;
flex-wrap: wrap;
gap: 1rem;
gap: 0.5rem;
margin-top: 2rem;
--swatch-size: 5rem;
}
.swatch-grid section > span {
width: 100%;
@ -1256,14 +1283,14 @@ main > div.generator i {
align-items: end;
gap: 0.25rem;
background-color: var(--color-background);
border-radius: 1rem;
padding: 0.5rem;
border-radius: 0.75rem;
padding: 0.25rem;
border: 0.125rem solid var(--color-foreground);
}
.swatch-grid section .swatch-container .swatch {
background-color: var(--swatch-color);
width: 8rem;
height: 8rem;
width: var(--swatch-size);
aspect-ratio: 1;
border-radius: 0.5rem;
}
.swatch-grid section .swatch-container span {