- 
  var css = `
  /* http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
  */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var, u, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block; }

  body {
    line-height: 1; }

  blockquote, q {
    quotes: none; }

  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none; }

  table {
    border-collapse: collapse;
    border-spacing: 0; }

  html, body {
    color: #121100;
    font-family: verdana, arial, helvetica, sans-serif;
    background: #ddd;
    display: flex;
    width: 100%; }

  * {
    box-sizing: border-box; }

  #hamburger {
    display: none; }

  @media all and (max-width: 920px) {
    body {
      flex-direction: column; }
    body > .main {
      margin-left: 0; }
    .main > article, body > .sidebar, .main > .pagination {
      width: 100%;
      max-width: 660px;
      min-width: 0; }
    .main > article, body > .sidebar, .main > .pagination > * {
      padding-left: 20px;
      padding-right: 20px; }
    body > .sidebar {
      position: static;
      margin: 0 auto;
      height: auto; }
      body > .sidebar .headline:last-child, body > .sidebar aside:last-child {
        margin-bottom: 40px; } }

  .sidebar {
    overflow-y: auto;
    position: fixed;
    width: 300px;
    flex: 0 0 auto;
    background: #fafafa;
    min-height: 100px;
    height: 100%;
    border-right: solid 1px rgba(0, 0, 0, 0.2); }
    .sidebar .avatar {
      width: 100%;
      display: block;
      text-align: center; }
      .sidebar .avatar img {
        display: inline-block;
        height: auto;
        max-width: 100%; }
    .sidebar ol, .sidebar ul {
      list-style: none; }
    .sidebar .headline, .sidebar aside {
      margin: 20px 40px; }
      .sidebar .headline *, .sidebar aside * {
        line-height: 1.5em; }
      .sidebar .headline:last-child, .sidebar aside:last-child {
        margin-bottom: 0; }
    .sidebar a {
      text-decoration: none;
      color: inherit; }
    .sidebar h1, .sidebar h2 {
      font-weight: bold;
      font-family: times, serif;
      font-variant: small-caps;
      border-bottom: solid 1px rgba(0, 0, 0, 0.2); }
    .sidebar h1 {
      font-size: 1.6em; }
    .sidebar h2 {
      font-size: 1.3em; }
    .sidebar li {
      text-transform: capitalize;
      border-bottom: solid 1px rgba(0, 0, 0, 0.2); }
      .sidebar li:hover {
        background: rgba(0, 0, 0, 0.04); }
      .sidebar li a {
        display: block; }

  .main {
    display: block;
    width: 100%;
    margin-left: 300px; }

  article, .pagination {
    margin: 0 auto;
    line-height: 1.68;
    font-size: 19px;
    hyphens: auto;
    padding: 50px 80px;
    margin-top: 40px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    max-width: 780px;
    min-width: 600px;
    background: #fafafa; }
    article:last-child, .pagination:last-child {
      margin-bottom: 40px; }
    article h1, article h2, article h3, article h4, article h5, article h6, .pagination h1, .pagination h2, .pagination h3, .pagination h4, .pagination h5, .pagination h6 {
      font-weight: bold;
      font-family: times, serif; }
    article h1, .pagination h1 {
      font-size: 2.5em;
      font-variant: small-caps; }
      article h1.title, .pagination h1.title {
        border-bottom: solid 8px black; }
    article h2, .pagination h2 {
      font-size: 1.9em;
      font-variant: small-caps; }
    article h3, .pagination h3 {
      font-size: 1.5em; }
    article h4, .pagination h4 {
      font-size: 1.3em; }
    article h5, .pagination h5 {
      font-size: 1.2em; }
    article h6, .pagination h6 {
      font-size: 1em; }
    article p, .pagination p {
      font-family: sans-serif; }
    article code, .pagination code {
      background-color: #ddd;
      font-family: monospace; }
    article pre, .pagination pre {
      background-color: #ddd;
      border: solid 1px rgba(0, 0, 0, 0.2); }
    article p, article code, article blockquote, .pagination p, .pagination code, .pagination blockquote {
      margin: 2em 0; }
    article hr, .pagination hr {
      border: none;
      border-bottom: solid 2px #121100; }
    article blockquote, .pagination blockquote {
      border-left: solid 2px #121100;
      padding-left: 1rem; }
    article time, .pagination time {
      display: block;
      font-variant: small-caps;
      font-family: times, serif;
      margin: 0.3rem 0; }
    article ul, article ol, .pagination ul, .pagination ol {
      margin: 1em 0; }

  .pagination {
    padding: 0;
    display: block; }
    .pagination > * {
      font-family: times, serif;
      color: inherit;
      display: block;
      text-decoration: none;
      padding: 20px 80px;
      font-size: 1.6em;
      font-weight: normal; }
      .pagination > *.previous {
        font-weight: bold;
        border-bottom: solid 1px rgba(0, 0, 0, 0.2); }
        .pagination > *.previous::before {
          content: "< "; }
      .pagination > *.next {
        font-weight: bold;
        border-bottom: solid 1px rgba(0, 0, 0, 0.2); }
        .pagination > *.next::before {
          content: "> "; }
    .pagination a:hover {
      background: rgba(0, 0, 0, 0.04); }

  .assets {
    display: flex;
    width: 100%;
    flex-wrap: wrap; }

  .asset {
    width: 50%;
    flex: 1 1 auto; }

  .asset > img {
    width: 100%;
    height: 100%; }

  article img, article video{
    max-width:100%;
    height:auto;
  }
  .tag {
    display: inline-block;
    background: #121100;
    color: #fafafa;
    padding: 0.1rem 0.3rem;
    margin: 0.3rem 0;
    font-family: times, serif;
    font-variant: small-caps;
    text-decoration: none; }
  `

<!DOCTYPE html>
html
  head
    title= site.title
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <link type="application/atom+xml" rel="alternate" href="/atom/feed.xml"/>
    meta(name="description" content=site.description)
    style(type='text/css')!= css

  body
    .sidebar
      aside
        a.avatar(href="/")
          img(src=site.avatar)
      .headline
        h1
          a(href='#')= site.title
        p!= site.description
      aside.menu
        ul
          li
            a(href="/") Home
          li
            a(href='/atom/feed.xml') Atom Feed
      if site.tags
        aside.submbenu
          h2 Tags
          ul
            for tagInfo in site.tags
              li
                a(href="/tag/"+tagInfo.name)!= tagInfo.name+' <b>('+tagInfo.count+')</b>'
    .main
      if page.tag
        article
          p You are currently reading posts tagged as&nbsp;
            b= page.tag
            | .
          p <a href="/">Back to All Posts.</a>
      if page.posts
        for post in page.posts
          article
            if (post.title)
              h1.title= post.title
            if post.tags
              for tag in post.tags
                a.tag(href="/tag/"+tag)= _.capitalize(tag)
                | &nbsp;
            if post.englishDate
              time= post.englishDate
            if post.assets
              .assets
                for asset in post.assets.filter(a=>!a.inline)
                  div.asset!=asset.widget
            div!= post.caption
      if page.isCustom
        article!= page.customPage.content
      if page.links && (page.links.nextPage || page.links.previousPage)
        .pagination
          if page.number && site.pageCount
            div Page <b>#{page.number}</b> of <b>#{site.pageCount}</b>.
          if page.links.previousPage
            a(href=page.links.previousPage).previous Previous Page
          if page.links.nextPage
            a(href=page.links.nextPage).next Next Page