180 lines
6.8 KiB
HTML
180 lines
6.8 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>Icon Overview</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="pen"></i>Colors</a>
|
|
</li>
|
|
<li>
|
|
<a href="../../typography"><i data-icon="font"></i>Typography</a>
|
|
</li>
|
|
<li class="active">
|
|
<a href="../"><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>Icon Overview</h1>
|
|
<p>
|
|
This page contains an overview of all currently designed icons.<br />
|
|
<a href="..">Back to the Iconography</a>
|
|
</p>
|
|
<div class="icon-grid">
|
|
<div role="button"><i data-icon="arrow_down"></i></div>
|
|
<div><i data-icon="arrow_down_left"></i></div>
|
|
<div><i data-icon="arrow_left"></i></div>
|
|
<div><i data-icon="arrow_up_left"></i></div>
|
|
<div><i data-icon="arrow_up"></i></div>
|
|
<div><i data-icon="arrow_up_right"></i></div>
|
|
<div><i data-icon="arrow_right"></i></div>
|
|
<div><i data-icon="arrow_down_right"></i></div>
|
|
<div><i data-icon="basket"></i></div>
|
|
<div><i data-icon="bed"></i></div>
|
|
<div><i data-icon="clock"></i></div>
|
|
<div><i data-icon="code"></i></div>
|
|
<div><i data-icon="creature"></i></div>
|
|
<div><i data-icon="cross"></i></div>
|
|
<div><i data-icon="cross_small" class="icon-small"></i></div>
|
|
<div><i data-icon="cup_1"></i></div>
|
|
<div><i data-icon="cup_2"></i></div>
|
|
<div><i data-icon="dect"></i></div>
|
|
<div><i data-icon="external"></i></div>
|
|
<div><i data-icon="fairydust"></i></div>
|
|
<div><i data-icon="flag"></i></div>
|
|
<div><i data-icon="font"></i></div>
|
|
<div><i data-icon="gluten"></i></div>
|
|
<div><i data-icon="hackertours"></i></div>
|
|
<div><i data-icon="hare_head"></i></div>
|
|
<div><i data-icon="history"></i></div>
|
|
<div><i data-icon="home"></i></div>
|
|
<div><i data-icon="hygene"></i></div>
|
|
<div><i data-icon="info"></i></div>
|
|
<div><i data-icon="lightbulb"></i></div>
|
|
<div><i data-icon="link"></i></div>
|
|
<div><i data-icon="location"></i></div>
|
|
<div><i data-icon="lock"></i></div>
|
|
<div><i data-icon="login"></i></div>
|
|
<div><i data-icon="logout"></i></div>
|
|
<div><i data-icon="menu"></i></div>
|
|
<div><i data-icon="menu_small" class="icon-small"></i></div>
|
|
<div><i data-icon="merch"></i></div>
|
|
<div><i data-icon="message"></i></div>
|
|
<div><i data-icon="microphone"></i></div>
|
|
<div><i data-icon="network"></i></div>
|
|
<div><i data-icon="pen"></i></div>
|
|
<div><i data-icon="plate_and_cutlery"></i></div>
|
|
<div><i data-icon="power"></i></div>
|
|
<div><i data-icon="question"></i></div>
|
|
<div><i data-icon="schedule"></i></div>
|
|
<div><i data-icon="search"></i></div>
|
|
<div><i data-icon="settings"></i></div>
|
|
<div><i data-icon="signup"></i></div>
|
|
<div><i data-icon="soldering_iron"></i></div>
|
|
<div><i data-icon="tick"></i></div>
|
|
<div><i data-icon="tick_small" class="icon-small"></i></div>
|
|
<div><i data-icon="ticket"></i></div>
|
|
<div><i data-icon="toast"></i></div>
|
|
<div><i data-icon="train"></i></div>
|
|
<div><i data-icon="vegan"></i></div>
|
|
<div><i data-icon="warning"></i></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script
|
|
src="../../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|