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