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

Use different glow for logo in light mode
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
lilith 2025-02-16 20:16:29 +01:00
commit 434c4335d5
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
13 changed files with 939 additions and 551 deletions
Download patch file Download diff file Expand all files Collapse all files

140
styleguide/assets/image/logo_eventname_glow_off.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

32
styleguide/assets/style/base.css
View file

@ -128,6 +128,12 @@
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
.dark .light-only {
display: none;
}
.dark .dark-only {
display: initial;
}
.light {
--color-foreground: var(--color-light-foreground);
@ -150,6 +156,12 @@
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
.light .light-only {
display: initial;
}
.light .dark-only {
display: none;
}
html,
html.light {
@ -173,6 +185,14 @@ html.light {
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html .light-only,
html.light .light-only {
display: initial;
}
html .dark-only,
html.light .dark-only {
display: none;
}
html.dark {
--color-foreground: var(--color-dark-foreground);
@ -195,6 +215,12 @@ html.dark {
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html.dark .light-only {
display: none;
}
html.dark .dark-only {
display: initial;
}
@media (prefers-color-scheme: dark) {
html {
@ -218,6 +244,12 @@ html.dark {
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html .light-only {
display: none;
}
html .dark-only {
display: initial;
}
}
@font-face {
font-family: "Athiti";

2
styleguide/assets/style/base.css.map
View file

File diff suppressed because one or more lines are too long

16
styleguide/assets/style/base.scss
View file

@ -143,6 +143,14 @@ $mobile-navigation-height: 4rem;
--color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
.light-only {
display: none;
}
.dark-only {
display: initial;
}
}
@mixin theme_light() {
@ -166,6 +174,14 @@ $mobile-navigation-height: 4rem;
--color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
.light-only {
display: initial;
}
.dark-only {
display: none;
}
}
.dark {

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

@ -128,6 +128,12 @@
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
.dark .light-only {
display: none;
}
.dark .dark-only {
display: initial;
}
.light {
--color-foreground: var(--color-light-foreground);
@ -150,6 +156,12 @@
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
.light .light-only {
display: initial;
}
.light .dark-only {
display: none;
}
html,
html.light {
@ -173,6 +185,14 @@ html.light {
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html .light-only,
html.light .light-only {
display: initial;
}
html .dark-only,
html.light .dark-only {
display: none;
}
html.dark {
--color-foreground: var(--color-dark-foreground);
@ -195,6 +215,12 @@ html.dark {
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html.dark .light-only {
display: none;
}
html.dark .dark-only {
display: initial;
}
@media (prefers-color-scheme: dark) {
html {
@ -218,6 +244,12 @@ html.dark {
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html .light-only {
display: none;
}
html .dark-only {
display: initial;
}
}
@font-face {
font-family: "Athiti";

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

File diff suppressed because one or more lines are too long

394
styleguide/colors/index.html
View file

@ -9,234 +9,236 @@
</head>
<body>
<header>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
<li class="active"><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>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
<h1>Color Guide</h1>
<p>
<header>
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
<li class="active"><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>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
<h1>Color Guide</h1>
<p>
</p>
</p>
<h2>Digital Media</h2>
<div class="layout-column">
<div class="dark swatch-grid">
<h3>Darkmode</h3>
<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>
<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-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>
<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>
<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-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-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-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>
<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>
<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-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>
<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>
<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-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>
<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>
<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-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-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 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>
<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>
<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-light-primary-secondary">Primary &amp; Secondary</span>
<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-light-primary)"></div>
<span id="label-light-swatch-primary">#9a0a61</span>
<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-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 class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
<span id="label-cmyk-swatch-secondary">81/0/10/0</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 src="../assets/script/styleguide.js" type="text/javascript"></script>
</div>
</main>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</div>
</body>
</html>

369
styleguide/demopage/index.html
View file

@ -9,196 +9,213 @@
</head>
<body>
<header>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></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 class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
<h1>Testdocument</h1>
<p>Tests for Fonts and Colorpalettes</p>
<header>
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></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 class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</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/</a></td>
</tr>
<tr>
<th scope="row">Hover/Focus/Active Link:</th>
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
</tr>
<tr>
<th scope="row">Visited Link:</th>
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
</tr>
</table>
</section>
<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/</a></td>
</tr>
<tr>
<th scope="row">Hover/Focus/Active Link:</th>
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
</tr>
<tr>
<th scope="row">Visited Link:</th>
<td><a class="a-visited" href="">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>
<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>
<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>
<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;
<section>
<h2>Section With Code</h2>
<pre><code>#include &lt;stdlib.h&gt;
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 &lt; *size; i++) {
if (numbers[i] &gt;= 0) {
numbers[new_size] = numbers[i];
new_size++;
}
}
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>
*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
<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
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>
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>
<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>
<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 src="../assets/script/styleguide.js" type="text/javascript"></script>
<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 src="../assets/script/styleguide.js" type="text/javascript"></script>
</body>
</html>
</html>

146
styleguide/generator/index.html
View file

@ -9,88 +9,92 @@
</head>
<body style="height: 100vh;">
<header>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></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>
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main class="generator">
<div>
<header>
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></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>
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main class="generator">
<div>
<input id="file_input" type="file" name="image" accept="image/*">
</div>
<img id="source_img" src=""/>
<i data-icon="arrow-down"></i>
<img id="result_img" src=""/>
<div>
<input id="file_input" type="file" name="image" accept="image/*">
</div>
<div style="display: none;">
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
<img id="source_img" src="" />
<i data-icon="arrow-down"></i>
<img id="result_img" src="" />
<div style="display: none;">
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
primitiveUnits="objectBoundingBox">
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw"/>
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa"/>
<feComponentTransfer in="ltoa" result="ltoa_inverse">
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
<feComponentTransfer in="ltoa" result="ltoa_inverse">
<feFuncA type="table" tableValues="0 1" />
</feComponentTransfer>
<feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4"/>
<feComponentTransfer in="pink_edges" result="pink">
<feFuncR type="table" tableValues="0.7765 0"/>
<feFuncG type="table" tableValues="0.1451 0"/>
<feFuncB type="table" tableValues="0.4902 0"/>
</feComponentTransfer>
<feOffset in="pink" result="pink_shift" dx="-0.002"/>
<feConvolveMatrix in="ltoa_inverse" result="pink_edges"
kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
<feComponentTransfer in="pink_edges" result="pink">
<feFuncR type="table" tableValues="0.7765 0" />
<feFuncG type="table" tableValues="0.1451 0" />
<feFuncB type="table" tableValues="0.4902 0" />
</feComponentTransfer>
<feOffset in="pink" result="pink_shift" dx="-0.002" />
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4"/>
<feComponentTransfer in="cyan_edges" result="cyan">
<feFuncR type="table" tableValues="0.2941 0"/>
<feFuncG type="table" tableValues="0.6784 0"/>
<feFuncB type="table" tableValues="0.8471 0"/>
</feComponentTransfer>
<feOffset in="cyan" result="cyan_shift" dx="0.002"/>
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
<feComponentTransfer in="cyan_edges" result="cyan">
<feFuncR type="table" tableValues="0.2941 0" />
<feFuncG type="table" tableValues="0.6784 0" />
<feFuncB type="table" tableValues="0.8471 0" />
</feComponentTransfer>
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
<feMerge result="pink_cyan_shift">
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="pink_shift"/>
<feMergeNode in="cyan_shift"/>
</feMerge>
<feMerge result="pink_cyan_shift">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="pink_shift" />
<feMergeNode in="cyan_shift" />
</feMerge>
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise"/>
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02"/>
<feOffset in="distorted_raw" result="distorted"/>
</filter>
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
<feOffset in="distorted_raw" result="distorted" />
</filter>
<g filter="url(#filter0)">
<image href="" width="100%" height="100%" />
</g>
</svg>
</div>
<button id="download" disabled>
Download Result
</button>
<g filter="url(#filter0)">
<image href="" width="100%" height="100%"/>
</g>
</svg>
</div>
</main>
</div>
<button id="download" disabled>
Download Result
</button>
</div>
</main>
</div>
<script src="../assets/script/generator.js" type="text/javascript"></script>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
<script src="../assets/script/generator.js" type="text/javascript"></script>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</body>
</html>

47
styleguide/index.html
View file

@ -9,29 +9,32 @@
</head>
<body>
<header>
<img src="assets/image/logo_eventname_glow.svg" class="header-image"
alt="Logo of Easterhegg 2025. In the style of a neon sign:
<header>
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li class="active"><a href=""><i data-icon="home"></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>
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
<h1>Styleguide Easterhegg 2025</h1>
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li class="active"><a href=""><i data-icon="home"></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>
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
<h1>Styleguide Easterhegg 2025</h1>
</main>
<script src="assets/script/styleguide.js" type="text/javascript"></script>
</div>
</main>
<script src="assets/script/styleguide.js" type="text/javascript"></script>
</div>
</body>
</html>

170
styleguide/typography/index.html
View file

@ -9,91 +9,93 @@
</head>
<body>
<header>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
<h1>Typography</h1>
<div class="layout-column">
<table class="row-hover">
<thead>
<tr>
<th>Type</th>
<th>Font size</th>
<th>Font family</th>
</tr>
</thead>
<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>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 2</th>
<td>32px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 3</th>
<td>24px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 4</th>
<td>18px</td>
<td>Argon Glow</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>
<header>
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<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>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</div>
</main>
</div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</nav>
<main>
<h1>Typography</h1>
<div class="layout-column">
<table class="row-hover">
<thead>
<tr>
<th>Type</th>
<th>Font size</th>
<th>Font family</th>
</tr>
</thead>
<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>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 2</th>
<td>32px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 3</th>
<td>24px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 4</th>
<td>18px</td>
<td>Argon Glow</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>
<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 src="../assets/script/styleguide.js" type="text/javascript"></script>
</body>
</html>
</html>