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

Merge font preview into table
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
lilith 2025-03-06 02:06:09 +01:00
commit d9d85a8a63
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
1 changed files with 56 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

115
styleguide/typography/index.html
View file

@ -159,67 +159,64 @@
</dl>
<h2>Font Table</h2>
<div class="layout-column">
<table class="row-hover">
<thead>
<tr>
<th>Type</th>
<th>Font size</th>
<th>Font family</th>
</tr>
</thead>
<table class="row-hover">
<thead>
<tr>
<th scope="row">Main Title</th>
<td>72px</td>
<td>Argon Glow</td>
<th>Type</th>
<th>Font size</th>
<th>Font family</th>
<th>Preview</th>
</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>
</thead>
<tr>
<th scope="row">Main Title</th>
<td>72px</td>
<td>Argon Glow</td>
<td><span class="main-title">Main Title</span></td>
</tr>
<tr>
<th scope="row">Heading 1</th>
<td>48px</td>
<td>Argon Glow</td>
<td><span class="h1">Heading 1</span></td>
</tr>
<tr>
<th scope="row">Heading 2</th>
<td>32px</td>
<td>Argon Glow</td>
<td><span class="h2">Heading 2</span></td>
</tr>
<tr>
<th scope="row">Heading 3</th>
<td>24px</td>
<td>Argon Glow</td>
<td><span class="h3">Heading 3</span></td>
</tr>
<tr>
<th scope="row">Heading 4</th>
<td>18px</td>
<td>Argon Glow</td>
<td><span class="h4">Heading 4</span></td>
</tr>
<tr>
<th scope="row">Subheading</th>
<td>24px</td>
<td>Athiti</td>
<td><span class="subheading">Subheading</span></td>
</tr>
<tr>
<th scope="row">Paragraph</th>
<td>16px</td>
<td>Athiti</td>
<td><span class="p">Paragraph</span></td>
</tr>
<tr>
<th scope="row">Code</th>
<td>16px</td>
<td>Departure Mono</td>
<td><span class="code">Code</span></td>
</tr>
</table>
<p>
If you want to add syntax highlighting to your code, you can use the
following formatting (also available as CSS classes using the same