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;
}
}
}
}

38
styleguide/color_guide.html
View file

@ -4,14 +4,23 @@
<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>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Color Guide</h1> <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> <h2>Darkmode</h2>
<section aria-labelledby="label-dark-fore-background"> <section aria-labelledby="label-dark-fore-background">
@ -104,7 +113,7 @@
</section> </section>
</div> </div>
<div class="float-right light swatch-grid"> <div class="light swatch-grid">
<h2>Lightmode</h2> <h2>Lightmode</h2>
<section aria-labelledby="label-light-fore-background"> <section aria-labelledby="label-light-fore-background">
@ -195,6 +204,29 @@
</div> </div>
</section> </section>
</div> </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>

89
styleguide/testpage.html
View file

@ -4,11 +4,15 @@
<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>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Testdocument</h1> <h1>Testdocument</h1>
<p>Tests for Fonts and Colorpalettes</p> <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 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>
@ -47,9 +51,9 @@
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>
@ -61,23 +65,21 @@
<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>
@ -86,22 +88,22 @@
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>
@ -114,10 +116,12 @@
</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,
but there is no next item to move.
</li>
</ol> </ol>
<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
@ -128,21 +132,26 @@
<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,
but there is no next item to move.
</li>
</ol> </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,
but there is no next item to move.
</li>
</ul> </ul>
</section> </section>
</main>
</body> </body>
</html> </html>

7
styleguide/typography.html
View file

@ -4,11 +4,15 @@
<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>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Typography</h1> <h1>Typography</h1>
<div class="float-left"> <div class="float-left">
<table> <table>
@ -66,6 +70,7 @@
<li class="code">Code</li> <li class="code">Code</li>
</ul> </ul>
</div> </div>
</main>
</body> </body>
</html> </html>