#!/bin/bash

cat << _EOF_
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>$POST_TITLE - Jenny</title>
      <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Fira+Mono' rel='stylesheet' type='text/css'>
      <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAANjY2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARERERAAAAAAAAAAAAAAAAEQEBEQAAAAAAAAAAAAAAABEREREAAAAAAAAAAAAAAAARAREBAAAAAAAAAAAAAAAAEREBEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AADwDwAA//8AAPKPAAD//wAA8A8AAP//AADyLwAA//8AAPCPAAD//wAA//8AAP//AAD//wAA" rel="icon" type="image/x-icon">
      <style>
        html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        body {
          background-color: white;
          color: #444;
          font-size: 14px;
          padding: 1em;
          font-family: 'Roboto', sans-serif;
          line-height: 1.5em;
        }
        @media (min-width: 736px) { body { font-size: 16px } }
        article { padding: 0; margin: 1em 0; max-width: 74ch; }
        article a { color: #b58900; }
        article img { max-width: 100% }
        article blockquote { border-left: 2px solid #CCC; }
        article blockquote,
        article pre { background-color: #f4f4f4; margin: 0; padding: 1em; border-radius: 3px; border-bottom: 1px solid #DDD; }
        article pre,
        article code { font-family: 'Fira Mono'; font-size: 14px; display: inline-block; color: #333; }
        article pre { word-break: break-all; white-space: pre-wrap; }
        article code::first-line { line-height: 0 }
        article blockquote :first-of-type { margin-top: 0; }
        article blockquote :last-of-type { margin-bottom: 0; }
        article hr { border: 0; border-bottom: 3px solid #CCC; }
        .heading { text-transform: uppercase; line-height: 1.6em; }
        .heading a { text-decoration: none; }
        .heading .title { color: #222; display: table-cell; margin: 0 0 1em; font-weight:bold; max-width: 500px;  }
        .heading .title:hover { text-decoration: underline; }
        .heading .stamp,
        .home { display: inline-block; text-align:right; margin-right: 1.5em; }
        .home { text-decoration: none; width: 5.4em; margin-bottom: 1.5em; text-align: left;  color: #cb4b16; } .home:hover { color: #dc322f; }
        .heading .stamp { color: #999; }
        .contents { display: inline-block; max-width: 60ch; vertical-align: top; width: 100%; }
        .contents :first-child { margin-top: 0; }
        h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 2em 0 1em; }
        ol, ul { padding-left: 1em; }
        ul.fn-list { list-style: none; padding: 2em 0 0; margin-top: 2.5em; font-size: .9em; }
        .fn-handle, .fn-text { display: table-cell; }
        .fn-handle { padding-right: 1ch; }
        .fnref { line-height: 0 }
        .tags { margin-top: 2.5em; padding-top: 1.5em; font-size: .9em; border-top: 2px solid #EEE; }
        header { text-transform: uppercase; }
        header a { text-decoration: none; color: inherit; }
      </style>
    </head>
    <body>
      <header><a href="/">$BLOG_TITLE</a></header>
      <article>
      <div class="heading"><a href=""><span class="stamp">$(date -d "$POST_DATE_RFC822" +%m/%d/%Y)</span><h1 class="title">$POST_TITLE</h1></a></div>
        <a href="../" class="home">←</a><div class="contents">
        $(echo "$POST_CONTENTS")
        <div class="tags">$(for i in $TAGS; do echo "<a href=\"../tag/$i\">$i</a>"; done;)</div>
        </div>
      </article>
    </body>
  </html>
_EOF_
