styleguide
Typography
| Heading | Font Size |
|---|---|
h1 | 1.75em |
h2 | 1.5647em |
h3 | 1.399em |
h4 | 1.209em |
h5 | 1.1184em |
Fonts
Inter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, erat non laoreet fringilla, ex tellus commodo tellus, vel dignissim elit elit at neque. Sed fermentum dignissim sodales. Vivamus a nisl diam. Donec a orci ligula. Donec feugiat leo sed magna ultricies ullamcorper. Integer a fermentum quam.[1]
IBM Plex Mono
Phasellus sit amet lectus nec tortor tempus posuere vitae id magna. Donec ullamcorper, purus id ultricies condimentum, velit elit facilisis leo, id interdum velit tellus eget risus. Fusce condimentum tincidunt ipsum, non varius felis ultricies a. Integer tincidunt mi a odio maximus semper. Ut pharetra urna vel quam ultricies, vehicula ornare urna lacinia.[2]
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Unordered list item 4
- Unordered list item 3
- Unordered list item 5
- Unordered list item 6
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
Code
This is how inlined code looks like. [3]
You can press ↑ ↑ ↓ ↓ ← → ← → B A for a secret.
<!-- This is a pre with HTML syntax highlighting -->
<body>
<p>My favorite number is <code class="higby">65</code>!</p>
</body>
Colors
Grid
Elements
Images
HR
Blockquotes
Here's a blockquote using the cite tag[4]:
...a Blight always upholds their end of the deal.Alador Blight
And one without:
This site is made with Eleventy
Tables
| Name | Responsible |
|---|---|
| Count Chocula | Acts responsible, is not |
| Franken Berry | Is capable, but isn't |
| Boo Berry | Only when alone |
| Fruit Brute | Physically incapable |
| Yummy Mummy | Insists they're the most responsible, isn't |