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

Styleguide: improve swatches, add font styles

Browse source
This commit is contained in:
kritzl 2025-02-11 12:52:56 +01:00
commit 60e70523d7
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
10 changed files with 1194 additions and 386 deletions
Download patch file Download diff file Expand all files Collapse all files

164
styleguide/assets/style/main.css
View file

@ -80,8 +80,30 @@
--color-light-accent-1: #303EC0;
--color-light-accent-2: #6c366c;
--color-light-accent-3: #932f0a;
--swatch-size: 8rem;
--swatch-redius: 0.5rem;
--color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary);
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
}
.dark {
@ -165,36 +187,136 @@ html.dark {
--color-accent-3: var(--color-dark-accent-3);
}
}
@font-face {
font-family: "Athiti";
font-weight: 700;
src: local("Athiti"), url("../font/athiti/Athiti-Bold.otf") format("opentype"), url("../font/athiti/Athiti-Bold.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 600;
src: local("Athiti"), url("../font/athiti/Athiti-SemiBold.otf") format("opentype"), url("../font/athiti/Athiti-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 500;
src: local("Athiti"), url("../font/athiti/Athiti-Medium.otf") format("opentype"), url("../font/athiti/Athiti-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 400;
src: local("Athiti"), url("../font/athiti/Athiti-Regular.otf") format("opentype"), url("../font/athiti/Athiti-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 300;
src: local("Athiti"), url("../font/athiti/Athiti-Light.otf") format("opentype"), url("../font/athiti/Athiti-Light.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 200;
src: local("Athiti"), url("../font/athiti/Athiti-ExtraLight.otf") format("opentype"), url("../font/athiti/Athiti-ExtraLight.ttf") format("truetype");
}
@font-face {
font-family: "Departure Mono";
src: local("Departure Mono"), url("../font/departuremono/DepartureMono-Regular.otf") format("opentype"), url("../font/departuremono/DepartureMono-Regular.woff") format("woff"), url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 100;
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Thin.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Thin.woff") format("woff"), url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 200;
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-ExtraLight.otf") format("opentype"), url("../font/argonglow/ArgonGlow-ExtraLight.woff") format("woff"), url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 300;
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Light.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Light.woff") format("woff"), url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 400;
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Regular.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Regular.woff") format("woff"), url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 500;
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Medium.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Medium.woff") format("woff"), url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 600;
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-SemiBold.otf") format("opentype"), url("../font/argonglow/ArgonGlow-SemiBold.woff") format("woff"), url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 700;
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Bold.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Bold.woff") format("woff"), url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow Variable";
src: url("../font/argonglow/ArgonGlow-VariableVF.ttf") format("truetype"), url("../font/argonglow/ArgonGlow-VariableVF.woff") format("woff"), url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow Bug";
font-weight: 500;
src: url("../font/argonglow/bug/ArgonGlow-Medium.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow Bug Variable";
src: url("../font/argonglow/bug/ArgonGlow-VariableVF.ttf") format("truetype");
}
:root {
font-size: 1rem;
}
body {
margin: 0;
padding: 1rem;
background-color: var(--color-background);
color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif;
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);
padding: 1rem;
main {
max-width: var(--container-4xl);
margin-left: 4rem;
}
.swatch-grid section {
display: flex;
flex-wrap: wrap;
gap: 1rem;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "Argon Glow", ui-sans, sans-serif;
}
.swatch-grid section > span {
width: 100%;
code, .code {
font-family: "Departure Mono", ui-monospace, monospace;
display: inline-block;
padding: 1rem 2rem;
background-color: var(--color-shade-1);
}
.swatch-grid section .swatch-container {
display: inline-flex;
flex-direction: column;
align-items: end;
table tr th {
text-align: left;
}
.swatch-grid section .swatch-container .swatch {
background-color: var(--swatch-color);
width: var(--swatch-size);
height: var(--swatch-size);
border-radius: var(--swatch-redius);
a {
color: var(--color-accent-1);
}
a:hover, a:active, a:focus {
color: var(--color-accent-3);
}
a:visited {
color: var(--color-accent-2);
}
a:visited:hover, a:visited:active, a:visited:focus {
color: var(--color-accent-3);
}
/*# sourceMappingURL=main.css.map */

2
styleguide/assets/style/main.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;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;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;;;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;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA6CF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA","file":"main.css"}
{"version":3,"sourceRoot":"","sources":["main.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;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;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA2CF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE","file":"main.css"}

212
styleguide/assets/style/main.scss
View file

@ -1,3 +1,9 @@
$breakpoint-sm: 40rem;
$breakpoint-md: 48rem;
$breakpoint-lg: 64rem;
$breakpoint-xl: 80rem;
$breakpoint-2xl: 96rem;
:root {
--color-neutral-50: #F2F0F5;
--color-neutral-100: #D1C6E0;
@ -83,8 +89,32 @@
--color-light-accent-2: #6c366c;
--color-light-accent-3: #932f0a;
--swatch-size: 8rem;
--swatch-redius: 0.5rem;
--color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary);
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
}
@mixin theme_dark() {
@ -141,42 +171,178 @@ html.dark {
}
}
// fonts
@font-face {
font-family: "Athiti";
font-weight: 700;
src: url("../font/athiti/Athiti-Bold.otf") format("opentype"),
url("../font/athiti/Athiti-Bold.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 600;
src: url("../font/athiti/Athiti-SemiBold.otf") format("opentype"),
url("../font/athiti/Athiti-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 500;
src: url("../font/athiti/Athiti-Medium.otf") format("opentype"),
url("../font/athiti/Athiti-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 400;
src: url("../font/athiti/Athiti-Regular.otf") format("opentype"),
url("../font/athiti/Athiti-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 300;
src: url("../font/athiti/Athiti-Light.otf") format("opentype"),
url("../font/athiti/Athiti-Light.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 200;
src: url("../font/athiti/Athiti-ExtraLight.otf") format("opentype"),
url("../font/athiti/Athiti-ExtraLight.ttf") format("truetype");
}
@font-face {
font-family: "Departure Mono";
src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2"),
url("../font/departuremono/DepartureMono-Regular.woff") format("woff"),
url("../font/departuremono/DepartureMono-Regular.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 100;
src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-Thin.woff") format("woff"),
url("../font/argonglow/ArgonGlow-Thin.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 200;
src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-ExtraLight.woff") format("woff"),
url("../font/argonglow/ArgonGlow-ExtraLight.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 300;
src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-Light.woff") format("woff"),
url("../font/argonglow/ArgonGlow-Light.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 400;
src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-Regular.woff") format("woff"),
url("../font/argonglow/ArgonGlow-Regular.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 500;
src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-Medium.woff") format("woff"),
url("../font/argonglow/ArgonGlow-Medium.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 600;
src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-SemiBold.woff") format("woff"),
url("../font/argonglow/ArgonGlow-SemiBold.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 700;
src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-Bold.woff") format("woff"),
url("../font/argonglow/ArgonGlow-Bold.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2"),
url("../font/argonglow/ArgonGlow-VariableVF.woff") format("woff"),
url("../font/argonglow/ArgonGlow-VariableVF.ttf") format("truetype");
font-weight: 100 900;
}
// Styling of components begins here
:root {
font-size: 1rem;
}
body {
margin: 0;
padding: 1rem;
background-color: var(--color-background);
color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif;
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);
padding: 1rem;
section {
display: flex;
flex-wrap: wrap;
gap: 1rem;
&>span {
width: 100%;
main {
max-width: var(--container-4xl);
margin-left: 4rem;
}
.swatch-container {
display: inline-flex;
flex-direction: column;
align-items: end;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
{
font-family: "Argon Glow", ui-sans, sans-serif;
}
.swatch {
background-color: var(--swatch-color);
width: var(--swatch-size);
height: var(--swatch-size);
border-radius: var(--swatch-redius);
code, .code {
font-family: "Departure Mono", ui-monospace, monospace;
display: inline-block;
padding: 1rem 2rem;
background-color: var(--color-shade-1);
}
table {
tr {
th {
text-align: left;
}
}
}
a {
color: var(--color-accent-1);
&:hover, &:active, &:focus {
color: var(--color-accent-3);
}
&:visited {
color: var(--color-accent-2);
&:hover, &:active, &:focus {
color: var(--color-accent-3);
}
}
}

376
styleguide/assets/style/styleguide.css Normal file
View file

@ -0,0 +1,376 @@
:root {
--color-neutral-50: #F2F0F5;
--color-neutral-100: #D1C6E0;
--color-neutral-200: #B2A0CB;
--color-neutral-300: #957EB5;
--color-neutral-400: #7A60A0;
--color-neutral-500: #61468B;
--color-neutral-600: #4B3176;
--color-neutral-700: #371F60;
--color-neutral-800: #26114B;
--color-neutral-900: #180736;
--color-neutral-950: #0C011F;
--color-argon-50: #E1ABC9;
--color-argon-100: #DA87B5;
--color-argon-200: #D464A1;
--color-argon-300: #CD448F;
--color-argon-400: #C6257D;
--color-argon-500: #B0166F;
--color-argon-600: #9A0A61;
--color-argon-700: #830755;
--color-argon-800: #6D0449;
--color-argon-900: #56023C;
--color-argon-950: #3F012D;
--color-krypton-50: #B2D9EA;
--color-krypton-100: #8CC9E4;
--color-krypton-200: #69BADE;
--color-krypton-300: #4BADD8;
--color-krypton-400: #2493C2;
--color-krypton-500: #167FAC;
--color-krypton-600: #0A6C96;
--color-krypton-700: #075C81;
--color-krypton-800: #044C6B;
--color-krypton-900: #023C55;
--color-krypton-950: #012C3F;
--color-green-50: #C0F49A;
--color-green-100: #A7E57A;
--color-green-200: #8FD75D;
--color-green-300: #7AC843;
--color-green-400: #66B92D;
--color-green-500: #54AA18;
--color-green-600: #47990F;
--color-green-700: #397E0A;
--color-green-800: #2B6206;
--color-green-900: #1F4703;
--color-green-950: #122B01;
--color-red-50: #E6AFAF;
--color-red-100: #DD9090;
--color-red-200: #D57272;
--color-red-300: #CC5757;
--color-red-400: #C33D3D;
--color-red-500: #BB2626;
--color-red-600: #B21010;
--color-red-700: #950808;
--color-red-800: #780404;
--color-red-900: #5C0202;
--color-red-950: #3F0101;
--color-dark-foreground: var(--color-neutral-50);
--color-dark-background: var(--color-neutral-900);
--color-dark-shade-1: var(--color-neutral-800);
--color-dark-shade-2: var(--color-neutral-700);
--color-dark-shade-3: var(--color-neutral-600);
--color-dark-shade-4: var(--color-neutral-500);
--color-dark-primary: var(--color-argon-400);
--color-dark-secondary: var(--color-krypton-300);
--color-dark-error: var(--color-red-500);
--color-dark-success: var(--color-green-500);
--color-dark-accent-1: #60a5f9;
--color-dark-accent-2: #d381f7;
--color-dark-accent-3: #ff7975;
--color-light-foreground: var(--color-neutral-900);
--color-light-background: var(--color-neutral-50);
--color-light-shade-1: var(--color-neutral-100);
--color-light-shade-2: var(--color-neutral-200);
--color-light-shade-3: var(--color-neutral-300);
--color-light-shade-4: var(--color-neutral-400);
--color-light-primary: var(--color-argon-600);
--color-light-secondary: var(--color-krypton-500);
--color-light-error: var(--color-red-600);
--color-light-success: var(--color-green-600);
--color-light-accent-1: #303EC0;
--color-light-accent-2: #6c366c;
--color-light-accent-3: #932f0a;
--color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary);
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
}
.dark {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
}
.light {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
}
html, html.light {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
}
html.dark {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
}
@media (prefers-color-scheme: dark) {
html {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
}
}
@font-face {
font-family: "Athiti";
font-weight: 700;
src: url("../font/athiti/Athiti-Bold.otf") format("opentype"), url("../font/athiti/Athiti-Bold.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 600;
src: url("../font/athiti/Athiti-SemiBold.otf") format("opentype"), url("../font/athiti/Athiti-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 500;
src: url("../font/athiti/Athiti-Medium.otf") format("opentype"), url("../font/athiti/Athiti-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 400;
src: url("../font/athiti/Athiti-Regular.otf") format("opentype"), url("../font/athiti/Athiti-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 300;
src: url("../font/athiti/Athiti-Light.otf") format("opentype"), url("../font/athiti/Athiti-Light.ttf") format("truetype");
}
@font-face {
font-family: "Athiti";
font-weight: 200;
src: url("../font/athiti/Athiti-ExtraLight.otf") format("opentype"), url("../font/athiti/Athiti-ExtraLight.ttf") format("truetype");
}
@font-face {
font-family: "Departure Mono";
src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2"), url("../font/departuremono/DepartureMono-Regular.woff") format("woff"), url("../font/departuremono/DepartureMono-Regular.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 100;
src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-Thin.woff") format("woff"), url("../font/argonglow/ArgonGlow-Thin.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 200;
src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-ExtraLight.woff") format("woff"), url("../font/argonglow/ArgonGlow-ExtraLight.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 300;
src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-Light.woff") format("woff"), url("../font/argonglow/ArgonGlow-Light.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 400;
src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-Regular.woff") format("woff"), url("../font/argonglow/ArgonGlow-Regular.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 500;
src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-Medium.woff") format("woff"), url("../font/argonglow/ArgonGlow-Medium.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 600;
src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-SemiBold.woff") format("woff"), url("../font/argonglow/ArgonGlow-SemiBold.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
font-weight: 700;
src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-Bold.woff") format("woff"), url("../font/argonglow/ArgonGlow-Bold.otf") format("opentype");
}
@font-face {
font-family: "Argon Glow";
src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2"), url("../font/argonglow/ArgonGlow-VariableVF.woff") format("woff"), url("../font/argonglow/ArgonGlow-VariableVF.ttf") format("truetype");
font-weight: 100 900;
}
:root {
font-size: 1rem;
}
body {
margin: 0;
padding: 1rem;
background-color: var(--color-background);
color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif;
}
main {
max-width: var(--container-4xl);
margin-left: 4rem;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "Argon Glow", ui-sans, sans-serif;
}
code, .code {
font-family: "Departure Mono", ui-monospace, monospace;
display: inline-block;
padding: 1rem 2rem;
background-color: var(--color-shade-1);
}
table tr th {
text-align: left;
}
a {
color: var(--color-accent-1);
}
a:hover, a:active, a:focus {
color: var(--color-accent-3);
}
a:visited {
color: var(--color-accent-2);
}
a:visited:hover, a:visited:active, a:visited:focus {
color: var(--color-accent-3);
}
a.a-regular {
color: var(--color-accent-1);
}
a.a-hover {
color: var(--color-accent-3);
}
a.a-visited {
color: var(--color-accent-2);
}
.layout-column {
display: flex;
}
.layout-column > * {
width: 100%;
}
@media (max-width: 48rem) {
.layout-column {
flex-wrap: wrap;
}
.layout-column > * {
width: 100%;
}
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);
padding: 1rem;
}
.swatch-grid section {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.swatch-grid section > span {
width: 100%;
font-size: var(--text-xl);
}
.swatch-grid section .swatch-container {
display: inline-flex;
flex-direction: column;
align-items: end;
gap: 0.25rem;
background-color: var(--color-background);
border-radius: 1rem;
padding: 0.5rem;
border: 0.125rem solid var(--color-foreground);
}
.swatch-grid section .swatch-container .swatch {
background-color: var(--swatch-color);
width: 8rem;
height: 8rem;
border-radius: 0.5rem;
}
.swatch-grid section .swatch-container span {
font-family: "Departure Mono", ui-monospace, monospace;
color: var(--color-foreground);
line-height: 1.5;
}
/*# sourceMappingURL=styleguide.css.map */

1
styleguide/assets/style/styleguide.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["main.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;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;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA2CF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EAGA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;;ACpVJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EAPF;IAQI;;EACA;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","file":"styleguide.css"}

72
styleguide/assets/style/styleguide.scss Normal file
View file

@ -0,0 +1,72 @@
@import "main";
a {
&.a-regular {
color: var(--color-accent-1);
}
&.a-hover {
color: var(--color-accent-3);
}
&.a-visited {
color: var(--color-accent-2);
}
}
.layout-column {
display: flex;
& > * {
width: 100%;
}
@media (max-width: $breakpoint-md) {
flex-wrap: wrap;
& > * {
width: 100%;
}
}
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);
padding: 1rem;
section {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
& > span {
width: 100%;
font-size: var(--text-xl);
}
.swatch-container {
display: inline-flex;
flex-direction: column;
align-items: end;
gap: 0.25rem;
background-color: var(--color-background);
border-radius: 1rem;
padding: 0.5rem;
border: 0.125rem solid var(--color-foreground);
.swatch {
background-color: var(--swatch-color);
width: 8rem;
height: 8rem;
border-radius: 0.5rem;
}
span {
font-family: "Departure Mono", ui-monospace, monospace;
color: var(--color-foreground);
line-height: 1.5;
}
}
}
}

38
styleguide/color_guide.html
View file

@ -4,14 +4,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/main.css">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
<title>Color Guide</title>
</head>
<body>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Color Guide</h1>
<p>
<div class="float-left dark swatch-grid">
</p>
<h2>Digital Media</h2>
<div class="layout-column">
<div class="dark swatch-grid">
<h2>Darkmode</h2>
<section aria-labelledby="label-dark-fore-background">
@ -104,7 +113,7 @@
</section>
</div>
<div class="float-right light swatch-grid">
<div class="light swatch-grid">
<h2>Lightmode</h2>
<section aria-labelledby="label-light-fore-background">
@ -195,6 +204,29 @@
</div>
</section>
</div>
</div>
<h2>Printing</h2>
<p>
Our primary and secondary colours are also defined for CMYK printing:
</p>
<div class="swatch-grid">
<section aria-labelledby="label-light-primary-secondary">
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
</div>
</section>
</div>
</main>
</body>
</html>

25
styleguide/index.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
<title>Color Guide</title>
</head>
<body>
<main>
<h1>Styleguide Easterhegg 2025</h1>
<ul>
<li><a href="color_guide.html">Color Guide</a></li>
<li><a href="testpage.html">Testpage</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
</main>
</body>
</html>

67
styleguide/testpage.html
View file

@ -4,11 +4,15 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/main.css">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
<title>Testdocument</title>
</head>
<body>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Testdocument</h1>
<p>Tests for Fonts and Colorpalettes</p>
@ -37,9 +41,9 @@
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<h3>Subsection Title</h3>
@ -47,9 +51,9 @@
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<h4>Subsubsection Title</h4>
@ -61,8 +65,7 @@
<section>
<h2>Section With Code</h2>
<pre><code>
#include &lt;stdlib.h&gt;
<pre><code>#include &lt;stdlib.h&gt;
int *positives(int *numbers, int *size) {
int new_size = 0;
@ -76,8 +79,7 @@
*size = new_size;
return realloc(numbers, sizeof(*numbers) * new_size);
}
</code></pre>
}</code></pre>
</section>
<section>
@ -86,9 +88,9 @@
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<figure>
<img src="assets/images/cat.png"
@ -99,9 +101,9 @@
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
@ -114,10 +116,12 @@
</p>
<ol>
<li>Short item no. 1.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next
line and therefore moves the next item further down.</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but
there is no next item to move.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
next line and therefore moves the next item further down.
</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
but there is no next item to move.
</li>
</ol>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
@ -128,21 +132,26 @@
<h3>Subsection Title</h3>
<ol>
<li>Short item no. 1.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next
line and therefore moves the next item further down.</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but
there is no next item to move.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
next line and therefore moves the next item further down.
</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
but there is no next item to move.
</li>
</ol>
<h3>Subsection Title</h3>
<ul>
<li>Short item no. 1.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next
line and therefore moves the next item further down.</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but
there is no next item to move.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
next line and therefore moves the next item further down.
</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
but there is no next item to move.
</li>
</ul>
</section>
</main>
</body>
</html>

7
styleguide/typography.html
View file

@ -4,11 +4,15 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/main.css">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
<title>Typography</title>
</head>
<body>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Typography</h1>
<div class="float-left">
<table>
@ -66,6 +70,7 @@
<li class="code">Code</li>
</ul>
</div>
</main>
</body>
</html>