{{ define "head" }}
<link rel="stylesheet" href="{{.StylePath}}">
{{ end }}

{{ define "body" }}
{{ template "header" . }}
<style>
    .link-card {
        box-shadow: 4px 4px var(--b_low);
        border: 1px solid var(--b_low);
        border-radius: var(--border-radius);
        padding: 1rem;
        max-width: 40rem;
        margin: 0 auto;
        display: block;
    }
    .link-card > h2 {
        margin-top: 0;
        margin-bottom: 1rem;
    }
    .link-card > img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 4rem;
        border-radius: var(--border-radius);
        filter: grayscale(80%);
    }
</style>
<p>
    Projects are things that I've built, physical or otherwise. Typically these are tools meant to serve a purpose: creative pursuits can be found on the <a href="/creative">creative page</a>.
</p>

<a class="link-card" href="/keyboard">
    <h2>keyboard</h2>
    <img src="/assets/img/keyboard.jpg">
</a>

{{ end }}

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