<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ .Title }} - {{ .Site.Title }}</title>
  {{ $twbscss := resources.Get "styles/bootstrap/bootstrap.scss" | resources.ToCSS }}
  {{ $mycss := resources.Get "styles/main.css" }}
  {{ $allcss := slice $twbscss $mycss | resources.Concat "css/bundle.css" }}
  {{ $allcsspure := $allcss | resources.PostCSS (dict "nomap" true) | minify | fingerprint | resources.PostProcess }}
  <link href="{{ $allcsspure.Permalink }}" rel="stylesheet" />
  </head>

  {{ $millironx := resources.Get "graphics/millironx.svg" }}

  <body>
    <div class="container-fluid">
      <div class="row wrapper min-vh-100 flex-column flex-sm-row">
        <aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
          <nav
            class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row"
          >
            <div class="container-fluid">
              <a class="navbar-brand d-block d-md-none" href="#">
                <object
                  class="d-inline-block align-text-top"
                  width="80"
                  height="24"
                  style="filter: invert(100%)"
                  data="{{ $millironx.Permalink }}"
                >
                  <img src="{{ $millironx.Permalink }}" alt="Milliron X" />
                </object>
                &ensp;
                <span class="font-small-caps font-serif">Milliron X</span>
              </a>
              <a
                href
                class="navbar-toggler"
                data-bs-toggle="collapse"
                data-bs-target=".sidebar"
              >
                <span class="navbar-toggler-icon"></span>
              </a>
              <div class="collapse navbar-collapse sidebar">
                <ul
                  class="flex-column navbar-nav w-100 justify-content-between"
                >
                  <li class="nav-item">
                    <a class="nav-link pl-0" href="/"
                      ><i class="fad fa-home fa-fw"></i>
                      <span class="">Home</span></a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pl-0" href="/contact"
                      ><i class="fad fa-file-signature fa-fw"></i>
                      <span class="">Contact</span></a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pl-0" href="/academia"
                      ><i class="fad fa-university fa-fw"></i>
                      <span class="">Academia</span></a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pl-0" href="/ai">
                      <i class="fax fa-bull-sperm"></i>
                      <span class="">Artificial Insemination</span
                      >
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pl-0" href="/videos"
                      ><i class="fad fa-video fa-fw"></i>
                      <span class="">Videos</span></a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pl-0" href="/websites"
                      ><i class="fad fa-browser fa-fw"></i>
                      <span class="">Websites</span></a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </aside>
        <main class="col bg-faded py-3 gx-0">
          <div class="container">
            <header class="d-none d-sm-none d-md-block text-center">
              <h1 class="font-serif font-small-caps">
                <object data="{{ $millironx.Permalink }}">
                  <img src="{{ $millironx.Permalink }}" alt="Milliron X" />
                </object>
                &emsp; Milliron X
              </h1>
            </header>
          </div>
          {{ block "main" . }}
          <section class="container-fluid list-main">
            <div class="container px-5">
                {{ .Content }}
            </div>
          </section>
          {{ end }}
        </main>
      </div>
    </div>
    {{ $fajs := resources.Get "scripts/fontawesome/all.min.js" }}
    {{ $jqueryjs := resources.Get "scripts/jquery/jquery.min.js" }}
    {{ $popperjs := resources.Get "scripts/popper/popper.min.js" }}
    {{ $twbsjs := resources.Get "scripts/bootstrap/bootstrap.min.js" }}
    {{ $jqmaskjs := resources.Get "scripts/jquery-mask-plugin/jquery.mask.min.js" }}
    {{ $fittextjs := resources.Get "scripts/fittext/jquery.fittext.js" | minify }}
    {{ $scrolljs := resources.Get "scripts/scroll-effect.js" | minify }}
    {{ $maskjs := resources.Get "scripts/phone-masking.js" | minify }}
    {{ $ttjs := resources.Get "scripts/tooltip-enable.js" | minify }}
    {{ $iconsjs := resources.Get "scripts/fa-icons.js" | minify }}
    {{ $alljs := slice $jqueryjs $popperjs $twbsjs $fajs $fittextjs $scrolljs $jqmaskjs $maskjs $ttjs $iconsjs | resources.Concat "js/bundle.js" | fingerprint }}
    <script src="{{ $alljs.Permalink }}"></script>
  </body>
</html>