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

Preliminary work on migrating from penpot

Browse source
This commit is contained in:
lilith 2025-01-23 20:42:39 +01:00
commit 8b1e481341
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
3 changed files with 419 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

200
styleguide/color_guide.html Normal file
View file

@ -0,0 +1,200 @@
<!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/css/main.css">
<title>Color Guide</title>
</head>
<body>
<h1>Color Guide</h1>
<div class="float-left dark">
<h2>Darkmode</h2>
<section aria-labelledby="label-dark-fore-background">
<span id="label-dark-fore-background">Fore- &amp; Background</span>
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
<span id="label-dark-swatch-foreground">#f5f0f0</span>
</div>
<div aria-labelledby="label-dark-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
<span id="label-dark-swatch-background">#180736</span>
</div>
</section>
<!-- TODO: Final shades -->
<section aria-labelledby="label-dark-shades">
<span id="label-dark-shades">Shades</span>
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
<span id="label-dark-swatch-shade-1">#TODOspan>
</div>
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
<span id="label-dark-swatch-shade-2">#TODO</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
<span id="label-dark-swatch-shade-3">#TODO</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
<span id="label-dark-swatch-shade-4">#TODO</span>
</div>
</section>
<section aria-labelledby="label-dark-primary-secondary">
<span id="label-dark-primary-secondary">Primary &amp; Secondary</span>
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
<span id="label-dark-swatch-primary">#c6257d</span>
</div>
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
<span id="label-dark-swatch-secondary">#4dadd8</span>
</div>
</section>
<!-- TODO: Might be too bright -->
<section aria-labelledby="label-dark-error-success">
<span id="label-dark-error-success">Error &amp; Success</span>
<div aria-labelledby="label-dark-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
<span id="label-dark-swatch-error">#f22d2d</span>
</div>
<div aria-labelledby="label-dark-swatch-success" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
<span id="label-dark-swatch-success">#8cff3c</span>
</div>
</section>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-dark-accents">
<span id="label-dark-accents">Accents</span>
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
<span id="label-dark-swatch-accent-1">#60a5f9</span>
</div>
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
<span id="label-dark-swatch-accent-2">#d381f7</span>
</div>
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
<span id="label-dark-swatch-accent-3">#ff7975</span>
</div>
</section>
</div>
<div class="float-right light">
<h2>Lightmode</h2>
<section aria-labelledby="label-light-fore-background">
<span id="label-light-fore-background">Fore- &amp; Background</span>
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
<span id="label-light-swatch-foreground">#180736</span>
</div>
<div aria-labelledby="label-light-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
<span id="label-light-swatch-background">#f5f0f0</span>
</div>
</section>
<!-- TODO: Final shades -->
<section aria-labelledby="label-light-shades">
<span id="label-light-shades">Shades</span>
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
<span id="label-light-swatch-shade-1">#TODOspan>
</div>
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
<span id="label-light-swatch-shade-2">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
<span id="label-light-swatch-shade-3">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
<span id="label-light-swatch-shade-4">#TODO</span>
</div>
</section>
<section aria-labelledby="label-light-primary-secondary">
<span id="label-light-primary-secondary">Primary &amp; Secondary</span>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
<span id="label-light-swatch-primary">#TODO</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
<span id="label-light-swatch-secondary">#TODO</span>
</div>
</section>
<section aria-labelledby="label-light-error-success">
<span id="label-light-error-success">Error &amp; Success</span>
<div aria-labelledby="label-light-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-error)"></div>
<span id="label-light-swatch-error">#b21010</span>
</div>
<div aria-labelledby="label-light-swatch-success" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-success)"></div>
<span id="label-light-swatch-success">#47990f</span>
</div>
</section>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-light-accents">
<span id="label-light-accents">Accents</span>
<div aria-labelledby="label-light-swatch-accent-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div>
<span id="label-light-swatch-accent-1">#303ec0</span>
</div>
<div aria-labelledby="label-light-swatch-accent-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div>
<span id="label-light-swatch-accent-2">#6c366c</span>
</div>
<div aria-labelledby="label-light-swatch-accent-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div>
<span id="label-light-swatch-accent-3">#932f0a</span>
</div>
</section>
</div>
</body>
</html>

148
styleguide/testpage.html Normal file
View file

@ -0,0 +1,148 @@
<!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/css/main.css">
<title>Testdocument</title>
</head>
<body>
<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>
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>
<figure>
<img src="assets/images/cat.png"
alt="Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues." />
<figcaption>Example image with some visual distortion applied.</figcaption>
</figure>
<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>
</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>
</body>
</html>

71
styleguide/typography.html Normal file
View file

@ -0,0 +1,71 @@
<!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/css/main.css">
<title>Typography</title>
</head>
<body>
<h1>Typography</h1>
<div class="float-left">
<table>
<tr>
<th scope="row">Main Title</th>
<td>72px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 1</th>
<td>48px</td>
<td>Tilt Neon</td>
</tr>
<tr>
<th scope="row">Heading 2</th>
<td>32px</td>
<td>Tilt Neon</td>
</tr>
<tr>
<th scope="row">Heading 3</th>
<td>24px</td>
<td>Tilt Neon</td>
</tr>
<tr>
<th scope="row">Heading 4</th>
<td>18px</td>
<td>Tilt Neon</td>
</tr>
<tr>
<th scope="row">Subheading</th>
<td>24px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Paragraph</th>
<td>16px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Code</th>
<td>16px</td>
<td>Departure Mono</td>
</tr>
</table>
</div>
<div class="float-right">
<ul>
<li class="main-title">Main Title</li>
<li class="h1">Heading 1</li>
<li class="h2">Heading 2</li>
<li class="h3">Heading 3</li>
<li class="h4">Heading 4</li>
<li class="subheading">Subheading</li>
<li class="p">Paragraph</li>
<li class="code">Code</li>
</ul>
</div>
</body>
</html>