<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>[[ title ]]</title>
    <meta name="author" content="glyph">
    <meta name="description" content="Welcome to the personal website of glyph: a mycelial technologist coding and cultivating a decentralized, multispecies future. On my site you will find art, musings and projects relating to carbon-based and silicon-based technologies. Sowing seeds of symbiosis, weaving webs of wu wei.">
    <meta name="keywords" content="botany, coding, electronics, fermentation, fungi, meditation, mycology, plants">
    <style>
      a {
        color: #111;
        padding: 0.2rem;
      }
      
      a:focus {
        background-color: #111;
        color: #fff;
      }

      a:hover {
        background-color: #111;
        color: #fff;
      }
      
      article {
        max-width: 700px;
      }
      
      body {
        max-width: 900px;
        font-family: monospace;
        line-height: 1.4;
        margin: 2rem;
      }
     
      .card {
        border: 1px solid black;  
        box-shadow: 0.25rem 0.25rem;
        padding: 2rem;
        margin-bottom: 2rem;
      }

      @media only screen and (min-width: 800px) {
        .card {
          width: max-content;
        }
      }

      .card ul {
        list-style-type: none;
        margin: 0;
        padding-left: 0;
      }

      code {
        background-color: #111;
        color: #fff;
        margin-left: 0.5rem;
      }
      
      .col {
        flex: 1;
        padding: 1rem;
        overflow: auto;
      }
      
      @media (max-width: 400px) {
        .col {
          flex: 1;
          padding: 1rem;
          width: 90%;
        }
      }
      
      figure {
        margin: 0;
        padding: 0;
      }

      .flex-grid {
        display: flex;
      }
      
      @media (max-width: 400px) {
        .flex-grid {
          display: block;
        }
      }
      
      html {
        background-color: #fefefe;
        color: #111;
        font-size: 14px;
      }
      
      h1 {
        color: #222;
      }

      h2 {
        color: #222;
      }

      li {
        padding-bottom: 0.5rem;
      }
      
      .list-item {
        list-style-type: none;
        padding: 0.5rem;
      }
      
      .nav-bar {
        list-style-type: none;
        display: inline-block;
        padding-left: 0;
      }

      .nav-item {
        border: solid 1px #111;
        color: #111;
        display: inline-block;
        margin-top: 0.5rem;
        padding: 0.5rem;
      }

      .nav-item a {
        text-decoration: none;
      }
      
      p.bordered {
        border: solid 1px #111;
        padding: 2rem;
      }
    </style>
  </head>
  <body>
    <h1><a href="/" style="text-decoration: none;">mycelial technology</a></h1>
    <hr>
    <nav>
      <ol class="nav-bar">
        <li class="nav-item"><a href="/art">art</a></li>
        <li class="nav-item"><a href="/background">background</a></li>
        <li class="nav-item"><a href="/bacteria">bacteria</a></li>
        <li class="nav-item"><a href="/computers">computers</a></li>
        <li class="nav-item"><a href="/fungi">fungi</a></li>
        <li class="nav-item"><a href="/japanese">japanese</a></li>
        <li class="nav-item"><a href="/lists">lists</a></li>
        <li class="nav-item"><a href="/meditation">meditation</a></li>
        <li class="nav-item"><a href="/plants">plants</a></li>
        <li class="nav-item"><a href="/projects">projects</a></li>
        <li class="nav-item"><a href="/support">support</a></li>
      </ol>
    </nav>
    [[ content ]]
    <footer style="display: flex;">
      <p>&#169; 2021 glyph<p> 
    </footer>
  </body>
</html>
