Add empty logo and iconography page; update nav
This commit is contained in:
parent
712c32d3d5
commit
c43c01ef48
7 changed files with 172 additions and 46 deletions
|
|
@ -13,10 +13,10 @@
|
||||||
<a href="/" id="backToWiki">
|
<a href="/" id="backToWiki">
|
||||||
<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:
|
<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 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:
|
<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 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."/>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -25,14 +25,16 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></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="../"><i data-icon="home"></i>Overview</a></li>
|
||||||
<li class="active"><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
<li class="active"><a href=""><i data-icon="info"></i>Colors</a></li>
|
||||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
|
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||||
|
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</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>
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,10 @@
|
||||||
<a href="/" id="backToWiki">
|
<a href="/" id="backToWiki">
|
||||||
<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:
|
<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 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:
|
<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 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."/>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -27,12 +27,14 @@
|
||||||
<li><a href="../"><i data-icon="home"></i>Overview</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="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
|
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||||
|
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||||
<li class="active"><a href=""><i data-icon="info"></i>Demopage</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>
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
|
|
@ -145,7 +147,7 @@
|
||||||
<figure>
|
<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
|
<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>
|
||||||
|
|
@ -161,7 +163,7 @@
|
||||||
<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
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,10 @@
|
||||||
<a href="/" id="backToWiki">
|
<a href="/" id="backToWiki">
|
||||||
<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:
|
<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 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:
|
<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 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."/>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -27,12 +27,14 @@
|
||||||
<li><a href="../"><i data-icon="home"></i>Overview</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="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
|
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||||
|
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</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>
|
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
|
|
@ -51,51 +53,51 @@
|
||||||
<input id="file_input" type="file" name="image" accept="image/*">
|
<input id="file_input" type="file" name="image" accept="image/*">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img id="source_img" src=""/>
|
<img id="source_img" src="" />
|
||||||
<i data-icon="arrow-down"></i>
|
<i data-icon="arrow-down"></i>
|
||||||
<img id="result_img" src=""/>
|
<img id="result_img" src="" />
|
||||||
|
|
||||||
<div style="display: none;">
|
<div style="display: none;">
|
||||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||||
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
<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"
|
<feConvolveMatrix in="ltoa_inverse" result="pink_edges"
|
||||||
kernelMatrix="-4 0 4 0 0 0 -4 0 4"/>
|
kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
|
||||||
<feComponentTransfer in="pink_edges" result="pink">
|
<feComponentTransfer in="pink_edges" result="pink">
|
||||||
<feFuncR type="table" tableValues="0.7765 0"/>
|
<feFuncR type="table" tableValues="0.7765 0" />
|
||||||
<feFuncG type="table" tableValues="0.1451 0"/>
|
<feFuncG type="table" tableValues="0.1451 0" />
|
||||||
<feFuncB type="table" tableValues="0.4902 0"/>
|
<feFuncB type="table" tableValues="0.4902 0" />
|
||||||
</feComponentTransfer>
|
</feComponentTransfer>
|
||||||
<feOffset in="pink" result="pink_shift" dx="-0.002"/>
|
<feOffset in="pink" result="pink_shift" dx="-0.002" />
|
||||||
|
|
||||||
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
|
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
|
||||||
kernelMatrix="4 0 -4 0 0 0 4 0 -4"/>
|
kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
|
||||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||||
<feFuncR type="table" tableValues="0.2941 0"/>
|
<feFuncR type="table" tableValues="0.2941 0" />
|
||||||
<feFuncG type="table" tableValues="0.6784 0"/>
|
<feFuncG type="table" tableValues="0.6784 0" />
|
||||||
<feFuncB type="table" tableValues="0.8471 0"/>
|
<feFuncB type="table" tableValues="0.8471 0" />
|
||||||
</feComponentTransfer>
|
</feComponentTransfer>
|
||||||
<feOffset in="cyan" result="cyan_shift" dx="0.002"/>
|
<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)">
|
<g filter="url(#filter0)">
|
||||||
<image href="" width="100%" height="100%"/>
|
<image href="" width="100%" height="100%" />
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
58
styleguide/iconography/index.html
Normal file
58
styleguide/iconography/index.html
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||||
|
<title>Iconography</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<a href="/" id="backToWiki">
|
||||||
|
<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." />
|
||||||
|
</a>
|
||||||
|
</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>Iconography</a></li>
|
||||||
|
<li><a href="../logo"><i data-icon="info"></i>Logo</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>
|
||||||
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
||||||
|
data-icon="light" class="glow"></i></a></li>
|
||||||
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
||||||
|
data-icon="light" class="glow"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<div class="alert">
|
||||||
|
<i data-icon="warning"></i>
|
||||||
|
<p>
|
||||||
|
<strong>Work in progress</strong>
|
||||||
|
This style guide is still under development.<br>
|
||||||
|
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||||
|
change without notice.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Iconography</h1>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -13,10 +13,10 @@
|
||||||
<a href="/" id="backToWiki">
|
<a href="/" id="backToWiki">
|
||||||
<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:
|
<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 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:
|
<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 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."/>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -27,12 +27,14 @@
|
||||||
<li class="active"><a href=""><i data-icon="home"></i>Overview</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="colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li><a href="typography"><i data-icon="info"></i>Typography</a></li>
|
<li><a href="typography"><i data-icon="info"></i>Typography</a></li>
|
||||||
|
<li><a href="iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||||
|
<li><a href="logo"><i data-icon="info"></i>Logo</a></li>
|
||||||
<li><a href="demopage"><i data-icon="info"></i>Demopage</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>
|
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
58
styleguide/logo/index.html
Normal file
58
styleguide/logo/index.html
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||||
|
<title>Logo</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<a href="/" id="backToWiki">
|
||||||
|
<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." />
|
||||||
|
</a>
|
||||||
|
</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="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||||
|
<li class="active"><a href=""><i data-icon="info"></i>Logo</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>
|
||||||
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
||||||
|
data-icon="light" class="glow"></i></a></li>
|
||||||
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
||||||
|
data-icon="light" class="glow"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<div class="alert">
|
||||||
|
<i data-icon="warning"></i>
|
||||||
|
<p>
|
||||||
|
<strong>Work in progress</strong>
|
||||||
|
This style guide is still under development.<br>
|
||||||
|
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||||
|
change without notice.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Logo</h1>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -13,10 +13,10 @@
|
||||||
<a href="/" id="backToWiki">
|
<a href="/" id="backToWiki">
|
||||||
<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:
|
<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 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:
|
<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 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."/>
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -27,12 +27,14 @@
|
||||||
<li><a href="../"><i data-icon="home"></i>Overview</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="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||||
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
|
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
|
||||||
|
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||||
|
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</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>
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||||
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
||||||
data-icon="light" class="glow"></i></a></li>
|
data-icon="light" class="glow"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue