diff --git a/styleguide/assets/style/main.css b/styleguide/assets/style/main.css index bfcbcbe..efd5d1d 100644 --- a/styleguide/assets/style/main.css +++ b/styleguide/assets/style/main.css @@ -80,8 +80,30 @@ --color-light-accent-1: #303EC0; --color-light-accent-2: #6c366c; --color-light-accent-3: #932f0a; - --swatch-size: 8rem; - --swatch-redius: 0.5rem; + --color-cmyk-primary: var(--color-dark-primary); + --color-cmyk-secondary: var(--color-dark-secondary); + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-5xl: 3rem; + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; } .dark { @@ -165,36 +187,136 @@ html.dark { --color-accent-3: var(--color-dark-accent-3); } } +@font-face { + font-family: "Athiti"; + font-weight: 700; + src: local("Athiti"), url("../font/athiti/Athiti-Bold.otf") format("opentype"), url("../font/athiti/Athiti-Bold.ttf") format("truetype"); +} +@font-face { + font-family: "Athiti"; + font-weight: 600; + src: local("Athiti"), url("../font/athiti/Athiti-SemiBold.otf") format("opentype"), url("../font/athiti/Athiti-SemiBold.ttf") format("truetype"); +} +@font-face { + font-family: "Athiti"; + font-weight: 500; + src: local("Athiti"), url("../font/athiti/Athiti-Medium.otf") format("opentype"), url("../font/athiti/Athiti-Medium.ttf") format("truetype"); +} +@font-face { + font-family: "Athiti"; + font-weight: 400; + src: local("Athiti"), url("../font/athiti/Athiti-Regular.otf") format("opentype"), url("../font/athiti/Athiti-Regular.ttf") format("truetype"); +} +@font-face { + font-family: "Athiti"; + font-weight: 300; + src: local("Athiti"), url("../font/athiti/Athiti-Light.otf") format("opentype"), url("../font/athiti/Athiti-Light.ttf") format("truetype"); +} +@font-face { + font-family: "Athiti"; + font-weight: 200; + src: local("Athiti"), url("../font/athiti/Athiti-ExtraLight.otf") format("opentype"), url("../font/athiti/Athiti-ExtraLight.ttf") format("truetype"); +} +@font-face { + font-family: "Departure Mono"; + src: local("Departure Mono"), url("../font/departuremono/DepartureMono-Regular.otf") format("opentype"), url("../font/departuremono/DepartureMono-Regular.woff") format("woff"), url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow"; + font-weight: 100; + src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Thin.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Thin.woff") format("woff"), url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow"; + font-weight: 200; + src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-ExtraLight.otf") format("opentype"), url("../font/argonglow/ArgonGlow-ExtraLight.woff") format("woff"), url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow"; + font-weight: 300; + src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Light.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Light.woff") format("woff"), url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow"; + font-weight: 400; + src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Regular.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Regular.woff") format("woff"), url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow"; + font-weight: 500; + src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Medium.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Medium.woff") format("woff"), url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow"; + font-weight: 600; + src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-SemiBold.otf") format("opentype"), url("../font/argonglow/ArgonGlow-SemiBold.woff") format("woff"), url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow"; + font-weight: 700; + src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Bold.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Bold.woff") format("woff"), url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow Variable"; + src: url("../font/argonglow/ArgonGlow-VariableVF.ttf") format("truetype"), url("../font/argonglow/ArgonGlow-VariableVF.woff") format("woff"), url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2"); +} +@font-face { + font-family: "Argon Glow Bug"; + font-weight: 500; + src: url("../font/argonglow/bug/ArgonGlow-Medium.otf") format("opentype"); +} +@font-face { + font-family: "Argon Glow Bug Variable"; + src: url("../font/argonglow/bug/ArgonGlow-VariableVF.ttf") format("truetype"); +} +:root { + font-size: 1rem; +} + body { margin: 0; padding: 1rem; background-color: var(--color-background); color: var(--color-foreground); + font-family: "Athiti", ui-sans, sans-serif; } -.swatch-grid { - background-color: var(--color-background); - color: var(--color-foreground); - padding: 1rem; +main { + max-width: var(--container-4xl); + margin-left: 4rem; } -.swatch-grid section { - display: flex; - flex-wrap: wrap; - gap: 1rem; + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: "Argon Glow", ui-sans, sans-serif; } -.swatch-grid section > span { - width: 100%; + +code, .code { + font-family: "Departure Mono", ui-monospace, monospace; + display: inline-block; + padding: 1rem 2rem; + background-color: var(--color-shade-1); } -.swatch-grid section .swatch-container { - display: inline-flex; - flex-direction: column; - align-items: end; + +table tr th { + text-align: left; } -.swatch-grid section .swatch-container .swatch { - background-color: var(--swatch-color); - width: var(--swatch-size); - height: var(--swatch-size); - border-radius: var(--swatch-redius); + +a { + color: var(--color-accent-1); +} +a:hover, a:active, a:focus { + color: var(--color-accent-3); +} +a:visited { + color: var(--color-accent-2); +} +a:visited:hover, a:visited:active, a:visited:focus { + color: var(--color-accent-3); } /*# sourceMappingURL=main.css.map */ diff --git a/styleguide/assets/style/main.css.map b/styleguide/assets/style/main.css.map index f5c1cd1..b9cd600 100644 --- a/styleguide/assets/style/main.css.map +++ b/styleguide/assets/style/main.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/styleguide/assets/style/main.scss b/styleguide/assets/style/main.scss index bf7b703..036c72b 100644 --- a/styleguide/assets/style/main.scss +++ b/styleguide/assets/style/main.scss @@ -1,3 +1,9 @@ +$breakpoint-sm: 40rem; +$breakpoint-md: 48rem; +$breakpoint-lg: 64rem; +$breakpoint-xl: 80rem; +$breakpoint-2xl: 96rem; + :root { --color-neutral-50: #F2F0F5; --color-neutral-100: #D1C6E0; @@ -83,8 +89,32 @@ --color-light-accent-2: #6c366c; --color-light-accent-3: #932f0a; - --swatch-size: 8rem; - --swatch-redius: 0.5rem; + --color-cmyk-primary: var(--color-dark-primary); + --color-cmyk-secondary: var(--color-dark-secondary); + + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-5xl: 3rem; + + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; } @mixin theme_dark() { @@ -141,42 +171,178 @@ html.dark { } } +// fonts + +@font-face { + font-family: "Athiti"; + font-weight: 700; + src: url("../font/athiti/Athiti-Bold.otf") format("opentype"), + url("../font/athiti/Athiti-Bold.ttf") format("truetype"); +} + +@font-face { + font-family: "Athiti"; + font-weight: 600; + src: url("../font/athiti/Athiti-SemiBold.otf") format("opentype"), + url("../font/athiti/Athiti-SemiBold.ttf") format("truetype"); +} + +@font-face { + font-family: "Athiti"; + font-weight: 500; + src: url("../font/athiti/Athiti-Medium.otf") format("opentype"), + url("../font/athiti/Athiti-Medium.ttf") format("truetype"); +} + +@font-face { + font-family: "Athiti"; + font-weight: 400; + src: url("../font/athiti/Athiti-Regular.otf") format("opentype"), + url("../font/athiti/Athiti-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Athiti"; + font-weight: 300; + src: url("../font/athiti/Athiti-Light.otf") format("opentype"), + url("../font/athiti/Athiti-Light.ttf") format("truetype"); +} + +@font-face { + font-family: "Athiti"; + font-weight: 200; + src: url("../font/athiti/Athiti-ExtraLight.otf") format("opentype"), + url("../font/athiti/Athiti-ExtraLight.ttf") format("truetype"); +} + +@font-face { + font-family: "Departure Mono"; + src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2"), + url("../font/departuremono/DepartureMono-Regular.woff") format("woff"), + url("../font/departuremono/DepartureMono-Regular.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + font-weight: 100; + src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-Thin.woff") format("woff"), + url("../font/argonglow/ArgonGlow-Thin.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + font-weight: 200; + src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-ExtraLight.woff") format("woff"), + url("../font/argonglow/ArgonGlow-ExtraLight.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + font-weight: 300; + src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-Light.woff") format("woff"), + url("../font/argonglow/ArgonGlow-Light.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + font-weight: 400; + src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-Regular.woff") format("woff"), + url("../font/argonglow/ArgonGlow-Regular.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + font-weight: 500; + src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-Medium.woff") format("woff"), + url("../font/argonglow/ArgonGlow-Medium.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + font-weight: 600; + src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-SemiBold.woff") format("woff"), + url("../font/argonglow/ArgonGlow-SemiBold.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + font-weight: 700; + src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-Bold.woff") format("woff"), + url("../font/argonglow/ArgonGlow-Bold.otf") format("opentype"); +} + +@font-face { + font-family: "Argon Glow"; + src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2"), + url("../font/argonglow/ArgonGlow-VariableVF.woff") format("woff"), + url("../font/argonglow/ArgonGlow-VariableVF.ttf") format("truetype"); + font-weight: 100 900; +} // Styling of components begins here +:root { + font-size: 1rem; +} body { margin: 0; padding: 1rem; background-color: var(--color-background); color: var(--color-foreground); + font-family: "Athiti", ui-sans, sans-serif; } +main { + max-width: var(--container-4xl); + margin-left: 4rem; +} -.swatch-grid { - background-color: var(--color-background); - color: var(--color-foreground); - padding: 1rem; - section { - display: flex; - flex-wrap: wrap; - gap: 1rem; +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6, +{ + font-family: "Argon Glow", ui-sans, sans-serif; +} - &>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-container { - display: inline-flex; - flex-direction: column; - align-items: end; - - .swatch { - background-color: var(--swatch-color); - width: var(--swatch-size); - height: var(--swatch-size); - border-radius: var(--swatch-redius); - } +table { + tr { + th { + text-align: left; } } -} \ No newline at end of file +} + +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); + } + } +} + diff --git a/styleguide/assets/style/styleguide.css b/styleguide/assets/style/styleguide.css new file mode 100644 index 0000000..a5800cc --- /dev/null +++ b/styleguide/assets/style/styleguide.css @@ -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 */ diff --git a/styleguide/assets/style/styleguide.css.map b/styleguide/assets/style/styleguide.css.map new file mode 100644 index 0000000..ec01d58 --- /dev/null +++ b/styleguide/assets/style/styleguide.css.map @@ -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"} \ No newline at end of file diff --git a/styleguide/assets/style/styleguide.scss b/styleguide/assets/style/styleguide.scss new file mode 100644 index 0000000..047618e --- /dev/null +++ b/styleguide/assets/style/styleguide.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/styleguide/color_guide.html b/styleguide/color_guide.html index f3f5b30..37bb64f 100644 --- a/styleguide/color_guide.html +++ b/styleguide/color_guide.html @@ -2,199 +2,231 @@ - - - - Color Guide + + + + Color Guide -

Color Guide

+
+ Back to Overview +
+
+

Color Guide

+

-

-

Darkmode

+

-
- Fore- & Background +

Digital Media

+
+
+

Darkmode

-
-
- #f5f0f0 -
+
+ Fore- & Background -
-
- #180736 -
-
+
+
+ #f5f0f0 +
- -
- Shades +
+
+ #180736 +
+
-
-
- #TODO -
+ +
+ Shades -
-
- #TODO -
+
+
+ #TODO +
-
-
- #TODO -
+
+
+ #TODO +
-
-
- #TODO -
-
+
+
+ #TODO +
-
- Primary & Secondary +
+
+ #TODO +
+
-
-
- #c6257d -
+
+ Primary & Secondary -
-
- #4dadd8 -
-
+
+
+ #c6257d +
- -
- Error & Success +
+
+ #4dadd8 +
+
-
-
- #f22d2d -
+ +
+ Error & Success -
-
- #8cff3c -
-
+
+
+ #f22d2d +
- - -
- Accents +
+
+ #8cff3c +
+
-
-
- #60a5f9 -
+ + +
+ Accents -
-
- #d381f7 -
+
+
+ #60a5f9 +
-
-
- #ff7975 -
-
-
+
+
+ #d381f7 +
-
-

Lightmode

+
+
+ #ff7975 +
+
+
-
- Fore- & Background +
+

Lightmode

-
-
- #180736 -
+
+ Fore- & Background -
-
- #f5f0f0 -
-
+
+
+ #180736 +
- -
- Shades +
+
+ #f5f0f0 +
+
-
-
- #TODO -
+ +
+ Shades -
-
- #TODO -
+
+
+ #TODO +
-
-
- #TODO -
+
+
+ #TODO +
-
-
- #TODO -
-
+
+
+ #TODO +
-
- Primary & Secondary +
+
+ #TODO +
+
-
-
- #TODO -
+
+ Primary & Secondary -
-
- #TODO -
-
+
+
+ #TODO +
-
- Error & Success +
+
+ #TODO +
+
-
-
- #b21010 -
+
+ Error & Success -
-
- #47990f -
-
+
+
+ #b21010 +
- - -
- Accents +
+
+ #47990f +
+
-
-
- #303ec0 -
+ + +
+ Accents -
-
- #6c366c -
+
+
+ #303ec0 +
-
-
- #932f0a -
-
-
+
+
+ #6c366c +
+ +
+
+ #932f0a +
+
+ + + +

Printing

+

+ Our primary and secondary colours are also defined for CMYK printing: +

+ +
+
+ CMYK Colors + +
+
+ 0/94/6/0 +
+ +
+
+ 81/0/10/0 +
+
+
+
\ No newline at end of file diff --git a/styleguide/index.html b/styleguide/index.html new file mode 100644 index 0000000..2562add --- /dev/null +++ b/styleguide/index.html @@ -0,0 +1,25 @@ + + + + + + + + Color Guide + + + +
+

Styleguide Easterhegg 2025

+ + + +
+ + + + \ No newline at end of file diff --git a/styleguide/testpage.html b/styleguide/testpage.html index ff298d8..c665f33 100644 --- a/styleguide/testpage.html +++ b/styleguide/testpage.html @@ -2,147 +2,156 @@ - - - - Testdocument + + + + Testdocument -

Testdocument

-

Tests for Fonts and Colorpalettes

+
+ Back to Overview +
+
+

Testdocument

+

Tests for Fonts and Colorpalettes

-
-

Section With Links

- - - - - - - - - - - - - - -
Overview of link highlighting
Regular Link:https://eh22.easterhegg.eu/
Hover/Focus/Active Link:https://eh22.easterhegg.eu/
Visited Link:https://eh22.easterhegg.eu/
-
+
+

Section With Links

+ + + + + + + + + + + + + + +
Overview of link highlighting
Regular Link:https://eh22.easterhegg.eu/
Hover/Focus/Active Link:https://eh22.easterhegg.eu/
Visited Link:https://eh22.easterhegg.eu/
+
-
-

Section With Text

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed - diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. -

+
+

Section With Text

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no + sea takimata sanctus est Lorem ipsum dolor sit amet. +

-

Subsection Title

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed - diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. -

+

Subsection Title

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no + sea takimata sanctus est Lorem ipsum dolor sit amet. +

-

Subsubsection Title

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. -

-
+

Subsubsection Title

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. +

+
-
-

Section With Code

- 

-        #include <stdlib.h>
+    

+        
Section With Code

+        
#include <stdlib.h>
 
-        int *positives(int *numbers, int *size) {
-        int new_size = 0;
+int *positives(int *numbers, int *size) {
+int new_size = 0;
 
-        for (int i = 0; i < *size; i++) {
-        if (numbers[i] >= 0) {
-        numbers[new_size] = numbers[i];
-        new_size++;
-        }
-        }
+for (int i = 0; i < *size; i++) {
+if (numbers[i] >= 0) {
+numbers[new_size] = numbers[i];
+new_size++;
+}
+}
 
-        *size = new_size;
-        return realloc(numbers, sizeof(*numbers) * new_size);
-        }
-      

-  

+*size = new_size;
+return realloc(numbers, sizeof(*numbers) * new_size);
+}
+
-
-

Section With Image

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed - diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. -

-
- 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. -
Example image with some visual distortion applied.
-
-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, - consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed - diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. -

-
+
+

Section With Image

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no + sea takimata sanctus est Lorem ipsum dolor sit amet. +

+
+ 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. +
Example image with some visual distortion applied.
+
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no + sea takimata sanctus est Lorem ipsum dolor sit amet. +

+
-
-

Section With Lists

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

-
    -
  1. Short item no. 1.
    2. -
  2. Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next - line and therefore moves the next item further down.
    3. -
  3. 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.
    4. -
-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

+
+

Section With Lists

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+
    +
  1. Short item no. 1.
    2. +
  2. Long item in the middle. This item is longer then one visual line, which is why it wraps over into the + next line and therefore moves the next item further down. +
    3. +
  3. 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. +
    4. +
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

-

Subsection Title

-
    -
  1. Short item no. 1.
    2. -
  2. Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next - line and therefore moves the next item further down.
    3. -
  3. 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.
    4. -
+

Subsection Title

+
    +
  1. Short item no. 1.
    2. +
  2. Long item in the middle. This item is longer then one visual line, which is why it wraps over into the + next line and therefore moves the next item further down. +
    3. +
  3. 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. +
    4. +
-

Subsection Title

-
    -
  • Short item no. 1.
    • -
  • Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next - line and therefore moves the next item further down.
    • -
  • 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.
    • -
-
+

Subsection Title

+ +
+
\ No newline at end of file diff --git a/styleguide/typography.html b/styleguide/typography.html index d24798b..1eb45cc 100644 --- a/styleguide/typography.html +++ b/styleguide/typography.html @@ -2,70 +2,75 @@ - - - - Typography + + + + Typography -

Typography

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Main Title72pxArgon Glow
Heading 148pxTilt Neon
Heading 232pxTilt Neon
Heading 324pxTilt Neon
Heading 418pxTilt Neon
Subheading24pxAthiti
Paragraph16pxAthiti
Code16pxDeparture Mono
-
-
- -
+
+ Back to Overview +
+
+

Typography

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Main Title72pxArgon Glow
Heading 148pxTilt Neon
Heading 232pxTilt Neon
Heading 324pxTilt Neon
Heading 418pxTilt Neon
Subheading24pxAthiti
Paragraph16pxAthiti
Code16pxDeparture Mono
+
+
+ +
+
\ No newline at end of file