diff --git a/styleguide/assets/style/styleguide.css b/styleguide/assets/style/styleguide.css index 2fe2269..361613d 100644 --- a/styleguide/assets/style/styleguide.css +++ b/styleguide/assets/style/styleguide.css @@ -403,25 +403,116 @@ img.glitch { body { margin: 0; - min-height: 100vh; - min-width: 100vw; + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + position: relative; + overflow: auto; } - -header { - padding: 1rem; +body header { + text-align: center; + width: 100%; + height: fit-content; + flex-grow: 0; } - -main { +body > div { + display: flex; + gap: 1rem; + flex-grow: 1; +} +body > div nav { + width: 20rem; + height: fit-content; + display: flex; + flex-direction: column; + flex-shrink: 0; + position: sticky; + top: 0; +} +body > div nav ul { + display: flex; + flex-direction: column; + gap: 0.75rem; + list-style-type: none; +} +body > div nav ul li { + border-radius: 0.5rem; + background-color: var(--color-shade-1); + transition: background-color 150ms; +} +body > div nav ul li > a { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 0.5rem; + outline: solid 0.1em var(--color-shade-1); + padding: 0.5rem 1rem; + color: var(--color-foreground); + text-decoration: none; + font-size: 1.2em; + box-sizing: border-box; + --local-primary: var(--color-primary); + transition-property: filter, outline-color; + transition-duration: 400ms; + transition-timing-function: ease-in; +} +body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active { + color: var(--color-foreground); +} +body > div nav ul li > a i[data-icon] { + padding-right: 0.5em; + padding-top: 0.2em; + padding-bottom: 0.2em; + border-right: solid 0.1em currentColor; +} +body > div nav ul li:hover, body > div nav ul li:focus-within { + background-color: transparent; +} +body > div nav ul li:hover a, body > div nav ul li:focus-within a { + outline: solid 0.1em var(--color-white); + background-color: transparent; + filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary)); + transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, outline-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms; +} +body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active { + color: var(--color-white); +} +body > div main { max-width: min(var(--container-4xl), 100vw); - padding: 1rem; - overflow: hidden; + border-left: dashed 0.25rem var(--color-foreground); } @media (min-width: 40rem) { - main { + body > div main { padding-left: 2rem; } } +i[data-icon] { + display: inline-block; + width: 1em; + height: 1em; + flex-shrink: 0; + position: relative; + box-sizing: content-box; +} +i[data-icon]::before { + content: ""; + display: block; + width: 100%; + height: 100%; + mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + background-color: currentColor; +} +i[data-icon][data-icon=arrow-left]::before { + mask-image: url("../icon/arrow_left.svg"); +} +i[data-icon][data-icon=info]::before { + mask-image: url("../icon/info.svg"); +} + a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited { color: var(--color-accent-1); text-decoration: underline; diff --git a/styleguide/assets/style/styleguide.css.map b/styleguide/assets/style/styleguide.css.map index ce8766f..fbe2287 100644 --- a/styleguide/assets/style/styleguide.css.map +++ b/styleguide/assets/style/styleguide.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["main.scss","styleguide.scss"], -"names": [], -"file": "styleguide.css" -} +{"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;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;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC9ZJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAQZ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAOF;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EAPF;IAQI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;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;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;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 index 941807d..006dfdf 100644 --- a/styleguide/assets/style/styleguide.scss +++ b/styleguide/assets/style/styleguide.scss @@ -1,30 +1,139 @@ @import "main"; - * { box-sizing: border-box; } body { margin: 0; - min-height: 100vh; - min-width: 100vw; -} + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + position: relative; + overflow: auto; -header { - padding: 1rem; -} + header { + text-align: center; + width: 100%; + height: fit-content; + flex-grow: 0; + } -main { - max-width: min(var(--container-4xl), 100vw); - padding: 1rem; - overflow: hidden; + > div { + display: flex; + gap: 1rem; + flex-grow: 1; - @media (min-width: $breakpoint-sm) { - padding-left: 2rem; + nav { + width: 20rem; + height: fit-content; + display: flex; + flex-direction: column; + flex-shrink: 0; + position: sticky; + top: 0; + + ul { + display: flex; + flex-direction: column; + gap: 0.75rem; + list-style-type: none; + + li { + border-radius: 0.5rem; + background-color: var(--color-shade-1); + transition: background-color 150ms; + + + > a { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 0.5rem; + outline: solid 0.1em var(--color-shade-1); + padding: 0.5rem 1rem; + color: var(--color-foreground); + text-decoration: none; + font-size: 1.2em; + box-sizing: border-box; + --local-primary: var(--color-primary); + + transition-property: filter, outline-color; + transition-duration: 400ms; + transition-timing-function: ease-in; + + &:visited, &:focus, &:active { + color: var(--color-foreground); + } + + i[data-icon] { + padding-right: 0.5em; + padding-top: 0.2em; + padding-bottom: 0.2em; + border-right: solid 0.1em currentColor; + } + } + + &:hover, &:focus-within { + background-color: transparent; + + a { + outline: solid 0.1em var(--color-white); + background-color: transparent; + filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary)); + transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms, + outline-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms; + + &:visited, &:focus, &:active { + color: var(--color-white); + } + } + } + } + } + } + + main { + max-width: min(var(--container-4xl), 100vw); + border-left: dashed 0.25rem var(--color-foreground); + + @media (min-width: $breakpoint-sm) { + padding-left: 2rem; + } + } } } +i[data-icon] { + display: inline-block; + width: 1em; + height: 1em; + flex-shrink: 0; + position: relative; + box-sizing: content-box; + + &::before { + content: ''; + display: block; + width: 100%; + height: 100%; + mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + background-color: currentColor; + } + + &[data-icon='arrow-left']::before { + mask-image: url('../icon/arrow_left.svg'); + } + + &[data-icon='info']::before { + mask-image: url('../icon/info.svg'); + } +} + + a { &.a-regular, @@ -60,14 +169,14 @@ pre, .layout-column { display: flex; - &>* { + & > * { width: 100%; } @media (max-width: $breakpoint-md) { flex-wrap: wrap; - &>* { + & > * { width: 100%; } } @@ -77,7 +186,7 @@ pre, display: flex; align-items: center; - &>* { + & > * { width: 100%; } @@ -85,7 +194,7 @@ pre, flex-wrap: wrap; justify-content: center; - &>* { + & > * { width: 100%; } } @@ -102,7 +211,7 @@ pre, gap: 1rem; margin-top: 2rem; - &>span { + & > span { width: 100%; font-size: var(--text-xl); } diff --git a/styleguide/color_guide.html b/styleguide/color_guide.html deleted file mode 100644 index 34098df..0000000 --- a/styleguide/color_guide.html +++ /dev/null @@ -1,225 +0,0 @@ - - - - - - - - Color Guide - - - -
- Back to Overview -
-
-

Color Guide

-

- -

- -

Digital Media

-
-
-

Darkmode

- -
- Fore- & Background - -
-
- #f2f0f5 -
- -
-
- #0c011f -
-
- -
- Shades - -
-
- #56023c -
- -
-
- #6d0449 -
- -
-
- #830755 -
- -
-
- #9a0a61 -
-
- -
- Primary & Secondary - -
-
- #c6257d -
- -
-
- #4dadd8 -
-
- -
- Error & Success - -
-
- #bb2626 -
- -
-
- #54aa18 -
-
- -
- Accents - -
-
- #60a5f9 -
- -
-
- #d381f7 -
- -
-
- #ff7975 -
-
-
- -
-

Lightmode

- -
- Fore- & Background - -
-
- #0c011f -
- -
-
- #f2f0f5 -
-
- -
- Shades - -
-
- #d1c6e0 -
- -
-
- #b2a0cb -
- -
-
- #957eb5 -
- -
-
- #7a60a0 -
-
- -
- Primary & Secondary - -
-
- #9a0a61 -
- -
-
- #167fac -
-
- -
- Error & Success - -
-
- #b21010 -
- -
-
- #47990f -
-
- -
- Accents - -
-
- #303ec0 -
- -
-
- #6c366c -
- -
-
- #932f0a -
-
-
-
- -

Printing

-

- Our primary and secondary colors 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/colors/index.html b/styleguide/colors/index.html new file mode 100644 index 0000000..6db6fad --- /dev/null +++ b/styleguide/colors/index.html @@ -0,0 +1,239 @@ + + + + + + + + Color Guide + + + +
+ +
+
+ +
+

Color Guide

+

+ +

+ +

Digital Media

+
+
+

Darkmode

+ +
+ Fore- & Background + +
+
+ #f2f0f5 +
+ +
+
+ #0c011f +
+
+ +
+ Shades + +
+
+ #56023c +
+ +
+
+ #6d0449 +
+ +
+
+ #830755 +
+ +
+
+ #9a0a61 +
+
+ +
+ Primary & Secondary + +
+
+ #c6257d +
+ +
+
+ #4dadd8 +
+
+ +
+ Error & Success + +
+
+ #bb2626 +
+ +
+
+ #54aa18 +
+
+ +
+ Accents + +
+
+ #60a5f9 +
+ +
+
+ #d381f7 +
+ +
+
+ #ff7975 +
+
+
+ +
+

Lightmode

+ +
+ Fore- & Background + +
+
+ #0c011f +
+ +
+
+ #f2f0f5 +
+
+ +
+ Shades + +
+
+ #d1c6e0 +
+ +
+
+ #b2a0cb +
+ +
+
+ #957eb5 +
+ +
+
+ #7a60a0 +
+
+ +
+ Primary & Secondary + +
+
+ #9a0a61 +
+ +
+
+ #167fac +
+
+ +
+ Error & Success + +
+
+ #b21010 +
+ +
+
+ #47990f +
+
+ +
+ Accents + +
+
+ #303ec0 +
+ +
+
+ #6c366c +
+ +
+
+ #932f0a +
+
+
+
+ +

Printing

+

+ Our primary and secondary colors 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/demopage/index.html b/styleguide/demopage/index.html new file mode 100644 index 0000000..9b3ec1c --- /dev/null +++ b/styleguide/demopage/index.html @@ -0,0 +1,201 @@ + + + + + + + + Testdocument + + + +
+ +
+
+ +
+

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 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. +

+ +

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>
+
+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++;
+    }
+  }
+
+  *size = new_size;
+  return realloc(numbers, sizeof(*numbers) * new_size);
+}
+
+ +
+

Section With Image

+

+ When including images in your content, you can opt into applying an SVG filter that adds visual glitches + to + the image. This shouldn't be used on images with text or important details, because the glitches will + most + likely reduce readability. Let's use the following plain image: +

+
+ Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind + of leopard-print fabric and looking at something behind the camera. The background is dark and + plain. +
Example image without any distortion applied.
+
+

+ Now, in HTML you could simply specify class="glitch" on the image tag to add the SVG filter + dynamically. But we also made a simple web-tool to apply the filter to an + image + and export it as a PNG. The tool also scales the image down if its vertical size is larger than 1000 + pixels. This is done + to ensure that the filter looks similar across all images. +

+
+ The same photograph as before, except with a glitchy filer applied. The first effect applies to + bright edges, which get surrounded by pink and blue to their left and right hand side. The second + one distorts the image by offsetting parts of the image horizontally by seemingly random yet + somewhat osscilating amounts. +
Example image with visual glitches applied.
+
+
+ +
+

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

+
    +
  • 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. +
    • +
+
+
+
+ + + + diff --git a/styleguide/index.html b/styleguide/index.html index 2f486e7..2704b10 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -9,16 +9,26 @@ -
-

Styleguide Easterhegg 2025

+
+ +
+
+ +
+

Styleguide Easterhegg 2025

- - -
+
+ + \ No newline at end of file diff --git a/styleguide/testpage.html b/styleguide/testpage.html deleted file mode 100644 index 3d2cbb1..0000000 --- a/styleguide/testpage.html +++ /dev/null @@ -1,162 +0,0 @@ - - - - - - - - Testdocument - - - -
- 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 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. -

- -

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>
-
-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++;
-    }
-  }
-
-  *size = new_size;
-  return realloc(numbers, sizeof(*numbers) * new_size);
-}
-
- -
-

Section With Image

-

- When including images in your content, you can opt into applying an SVG filter that adds visual glitches to - the image. This shouldn't be used on images with text or important details, because the glitches will most - likely reduce readability. Let's use the following plain image: -

-
- Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind - of leopard-print fabric and looking at something behind the camera. The background is dark and - plain. -
Example image without any distortion applied.
-
-

- Now, in HTML you could simply specify class="glitch" on the image tag to add the SVG filter - dynamically. But we also made a simple web-tool to apply the filter to an image - and export it as a PNG. The tool also scales the image down if its vertical size is larger than 1000 pixels. This is done - to ensure that the filter looks similar across all images. -

-
- The same photograph as before, except with a glitchy filer applied. The first effect applies to - bright edges, which get surrounded by pink and blue to their left and right hand side. The second - one distorts the image by offsetting parts of the image horizontally by seemingly random yet - somewhat osscilating amounts. -
Example image with visual glitches applied.
-
-
- -
-

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

- -
-
- - - diff --git a/styleguide/typography.html b/styleguide/typography.html deleted file mode 100644 index cd8010e..0000000 --- a/styleguide/typography.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - Typography - - - -
- Back to Overview -
-
-

Typography

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Main Title72pxArgon Glow
Heading 148pxTilt Neon
Heading 232pxTilt Neon
Heading 324pxTilt Neon
Heading 418pxTilt Neon
Subheading24pxAthiti
Paragraph16pxAthiti
Code16pxDeparture Mono
-
-
- -
-
- - - diff --git a/styleguide/typography/index.html b/styleguide/typography/index.html new file mode 100644 index 0000000..0662257 --- /dev/null +++ b/styleguide/typography/index.html @@ -0,0 +1,90 @@ + + + + + + + + Typography + + + +
+ +
+
+ +
+

Typography

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Main Title72pxArgon Glow
Heading 148pxTilt Neon
Heading 232pxTilt Neon
Heading 324pxTilt Neon
Heading 418pxTilt Neon
Subheading24pxAthiti
Paragraph16pxAthiti
Code16pxDeparture Mono
+
+
+
    +
  • Main Title
    • +
  • Heading 1
    • +
  • Heading 2
    • +
  • Heading 3
    • +
  • Heading 4
    • +
  • Subheading
    • +
  • Paragraph
    • +
  • Code
    • +
+
+
+
+ + + +