77 lines
2 KiB
HTML
77 lines
2 KiB
HTML
---
|
|
title: Styleguide
|
|
description: A demo of the site's theme.
|
|
---
|
|
|
|
<h1>Heading one</h1>
|
|
<h2>Heading two</h2>
|
|
<h3>Heading three</h3>
|
|
<h4>Heading four</h4>
|
|
<p>Paragraph text</p>
|
|
<p>
|
|
<strong>Bold text</strong>
|
|
</p>
|
|
<p>
|
|
<em>Emphasized text</em>
|
|
</p>
|
|
<p>
|
|
<strong>
|
|
<em>Bold and emphasized text</em>
|
|
</strong>
|
|
</p>
|
|
<p>
|
|
An abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr>
|
|
</p>
|
|
<hr />
|
|
<div class="[ flex ]">
|
|
<div class="[ size-2 ]" style="background-color: var(--color-primary)"></div>
|
|
<div class="[ size-2 ]" style="background-color: var(--color-secondary)"></div>
|
|
<div class="[ size-2 ]" style="background-color: var(--color-background)"></div>
|
|
<div class="[ size-2 ]" style="background-color: var(--color-surface)"></div>
|
|
<div class="[ size-2 ]" style="background-color: var(--color-border)"></div>
|
|
<div class="[ size-2 ]" style="background-color: var(--color-text)"></div>
|
|
<div class="[ size-2 ]" style="background-color: var(--color-fadeText)"></div>
|
|
<div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
|
|
</div>
|
|
<hr />
|
|
<a href="#">A link</a>
|
|
<a href="/">A visited link</a>
|
|
<hr />
|
|
<blockquote>
|
|
<p>A blockquote</p>
|
|
<p>Here is some more text</p>
|
|
<p>And even more!</p>
|
|
</blockquote>
|
|
<hr />
|
|
<p>An unordered list</p>
|
|
<ul>
|
|
<li>Item one</li>
|
|
<li>Item two</li>
|
|
<li>Item three</li>
|
|
</ul>
|
|
<hr />
|
|
<p>An ordered list</p>
|
|
<ol>
|
|
<li>Item one</li>
|
|
<li>Item two</li>
|
|
<li>Item three</li>
|
|
</ol>
|
|
<hr />
|
|
<aside>
|
|
<p>An aside block</p>
|
|
</aside>
|
|
<hr />
|
|
<figure>
|
|
<img eleventy:ignore src="/assets/images/logo.svg" alt="" />
|
|
<figcaption>A fig caption.</figcaption>
|
|
</figure>
|
|
<hr />
|
|
<p>
|
|
This text contains usage of a <mark>mark element, and here it is</mark>.
|
|
</p>
|
|
<div style="background-color: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
padding: 1rem">A card-type component.</div>
|
|
<hr />
|
|
<div style="box-shadow: 2px 2px 8px hsl(var(--shadow) / 0.34);
|
|
padding: 1rem">This box has a shadow</div>
|