357 lines
9.3 KiB
HTML
357 lines
9.3 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 "visualjam2023/favicon-16x16.png" }}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "visualjam2023/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 "D10074" }}
|
|
|
|
{{ $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( #D10074, #6E2C6B );
|
|
// background: linear-gradient( #34e89e, #0f3443);
|
|
}
|
|
|
|
.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: #D10074;
|
|
}
|
|
|
|
#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>
|