EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Run prettier
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
kritzl 2025-03-03 16:46:05 +01:00
commit 155d47222e
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
Download patch file Download diff file Expand all files Collapse all files

391
styleguide/demopage/index.html
View file

@ -1,125 +1,196 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<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();
});
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">
<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>
</head>
<body>
<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:
<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 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>
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>
<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>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>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>
<!-- TODO: custom highlighting theme -->
<p>This example doesn't use any syntax highlighting, but one can of course use a highlighting theme to
make it easier to differentiate identifiers and similar. At the current state, we don't recommended
a specific highlight-theme, but this might still change.</p>
<pre area-labelledby="code-positives-description"><code>#include &lt;stdlib.h&gt;
<section>
<h2>Preformatted Text</h2>
<!-- TODO: custom highlighting theme -->
<p>
This example doesn't use any syntax highlighting, but one can of
course use a highlighting theme to make it easier to differentiate
identifiers and similar. At the current state, we don't recommended
a specific highlight-theme, but this might still change.
</p>
<pre
area-labelledby="code-positives-description"
><code>#include &lt;stdlib.h&gt;
int *positives(int *numbers, int *size) {
int new_size = 0;
@ -134,45 +205,73 @@ int *positives(int *numbers, int *size) {
*size = new_size;
return realloc(numbers, sizeof(*numbers) * new_size);
}</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>
<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
<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
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>
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>
<script
src="../assets/script/styleguide.js"
type="text/javascript"
></script>
</body>
</html>