<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{#is_entry}}
    {{#entry}}
    <title>{{name}} | {{blog_name}}</title>
    {{/entry}}
    {{/is_entry}}
    {{^is_entry}}
    <title>{{blog_name}}</title>
    {{/is_entry}}

    <style>
code, pre {
  color: #2aa198;
  font-family: 'Inconsolata, monospace';
}
/* inconsolata-regular - latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
       url('/static/Inconsolata-Regular.ttf') format('ttf');
}

/* inconsolata-700 - latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 700;
  src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
       url('/static/Inconsolata-Bold.ttf') format('ttf');
}
html, body {
height:100%;
}
.white {
  color: #ddd;
}
body {
  font-size: 20px;
  line-height: 32px;
  background: #002B36;
  font-family: 'Inconsolata, monospace';
  color: #ddd;
  display: flex;
  flex-direction: column;
}
h1 {
    font-size: 30px;
    line-height: 46px;
}
h2 {
font-size: 24px;
line-height: 34px;
padding: 0;
}
h3 {
font-size: 22px;
line-height: 32px;
padding: 0;
}


.footer {
  flex-shrink: 0;
}
.footer > div {
  margin: 20px auto;
  width: 90%;
  max-width: 960px;
}
.hero {
  font-size: 1.3em;
  margin-top: 55px;
}
.purple {
  color: #e14eea;
}
a {
  color: #e14eea;
}

.green, a:hover {
  color: #32cd32;
}
a.selected {
  background: #e14eea;
  border-radius: 2px;
  color: #fefefe;
}
a.selected:hover {
  background: #32cd32;
}
#container {
  width:90%;
  max-width: 960px;
  margin: 20px auto;
  flex: 1 0 auto;
}
.menu {
  padding-left: 0;
  list-style-type: none;
  margin-top: 20px;
}
.menu a {
  padding: 2px 5px;
  text-decoration: none;
}
.menu li { margin-bottom: 10px; }
.col {
  display: block;
}
.col > div {
  width: 100%;
}
.top-menu-container {
  width: 33%;
  padding: 10px;
}
.mobile-footer { display: none; }
@media only screen and (max-width: 450px) {
  .mobile-footer {
    display: block;
    margin-top: 50px;
  }
.hero-container { display: none; }
.top-menu-container { display: none; }
}
@media only screen and (max-width: 800px) {
.hero-container { display: none; }
}
#logo {
  display: block;
  height: 60px;
  /* background: url('https://sos-ch-dk-2.exo.io/hexaninja/hexaninja-alpha.png') center -40px no-repeat; */
  background: url('/static/hexaninja-alpha.png') center -40px no-repeat;
  padding-top: 60px;
  text-align: center;
  margin: 40px auto;
  text-decoration: none;
}
#header {
  display: flex;
  flex-wrap: nowrap;
}
    </style>
    {{#is_entry}}
    {{#entry}}
    {{{extra_head}}}
    {{/entry}}
    {{/is_entry}}
 
    <link rel="stylesheet" href="/static/highlight/styles/solarized-dark.min.css">
    <link rel="micropub" href="{{base_url}}/micropub">
    <link rel="webmention" href="{{base_url}}/webmention">
    <link rel="alternate" href="{{base_url}}/atom.xml" type="application/atom+xml" title="{{blog_name}} Full Atom Feed" />
    <link rel="alternate" title="{{blog_name}} JSON Feed" type="application/json" href="{{base_url}}/feed.json" />
    <link rel="authorization_endpoint" href="{{authorization_endpoint}}">
    <link rel="token_endpoint" href="{{token_endpoint}}">
    <meta content="{{blog_name}}" property="og:site_name" />
    <meta property="og:image" content="{{author_icon}}" />
    {{#is_entry}}
    {{#entry}}
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{{name}}" />
    <meta property="og:url" content="{{url}}" />
    <meta property="article:published_time" content="{{published}}" />
    {{/entry}}
    {{/is_entry}}
  
    {{#is_index}}
    <meta property="og:type" content="website" />
    {{/is_index}}
  </head>
  <body>
    <div id="container">

      {{^is_host}}
      <header id="header" class="h-card p-author">
        <data class="p-author" value="{{author_name}}"></data>
        <data class="p-note" value="{{author_name}}'s entries"></data>
        <data class="u-photo" value="{{author_icon}}"></data>
        <a href="{{base_url}}" id="logo"><h1 class="p-name" style="">
          {{blog_name}}
        </h1></a>
        <div style="width:33%;padding:0 10px;" class="hero-container p-note">
          <p class="hero">
            {{{hero}}}
          </p>
        </div>
        <div class="top-menu-container">
          <ul class="menu">
            <li><a href="{{base_url}}" class="{{#is_index}}selected{{/is_index}} u-url u-uid" rel="me">Home</a></li>
            <li style="margin-top:30px;"><a href="https://thomassileo.name" rel="me"><strong>thomassileo</strong>.name</a></li>
            <li><a href="https://github.com/tsileo" rel="me"><strong>@tsileo</strong> on GitHub</a></li>
            <li><a href="https://a4.io" rel="me"><strong>@t@a4.io</strong> on the Fediverse</a></li>
          </ul>
        </div>
      </header>
      {{/is_host}}

      {{#is_index}}
      <main class="col">
        <section>
          <h2>Entries</h2>
          <ul style="list-style-type:none;padding:0;" class="h-feed">
            {{#entries}}
            {{^is_page}}
            {{^is_draft}}
            {{^is_host}}
            <li style="margin-bottom:10px;" class="h-entry">
              <a href="{{url}}" style="text-decoration:none;" class="u-url u-uid">
                <time class="dt-published" datetime="{{published}}" style="width:130px;display:inline-block;color:#999;">{{ published_pretty }}</time> <span class="p-name">{{name}}</span>
              </a>
            </li>
            {{/is_host}}
            {{/is_draft}}
            {{/is_page}}
            {{/entries}}
          </ul>
        </section>

        <section>
          <h2>Pages</h2>
          <ul style="list-style-type:none;padding:0;" class="h-feed">
            {{#entries}}
            {{#is_page}}
            {{^is_draft}}
            <li style="margin-bottom:10px;" class="h-entry">
              <a href="{{url}}" style="text-decoration:none;" class="u-url u-uid">
                <data class="dt-published" value="{{published}}"></data>
                <span class="p-name">{{name}}</span>
              </a>
            </li>
            {{/is_draft}}
            {{/is_page}}
            {{/entries}}
          </ul>
        </section>

        <section>
           <h2>Projects</h2>
            <ul style="list-style-type:none;padding:0;">
            {{#entries}}
            {{^is_page}}
            {{^is_draft}}
            {{#is_host}}
            <li style="margin-bottom:10px;">
                <a href="https://{{host}}" style="text-decoration:none;" >
                {{host}} â€” {{name}}
              </a>
            </li>
            {{/is_host}}
            {{/is_draft}}
            {{/is_page}}
            {{/entries}}
          </ul>
 
        </section>
      </main>

      {{/is_index}}


      {{#is_entry}}
      <main>
      {{#entry}}
      <article class="h-entry">
        <h1 class="purple p-name">{{name}}</h1>
        <data class="h-card u-author">
          <data class="p-name" value="{{author_name}}"></data>
          <data class="u-photo" value="{{author_icon}}"></data>
          <data class="u-url" value="{{author_url}}"></data>
        </data>
        <data class="u-url u-uid" value="{{url}}"></data>
        {{^is_host}}
        <span style="color:#999">Created <time datetime="{{published}}" class="dt-published">{{ published_pretty }}</time></span>
        {{#has_been_updated}}
        <span style="color:#999;display:block;">Last updated <time class="dt-updated" datetime="{{updated}}">{{ updated_pretty }}</time></span>
        {{/has_been_updated}}

        {{#has_category}}
        {{#category}}
        <data class="p-category" value="{{.}}"></data>
        {{/category}}
        {{/has_category}}
        {{/is_host}}
        {{#is_host}}
        <time datetime="{{published}}" class="dt-published"></time>
        <time class="dt-updated" datetime="{{updated}}"></time>
        {{/is_host}}

        <div class="p-summary e-content">
          {{{content}}}
        </div>
      </article>

      {{^is_host}}
      <aside>
        <p style="color:#999">
          Have a comment?
          <ul style="color:#999">
            <li>Ping me on the Fediverse <a href="https://a4.io" rel="me">@t@a4.io</a></li>
            <li>Shoot me an email at <code>contact@hexa.ninja</code></li>
            <li>Send a <a href="https://indieweb.org/Webmention">Webmention</a></li>
          </ul>
        <p>
      </aside>
      {{/is_host}}

      {{#has_webmentions}}
      <section class="webmentions">
        <h3>Webmentions</h3>
        <ul>
        {{#webmentions}}
        <li><a href="{{url}}" rel="nofollow">{{title}}</a> <time datetime="{{last_updated}}" style="color:#999">{{last_updated_pretty}}</time></li>
        {{/webmentions}}
        </ul>
      </section>
      {{/has_webmentions}}

      {{/entry}}
      </main>
      {{/is_entry}}

      {{#is_entry}}
      {{#entry}}
      {{{extra_body}}}
      {{/entry}}
      {{/is_entry}}
 

      {{#is_404}}
      <div style="font-size:2em;text-align:center;margin-top:120px;text-transform:uppercase">Error</div>
      <div style="font-size:5em;text-align:center;">404</div>
      {{/is_404}}

      {{^is_host}}
      <!-- only visible on mobile -->
      <footer class="mobile-footer">
        <ul class="menu">
          <li><a href="{{base_url}}" class="{{#is_index}}selected{{/is_index}} u-url u-uid">Home</a></li>
          <li style="margin-top:30px;"><a href="https://thomassileo.name" rel="me"><strong>thomassileo</strong>.name</a></li>
          <li><a href="https://github.com/tsileo" rel="me"><strong>@tsileo</strong> on GitHub</a></li>
          <li><a href="https://a4.io" rel="me"><strong>@t@a4.io</strong> on the Fediverse</a></li>
        </ul>
      </footer>

    <!-- end of .container -->
    </div>
    {{/is_host}}

    <script src="/static/highlight/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

  </body>
</html>
