183 lines
4.4 KiB
HTML
183 lines
4.4 KiB
HTML
{{/*
|
|
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, #2F69FF);
|
|
--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;
|
|
}
|
|
|
|
.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;
|
|
color: transparent;
|
|
}
|
|
|
|
.c--theme-gradient-light {
|
|
background: var(--theme-gradient-light);
|
|
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);
|
|
}
|
|
|
|
.square {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.wide-screen {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.iframe-fill iframe {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* not small */
|
|
@media screen and (min-width: 35em) {
|
|
|
|
}
|
|
</style>
|
|
|
|
{{ template "extrahead" . }}
|
|
</head>
|
|
|
|
<body class="flex flex-column">
|
|
<div class="c-white bg--theme-gradient-dark">
|
|
<div class="bb b--white pa1 flex flex-row g2 items-center">
|
|
<a href="{{ .Header.HMNHomepageUrl }}" class="f3">HANDMADE</a>
|
|
<div class="flex-grow-1 flex-shrink-1"></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>
|