{% extends "../layouts/index.html" %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="/static/css/message.css">
{% endblock %}

{% block body %}
{% set date_format = "%A, %d %B, %Y" %}
<div class="column">
    <div class="container">
        <div class="column align-center">
            <nav class="card main-nav">
                <li><a href="/">Index</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/projects">Projects</a></li>
                <li><a href="/about">About</a></li>
                <div><h3 class="hide-mobile header divider">work</h3></div>
                <li><a href="https://kitsunecafe.itch.io/">itch.io</a></li>
                <li><a href="https://git.kitsu.cafe/rowan">git.kitsu.cafe</a></li>
                <li><a href="https://fem.mint.lgbt/kitsunecafe">fem.mint.lgbt</a></li>
                <li><a href="https://github.com/kitsunecafe">GitHub</a></li>
                <div><h3 class="hide-mobile header divider">contact</h3></div>
                <li><a href="https://tech.lgbt/@kitsunecafe">Fedi</a></li>
                <li><a href="mailto:rowan@kitsu.cafe">Email</a></li>
            </nav>
            <div>
                <a href="/static/img/kitsucafe-88x31.png">
                    <img alt="a smaller banner for this site" width="88" height="31" src="/static/img/kitsucafe-88x31.png" />
                </a>
            </div>
        </div>
        <div class="primary column">
            <div class="card has-moon">
                <h1 class="header">welcome!</h1>
                <div class="card-content">
                    <div class="card-image bubble tail right">
                        <div class="hide-overflow">
                            <img class="hover-zoom tooltip left-top" src="/static/img/pfp.webp" width="100" height="100"></img>
                        </div>
                    </div>
                    <p>i'm rowan: game dev, artist, musician, and creature of the moon.</p>
                    <p><a href="/">this site</a> is devoted to highlighting my works. the design of this site is focused on having a small footprint, minimal waste, and accessible design. i've done my best to support many different browers and versions but maximum compatibility requires a lot of extra work (and shims)</p>
                    <p>not including linked or hosted projects, this site has</p>
                    <ul>
                        <li>no javascript</li>
                        <li>few images</li>
                        <li>less than 128 kB per page (with most being under 30 kB)</li>
                    </ul>
                    <p>not everything that i make has the same focus but links to those projects will be annotated with content warnings.</p>
                </div>
            </div>
            <div class="card has-moon">
                <div class="row align-center">
                    <h1 class="header">blog</h1>
                    &nbsp;&nbsp;<a style="font-size: 150%" href="/blog">⇀</a>
                </div>
                <ul>
                    {% for post in blog
                        | values
                        | filter(attribute="created_date")
                        | sort(attribute="created_date")
                        | reverse
                        | slice(end=5) %}
                    <li>
                        <a href="{{ post.path }}">{{ post.title }}</a> <small class="muted">{{ post.created_date | date(format=date_format) }}</small>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="card has-moon">
                <div class="row align-center">
                    <h1 class="header">projects</h1>
                    &nbsp;&nbsp;<a style="font-size: 150%" href="/projects">⇀</a>
                </div>
                <ul>
                    {% for project in projects
                        | values
                        | filter(attribute="created_date")
                        | sort(attribute="created_date")
                        | reverse
                        | slice(end=5) %}
                    <li>
                        <a href="{{ project.link }}">{{ project.title }}</a> <small class="muted">{{ project.created_date | date(format=date_format) }}</small>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% include "../layouts/footer.html" %}
</div>
{% endblock %}