EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use different glow for logo in light mode
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
lilith 2025-02-16 20:16:29 +01:00
commit 434c4335d5
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
13 changed files with 939 additions and 551 deletions
Download patch file Download diff file Expand all files Collapse all files

170
styleguide/typography/index.html
View file

@ -9,91 +9,93 @@
</head>
<body>
<header>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
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."/>
</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 class="active"><a href=""><i data-icon="info"></i>Typography</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>
</ul>
</nav>
<main>
<h1>Typography</h1>
<div class="layout-column">
<table class="row-hover">
<thead>
<tr>
<th>Type</th>
<th>Font size</th>
<th>Font family</th>
</tr>
</thead>
<tr>
<th scope="row">Main Title</th>
<td>72px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 1</th>
<td>48px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 2</th>
<td>32px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 3</th>
<td>24px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 4</th>
<td>18px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Subheading</th>
<td>24px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Paragraph</th>
<td>16px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Code</th>
<td>16px</td>
<td>Departure Mono</td>
</tr>
</table>
<header>
<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." />
</header>
<div>
<nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
<ul>
<li><span class="main-title">Main Title</span></li>
<li><span class="h1">Heading 1</span></li>
<li><span class="h2">Heading 2</span></li>
<li><span class="h3">Heading 3</span></li>
<li><span class="h4">Heading 4</span></li>
<li><span class="subheading">Subheading</span></li>
<li><span class="p">Paragraph</span></li>
<li><span class="code">Code</span></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="../colors"><i data-icon="info"></i>Colors</a></li>
<li class="active"><a href=""><i data-icon="info"></i>Typography</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>
</ul>
</div>
</main>
</div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</nav>
<main>
<h1>Typography</h1>
<div class="layout-column">
<table class="row-hover">
<thead>
<tr>
<th>Type</th>
<th>Font size</th>
<th>Font family</th>
</tr>
</thead>
<tr>
<th scope="row">Main Title</th>
<td>72px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 1</th>
<td>48px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 2</th>
<td>32px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 3</th>
<td>24px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 4</th>
<td>18px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Subheading</th>
<td>24px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Paragraph</th>
<td>16px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Code</th>
<td>16px</td>
<td>Departure Mono</td>
</tr>
</table>
<ul>
<li><span class="main-title">Main Title</span></li>
<li><span class="h1">Heading 1</span></li>
<li><span class="h2">Heading 2</span></li>
<li><span class="h3">Heading 3</span></li>
<li><span class="h4">Heading 4</span></li>
<li><span class="subheading">Subheading</span></li>
<li><span class="p">Paragraph</span></li>
<li><span class="code">Code</span></li>
</ul>
</div>
</main>
</div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</body>
</html>
</html>