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-1: #303EC0;
--color-light-accent-2: #6c366c; --color-light-accent-2: #6c366c;
--color-light-accent-3: #932f0a; --color-light-accent-3: #932f0a;
--swatch-size: 8rem; --color-cmyk-primary: var(--color-dark-primary);
--swatch-redius: 0.5rem; --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 { .dark {
@ -165,36 +187,136 @@ html.dark {
--color-accent-3: var(--color-dark-accent-3); --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 { body {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-foreground); color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif;
} }
.swatch-grid { main {
background-color: var(--color-background); max-width: var(--container-4xl);
color: var(--color-foreground); margin-left: 4rem;
padding: 1rem;
} }
.swatch-grid section {
display: flex; h1, .h1,
flex-wrap: wrap; h2, .h2,
gap: 1rem; 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; table tr th {
flex-direction: column; text-align: left;
align-items: end;
} }
.swatch-grid section .swatch-container .swatch {
background-color: var(--swatch-color); a {
width: var(--swatch-size); color: var(--color-accent-1);
height: var(--swatch-size); }
border-radius: var(--swatch-redius); 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 */ /*# 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"}

214
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 { :root {
--color-neutral-50: #F2F0F5; --color-neutral-50: #F2F0F5;
--color-neutral-100: #D1C6E0; --color-neutral-100: #D1C6E0;
@ -83,8 +89,32 @@
--color-light-accent-2: #6c366c; --color-light-accent-2: #6c366c;
--color-light-accent-3: #932f0a; --color-light-accent-3: #932f0a;
--swatch-size: 8rem; --color-cmyk-primary: var(--color-dark-primary);
--swatch-redius: 0.5rem; --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() { @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 // Styling of components begins here
:root {
font-size: 1rem;
}
body { body {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-foreground); color: var(--color-foreground);
font-family: "Athiti", ui-sans, sans-serif;
} }
main {
max-width: var(--container-4xl);
margin-left: 4rem;
}
.swatch-grid { h1, .h1,
background-color: var(--color-background); h2, .h2,
color: var(--color-foreground); h3, .h3,
padding: 1rem; h4, .h4,
section { h5, .h5,
display: flex; h6, .h6,
flex-wrap: wrap; {
gap: 1rem; font-family: "Argon Glow", ui-sans, sans-serif;
}
&>span { code, .code {
width: 100%; font-family: "Departure Mono", ui-monospace, monospace;
} display: inline-block;
padding: 1rem 2rem;
background-color: var(--color-shade-1);
}
.swatch-container { table {
display: inline-flex; tr {
flex-direction: column; th {
align-items: end; text-align: left;
.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);
&: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;
}
}
}
}

336
styleguide/color_guide.html
View file

@ -2,199 +2,231 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <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> <title>Color Guide</title>
</head> </head>
<body> <body>
<h1>Color Guide</h1> <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>Darkmode</h2>
<section aria-labelledby="label-dark-fore-background"> <h2>Digital Media</h2>
<span id="label-dark-fore-background">Fore- &amp; Background</span> <div class="layout-column">
<div class="dark swatch-grid">
<h2>Darkmode</h2>
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container"> <section aria-labelledby="label-dark-fore-background">
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div> <span id="label-dark-fore-background">Fore- &amp; Background</span>
<span id="label-dark-swatch-foreground">#f5f0f0</span>
</div>
<div aria-labelledby="label-dark-swatch-background" class="swatch-container"> <div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
<span id="label-dark-swatch-background">#180736</span> <span id="label-dark-swatch-foreground">#f5f0f0</span>
</div> </div>
</section>
<!-- TODO: Final shades --> <div aria-labelledby="label-dark-swatch-background" class="swatch-container">
<section aria-labelledby="label-dark-shades"> <div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
<span id="label-dark-shades">Shades</span> <span id="label-dark-swatch-background">#180736</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container"> <!-- TODO: Final shades -->
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div> <section aria-labelledby="label-dark-shades">
<span id="label-dark-swatch-shade-1">#TODO</span> <span id="label-dark-shades">Shades</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container"> <div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
<span id="label-dark-swatch-shade-2">#TODO</span> <span id="label-dark-swatch-shade-1">#TODO</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container"> <div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
<span id="label-dark-swatch-shade-3">#TODO</span> <span id="label-dark-swatch-shade-2">#TODO</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container"> <div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
<span id="label-dark-swatch-shade-4">#TODO</span> <span id="label-dark-swatch-shade-3">#TODO</span>
</div> </div>
</section>
<section aria-labelledby="label-dark-primary-secondary"> <div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
<span id="label-dark-primary-secondary">Primary &amp; Secondary</span> <div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
<span id="label-dark-swatch-shade-4">#TODO</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container"> <section aria-labelledby="label-dark-primary-secondary">
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div> <span id="label-dark-primary-secondary">Primary &amp; Secondary</span>
<span id="label-dark-swatch-primary">#c6257d</span>
</div>
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container"> <div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
<span id="label-dark-swatch-secondary">#4dadd8</span> <span id="label-dark-swatch-primary">#c6257d</span>
</div> </div>
</section>
<!-- TODO: Might be too bright --> <div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
<section aria-labelledby="label-dark-error-success"> <div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
<span id="label-dark-error-success">Error &amp; Success</span> <span id="label-dark-swatch-secondary">#4dadd8</span>
</div>
</section>
<div aria-labelledby="label-dark-swatch-error" class="swatch-container"> <!-- TODO: Might be too bright -->
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div> <section aria-labelledby="label-dark-error-success">
<span id="label-dark-swatch-error">#f22d2d</span> <span id="label-dark-error-success">Error &amp; Success</span>
</div>
<div aria-labelledby="label-dark-swatch-success" class="swatch-container"> <div aria-labelledby="label-dark-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
<span id="label-dark-swatch-success">#8cff3c</span> <span id="label-dark-swatch-error">#f22d2d</span>
</div> </div>
</section>
<!-- TODO: Color names --> <div aria-labelledby="label-dark-swatch-success" class="swatch-container">
<!-- TODO: Secondary as first accent? --> <div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
<section aria-labelledby="label-dark-accents"> <span id="label-dark-swatch-success">#8cff3c</span>
<span id="label-dark-accents">Accents</span> </div>
</section>
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container"> <!-- TODO: Color names -->
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div> <!-- TODO: Secondary as first accent? -->
<span id="label-dark-swatch-accent-1">#60a5f9</span> <section aria-labelledby="label-dark-accents">
</div> <span id="label-dark-accents">Accents</span>
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container"> <div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
<span id="label-dark-swatch-accent-2">#d381f7</span> <span id="label-dark-swatch-accent-1">#60a5f9</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container"> <div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
<span id="label-dark-swatch-accent-3">#ff7975</span> <span id="label-dark-swatch-accent-2">#d381f7</span>
</div> </div>
</section>
</div>
<div class="float-right light swatch-grid"> <div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
<h2>Lightmode</h2> <div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
<span id="label-dark-swatch-accent-3">#ff7975</span>
</div>
</section>
</div>
<section aria-labelledby="label-light-fore-background"> <div class="light swatch-grid">
<span id="label-light-fore-background">Fore- &amp; Background</span> <h2>Lightmode</h2>
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container"> <section aria-labelledby="label-light-fore-background">
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div> <span id="label-light-fore-background">Fore- &amp; Background</span>
<span id="label-light-swatch-foreground">#180736</span>
</div>
<div aria-labelledby="label-light-swatch-background" class="swatch-container"> <div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div> <div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
<span id="label-light-swatch-background">#f5f0f0</span> <span id="label-light-swatch-foreground">#180736</span>
</div> </div>
</section>
<!-- TODO: Final shades --> <div aria-labelledby="label-light-swatch-background" class="swatch-container">
<section aria-labelledby="label-light-shades"> <div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
<span id="label-light-shades">Shades</span> <span id="label-light-swatch-background">#f5f0f0</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container"> <!-- TODO: Final shades -->
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div> <section aria-labelledby="label-light-shades">
<span id="label-light-swatch-shade-1">#TODO</span> <span id="label-light-shades">Shades</span>
</div>
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container"> <div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div> <div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
<span id="label-light-swatch-shade-2">#TODO</span> <span id="label-light-swatch-shade-1">#TODO</span>
</div> </div>
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container"> <div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div> <div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
<span id="label-light-swatch-shade-3">#TODO</span> <span id="label-light-swatch-shade-2">#TODO</span>
</div> </div>
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container"> <div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div> <div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
<span id="label-light-swatch-shade-4">#TODO</span> <span id="label-light-swatch-shade-3">#TODO</span>
</div> </div>
</section>
<section aria-labelledby="label-light-primary-secondary"> <div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
<span id="label-light-primary-secondary">Primary &amp; Secondary</span> <div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
<span id="label-light-swatch-shade-4">#TODO</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container"> <section aria-labelledby="label-light-primary-secondary">
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div> <span id="label-light-primary-secondary">Primary &amp; Secondary</span>
<span id="label-light-swatch-primary">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container"> <div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div> <div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
<span id="label-light-swatch-secondary">#TODO</span> <span id="label-light-swatch-primary">#TODO</span>
</div> </div>
</section>
<section aria-labelledby="label-light-error-success"> <div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<span id="label-light-error-success">Error &amp; Success</span> <div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
<span id="label-light-swatch-secondary">#TODO</span>
</div>
</section>
<div aria-labelledby="label-light-swatch-error" class="swatch-container"> <section aria-labelledby="label-light-error-success">
<div class="swatch" style="--swatch-color: var(--color-light-error)"></div> <span id="label-light-error-success">Error &amp; Success</span>
<span id="label-light-swatch-error">#b21010</span>
</div>
<div aria-labelledby="label-light-swatch-success" class="swatch-container"> <div aria-labelledby="label-light-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-success)"></div> <div class="swatch" style="--swatch-color: var(--color-light-error)"></div>
<span id="label-light-swatch-success">#47990f</span> <span id="label-light-swatch-error">#b21010</span>
</div> </div>
</section>
<!-- TODO: Color names --> <div aria-labelledby="label-light-swatch-success" class="swatch-container">
<!-- TODO: Secondary as first accent? --> <div class="swatch" style="--swatch-color: var(--color-light-success)"></div>
<section aria-labelledby="label-light-accents"> <span id="label-light-swatch-success">#47990f</span>
<span id="label-light-accents">Accents</span> </div>
</section>
<div aria-labelledby="label-light-swatch-accent-1" class="swatch-container"> <!-- TODO: Color names -->
<div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div> <!-- TODO: Secondary as first accent? -->
<span id="label-light-swatch-accent-1">#303ec0</span> <section aria-labelledby="label-light-accents">
</div> <span id="label-light-accents">Accents</span>
<div aria-labelledby="label-light-swatch-accent-2" class="swatch-container"> <div aria-labelledby="label-light-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div> <div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div>
<span id="label-light-swatch-accent-2">#6c366c</span> <span id="label-light-swatch-accent-1">#303ec0</span>
</div> </div>
<div aria-labelledby="label-light-swatch-accent-3" class="swatch-container"> <div aria-labelledby="label-light-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div> <div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div>
<span id="label-light-swatch-accent-3">#932f0a</span> <span id="label-light-swatch-accent-2">#6c366c</span>
</div> </div>
</section>
</div> <div aria-labelledby="label-light-swatch-accent-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div>
<span id="label-light-swatch-accent-3">#932f0a</span>
</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> </body>
</html> </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>

261
styleguide/testpage.html
View file

@ -2,147 +2,156 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <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> <title>Testdocument</title>
</head> </head>
<body> <body>
<h1>Testdocument</h1> <header>
<p>Tests for Fonts and Colorpalettes</p> <a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Testdocument</h1>
<p>Tests for Fonts and Colorpalettes</p>
<section> <section>
<h2>Section With Links</h2> <h2>Section With Links</h2>
<table> <table>
<caption>Overview of link highlighting</caption> <caption>Overview of link highlighting</caption>
<tr> <tr>
<th scope="row">Regular Link:</th> <th scope="row">Regular Link:</th>
<td><a class="a-regular" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td> <td><a class="a-regular" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
</tr> </tr>
<tr> <tr>
<th scope="row">Hover/Focus/Active Link:</th> <th scope="row">Hover/Focus/Active Link:</th>
<td><a class="a-hover" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td> <td><a class="a-hover" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
</tr> </tr>
<tr> <tr>
<th scope="row">Visited Link:</th> <th scope="row">Visited Link:</th>
<td><a class="a-visited" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td> <td><a class="a-visited" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
</tr> </tr>
</table> </table>
</section> </section>
<section> <section>
<h2>Section With Text</h2> <h2>Section With Text</h2>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 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 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, 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 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
takimata sanctus est Lorem ipsum dolor sit amet. sea takimata sanctus est Lorem ipsum dolor sit amet.
</p> </p>
<h3>Subsection Title</h3> <h3>Subsection Title</h3>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 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 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, 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 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
takimata sanctus est Lorem ipsum dolor sit amet. sea takimata sanctus est Lorem ipsum dolor sit amet.
</p> </p>
<h4>Subsubsection Title</h4> <h4>Subsubsection Title</h4>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. dolore magna aliquyam erat, sed diam voluptua.
</p> </p>
</section> </section>
<section> <section>
<h2>Section With Code</h2> <h2>Section With Code</h2>
<pre><code> <pre><code>#include &lt;stdlib.h&gt;
#include &lt;stdlib.h&gt;
int *positives(int *numbers, int *size) { int *positives(int *numbers, int *size) {
int new_size = 0; int new_size = 0;
for (int i = 0; i &lt; *size; i++) { for (int i = 0; i &lt; *size; i++) {
if (numbers[i] &gt;= 0) { if (numbers[i] &gt;= 0) {
numbers[new_size] = numbers[i]; numbers[new_size] = numbers[i];
new_size++; new_size++;
} }
} }
*size = new_size; *size = new_size;
return realloc(numbers, sizeof(*numbers) * new_size); return realloc(numbers, sizeof(*numbers) * new_size);
} }</code></pre>
</code></pre> </section>
</section>
<section> <section>
<h2>Section With Image</h2> <h2>Section With Image</h2>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 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 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, 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 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
takimata sanctus est Lorem ipsum dolor sit amet. sea takimata sanctus est Lorem ipsum dolor sit amet.
</p> </p>
<figure> <figure>
<img src="assets/images/cat.png" <img src="assets/images/cat.png"
alt="Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues." /> alt="Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues."/>
<figcaption>Example image with some visual distortion applied.</figcaption> <figcaption>Example image with some visual distortion applied.</figcaption>
</figure> </figure>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 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 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, 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 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
takimata sanctus est Lorem ipsum dolor sit amet. sea takimata sanctus est Lorem ipsum dolor sit amet.
</p> </p>
</section> </section>
<section> <section>
<h2>Section With Lists</h2> <h2>Section With Lists</h2>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 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 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. clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p> </p>
<ol> <ol>
<li>Short item no. 1.</li> <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 <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
line and therefore moves the next item further down.</li> next line and therefore moves the next item further down.
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but </li>
there is no next item to move.</li> <li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
</ol> but there is no next item to move.
<p> </li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et </ol>
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet <p>
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
</p> 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> <h3>Subsection Title</h3>
<ol> <ol>
<li>Short item no. 1.</li> <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 <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
line and therefore moves the next item further down.</li> next line and therefore moves the next item further down.
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but </li>
there is no next item to move.</li> <li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
</ol> but there is no next item to move.
</li>
</ol>
<h3>Subsection Title</h3> <h3>Subsection Title</h3>
<ul> <ul>
<li>Short item no. 1.</li> <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 <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
line and therefore moves the next item further down.</li> next line and therefore moves the next item further down.
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but </li>
there is no next item to move.</li> <li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
</ul> but there is no next item to move.
</section> </li>
</ul>
</section>
</main>
</body> </body>
</html> </html>

127
styleguide/typography.html
View file

@ -2,70 +2,75 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <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> <title>Typography</title>
</head> </head>
<body> <body>
<h1>Typography</h1> <header>
<div class="float-left"> <a href="index.html">Back to Overview</a>
<table> </header>
<tr> <main>
<th scope="row">Main Title</th> <h1>Typography</h1>
<td>72px</td> <div class="float-left">
<td>Argon Glow</td> <table>
</tr> <tr>
<tr> <th scope="row">Main Title</th>
<th scope="row">Heading 1</th> <td>72px</td>
<td>48px</td> <td>Argon Glow</td>
<td>Tilt Neon</td> </tr>
</tr> <tr>
<tr> <th scope="row">Heading 1</th>
<th scope="row">Heading 2</th> <td>48px</td>
<td>32px</td> <td>Tilt Neon</td>
<td>Tilt Neon</td> </tr>
</tr> <tr>
<tr> <th scope="row">Heading 2</th>
<th scope="row">Heading 3</th> <td>32px</td>
<td>24px</td> <td>Tilt Neon</td>
<td>Tilt Neon</td> </tr>
</tr> <tr>
<tr> <th scope="row">Heading 3</th>
<th scope="row">Heading 4</th> <td>24px</td>
<td>18px</td> <td>Tilt Neon</td>
<td>Tilt Neon</td> </tr>
</tr> <tr>
<tr> <th scope="row">Heading 4</th>
<th scope="row">Subheading</th> <td>18px</td>
<td>24px</td> <td>Tilt Neon</td>
<td>Athiti</td> </tr>
</tr> <tr>
<tr> <th scope="row">Subheading</th>
<th scope="row">Paragraph</th> <td>24px</td>
<td>16px</td> <td>Athiti</td>
<td>Athiti</td> </tr>
</tr> <tr>
<tr> <th scope="row">Paragraph</th>
<th scope="row">Code</th> <td>16px</td>
<td>16px</td> <td>Athiti</td>
<td>Departure Mono</td> </tr>
</tr> <tr>
</table> <th scope="row">Code</th>
</div> <td>16px</td>
<div class="float-right"> <td>Departure Mono</td>
<ul> </tr>
<li class="main-title">Main Title</li> </table>
<li class="h1">Heading 1</li> </div>
<li class="h2">Heading 2</li> <div class="float-right">
<li class="h3">Heading 3</li> <ul>
<li class="h4">Heading 4</li> <li class="main-title">Main Title</li>
<li class="subheading">Subheading</li> <li class="h1">Heading 1</li>
<li class="p">Paragraph</li> <li class="h2">Heading 2</li>
<li class="code">Code</li> <li class="h3">Heading 3</li>
</ul> <li class="h4">Heading 4</li>
</div> <li class="subheading">Subheading</li>
<li class="p">Paragraph</li>
<li class="code">Code</li>
</ul>
</div>
</main>
</body> </body>
</html> </html>