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

styleguide: add navigation and header
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
kritzl 2025-02-14 20:45:10 +01:00
commit 8ee4831cb8
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
10 changed files with 778 additions and 507 deletions
Download patch file Download diff file Expand all files Collapse all files

201
styleguide/demopage/index.html Normal file
View file

@ -0,0 +1,201 @@
<!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>
<img src="../assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
</header>
<div>
<nav>
<ul>
<li><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="info"></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=""><i data-icon="info"></i>Demopage</a></li>
</ul>
</nav>
<main>
<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/">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/">https://eh22.easterhegg.eu/</a></td>
</tr>
<tr>
<th scope="row">Visited Link:</th>
<td><a class="a-visited" href="https://eh22.easterhegg.eu/">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 &lt;stdlib.h&gt;
int *positives(int *numbers, int *size) {
int new_size = 0;
for (int i = 0; i &lt; *size; i++) {
if (numbers[i] &gt;= 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>
</script>
</body>
</html>