Demopage

Overview of Link-Highlighting

Ordered and Unordered Lists

This is just a simple section containing plain text as well as some lists. This way you can get a feel for how lists fit into their surrounding content. Have a look at this ordered list: We simply prefix each item with a one-indexed, right aligned number followed by a dot.

1. Short item no. 1.
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. 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.

But sometimes, the order of items doesn't matter, in that case, we instead put a basic bullet point infront of each item:

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

Preformatted Text

This example uses manual syntax highlighting using the following CSS classes:

• neutral
• identifier
• number
• string
• comment
• keyword
• function

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

This is a simple function written in C, which removes all negative integers from an array and updates its element count.

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:

Now, in HTML you could simply specify class="glitch" on the image tag to add the SVG filter dynamically, but this won't render said filter in Apple's Safari, which has been a known issue for many years. So instead, 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 to ensure that the filter looks similar across all images.

Of course, every image should include an image description. No matter if its a website, social media post, or a PDF. Most if not all wordprocessors (this includes Word, LaTeX and Typst) support this in one way or another.

We would also prefer it, if no one uses "AI-generated" images. The entire event design was created through hard work by living beings. No LLM/GenAI was involved in any part of the design processes. So we kindly ask you not to use tools which are based on theft, actively harm artist and destroy our planet in the process. ("AI-generated" of course does not apply to generative art and similar, but to LLMs/GenAI.)