{{ define "styles" }}
<style>
    .palette {
        display: flex;
        flex-direction: row;
    }

    .palette {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 2rem;
        justify-content: center;
        max-width: 60rem;

        div {
            border-radius: 50%;
            width: 6rem;
            height: 6rem;
            margin: 0.5rem;
        }

        span {
            width: 3rem;
            padding: 0.1rem;
            padding-bottom: 2rem;
            display: block;
            font-family: monospace;
        }
    }

    .contrasts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 60rem;

        div {
            margin: 0.25rem;

            span {
                padding: 1rem;
                display: block;
                text-align: center;
            }
        }
    }
</style>
{{ end }}


{{ define "content" }}
<h1>Style</h1>
<hr>
<h2>Palette</h2>
<p>Based on <a href="https://kippura.org/zenburnpage/">Zenburn</a>.  Chosen due to its low-contrast, warm, and organic feel.</p>
<p>This particular verison was taken from the Hundred Rabbits <a href="https://github.com/hundredrabbits/Themes/tree/master">Themes</a> project, which has a number of great minimal themes (8 colors + background).</p>
<div class="palette">
    <div style="background-color: var(--f_high);">
        <span style="background-color: var(--f_high); color: var(--b_med);">f_high</span>
    </div>
    <div style="background-color: var(--f_med);">
        <span style="background-color: var(--f_med); color: var(--b_med);">f_med</span>
    </div>
    <div style="background-color: var(--f_low);">
        <span style="background-color: var(--f_low); color: var(--b_med);">f_low</span>
    </div>
    <div style="background-color: var(--f_inv);">
        <span style="background-color: var(--f_inv); color: var(--f_high);">f_inv</span>
    </div>
    <div style="background-color: var(--b_high);">
        <span style="background-color: var(--b_high); color: var(--f_high);">b_high</span>
    </div>
    <div style="background-color: var(--b_med);">
        <span style="background-color: var(--b_med); color: var(--f_high);">b_med</span>
    </div>
    <div style="background-color: var(--b_low);">
        <span style="background-color: var(--b_low); color: var(--f_high);">b_low</span>
    </div>
    <div style="background-color: var(--b_inv);">
        <span style="background-color: var(--b_inv); color: var(--f_inv);">b_inv</span>
    </div>
</div>
<hr>
<h2>Contrast</h2>
<div class="contrasts">
    <div style="background-color: var(--b_high);">
        <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_high);">
        <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_high);">
        <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_med);">
        <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_med);">
        <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_med);">
        <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_low);">
        <span style="color: var(--f_high)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_low);">
        <span style="color: var(--f_med)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_low);">
        <span style="color: var(--f_low)">Lorem ipsum dolor sit amet</span>
    </div>
    <div style="background-color: var(--b_inv); grid-column: 2;">
        <span style="color: var(--f_inv)">Lorem ipsum dolor sit amet</span>
    </div>
</div>
<hr>
<h2>Text</h2>
<p style="color: var(--f_high)">
    <strong>High</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse molestias. Maiores eos blanditiis repudiandae reprehenderit.
</p>
<p style="color: var(--f_med)">
    <strong>Medium</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse molestias. Maiores eos blanditiis repudiandae reprehenderit.
</p>
<p style="color: var(--f_low)">
    <strong>Low</strong> - Consectetur qui minus sint voluptatem sit maxime et. Sit officia nisi rerum necessitatibus ea sapiente. Laudantium est ad dolorem consequatur repellendus ut quaerat saepe. Quo aperiam esse molestias. Maiores eos blanditiis repudiandae reprehenderit.
</p>
<p>
    Text with an <a href="https://deserthorns.net">inline link</a> in it.
</p>
<p>
    Text with <code>inline code</code> in it.
</p>
<pre>
// Code block
public foo() {
  return "bar";
}
</pre>
{{ end }}

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