hmn/src/templates/src/layouts/timemachine_base.html

200 lines
4.8 KiB
HTML

{{/*
This is a copy-paste from base.html because we want to preserve the unique
style of landing pages if we change base.html in the future.
*/}}
<!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 "visjam2023/favicon-16x16.png" }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "visjam2023/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>
body {
/*
This is too light for accessiblity imo. I'll darken them a bit and see how Ben feels
about it. -- Jake 5/26/2023
background: linear-gradient(15deg, #b4c4fe, #eb8cbf ); */
background: linear-gradient(15deg, #7391fd, #e25ca4);
}
.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: #d661ad;
}
#logo {
width: 16rem;
}
h1,
h2,
h3 {
font-family: "MohaveHMN", sans-serif;
margin-bottom: 0;
font-weight: normal;
}
/* '95-esque styles */
.frame {
width: 100%;
background: #c3c3c3;
border-width: 2px;
border-style: solid;
border-color: #fff #333 #333 #fff;
border-image: url('{{ dataimg "timemachine/win95-border.gif" }}') 4;
padding: 1px;
color: black;
}
.frame ol,
.frame ul {
padding-left: 5px;
}
.frame ul {
list-style: disc;
}
.frame strong {
font-weight: bold;
}
.frame .title {
padding: 0 0.1875rem; /* 0 3px */
height: 1.125rem; /* 18px */
line-height: 1.125rem; /* 18px */
font-size: 0.8125rem; /* 13px */
width: 100%;
background: rgb(0, 0, 130);
color: #fff;
position: relative;
}
.frame .frame-close {
width: 1rem; /* 16px */
height: 0.875rem; /* 14px */
position: absolute;
right: 0.125rem; /* 2px */
top: 0.125rem; /* 2px */
cursor: pointer;
}
.frame * {
font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
}
.inset {
border-width: 1px;
border-color: #828282 #ffffff #ffffff #828282;
border-style: solid;
border-image: url('{{ dataimg "timemachine/win95-border-inset.gif" }}') 2;
}
img.pixelated {
image-rendering: crisp-edges;
}
.drop-shadow {
box-shadow: 2px 2px black;
}
.win95-btn {
min-width: 5.6rem;
height: 1.4375rem; /* 23px */
border-width: 2px;
border-style: solid;
border-color: #fff #333 #333 #fff;
border-image: url('{{ dataimg "timemachine/win95-border-btn.gif" }}') 4;
text-align: center;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-weight: normal;
padding: 0 1rem !important;
}
.win95-btn:active {
border-image: url('{{ dataimg "timemachine/win95-border-btn-pressed.gif" }}') 4;
padding-top: 2px !important;
}
.win95-input {
border-width: 2px;
border-style: solid;
border-image: url('{{ dataimg "timemachine/win95-border-input.gif" }}') 4;
outline: none;
background-color: white !important;
resize: vertical; /* only applies to textareas so whatever */
}
.less-spacing p {
margin: 0.2rem 0;
}
</style>
</head>
<body>
<div class="left white">
<div class="mt4-ns mw7 margin-center ph3-m ph4-l">
{{ template "header.html" . }}
</div>
<div class="jam-sections">
{{ block "content" . }}{{ end }}
</div>
<div class="mw8 margin-center ph3-m ph4-l">
{{ template "footer.html" . }}
</div>
</div>
</body>
</html>