Work in progress This style guide is still under development.
Not all resources may be available yet, explanations and examples may be missing and things may change without notice.

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

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

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

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

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.