225 lines
9.2 KiB
HTML
225 lines
9.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<script>
|
|
const setTheme = (theme) => {
|
|
theme ??= localStorage.theme || "system";
|
|
document.getElementById("themeLight").checked = theme === "light";
|
|
document.getElementById("themeDark").checked = theme === "dark";
|
|
localStorage.theme = theme;
|
|
};
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
setTheme();
|
|
});
|
|
</script>
|
|
<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="../glow"><i data-icon="info"></i>Glow</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 id="themeToggleDark" class="themeToggle">
|
|
<input
|
|
id="themeDark"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeDark">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</li>
|
|
<li id="themeToggleLight" class="themeToggle">
|
|
<input
|
|
id="themeLight"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeLight">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</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>
|
|
<p>
|
|
One of the primary design elements of any design is of course its
|
|
logo. But because a single logo doesn't fit each use-case, e.g. in
|
|
terms of aspect ratio or detail, we created multiple variants. On top
|
|
of that, each variant also has its separate dark and light theme
|
|
variants, in case the logo is used on a light background. But in
|
|
general, as with the entire design, dark mode is the preferred
|
|
representaton. All logo files (with and without transparency or glow
|
|
and in both light and dark mode) can be found in the design repository
|
|
(not yet published).
|
|
</p>
|
|
<!-- TODO: Link to repository or other form of logo collection -->
|
|
|
|
<h2>Full Logo</h2>
|
|
<p>
|
|
The most present logo consists of the hare and egg, as well as the
|
|
motto <i>Unhandled Eggception</i> and the eventname
|
|
<i>Easterhegg 2025</i>. It is used on this website and can be used as
|
|
a banner, title image or for posters and similar. The eventname on it
|
|
is optional, variants without it can be found—as all other logo
|
|
files—using the link above.
|
|
</p>
|
|
<div class="layout-column">
|
|
<img
|
|
src="../assets/image/logos_dark/logo_eventname.png"
|
|
class="dark background"
|
|
alt="Full 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 with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
|
/>
|
|
<img
|
|
src="../assets/image/logos_light/logo_eventname.png"
|
|
class="light background"
|
|
alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly."
|
|
/>
|
|
</div>
|
|
|
|
<h2>EH22 Logo</h2>
|
|
<p>
|
|
Especially useful for our matrix space, this logo variant featuring
|
|
only the "EH22" lettering has a more rectangular appearance and is
|
|
therefore useful for profile-esque pictures, where the eventname might
|
|
not always be visible, e.g. in a collapsed room-overview in the
|
|
Element matrix client.
|
|
</p>
|
|
<div class="layout-column">
|
|
<img
|
|
src="../assets/image/logos_dark/logo_eh22.png"
|
|
class="dark background"
|
|
alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos."
|
|
/>
|
|
<img
|
|
src="../assets/image/logos_light/logo_eh22.png"
|
|
class="light background"
|
|
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
|
/>
|
|
</div>
|
|
|
|
<h2>Icon Logos</h2>
|
|
<p>
|
|
The following logo variants are all intended for a similar
|
|
profile-esque use-case as the EH22 logo above. The main difference is,
|
|
that they don't have an explicit mention of the eventname. Meaning
|
|
they should preferably be used, if the eventname is always visible
|
|
(e.g. via the display name on the
|
|
<a href="https://chaos.social/@easterhegg2025"
|
|
>Easterhegg 2025 mastodon account</a
|
|
>) or the association is clear e.g. because it's a channel icon inside
|
|
the EH22 matrix space. But this is not a super strict policy. They can
|
|
of course also be used as simple design elements.
|
|
</p>
|
|
<div class="layout-column">
|
|
<img
|
|
src="../assets/image/logos_dark/logo_icons.png"
|
|
class="dark background"
|
|
alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare."
|
|
/>
|
|
<img
|
|
src="../assets/image/logos_light/logo_icons.png"
|
|
class="light background"
|
|
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
|
/>
|
|
</div>
|
|
|
|
<div class="layout-column">
|
|
<img
|
|
src="../assets/image/logos_dark/logo_egg.png"
|
|
class="dark background"
|
|
alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before."
|
|
/>
|
|
<img
|
|
src="../assets/image/logos_light/logo_egg.png"
|
|
class="light background"
|
|
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
|
/>
|
|
</div>
|
|
|
|
<div class="layout-column">
|
|
<img
|
|
src="../assets/image/logos_dark/logo_hare.png"
|
|
class="dark background"
|
|
alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before."
|
|
/>
|
|
<img
|
|
src="../assets/image/logos_light/logo_hare.png"
|
|
class="light background"
|
|
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
|
/>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script
|
|
src="../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|