{% extends layout %}

{% import '_layout/icons.twig' as icons %}

{% block title %}Style Guide{% endblock %}
{% block description %}A showcase of this theme's default styling for headings, lists, tables, code, and other common HTML elements.{% endblock %}

{% block robots %}index, follow{% endblock %}
{% block tags %}css, reference{% endblock %}
{% block canonical %}{{ request_path|default('/') }}{% endblock %}

{% block og_type %}article{% endblock %}
{% block og_title %}{{ block('title') }}{% endblock %}
{% block og_description %}{{ block('description') }}{% endblock %}
{% block og_url %}{{ block('canonical') }}{% endblock %}

{% block twitter_card %}summary{% endblock %}
{% block twitter_title %}{{ block('title') }}{% endblock %}
{% block twitter_description %}{{ block('description') }}{% endblock %}

{% block blog_content %}
    <h1>Style Guide</h1>
    <p>A plain page, like <a class="icon-link" href="/blog/twig-syntax-guide">{{ icons.book() }}the Twig Syntax Guide</a>, this time showing off the default styling every element on this site gets for free from <code>novaconium/sass/main.sass</code> — no per-page CSS involved. If you've changed <code>App/sass/_colors.sass</code> (see <a class="icon-link" href="/admin/docs/styling">{{ icons.book() }}Styling</a>), this page is the fastest way to see the new palette applied across everything at once.</p>

    <h2>Headings</h2>
    <h1>Heading level 1</h1>
    <h2>Heading level 2</h2>
    <h3>Heading level 3</h3>
    <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
    <h6>Heading level 6</h6>

    <h2>Paragraph &amp; inline text</h2>
    <p>A normal paragraph, with <strong>bold</strong>, <em>italic</em>, <code>inline code</code>, and <a href="/">a link</a> mixed in. <small>Small print, like this, is used for captions and secondary detail throughout the site.</small></p>

    <h2>Blockquote</h2>
    <blockquote>
        <p>Design is not just what it looks like and feels like. Design is how it works.</p>
    </blockquote>

    <h2>Lists</h2>
    <h3>Unordered</h3>
    <ul>
        <li>File-based routing</li>
        <li>Optional sidecars</li>
        <li>Static caching</li>
    </ul>
    <h3>Ordered</h3>
    <ol>
        <li>Write a Twig template</li>
        <li>Optionally add a sidecar</li>
        <li>Visit the URL</li>
    </ol>
    <h3>Nested</h3>
    <ul>
        <li>App/
            <ul>
                <li>pages/</li>
                <li>lib/</li>
                <li>sass/</li>
            </ul>
        </li>
        <li>novaconium/
            <ul>
                <li>pages/</li>
                <li>src/</li>
            </ul>
        </li>
    </ul>

    <h2>Table</h2>
    <table>
        <thead>
            <tr><th>Element</th><th>Styled by</th></tr>
        </thead>
        <tbody>
            <tr><td>Headings</td><td><code>h1, h2, h3, h4, h5, h6</code></td></tr>
            <tr><td>Links</td><td><code>a</code>, <code>a:hover</code></td></tr>
            <tr><td>Code</td><td><code>code</code>, <code>pre</code></td></tr>
            <tr><td>Tables</td><td><code>table</code>, <code>th</code>, <code>td</code></td></tr>
        </tbody>
    </table>

    <h2>Code</h2>
    <p>Inline: <code>(new Mailer())-&gt;send($old['name'], $old['email'], $old['message']);</code></p>
    <pre><code class="nohighlight">{% verbatim %}{% extends layout %}

{% block content %}
    ...
{% endblock %}{% endverbatim %}</code></pre>

    <h2>Horizontal rule</h2>
    <p>Above this line:</p>
    <hr>
    <p>Below this line.</p>

    <h2>Form elements</h2>
    <form>
        <p>
            <label for="style-guide-example">A label</label><br>
            <input type="text" id="style-guide-example" placeholder="A text input">
        </p>
        <p>
            <label for="style-guide-textarea">A textarea</label><br>
            <textarea id="style-guide-textarea" rows="3" placeholder="Some longer text"></textarea>
        </p>
        <p>
            <label for="style-guide-select">A dropdown</label><br>
            <select id="style-guide-select">
                <option>Option one</option>
                <option>Option two</option>
                <option>Option three</option>
            </select>
        </p>
        <p>
            Radio buttons<br>
            <label><input type="radio" name="style-guide-radio" checked> First choice</label><br>
            <label><input type="radio" name="style-guide-radio"> Second choice</label><br>
            <label><input type="radio" name="style-guide-radio"> Third choice</label>
        </p>
        <p>
            <label><input type="checkbox" checked> A checkbox, too, while we're here</label>
        </p>
        <button type="button">A button</button>
    </form>

    <h2>Icons</h2>
    <p>{{ icons.home() }} {{ icons.git() }} {{ icons.book() }} {{ icons.link() }} {{ icons.sitemap() }} {{ icons.email() }} {{ icons.search() }} {{ icons.rss() }} {{ icons.tag() }} {{ icons.lock() }} {{ icons.trash() }} {{ icons.external_link() }} {{ icons.menu() }} {{ icons.back_to_top() }} — every inline SVG icon in <code>novaconium/pages/_layout/icons.twig</code>, all inheriting the surrounding text color via <code>currentColor</code>.</p>
{% endblock %}