Restructure and update texts of demopage
This commit is contained in:
parent
1ae780575b
commit
e05ad86b5c
SSH key fingerprint:
SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
1 changed files with 61 additions and 141 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<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>
|
||||
<title>Demopage</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -47,13 +47,14 @@
|
|||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Testdocument</h1>
|
||||
<p>Tests for Fonts and Colorpalettes</p>
|
||||
<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>Section With Links</h2>
|
||||
<h2>Overview of Link-Highlighting</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>
|
||||
|
|
@ -70,95 +71,69 @@
|
|||
</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>
|
||||
<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>Section With Code</h2>
|
||||
<pre><code>#include <stdlib.h>
|
||||
<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 <stdlib.h>
|
||||
|
||||
int *positives(int *numbers, int *size) {
|
||||
int new_size = 0;
|
||||
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++;
|
||||
}
|
||||
}
|
||||
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>
|
||||
*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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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
|
||||
|
|
@ -166,69 +141,14 @@
|
|||
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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue