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
|
|
@ -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- & Background</span>
|
||||
<section aria-labelledby="label-dark-fore-background">
|
||||
<span id="label-dark-fore-background">Fore- & 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 & Secondary</span>
|
||||
<section aria-labelledby="label-dark-primary-secondary">
|
||||
<span id="label-dark-primary-secondary">Primary & 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 & Success</span>
|
||||
<section aria-labelledby="label-dark-error-success">
|
||||
<span id="label-dark-error-success">Error & 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- & 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 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>
|
||||
<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 & 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 & 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue