162 lines
6.5 KiB
HTML
162 lines
6.5 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="shortcut icon" href="assets/image/favicon.png" />
|
|
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css" />
|
|
<title>Styleguide</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 class="active">
|
|
<a href=""><i data-icon="home"></i>Overview</a>
|
|
</li>
|
|
<li>
|
|
<a href="colors"><i data-icon="pen"></i>Colors</a>
|
|
</li>
|
|
<li>
|
|
<a href="typography"><i data-icon="font"></i>Typography</a>
|
|
</li>
|
|
<li>
|
|
<a href="iconography"><i data-icon="info"></i>Iconography</a>
|
|
</li>
|
|
<li>
|
|
<a href="logo"><i data-icon="hare_head"></i>Logo</a>
|
|
</li>
|
|
<li>
|
|
<a href="glow"><i data-icon="lightbulb"></i>Glow</a>
|
|
</li>
|
|
<li>
|
|
<a href="doodles"><i data-icon="looping"></i>Doodles</a>
|
|
</li>
|
|
<li>
|
|
<a href="demopage"><i data-icon="code"></i>Demopage</a>
|
|
</li>
|
|
<li>
|
|
<a href="generator"><i data-icon="settings"></i>Image Generator</a>
|
|
</li>
|
|
<li>
|
|
<a href="changelog"><i data-icon="history"></i>Changelog</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="lightbulb"></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="lightbulb"></i>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
<h1>Styleguide Easterhegg 2025</h1>
|
|
<p>
|
|
This page and subpages are meant to guide you through our design.
|
|
While we do propose some rules, we generally don't want to restrict
|
|
you to much in creating something. So for most design properties, if
|
|
one doesn't work for your use-case, then try and adapt that property
|
|
to make it work for you. This style guide is supposed to help you and
|
|
not prevent you from being creative.
|
|
</p>
|
|
|
|
<h2>Design Idea</h2>
|
|
<p>
|
|
The design aims to imitate the style of 80s' retro and neon signs.
|
|
During the design process, we interenally used keywords like "Tokyo
|
|
Nightcity", "Neon", "Glitchy" and "Tron" to describe our ideas, and we
|
|
hope this carries over.
|
|
</p>
|
|
<p>
|
|
We primarily focused on the dark theme as the primary design
|
|
characteristics are the neon-glow and neon-sign-font which you can see
|
|
in the headings, title image and navigation elements. But we did also
|
|
create a light mode to make content more accesible and available for
|
|
more people. But because the neon-effect doesn't really work on a
|
|
bright background out of the box, we tried to instead convey the look
|
|
of turned off neon signs or neon signs under daylight.
|
|
</p>
|
|
<p>
|
|
We recommend reading through all sections linked to in the site's
|
|
navigation, but if you just want a quick overview of design elements,
|
|
you can focus on
|
|
<a href="demopage/"
|
|
>the demopage containing a preview of most things</a
|
|
>. Most pages also include more detailed explanations for our design
|
|
decisions.
|
|
</p>
|
|
|
|
<h2>Credit and Disclaimer</h2>
|
|
<p>
|
|
We (<a href="https://kzl.sh/">kritzl</a>,
|
|
<a href="https://lyx.sh/">traumweh</a> &
|
|
<a href="https://chaos.social/@schrottkatze">Schrottkatze</a>) created
|
|
this design and guide through many months of hard work. And
|
|
considering the current hype reguarding "AI" (LLMs & GenAI), we want
|
|
to make it clear, that we didn't use any such tooling at any point in
|
|
the design process. All work was done by living beings.
|
|
</p>
|
|
<p>
|
|
This is also why we would kindly ask you to consider not to use LLMs
|
|
or GenAI yourself when creating something for this event. These tools
|
|
are built on theft and actively harm all creative industries. Not to
|
|
mention how devastating they are for our planet. Instead, maybe take
|
|
this as motivation for you to learn how to achieve the desired thing
|
|
yourself, or connect with the community. There are many artists who'd
|
|
be happy to help you create something incredible.
|
|
</p>
|
|
</main>
|
|
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
|
</div>
|
|
</body>
|
|
</html>
|