274 lines
12 KiB
HTML
274 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<script>
|
|
const setTheme = (theme) => {
|
|
theme ??= localStorage.theme || "system";
|
|
document.getElementById("themeLight").checked = theme === "light";
|
|
document.getElementById("themeDark").checked = theme === "dark";
|
|
localStorage.theme = theme;
|
|
};
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
setTheme();
|
|
});
|
|
</script>
|
|
<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>Demopage</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>
|
|
<a href="../glow"><i data-icon="info"></i>Glow</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 id="themeToggleDark" class="themeToggle">
|
|
<input
|
|
id="themeDark"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeDark">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</li>
|
|
<li id="themeToggleLight" class="themeToggle">
|
|
<input
|
|
id="themeLight"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeLight">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</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>Demopage</h1>
|
|
<p>
|
|
This page contains examples for various text-components and fonts, as
|
|
well as colorpalettes, images, and so on. Use can use it to get
|
|
familiar with the design and as a reference for styling your own
|
|
content.
|
|
</p>
|
|
|
|
<section>
|
|
<h2>Overview of Link-Highlighting</h2>
|
|
<table>
|
|
<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>Ordered and Unordered Lists</h2>
|
|
<p>
|
|
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.
|
|
</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>
|
|
But sometimes, the order of items doesn't matter, in that case, we
|
|
instead put a basic bullet point infront of each item:
|
|
</p>
|
|
<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>
|
|
|
|
<section>
|
|
<h2>Preformatted Text</h2>
|
|
<p>
|
|
This example uses manual syntax highlighting using the predefined
|
|
CSS classes mentioned in the typography:
|
|
</p>
|
|
<pre
|
|
aria-labelledby="code-positives-description"
|
|
><code><span class="keyword">#include</span> <span class="string"><stdlib.h></span>
|
|
|
|
<span class="keyword">int</span> <span class="neutral">*</span><span class="identifier">positives</span><span class="neutral">(int</span> <span class="neutral">*</span><span class="identifier">numbers</span><span class="neutral">,</span> <span class="keyword">int</span> <span class="neutral">*</span><span class="identifier">size</span><span class="neutral">) {</span>
|
|
<span class="keyword">int</span> <span class="identifier">new_size</span> <span class="neutral">=</span> <span class="number">0</span><span class="neutral">;</span>
|
|
|
|
<span class="keyword">for</span> <span class="neutral">(</span><span class="keyword">int</span> <span class="identifier">i</span> <span class="neutral">=</span> <span class="number">0</span><span class="neutral">;</span> <span class="identifier">i</span> <span class="neutral"><</span> <span class="neutral">*</span><span class="identifier">size</span><span class="neutral">;</span> <span class="identifier">i</span><span class="neutral">++) {</span>
|
|
<span class="keyword">if</span> <span class="neutral">(</span><span class="identifier">numbers</span><span class="neutral">[</span><span class="identifier">i</span><span class="neutral">]</span> <span class="neutral">>=</span> <span class="number">0</span><span class="neutral">) {</span>
|
|
<span class="identifier">numbers</span><span class="neutral">[</span><span class="identifier">new_size</span><span class="neutral">]</span> <span class="neutral">=</span> <span class="identifier">numbers</span><span class="neutral">[</span><span class="identifier">i</span><span class="neutral">]</span><span class="neutral">;</span>
|
|
<span class="identifier">new_size</span><span class="neutral">++</span><span class="neutral">;</span>
|
|
<span class="neutral">}</span>
|
|
<span class="neutral">}</span>
|
|
|
|
<span class="neutral">*</span><span class="identifier">size</span> <span class="neutral">=</span> <span class="identifier">new_size</span><span class="neutral">;</span>
|
|
<span class="keyword">return</span> <span class="function">realloc</span><span class="neutral">(</span><span class="identifier">numbers</span><span class="neutral">,</span> <span class="function">sizeof</span><span class="neutral">(*</span><span class="identifier">numbers</span><span class="neutral">)</span> <span class="neutral">*</span> <span class="identifier">new_size</span><span class="neutral">);</span>
|
|
<span class="neutral">}</span></code></pre>
|
|
<p>
|
|
This is a simple function written in C, which removes all negative
|
|
integers from an array and updates its element count.
|
|
</p>
|
|
</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 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 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
|
|
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>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
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.)
|
|
</p>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script
|
|
src="../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|