{{/*
    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>
<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 "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>
    :root {
      --dim-color: #bbb;
      --dimmer-color: #999;
      --dimmest-color: #777;
    }

    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;
    }

    .frame a {
      color: #000082;
    }

    .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;
      color: black;
    }

    a.win95-btn {
      color: black;
    }

    .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>

  {{ block "extrahead" . }}{{ end }}
</head>

<body>
  <div class="left white">
    <div class="mt4-ns mw7 margin-center ph3-ns">
      {{ template "header.html" . }}
    </div>

    <div class="jam-sections">
      <div class="center-layout content mw7 ph3 flex flex-column g3">
        {{ with .Breadcrumbs }}
          <div class="mt2 tc tl-ns ph2 ph0-ns">
            {{ range $i, $e := . -}}
              {{- if gt $i 0 -}}
                <span class="ph2">&raquo;</span>
              {{- end -}}
              <a class="breadcrumb" href="{{ .Url }}">{{ .Name }}</a>
            {{- end }}
          </div>
        {{ end }}
      </div>
      {{ block "content" . }}{{ end }}

      <div class="mw8 margin-center ph3-ns">
        {{ template "footer.html" . }}
      </div>
    </div>
  </div>
</body>

</html>

{{ define "frame title" }}
  <div class="title">
    {{ . }}
    <img class="frame-close" src="{{ dataimg "timemachine/win95-close.gif" }}">
  </div>
{{ end }}
