Witch of Git - web/blog/blob - _includes/layouts/layout.njk

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="utf8">
   5     <title>Witch of Light</title>
   6     <style>
   7 html { font-size: 1.4em; line-height: 1.5; color: #444; }
   8 body { padding: 1em; max-width: 700px; margin: 0 auto; }
   9 body header { margin-bottom: 1em; }
  10 body footer { margin-top: 1em; }
  11 h1 { margin: 0; }
  12 h1 a { color: #f78123; text-decoration: none; }
  13 h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
  14 .flex-center { justify-content: center; }
  15 .row { display: flex; flex-direction: row; }
  16 .col { display: flex; flex-direction: column; }
  17 .spacer { flex-grow: 1; }
  18 .ls-none { list-style: none; padding: 0; margin: 0; }
  19 code { font-size: 1.1em; }
  20 pre code { overflow: scroll; width: calc(100% + 8em); display: inline-block; max-width: 100vw; font-size: 1em;
  21     background: #eee; box-sizing: border-box; margin: 0 -4em; padding: 1em; border-radius: 6px; }
  22 @media (max-width: calc(700px + 8em)) {
  23     pre code { margin: 0 -1em; width: calc(100% + 2em); }
  24 }
  25     </style>
  26 </head>
  27 <body class="col">
  28     <header>
  29         <h1><a href="/">Witch of Light</a></h1>
  30         <i>A collection of Cassie's harebrained schemes.</i>
  31     </header>
  32     {{ content | safe }}
  33     <div class="spacer"></div>
  34     <footer>
  35         Copyright &copy; 2019 Cassie Jones.
  36         - <a href="https://twitter.com/porglezomp">@porglezomp</a>
  37     </footer>
  38 </body>
  39 </html>