{{ define "styles" }}
<style>
.palette {
    display: flex;
    flex-direction: row;
}
.palette > div {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin: 0.5rem;
}
.stripes > div {
    height: 1rem;
}
.box {
    width: 3rem;
    height: 3rem;
    border: 1px solid;
    margin: 1rem;
}
.box.blue {
    border-color: var(--col-blue);
    background-color: var(--col-blue-t);
}
.box.purple {
    border-color: var(--col-purple);
    background-color: var(--col-purple-t);
}
.box.green {
    border-color: var(--col-green);
    background-color: var(--col-green-t);
}
.box.orange {
    border-color: var(--col-orange);
    background-color: var(--col-orange-t);
}
</style>
{{ end }}


{{ define "content" }}
<h1>Style</h1>
<h2>Colors - Dark</h2>
<strong>Uses:</strong> borders, highlighted text, decoration
<div class="palette">
    <div style="background: var(--col-blue);"></div>
    <div style="background: var(--col-purple);"></div>
    <div style="background: var(--col-green);"></div>
    <div style="background: var(--col-orange);"></div>      
</div>
<hr>
<h2>Colors - Light</h2>
<strong>Uses:</strong> colored text
<div class="palette">
    <div style="background: var(--col-blue-l);"></div>
    <div style="background: var(--col-purple-l);"></div>
    <div style="background: var(--col-green-l);"></div>
    <div style="background: var(--col-orange-l);"></div> 
</div>
<hr>
<h2>Colors - Tints</h2>
<strong>Uses:</strong> text highlights, contrast areas/cards
<div class="palette">
    <div style="background: var(--col-blue-t);"></div>
    <div style="background: var(--col-purple-t);"></div>
    <div style="background: var(--col-green-t);"></div>
    <div style="background: var(--col-orange-t);"></div> 
</div>
<hr>
<h2>Contrasts</h2>
<strong>Uses:</strong> text, structure, contrast areas/cards
<div class="palette">
    <div style="background: var(--col-black);"></div>
    <div style="background: var(--col-gray);"></div>
</div>
<hr>
<div class="palette">
    <div class="box blue"></div>
    <div class="box purple"></div>
    <div class="box green"></div>
    <div class="box orange"></div>
</div>
<p>
    Text with <span style="color: var(--col-blue-l)">colors</span> and <span style="color: var(--col-purple-l)">colors</span> and <span style="color: var(--col-orange-l)">colors</span> and <span style="color: var(--col-green-l)">colors</span>.
</p>
<p>
    Text with highlight <span class="txt-hl-blue">colors</span> and <span class="txt-hl-purple">colors</span> and <span class="txt-hl-green">colors</span> and <span class="txt-hl-orange">colors</span>.
</p>
<p>
    Text with an <a href="https://deserthorns.net">inline link</a> in it.
</p>
<pre>
Preformatted text...
<span style="color: var(--col-orange)">...with color!</span>
</pre>
<pre style="background-color: var(--col-gray);">
// Code block
public foo() {
  return "bar";
}
</pre>
{{ end }}

{{ define "scripts" }}
{{ end }}