107 lines
No EOL
4.6 KiB
HTML
107 lines
No EOL
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<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>Typography</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 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>
|
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
|
data-icon="light" class="glow"></i></a></li>
|
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
|
data-icon="light" class="glow"></i></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>
|
|
<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> |