{{/*
    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 "learningjam2024/favicon-16x16.png" }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ static "learningjam2024/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="#003C83">

    <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 href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">

	<style>
		:root {
			--theme-gradient-dark: linear-gradient(to bottom right, #003c83, #019AD2);
			--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #5899FF);
			--white: #fff;
			--bg-button: rgba(255, 255, 255, 0);
			--bg-button-hover: rgba(255, 255, 255, 0.1);
			--charcoal: #2F2F2F;
			--gray: #CBCBCB;
			--rich-gray: #494949;

			--spacing-0: 0;
			--spacing-1: .25rem;
			--spacing-2: .5rem;
			--spacing-3: 1rem;
			--spacing-4: 2rem;
			--spacing-5: 4rem;
			--spacing-6: 8rem;
			--spacing-7: 16rem;
			--border-radius-2: 0.25rem;
		}

		body {
			font-family: "Inter", "Fira Sans", sans-serif;
			font-size: 1rem; /* remove this override when base stylesheet is less dumb */
		}

		h1, h2, h3, h4, h5, h6 {
			font-weight: 700;
		}

		.post-content p {
			/* stupid override, should be done by .post-content instead of .content */
			margin: 0.6rem 0;
		}

		.bg--theme-gradient-dark {
			background: var(--theme-gradient-dark);
		}

		.bg--theme-gradient-light {
			background: var(--theme-gradient-light);
		}

		.bg--charcoal {
			background: var(--charcoal);
		}

		.bg--rich-gray {
			background: var(--rich-gray);
		}

		.bg--gray {
			background: var(--gray);
		}

		.b--rich-gray {
			border-color: var(--rich-gray);
		}

		.c--theme-gradient-dark {
			background: var(--theme-gradient-dark);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}

		.c--theme-gradient-light {
			background: var(--theme-gradient-light);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}

		.btn--jam {
			border: 1px solid var(--white);
			border-radius: var(--border-radius-2);
			padding: var(--spacing-2) var(--spacing-3);

			background-color: var(--bg-button);
		}

		.btn--jam:hover {
			background-color: var(--bg-button-hover);
		}

		.button-simple {
			background: var(--bg-button);
			border: 1px solid var(--white);
		}

		.button-simple:hover {
			background: var(--bg-button-hover);
		}

		.c-white {
			color: var(--white);
		}

		.invisible {
			visibility: hidden;
		}

		.svg-mask {
			mask: var(--mask-url);
			-webkit-mask: var(--mask-url);
		}

		.fill-current {
			fill: currentColor;
		}

		.square {
			aspect-ratio: 1 / 1;
		}

		.wide-screen {
			aspect-ratio: 16 / 9;
		}

		.iframe-fill iframe {
			flex-grow: 1;
		}

		.hmn-logo {
			font-family: 'MohaveHMN', sans-serif;
			text-transform: uppercase;
			font-size: 1.6rem;
			padding: 0.2rem 0.8rem;
		}

		.header-nav {
			padding-right: 0.6rem;
		}

		.user-avatar-header {
			width: 1.8rem;
			border-radius: 999px;
			background-color: rgba(0, 0, 0, 0.4);
		}

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

		}
	</style>

	{{ template "extrahead" . }}
</head>

<body class="bg--charcoal flex flex-column">
	<div class="c-white bg--theme-gradient-dark">
		<div class="bg-black-20 flex flex-row items-center">
			<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
				Handmade
			</a>
			<div class="flex-grow-1 flex-shrink-1"></div>
			<div class="header-nav flex flex-row items-center g3 lh-solid f6">
				<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
				<a href="{{ .Header.JamsUrl }}">Jams</a>
				<a class="db" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
					<img class="user-avatar-header" src="{{ .UserAvatarUrl }}">
				</a>
			</div>
		</div>
		{{ block "content-top" . }}{{ end }}
	</div>
	<div class="bg--charcoal c-white flex-grow-1">
		{{ block "content" . }}{{ end }}
	</div>
	<script>
		const dtf = new Intl.DateTimeFormat([], {
			dateStyle: "full",
			timeStyle: "short",
		});

		for (const time of document.querySelectorAll('time')) {
			const d = new Date(Date.parse(time.dateTime));
			if (time.getAttribute("data-type") == "content") {
				time.textContent = dtf.format(d);
			} else {
				time.title = dtf.format(d);
			}
		}
	</script>
</body>

</html>
