wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: reorg pages

Browse source
This commit is contained in:
Devin Haska 2024-03-22 16:40:28 -07:00
parent 0e3ef370c7
commit 593f20560d
16 changed files with 8 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/pages/styleguide.html Normal file
View file

@ -0,0 +1,76 @@
---
title: Styleguide
---
<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 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>