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

111
styleguide/assets/style/styleguide.css
View file

@ -403,25 +403,116 @@ img.glitch {
body {
margin: 0;
min-height: 100vh;
min-width: 100vw;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
overflow: auto;
}
header {
padding: 1rem;
body header {
text-align: center;
width: 100%;
height: fit-content;
flex-grow: 0;
}
main {
body > div {
display: flex;
gap: 1rem;
flex-grow: 1;
}
body > div nav {
width: 20rem;
height: fit-content;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
}
body > div nav ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style-type: none;
}
body > div nav ul li {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
}
body > div nav ul li > a {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
outline: solid 0.1em var(--color-shade-1);
padding: 0.5rem 1rem;
color: var(--color-foreground);
text-decoration: none;
font-size: 1.2em;
box-sizing: border-box;
--local-primary: var(--color-primary);
transition-property: filter, outline-color;
transition-duration: 400ms;
transition-timing-function: ease-in;
}
body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active {
color: var(--color-foreground);
}
body > div nav ul li > a i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
body > div nav ul li:hover, body > div nav ul li:focus-within {
background-color: transparent;
}
body > div nav ul li:hover a, body > div nav ul li:focus-within a {
outline: solid 0.1em var(--color-white);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, outline-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
}
body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active {
color: var(--color-white);
}
body > div main {
max-width: min(var(--container-4xl), 100vw);
padding: 1rem;
overflow: hidden;
border-left: dashed 0.25rem var(--color-foreground);
}
@media (min-width: 40rem) {
main {
body > div main {
padding-left: 2rem;
}
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
}
i[data-icon]::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
i[data-icon][data-icon=arrow-left]::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon][data-icon=info]::before {
mask-image: url("../icon/info.svg");
}
a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
color: var(--color-accent-1);
text-decoration: underline;

8
styleguide/assets/style/styleguide.css.map
View file

File diff suppressed because one or more lines are too long

145
styleguide/assets/style/styleguide.scss
View file

@ -1,30 +1,139 @@
@import "main";
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
min-width: 100vw;
}
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
overflow: auto;
header {
padding: 1rem;
}
header {
text-align: center;
width: 100%;
height: fit-content;
flex-grow: 0;
}
main {
max-width: min(var(--container-4xl), 100vw);
padding: 1rem;
overflow: hidden;
> div {
display: flex;
gap: 1rem;
flex-grow: 1;
@media (min-width: $breakpoint-sm) {
padding-left: 2rem;
nav {
width: 20rem;
height: fit-content;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style-type: none;
li {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
> a {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
outline: solid 0.1em var(--color-shade-1);
padding: 0.5rem 1rem;
color: var(--color-foreground);
text-decoration: none;
font-size: 1.2em;
box-sizing: border-box;
--local-primary: var(--color-primary);
transition-property: filter, outline-color;
transition-duration: 400ms;
transition-timing-function: ease-in;
&:visited, &:focus, &:active {
color: var(--color-foreground);
}
i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
}
&:hover, &:focus-within {
background-color: transparent;
a {
outline: solid 0.1em var(--color-white);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
outline-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
&:visited, &:focus, &:active {
color: var(--color-white);
}
}
}
}
}
}
main {
max-width: min(var(--container-4xl), 100vw);
border-left: dashed 0.25rem var(--color-foreground);
@media (min-width: $breakpoint-sm) {
padding-left: 2rem;
}
}
}
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
&[data-icon='arrow-left']::before {
mask-image: url('../icon/arrow_left.svg');
}
&[data-icon='info']::before {
mask-image: url('../icon/info.svg');
}
}
a {
&.a-regular,
@ -60,14 +169,14 @@ pre,
.layout-column {
display: flex;
&>* {
& > * {
width: 100%;
}
@media (max-width: $breakpoint-md) {
flex-wrap: wrap;
&>* {
& > * {
width: 100%;
}
}
@ -77,7 +186,7 @@ pre,
display: flex;
align-items: center;
&>* {
& > * {
width: 100%;
}
@ -85,7 +194,7 @@ pre,
flex-wrap: wrap;
justify-content: center;
&>* {
& > * {
width: 100%;
}
}
@ -102,7 +211,7 @@ pre,
gap: 1rem;
margin-top: 2rem;
&>span {
& > span {
width: 100%;
font-size: var(--text-xl);
}

225
styleguide/color_guide.html
View file

@ -1,225 +0,0 @@
<!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>Color Guide</title>
</head>
<body>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<h1>Color Guide</h1>
<p>
</p>
<h2>Digital Media</h2>
<div class="layout-column">
<div class="dark swatch-grid">
<h3>Darkmode</h3>
<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">#f2f0f5</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">#0c011f</span>
</div>
</section>
<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">#56023c</span>
</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">#6d0449</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">#830755</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">#9a0a61</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>
<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">#bb2626</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">#54aa18</span>
</div>
</section>
<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="light swatch-grid">
<h3>Lightmode</h3>
<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">#0c011f</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">#f2f0f5</span>
</div>
</section>
<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">#d1c6e0</span>
</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">#b2a0cb</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">#957eb5</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">#7a60a0</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">#9a0a61</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">#167fac</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>
<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>
</div>
<h2>Printing</h2>
<p>
Our primary and secondary colors are also defined for CMYK printing:
</p>
<div class="swatch-grid">
<section aria-labelledby="label-light-primary-secondary">
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
</div>
</section>
</div>
</main>
</body>
</html>

239
styleguide/colors/index.html Normal file
View file

@ -0,0 +1,239 @@
<!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>Color Guide</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="../demopage"><i data-icon="info"></i>Demopage</a></li>
</ul>
</nav>
<main>
<h1>Color Guide</h1>
<p>
</p>
<h2>Digital Media</h2>
<div class="layout-column">
<div class="dark swatch-grid">
<h3>Darkmode</h3>
<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">#f2f0f5</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">#0c011f</span>
</div>
</section>
<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">#56023c</span>
</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">#6d0449</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">#830755</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">#9a0a61</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>
<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">#bb2626</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">#54aa18</span>
</div>
</section>
<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="light swatch-grid">
<h3>Lightmode</h3>
<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">#0c011f</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">#f2f0f5</span>
</div>
</section>
<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">#d1c6e0</span>
</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">#b2a0cb</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">#957eb5</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">#7a60a0</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">#9a0a61</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">#167fac</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>
<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>
</div>
<h2>Printing</h2>
<p>
Our primary and secondary colors are also defined for CMYK printing:
</p>
<div class="swatch-grid">
<section aria-labelledby="label-light-primary-secondary">
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
</div>
</section>
</div>
</main>
<script>
</script>
</div>
</body>
</html>

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>

28
styleguide/index.html
View file

@ -9,16 +9,26 @@
</head>
<body>
<main>
<h1>Styleguide Easterhegg 2025</h1>
<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="demopage"><i data-icon="info"></i>Demopage</a></li>
</ul>
</nav>
<main>
<h1>Styleguide Easterhegg 2025</h1>
<ul>
<li><a href="color_guide.html">Color Guide</a></li>
<li><a href="testpage.html">Testpage</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
</main>
</main>
<script>
</script>
</div>
</body>
</html>

162
styleguide/testpage.html
View file

@ -1,162 +0,0 @@
<!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>
<a href="index.html">Back to Overview</a>
</header>
<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>
</body>
</html>

76
styleguide/typography.html
View file

@ -1,76 +0,0 @@
<!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>Typography</title>
</head>
<body>
<header>
<a href="index.html">Back to Overview</a>
</header>
<main>
<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><span class="main-title">Main Title</span></li>
<li><span class="h1">Heading 1</span></li>
<li><span class="h2">Heading 2</span></li>
<li><span class="h3">Heading 3</span></li>
<li><span class="h4">Heading 4</span></li>
<li><span class="subheading">Subheading</span></li>
<li><span class="p">Paragraph</span></li>
<li><span class="code">Code</span></li>
</ul>
</div>
</main>
</body>
</html>

90
styleguide/typography/index.html Normal file
View file

@ -0,0 +1,90 @@
<!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>Typography</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=""><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
</ul>
</nav>
<main>
<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><span class="main-title">Main Title</span></li>
<li><span class="h1">Heading 1</span></li>
<li><span class="h2">Heading 2</span></li>
<li><span class="h3">Heading 3</span></li>
<li><span class="h4">Heading 4</span></li>
<li><span class="subheading">Subheading</span></li>
<li><span class="p">Paragraph</span></li>
<li><span class="code">Code</span></li>
</ul>
</div>
</main>
</div>
<script>
</script>
</body>
</html>