Use different glow for logo in light mode
All checks were successful
/ build (push) Successful in 9s
All checks were successful
/ build (push) Successful in 9s
This commit is contained in:
parent
a0f7ad1666
commit
434c4335d5
SSH key fingerprint:
SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
13 changed files with 939 additions and 551 deletions
BIN
logo/logo_eventname_glow_off.png
Normal file
BIN
logo/logo_eventname_glow_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
140
logo/logo_eventname_glow_off.svg
Normal file
140
logo/logo_eventname_glow_off.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 63 KiB |
140
styleguide/assets/image/logo_eventname_glow_off.svg
Normal file
140
styleguide/assets/image/logo_eventname_glow_off.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -128,6 +128,12 @@
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||||
}
|
}
|
||||||
|
.dark .light-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.dark .dark-only {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
.light {
|
.light {
|
||||||
--color-foreground: var(--color-light-foreground);
|
--color-foreground: var(--color-light-foreground);
|
||||||
|
|
@ -150,6 +156,12 @@
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||||
}
|
}
|
||||||
|
.light .light-only {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
.light .dark-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
html.light {
|
html.light {
|
||||||
|
|
@ -173,6 +185,14 @@ html.light {
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
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 {
|
html.dark {
|
||||||
--color-foreground: var(--color-dark-foreground);
|
--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,
|
--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;
|
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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html {
|
html {
|
||||||
|
|
@ -218,6 +244,12 @@ html.dark {
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
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-face {
|
||||||
font-family: "Athiti";
|
font-family: "Athiti";
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -143,6 +143,14 @@ $mobile-navigation-height: 4rem;
|
||||||
--color-glow-secondary: var(--color-white);
|
--color-glow-secondary: var(--color-white);
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||||
|
|
||||||
|
.light-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-only {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin theme_light() {
|
@mixin theme_light() {
|
||||||
|
|
@ -166,6 +174,14 @@ $mobile-navigation-height: 4rem;
|
||||||
--color-glow-secondary: var(--color-krypton-950);
|
--color-glow-secondary: var(--color-krypton-950);
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||||
|
|
||||||
|
.light-only {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
|
|
||||||
|
|
@ -128,6 +128,12 @@
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||||
}
|
}
|
||||||
|
.dark .light-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.dark .dark-only {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
.light {
|
.light {
|
||||||
--color-foreground: var(--color-light-foreground);
|
--color-foreground: var(--color-light-foreground);
|
||||||
|
|
@ -150,6 +156,12 @@
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||||
}
|
}
|
||||||
|
.light .light-only {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
.light .dark-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
html.light {
|
html.light {
|
||||||
|
|
@ -173,6 +185,14 @@ html.light {
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
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 {
|
html.dark {
|
||||||
--color-foreground: var(--color-dark-foreground);
|
--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,
|
--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;
|
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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html {
|
html {
|
||||||
|
|
@ -218,6 +244,12 @@ html.dark {
|
||||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
--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;
|
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-face {
|
||||||
font-family: "Athiti";
|
font-family: "Athiti";
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -9,234 +9,236 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
|
<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:
|
||||||
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 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." />
|
||||||
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:
|
||||||
</header>
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||||
<div>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
<nav>
|
</header>
|
||||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
<div>
|
||||||
<ul>
|
<nav>
|
||||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
<ul>
|
||||||
<li class="active"><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
<li class="active"><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
</ul>
|
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||||
</nav>
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<main>
|
</ul>
|
||||||
<h1>Color Guide</h1>
|
</nav>
|
||||||
<p>
|
<main>
|
||||||
|
<h1>Color Guide</h1>
|
||||||
|
<p>
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Digital Media</h2>
|
<h2>Digital Media</h2>
|
||||||
<div class="layout-column">
|
<div class="layout-column">
|
||||||
<div class="dark swatch-grid">
|
<div class="dark swatch-grid">
|
||||||
<h3>Darkmode</h3>
|
<h3>Darkmode</h3>
|
||||||
|
|
||||||
<section aria-labelledby="label-dark-fore-background">
|
<section aria-labelledby="label-dark-fore-background">
|
||||||
<span id="label-dark-fore-background">Fore- & Background</span>
|
<span id="label-dark-fore-background">Fore- & Background</span>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
|
||||||
<span id="label-dark-swatch-foreground">#f2f0f5</span>
|
<span id="label-dark-swatch-foreground">#f2f0f5</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-background" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-background" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
|
||||||
<span id="label-dark-swatch-background">#0c011f</span>
|
<span id="label-dark-swatch-background">#0c011f</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section aria-labelledby="label-dark-shades">
|
<section aria-labelledby="label-dark-shades">
|
||||||
<span id="label-dark-shades">Shades</span>
|
<span id="label-dark-shades">Shades</span>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
|
||||||
<span id="label-dark-swatch-shade-1">#56023c</span>
|
<span id="label-dark-swatch-shade-1">#56023c</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
|
||||||
<span id="label-dark-swatch-shade-2">#6d0449</span>
|
<span id="label-dark-swatch-shade-2">#6d0449</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
|
||||||
<span id="label-dark-swatch-shade-3">#830755</span>
|
<span id="label-dark-swatch-shade-3">#830755</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
|
||||||
<span id="label-dark-swatch-shade-4">#9a0a61</span>
|
<span id="label-dark-swatch-shade-4">#9a0a61</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section aria-labelledby="label-dark-primary-secondary">
|
<section aria-labelledby="label-dark-primary-secondary">
|
||||||
<span id="label-dark-primary-secondary">Primary & Secondary</span>
|
<span id="label-dark-primary-secondary">Primary & Secondary</span>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
|
||||||
<span id="label-dark-swatch-primary">#c6257d</span>
|
<span id="label-dark-swatch-primary">#c6257d</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
|
||||||
<span id="label-dark-swatch-secondary">#4dadd8</span>
|
<span id="label-dark-swatch-secondary">#4dadd8</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section aria-labelledby="label-dark-error-success">
|
<section aria-labelledby="label-dark-error-success">
|
||||||
<span id="label-dark-error-success">Error & Success</span>
|
<span id="label-dark-error-success">Error & Success</span>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-error" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-error" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
|
||||||
<span id="label-dark-swatch-error">#bb2626</span>
|
<span id="label-dark-swatch-error">#bb2626</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-success" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-success" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
|
||||||
<span id="label-dark-swatch-success">#54aa18</span>
|
<span id="label-dark-swatch-success">#54aa18</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section aria-labelledby="label-dark-accents">
|
<section aria-labelledby="label-dark-accents">
|
||||||
<span id="label-dark-accents">Accents</span>
|
<span id="label-dark-accents">Accents</span>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
|
||||||
<span id="label-dark-swatch-accent-1">#60a5f9</span>
|
<span id="label-dark-swatch-accent-1">#60a5f9</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
|
||||||
<span id="label-dark-swatch-accent-2">#d381f7</span>
|
<span id="label-dark-swatch-accent-2">#d381f7</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
|
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
|
||||||
<span id="label-dark-swatch-accent-3">#ff7975</span>
|
<span id="label-dark-swatch-accent-3">#ff7975</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="light swatch-grid">
|
||||||
|
<h3>Lightmode</h3>
|
||||||
|
|
||||||
|
<section aria-labelledby="label-light-fore-background">
|
||||||
|
<span id="label-light-fore-background">Fore- & 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 & 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 & 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>
|
||||||
|
|
||||||
<div class="light swatch-grid">
|
<h2>Printing</h2>
|
||||||
<h3>Lightmode</h3>
|
<p>
|
||||||
|
Our primary and secondary colors are also defined for CMYK printing:
|
||||||
<section aria-labelledby="label-light-fore-background">
|
</p>
|
||||||
<span id="label-light-fore-background">Fore- & 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>
|
|
||||||
|
|
||||||
|
<div class="swatch-grid">
|
||||||
<section aria-labelledby="label-light-primary-secondary">
|
<section aria-labelledby="label-light-primary-secondary">
|
||||||
<span id="label-light-primary-secondary">Primary & Secondary</span>
|
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
|
||||||
|
|
||||||
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
|
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
|
||||||
<span id="label-light-swatch-primary">#9a0a61</span>
|
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
|
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
|
||||||
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
|
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
|
||||||
<span id="label-light-swatch-secondary">#167fac</span>
|
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section aria-labelledby="label-light-error-success">
|
|
||||||
<span id="label-light-error-success">Error & 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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||||
<h2>Printing</h2>
|
</div>
|
||||||
<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>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -9,196 +9,213 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
|
<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:
|
||||||
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 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." />
|
||||||
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:
|
||||||
</header>
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||||
<div>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
<nav>
|
</header>
|
||||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
<div>
|
||||||
<ul>
|
<nav>
|
||||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
<ul>
|
||||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||||
<li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
|
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
</ul>
|
<li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
|
||||||
</nav>
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<main>
|
</ul>
|
||||||
<h1>Testdocument</h1>
|
</nav>
|
||||||
<p>Tests for Fonts and Colorpalettes</p>
|
<main>
|
||||||
|
<h1>Testdocument</h1>
|
||||||
|
<p>Tests for Fonts and Colorpalettes</p>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Section With Links</h2>
|
<h2>Section With Links</h2>
|
||||||
<table>
|
<table>
|
||||||
<caption>Overview of link highlighting</caption>
|
<caption>Overview of link highlighting</caption>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">Regular Link:</th>
|
<th scope="row">Regular Link:</th>
|
||||||
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
|
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">Hover/Focus/Active Link:</th>
|
<th scope="row">Hover/Focus/Active Link:</th>
|
||||||
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">Visited Link:</th>
|
<th scope="row">Visited Link:</th>
|
||||||
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
|
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Section With Text</h2>
|
<h2>Section With Text</h2>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||||
labore et
|
labore et
|
||||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
||||||
Stet
|
rebum.
|
||||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
Stet
|
||||||
amet,
|
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||||
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
|
amet,
|
||||||
erat,
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||||
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
|
aliquyam
|
||||||
no
|
erat,
|
||||||
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
|
||||||
</p>
|
gubergren,
|
||||||
|
no
|
||||||
|
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h3>Subsection Title</h3>
|
<h3>Subsection Title</h3>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||||
labore et
|
labore et
|
||||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
||||||
Stet
|
rebum.
|
||||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
Stet
|
||||||
amet,
|
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||||
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
|
amet,
|
||||||
erat,
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||||
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
|
aliquyam
|
||||||
no
|
erat,
|
||||||
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
|
||||||
</p>
|
gubergren,
|
||||||
|
no
|
||||||
|
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h4>Subsubsection Title</h4>
|
<h4>Subsubsection Title</h4>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||||
labore et
|
labore et
|
||||||
dolore magna aliquyam erat, sed diam voluptua.
|
dolore magna aliquyam erat, sed diam voluptua.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Section With Code</h2>
|
<h2>Section With Code</h2>
|
||||||
<pre><code>#include <stdlib.h>
|
<pre><code>#include <stdlib.h>
|
||||||
|
|
||||||
int *positives(int *numbers, int *size) {
|
int *positives(int *numbers, int *size) {
|
||||||
int new_size = 0;
|
int new_size = 0;
|
||||||
|
|
||||||
for (int i = 0; i < *size; i++) {
|
for (int i = 0; i < *size; i++) {
|
||||||
if (numbers[i] >= 0) {
|
if (numbers[i] >= 0) {
|
||||||
numbers[new_size] = numbers[i];
|
numbers[new_size] = numbers[i];
|
||||||
new_size++;
|
new_size++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
*size = new_size;
|
*size = new_size;
|
||||||
return realloc(numbers, sizeof(*numbers) * new_size);
|
return realloc(numbers, sizeof(*numbers) * new_size);
|
||||||
}</code></pre>
|
}</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Section With Image</h2>
|
<h2>Section With Image</h2>
|
||||||
<p>
|
<p>
|
||||||
When including images in your content, you can opt into applying an SVG filter that adds visual glitches
|
When including images in your content, you can opt into applying an SVG filter that adds visual
|
||||||
to
|
glitches
|
||||||
the image. This shouldn't be used on images with text or important details, because the glitches will
|
to
|
||||||
most
|
the image. This shouldn't be used on images with text or important details, because the glitches
|
||||||
likely reduce readability. Let's use the following plain image:
|
will
|
||||||
</p>
|
most
|
||||||
<figure>
|
likely reduce readability. Let's use the following plain image:
|
||||||
<img src="../assets/image/example_cat.jpg"
|
</p>
|
||||||
alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
|
<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
|
of leopard-print fabric and looking at something behind the camera. The background is dark and
|
||||||
plain."/>
|
plain." />
|
||||||
<figcaption>Example image without any distortion applied.</figcaption>
|
<figcaption>Example image without any distortion applied.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<p>
|
<p>
|
||||||
Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG filter
|
Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG
|
||||||
dynamically. But we also made <a href="../generator">a simple web-tool to apply the filter</a> to an
|
filter
|
||||||
image
|
dynamically. But we also made <a href="../generator">a simple web-tool to apply the filter</a> to an
|
||||||
and export it as a PNG. The tool also scales the image down if its vertical size is larger than 1000
|
image
|
||||||
pixels. This is done
|
and export it as a PNG. The tool also scales the image down if its vertical size is larger than 1000
|
||||||
to ensure that the filter looks similar across all images.
|
pixels. This is done
|
||||||
</p>
|
to ensure that the filter looks similar across all images.
|
||||||
<figure>
|
</p>
|
||||||
<img class="glitch" src="../assets/image/example_cat.jpg"
|
<figure>
|
||||||
alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
|
<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
|
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
|
one distorts the image by offsetting parts of the image horizontally by seemingly random yet
|
||||||
somewhat osscilating amounts."/>
|
somewhat osscilating amounts." />
|
||||||
<figcaption>Example image with visual glitches applied.</figcaption>
|
<figcaption>Example image with visual glitches applied.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Section With Lists</h2>
|
<h2>Section With Lists</h2>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||||
labore et
|
labore et
|
||||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
||||||
Stet
|
rebum.
|
||||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
Stet
|
||||||
</p>
|
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||||
<ol>
|
</p>
|
||||||
<li>Short item no. 1.</li>
|
<ol>
|
||||||
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into
|
<li>Short item no. 1.</li>
|
||||||
the
|
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
|
||||||
next line and therefore moves the next item further down.
|
into
|
||||||
</li>
|
the
|
||||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next
|
next line and therefore moves the next item further down.
|
||||||
line,
|
</li>
|
||||||
but there is no next item to move.
|
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the
|
||||||
</li>
|
next
|
||||||
</ol>
|
line,
|
||||||
<p>
|
but there is no next item to move.
|
||||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
</li>
|
||||||
labore et
|
</ol>
|
||||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
<p>
|
||||||
Stet
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
labore et
|
||||||
</p>
|
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>
|
<h3>Subsection Title</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Short item no. 1.</li>
|
<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
|
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
|
||||||
the
|
into
|
||||||
next line and therefore moves the next item further down.
|
the
|
||||||
</li>
|
next line and therefore moves the next item further down.
|
||||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next
|
</li>
|
||||||
line,
|
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the
|
||||||
but there is no next item to move.
|
next
|
||||||
</li>
|
line,
|
||||||
</ol>
|
but there is no next item to move.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
<h3>Subsection Title</h3>
|
<h3>Subsection Title</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Short item no. 1.</li>
|
<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
|
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
|
||||||
the
|
into
|
||||||
next line and therefore moves the next item further down.
|
the
|
||||||
</li>
|
next line and therefore moves the next item further down.
|
||||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next
|
</li>
|
||||||
line,
|
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the
|
||||||
but there is no next item to move.
|
next
|
||||||
</li>
|
line,
|
||||||
</ul>
|
but there is no next item to move.
|
||||||
</section>
|
</li>
|
||||||
</main>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
</main>
|
||||||
|
</div>
|
||||||
|
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -9,88 +9,92 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="height: 100vh;">
|
<body style="height: 100vh;">
|
||||||
<header>
|
<header>
|
||||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
|
<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:
|
||||||
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 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." />
|
||||||
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:
|
||||||
</header>
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||||
<div>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
<nav>
|
</header>
|
||||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
<div>
|
||||||
<ul>
|
<nav>
|
||||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
<ul>
|
||||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
|
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
</ul>
|
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||||
</nav>
|
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<main class="generator">
|
</ul>
|
||||||
<div>
|
</nav>
|
||||||
|
<main class="generator">
|
||||||
<div>
|
<div>
|
||||||
<input id="file_input" type="file" name="image" accept="image/*">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<img id="source_img" src=""/>
|
<div>
|
||||||
<i data-icon="arrow-down"></i>
|
<input id="file_input" type="file" name="image" accept="image/*">
|
||||||
<img id="result_img" src=""/>
|
</div>
|
||||||
|
|
||||||
<div style="display: none;">
|
<img id="source_img" src="" />
|
||||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
<i data-icon="arrow-down"></i>
|
||||||
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
<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">
|
primitiveUnits="objectBoundingBox">
|
||||||
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw"/>
|
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
|
||||||
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa"/>
|
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
|
||||||
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||||
<feFuncA type="table" tableValues="0 1"/>
|
<feFuncA type="table" tableValues="0 1" />
|
||||||
</feComponentTransfer>
|
</feComponentTransfer>
|
||||||
|
|
||||||
<feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4"/>
|
<feConvolveMatrix in="ltoa_inverse" result="pink_edges"
|
||||||
<feComponentTransfer in="pink_edges" result="pink">
|
kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
|
||||||
<feFuncR type="table" tableValues="0.7765 0"/>
|
<feComponentTransfer in="pink_edges" result="pink">
|
||||||
<feFuncG type="table" tableValues="0.1451 0"/>
|
<feFuncR type="table" tableValues="0.7765 0" />
|
||||||
<feFuncB type="table" tableValues="0.4902 0"/>
|
<feFuncG type="table" tableValues="0.1451 0" />
|
||||||
</feComponentTransfer>
|
<feFuncB type="table" tableValues="0.4902 0" />
|
||||||
<feOffset in="pink" result="pink_shift" dx="-0.002"/>
|
</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"/>
|
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
|
||||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
|
||||||
<feFuncR type="table" tableValues="0.2941 0"/>
|
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||||
<feFuncG type="table" tableValues="0.6784 0"/>
|
<feFuncR type="table" tableValues="0.2941 0" />
|
||||||
<feFuncB type="table" tableValues="0.8471 0"/>
|
<feFuncG type="table" tableValues="0.6784 0" />
|
||||||
</feComponentTransfer>
|
<feFuncB type="table" tableValues="0.8471 0" />
|
||||||
<feOffset in="cyan" result="cyan_shift" dx="0.002"/>
|
</feComponentTransfer>
|
||||||
|
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
|
||||||
|
|
||||||
<feMerge result="pink_cyan_shift">
|
<feMerge result="pink_cyan_shift">
|
||||||
<feMergeNode in="SourceGraphic"/>
|
<feMergeNode in="SourceGraphic" />
|
||||||
<feMergeNode in="pink_shift"/>
|
<feMergeNode in="pink_shift" />
|
||||||
<feMergeNode in="cyan_shift"/>
|
<feMergeNode in="cyan_shift" />
|
||||||
</feMerge>
|
</feMerge>
|
||||||
|
|
||||||
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise"/>
|
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
|
||||||
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02"/>
|
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
|
||||||
<feOffset in="distorted_raw" result="distorted"/>
|
<feOffset in="distorted_raw" result="distorted" />
|
||||||
</filter>
|
</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>
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button id="download" disabled>
|
<script src="../assets/script/generator.js" type="text/javascript"></script>
|
||||||
Download Result
|
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../assets/script/generator.js" type="text/javascript"></script>
|
|
||||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -9,29 +9,32 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<img src="assets/image/logo_eventname_glow.svg" class="header-image"
|
<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:
|
||||||
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 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."/>
|
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||||
</header>
|
<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:
|
||||||
<div>
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||||
<nav>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
</header>
|
||||||
<ul>
|
<div>
|
||||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
<nav>
|
||||||
<li class="active"><a href=""><i data-icon="home"></i>Overview</a></li>
|
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||||
<li><a href="colors"><i data-icon="info"></i>Colors</a></li>
|
<ul>
|
||||||
<li><a href="typography"><i data-icon="info"></i>Typography</a></li>
|
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||||
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
|
<li class="active"><a href=""><i data-icon="home"></i>Overview</a></li>
|
||||||
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
|
<li><a href="colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
</ul>
|
<li><a href="typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
</nav>
|
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||||
<main>
|
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<h1>Styleguide Easterhegg 2025</h1>
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<h1>Styleguide Easterhegg 2025</h1>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -9,91 +9,93 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
|
<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:
|
||||||
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 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." />
|
||||||
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:
|
||||||
</header>
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||||
<div>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
<nav>
|
</header>
|
||||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
<div>
|
||||||
<ul>
|
<nav>
|
||||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||||
<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>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><span class="main-title">Main Title</span></li>
|
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||||
<li><span class="h1">Heading 1</span></li>
|
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||||
<li><span class="h2">Heading 2</span></li>
|
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li><span class="h3">Heading 3</span></li>
|
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
|
||||||
<li><span class="h4">Heading 4</span></li>
|
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||||
<li><span class="subheading">Subheading</span></li>
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<li><span class="p">Paragraph</span></li>
|
|
||||||
<li><span class="code">Code</span></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</nav>
|
||||||
</main>
|
<main>
|
||||||
</div>
|
<h1>Typography</h1>
|
||||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
|
||||||
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue