CCCHH/easterhegg-eh22-website
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add wiki dump and instructions

Browse source
This commit is contained in:
jtbx 2026-01-02 22:57:08 +01:00
commit 37f9cc3fd1
449 changed files with 44307 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

162
eh22.easterhegg.eu/design/index.html Normal file
View file

@ -0,0 +1,162 @@
<!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="../index.html" 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="../index.html"><i data-icon="arrow_left"></i>Back to Wiki</a>
</li>
<li class="active">
<a href="index.html"><i data-icon="home"></i>Overview</a>
</li>
<li>
<a href="colors.html"><i data-icon="pen"></i>Colors</a>
</li>
<li>
<a href="typography.html"><i data-icon="font"></i>Typography</a>
</li>
<li>
<a href="iconography.html"><i data-icon="info"></i>Iconography</a>
</li>
<li>
<a href="logo.html"><i data-icon="hare_head"></i>Logo</a>
</li>
<li>
<a href="glow.html"><i data-icon="lightbulb"></i>Glow</a>
</li>
<li>
<a href="doodles.html"><i data-icon="looping"></i>Doodles</a>
</li>
<li>
<a href="demopage.html"><i data-icon="code"></i>Demopage</a>
</li>
<li>
<a href="generator.html"><i data-icon="settings"></i>Image Generator</a>
</li>
<li>
<a href="changelog.html"><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.html"
>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> &amp;
<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>