294 lines
6.5 KiB
HTML
294 lines
6.5 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>
|
|
<html lang="en-US" {{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
|
|
<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;
|
|
|
|
--link-color: transparent;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.w2-5 {
|
|
width: 3rem;
|
|
}
|
|
|
|
.link--white {
|
|
--link-color: var(--white);
|
|
}
|
|
|
|
.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--charcoal {
|
|
border-color: var(--charcoal);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
a, .c--theme-gradient-light {
|
|
background: var(--theme-gradient-light);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
}
|
|
|
|
.c--theme-gradient-light {
|
|
color: transparent;
|
|
}
|
|
|
|
.c--gray {
|
|
color: var(--gray);
|
|
}
|
|
|
|
.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.small {
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
}
|
|
|
|
.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 {
|
|
border-radius: 999px;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.user-avatar.header {
|
|
width: 1.8rem;
|
|
}
|
|
|
|
.jam-logo {
|
|
max-width: 18rem;
|
|
}
|
|
|
|
.jam-logo-small {
|
|
max-width: 8rem;
|
|
}
|
|
|
|
.jam-title {
|
|
/* align with the width of the logo */
|
|
font-size: 2.76rem;
|
|
font-weight: 700;
|
|
/* align with the text's actual bounding box */
|
|
line-height: 1.18;
|
|
margin-top: -0.18em;
|
|
margin-left: -0.03em;
|
|
margin-right: -0.03em;
|
|
}
|
|
|
|
.jam-title.small {
|
|
font-size: 2.25rem;
|
|
/* align with the text's actual bounding box */
|
|
line-height: 1.18;
|
|
margin-top: -0.18em;
|
|
margin-left: -0.03em;
|
|
margin-right: -0.03em;
|
|
}
|
|
|
|
/* not small */
|
|
@media screen and (min-width: 35em) {
|
|
.jam-logo {
|
|
max-width: 24rem;
|
|
}
|
|
|
|
.jam-title {
|
|
font-size: 3.7rem;
|
|
}
|
|
}
|
|
|
|
/* not small */
|
|
@media screen and (min-width: 35em) {
|
|
.flex-basis-40-ns {
|
|
flex-basis: 40%;
|
|
}
|
|
}
|
|
</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 link--white">
|
|
<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>
|