238 lines
No EOL
12 KiB
HTML
238 lines
No EOL
12 KiB
HTML
<!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>Testdocument</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<a href="/" id="backToWiki">
|
|
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
|
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
|
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
|
</a>
|
|
</header>
|
|
<div>
|
|
<nav>
|
|
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
|
<ul>
|
|
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
|
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
|
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
|
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
|
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
|
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
|
<li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
|
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
|
data-icon="light" class="glow"></i></a></li>
|
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
|
data-icon="light" class="glow"></i></a></li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
<div class="alert">
|
|
<i data-icon="warning"></i>
|
|
<p>
|
|
<strong>Work in progress</strong>
|
|
This style guide is still under development.<br>
|
|
Not all resources may be available yet, explanations and examples may be missing and things may
|
|
change without notice.
|
|
</p>
|
|
</div>
|
|
<h1>Testdocument</h1>
|
|
<p>Tests for Fonts and Colorpalettes</p>
|
|
|
|
<section>
|
|
<h2>Section With Links</h2>
|
|
<table>
|
|
<caption>Overview of link highlighting</caption>
|
|
<tr>
|
|
<th scope="row">Regular Link:</th>
|
|
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Hover/Focus/Active Link:</th>
|
|
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Visited Link:</th>
|
|
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Section With Text</h2>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<h3>Subsection Title</h3>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<h4>Subsubsection Title</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
|
labore et
|
|
dolore magna aliquyam erat, sed diam voluptua.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Section With Code</h2>
|
|
<pre><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);
|
|
}</code></pre>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Section With Image</h2>
|
|
<p>
|
|
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:
|
|
</p>
|
|
<figure>
|
|
<img src="../assets/image/example_cat.jpg" alt="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." />
|
|
<figcaption>Example image without any distortion applied.</figcaption>
|
|
</figure>
|
|
<p>
|
|
Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG
|
|
filter
|
|
dynamically. But we also made <a href="../generator">a simple web-tool to apply the filter</a> 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.
|
|
</p>
|
|
<figure>
|
|
<img class="glitch" src="../assets/image/example_cat.jpg" alt="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." />
|
|
<figcaption>Example image with visual glitches applied.</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Section With Lists</h2>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<ol>
|
|
<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 line and therefore moves the next item further down.
|
|
</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>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<h3>Subsection Title</h3>
|
|
<ol>
|
|
<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 line and therefore moves the next item further down.
|
|
</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>
|
|
|
|
<h3>Subsection Title</h3>
|
|
<ul>
|
|
<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 line and therefore moves the next item further down.
|
|
</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>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
|
</body>
|
|
|
|
</html> |