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

Restructure and update texts of demopage

Browse source
This commit is contained in:
lilith 2025-03-01 03:25:59 +01:00
commit e05ad86b5c
Signed by: traumweh
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
1 changed files with 61 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

184
styleguide/demopage/index.html
View file

@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
<title>Testdocument</title> <title>Demopage</title>
</head> </head>
<body> <body>
@ -47,13 +47,14 @@
change without notice. change without notice.
</p> </p>
</div> </div>
<h1>Testdocument</h1> <h1>Demopage</h1>
<p>Tests for Fonts and Colorpalettes</p> <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> <section>
<h2>Section With Links</h2> <h2>Overview of Link-Highlighting</h2>
<table> <table>
<caption>Overview of link highlighting</caption>
<tr> <tr>
<th scope="row">Regular Link:</th> <th scope="row">Regular Link:</th>
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td> <td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
@ -70,55 +71,37 @@
</section> </section>
<section> <section>
<h2>Section With Text</h2> <h2>Ordered and Unordered Lists</h2>
<p> <p>This is just a simple section containing plain text as well as some lists. This way you can get a
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut feel for how lists fit into their surrounding content. Have a look at this ordered list: We simply
labore et prefix each item with a one-indexed, right aligned number followed by a dot.</p>
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea <ol>
rebum. <li>Short item no. 1.</li>
Stet <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit into the next line and therefore moves the next item further down.</li>
amet, <li>Long item at the end, which is also longer than one visual line. It also wraps over into the
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna next line, but there is no next item to move.</li>
aliquyam </ol>
erat, <p>But sometimes, the order of items doesn't matter, in that case, we instead put a basic bullet point
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd infront of each item:</p>
gubergren, <ul>
no <li>Short item no. 1.</li>
sea takimata sanctus est Lorem ipsum dolor sit amet. <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
</p> 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
<h3>Subsection Title</h3> next line, but there is no next item to move.</li>
<p> </ul>
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>
<section> <section>
<h2>Section With Code</h2> <h2>Preformatted Text</h2>
<pre><code>#include &lt;stdlib.h&gt; <!-- 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 *positives(int *numbers, int *size) {
int new_size = 0; int new_size = 0;
for (int i = 0; i &lt; *size; i++) { for (int i = 0; i &lt; *size; i++) {
@ -130,35 +113,27 @@
*size = new_size; *size = new_size;
return realloc(numbers, sizeof(*numbers) * new_size); return realloc(numbers, sizeof(*numbers) * new_size);
}</code></pre> }</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>
<section> <section>
<h2>Section With Image</h2> <h2>Section With Image</h2>
<p> <p>When including images in your content, you can opt into applying an SVG filter that adds visual
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 glitches will most likely reduce readability. Let's use the following plain image:</p>
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> <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 <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 of leopard-print fabric and looking at something behind the camera. The background is dark and
plain." /> plain." />
<figcaption>Example image without any distortion applied.</figcaption> <figcaption>Example image without any distortion applied.</figcaption>
</figure> </figure>
<p> <p>Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG
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
filter issue for many years. So instead, we also made <a href="../generator">a simple web-tool to apply the
dynamically. But we also made <a href="../generator">a simple web-tool to apply the filter</a> to an filter</a> to an image and export it as a PNG. The tool also scales the image down to ensure
image that the filter looks similar across all images.</p>
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> <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 <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 bright edges, which get surrounded by pink and blue to their left and right hand side. The second
@ -166,69 +141,14 @@
somewhat osscilating amounts." /> somewhat osscilating amounts." />
<figcaption>Example image with visual glitches applied.</figcaption> <figcaption>Example image with visual glitches applied.</figcaption>
</figure> </figure>
</section> <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
<section> one way or another.</p>
<h2>Section With Lists</h2> <p>We would also prefer it, if no one uses "AI-generated" images. The entire event design was created
<p> through hard work by living beings. No LLM/GenAI was involved in any part of the design processes.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut So we kindly ask you not to use tools which are based on theft, actively harm artist and destroy our
labore et planet in the process. ("AI-generated" of course does not apply to generative art and similar, but
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea to LLMs/GenAI.)</p>
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> </section>
</main> </main>
</div> </div>