{{/*
    This is a copy-paste from base.html because we want to preserve the unique
    style of this page no matter what future changes we make to the base.
*/}}
<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" sizes="16x16" href="{{ static "wheeljam2022/favicon-16x16.png" }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ static "wheeljam2022/favicon-32x32.png" }}">

    {{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
    {{ range .OpenGraphItems }}
        {{ if .Property }}
            <meta property="{{ .Property }}" content="{{ .Value }}" />
        {{ else }}
            <meta name="{{ .Name }}" content="{{ .Value }}" />
        {{ end }}
    {{ end }}
    {{ if .Title }}
        <title>{{ .Title }} | Handmade Network</title>
    {{ else }}
        <title>Handmade Network</title>
    {{ end }}
    <meta name="theme-color" content="#346ba6">

    <script src="{{ static "js/templates.js" }}"></script>

    <link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
    <link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">

    <style>
        /* Copy-paste from project.css yay */
        {{ $c := hex2color "346ba6" }}

        {{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }}
        {{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }}
        {{ $themeDimmest := eq .Theme "dark" | ternary (lightness 0.2 $c) (lightness 0.85 $c) | color2css }}

        {{ $themeDark := eq .Theme "dark" | ternary (lightness 0.30 $c) (lightness 0.35 $c) | color2css }}

        {{ $linkColor := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.35 $c) | color2css }}
        {{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }}

        :root {
            --content-background: #f8f8f8;
            --card-background: rgba(255, 255, 255, 0.1);
            --card-background-hover: rgba(255, 255, 255, 0.16);

            --theme-color: {{ $c | color2css }};
            --theme-color-dim: {{ $themeDim }};
            --theme-color-dimmer: {{ $themeDimmer }};
            --theme-color-dimmest: {{ $themeDimmest }};

            --timeline-content-background: rgba(255, 255, 255, 0.1);
        }

        body {
            background: linear-gradient(#346ba6, #814cb7)
        }

        .user-options,
        header form,
        header .menu-bar .wiki,
        header .menu-bar .library
        {
            display: none !important;
        }

        header {
            border-bottom-color: white;
            margin-bottom: 0 !important;
        }

        .hmn-logo {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

        header a, footer a {
            color: white !important;
        }

        header .submenu {
            background-color: #346ba6;
        }

        #top-container {
            margin: 3rem 0;
        }

        #logo {
            width: 16rem;
        }

        h1, h2, h3 {
            font-family: 'MohaveHMN', sans-serif;
            margin-bottom: 0;
            font-weight: normal;
        }

        #title {
            color: white;
            font-size: 2.4rem;
            line-height: 0.8;
            margin-top: 2rem;
            letter-spacing: -0.06rem;
            text-transform: uppercase;
        }

        #dates {
            font-variant: small-caps;
            font-size: 1.6rem;
            margin-top: 0.2rem;
        }

        #tagline {
            font-size: 1rem;
            margin-top: 1rem;
            line-height: 1.4;
        }

        #top-container a {
            color: white !important;
            text-decoration: underline;
        }

        .actions {
            margin-top: 1.5rem;
        }

        .actions a {
            text-decoration: none !important;
            line-height: 1.4;
            font-weight: 500;

            transition: background-color 50ms ease-in-out;
            background-color:rgba(255, 255, 255, 0.1);
        }

        .actions a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .actions a:active {
            background-color: rgba(255, 255, 255, 0.15);
        }

        .section {
            font-size: 1rem;
            line-height: 1.4;
        }

        .section h2 {
            font-variant: small-caps;
            font-size: 2.2rem;
            line-height: 1.1;
        }

        .section h3 {
            font-variant: small-caps;
            font-size: 2rem;
            line-height: 0.8;
            margin-top: 1.4rem;
        }

        .section p {
            margin-top: 1em;
            margin-bottom: 1em;
        }

        .section a {
            text-decoration: underline;
        }

        .emphasized {
            padding-left: 1rem;
            border-left: 0.3rem solid white;
        }

        .flex-fair {
            flex-basis: 1px;
            flex-grow: 1;
            flex-shrink: 1;
        }

        ul {
            list-style-type: disc;
        }

        li {
            margin-top: 0.6rem;
            margin-bottom: 0.6rem;
        }

        .section li p {
            margin-top: 0.6rem;
            margin-bottom: 0.6rem;
        }

        footer {
            border-top: 2px solid white;
            margin-top: 2rem;
            text-align: center;
        }

        footer h2 {
            text-transform: uppercase;
        }

        .showcase-item {
            background-color: rgba(0, 0, 0, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }
        
        .carousel-thinger {
            position: absolute;
            top: 0;
            width: 6rem;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.1); /* bg-white-10 */
            border-radius: 0.5rem; /* br3 */
            cursor: pointer;
        }

        .carousel-thinger.prev {
            left: -7rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
        }

        .carousel-thinger.next {
            right: -7rem;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
        }

        @media screen and (min-width: 30em) {
            /* not small styles */

            #top-container {
                margin: 5.4rem 0;
            }

            #logo {
                width: 31rem;
            }

            #title {
                font-size: 5.2rem;
                margin-top: 4rem;
            }

            #dates {
                font-size: 2.8rem;
            }

            #tagline {
                font-size: 1.2rem;
                margin-top: 1.2rem;
            }

            .actions {
                margin-top: 2.2rem;
            }

            .actions a {
                font-size: 1.2rem;
            }

            .section h2 {
                font-size: 3.4rem;
            }

            .section h3 {
                font-size: 2.4rem;
                margin-top: 1.6rem;
            }
        }

        h3.mt0 {
            margin-top: 0; /* ugh seriously */
        }

        .back-to-normal * {
            font-family: "Fira Sans", sans-serif;
        }

        .back-to-normal h1,
        .back-to-normal h2,
        .back-to-normal h3,
        .back-to-normal h4,
        .back-to-normal h5 
        {
            font-weight: 500;
            margin: 0;
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
            line-height: 1.25em;
        }

        .back-to-normal a {
            text-decoration: none;
        }

        .snippet-project {
            background-color: rgba(255, 255, 255, 0.1);
            text-decoration: none !important;
        }

        /* More copy-paste from project.css */
        .bg-theme {
            background-color: {{ $c | color2css }};
            background-color: var(--theme-color);
        }

        .bg-theme-dim {
            background-color: {{ $themeDim }};
            background-color: var(--theme-color-dim);
        }

        .bg-theme-dimmer {
            background-color: {{ $themeDimmer }};
            background-color: var(--theme-color-dimmer);
        }

        .bg-theme-dimmest {
            background-color: {{ $themeDimmest }};
            background-color: var(--theme-color-dimmest);
        }
    </style>

    <script src="{{ static "js/carousel.js" }}"></script>
</head>

<body>
    <div class="left white">
        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
            {{ template "header.html" . }}
        </div>

        {{ block "content" . }}{{ end }}

        <div class="mw8 margin-center ph3-m ph4-l">
            {{ template "footer.html" . }}
        </div>
    </div>
</body>

</html>
