@@ -12,8 +12,8 @@ {% endblock %}
 
 {% block pagination %}
 {% if category.paginated %}
-<nav>
-    <ul>
+<div class="pagination">
+    <ol>
         {% for y, url in category.years.items() %}
         {% if (y == category.year) or (not category.year and loop.first) %}
         <li>
@@ -29,8 +29,8 @@ </a>
         </li>
         {% endif %}
         {% endfor %}
-    </ul>
-</nav>
+    </ol>
+</div>
 {% endif %}
 {% endblock %}
 
@@ -44,13 +44,13 @@ {% if not category.paginated and _year != post.copyrightYear %}
         {% if not loop.first %}
         </section>
         {% endif %}
-        <section>
+        <section class="year">
         <h2>{{ post.copyrightYear }}</h2>
     {% endif %}
     {% set _ = year.append(post.copyrightYear)%}
         {% include 'meta-article.j2.html' %}
     {% if not category.paginated and loop.last %}
-    </section>
+    </section class="year">
     {% endif %}
 {% endfor %}
 </main>

@@ -15,14 +15,14 @@ {% endblock %}
 
 {% block content %}
 <main class="h-feed hatom">
-    <aside>
+    <aside class="intro">
         <div>
             {{ post.text }}
         </div>
     </aside>
 
     {% for category, post in posts %}
-    <section>
+    <section class="section home">
         <h2>in:
             <a href="{{ category.url|relurl(baseurl) }}">
                 <svg width="16" height="16"><use xlink:href="#icon-{{ category.name }}" /></svg>

@@ -121,10 +121,8 @@ {% block lang %}{% endblock %}
 {% block title %}Search results for: <?php echo($_GET['q']); ?>{% endblock %}
 {% block content %}
 
-<main>
-    <header>
-        <h1>Search results for: <?php echo($_GET['q']); ?></h1>
-    </header>
+<main class="h-feed hatom">
+    <h1>Search results for: <?php echo($_GET['q']); ?></h1>
     <dl>
 <?php
     foreach($results as $row) {

@@ -60,9 +60,9 @@ </li>
 {% endblock %}
 
 {% block content %}
-<main>
+<main class="main">
     <article class="h-entry hentry" lang="{{ post.inLanguage }}" id="article">
-        <header>
+        <header class="entry-header">
             <h1 class="p-name entry-title">
                 {% if post.mentions %}
                 <span>
@@ -83,45 +83,45 @@ </a>
                 {% endif %}
             </h1>
 
-            <p>
-                <a rel="license" href="{{ post.license }}" class="u-license">
-                    {{ post.license | extractlicense }}
-                </a>
-                by
+            <p>Licenced under
+                <a rel="license" href="{{ post.license }}" class="u-license">{{ post.license | extractlicense }}</a>,
+                created by
                 <span class="p-author h-card vcard">
                     <img class="u-photo photo" src="{{ post.author.image|relurl(baseurl) }}" alt="" />
                     <a class="p-name u-url fn url" href="{{ post.author.url }}">{{ post.author.name }}</a>
-                    (<a class="u-email email" href="mailto:{{ post.author.email }}">{{ post.author.email }}</a>)
+                    (<a class="u-email email" href="mailto:{{ post.author.email }}">{{ post.author.email }}</a>),
                 </span>
-                at
+                published at
                 <time datetime="{{ post.datePublished }}" class="dt-published published">{{ post.datePublished|printdate }}</time>
                 <time datetime="{{ post.dateModified }}" class="dt-updated updated"></time>
-                <br />
+                to canonical URL
                 <a class="u-url u-uuid bookmark" href="{{ post.url }}">{{ post.url }}</a>
                 {% if post.keywords|length > 0 %}
-                    <br />
+                    with keywords
                     {% for keyword in post.keywords %}
                     #<span class="p-category">{{ keyword }}</span>{% if not loop.last %} {% endif %}
                     {% endfor %}
                 {% endif %}
                 {% if post['@type'] == 'Photograph' %}
                     {% if post.image[0].locationCreated %}
-                    <br />
-                    Location:
+                    from the location
                     <a class="h-geo" href="https://www.openstreetmap.org/#map=14/{{ post.image[0].locationCreated.geo.longitude }}/{{ post.image[0].locationCreated.geo.latitude }}">
                         <span class="p-longitude">{{ post.image[0].locationCreated.geo.longitude }}</span>,
                         <span class="p-latitude">{{ post.image[0].locationCreated.geo.latitude }}</span>
                     </a>
                     {% endif %}
-                {% endif %}
-                {% if post.sameAs|length %}
-                <br />
-                    Syndicated to:
-                    {% for url in post.sameAs %}
-                        <a class="u-syndication" href="{{ url }}">{{ url }}</a>{% if not loop.last and post.sameAs|length >1 %}, {% endif %}
-                    {% endfor %}
                 {% endif %}
             </p>
+            {% if post.sameAs|length %}
+            <p>
+                This post was also syndicated to:
+                <ul>
+                {% for url in post.sameAs %}
+                    <li><a class="u-syndication" href="{{ url }}">{{ url }}</a></li>
+                {% endfor %}
+                </ul>
+            </p>
+            {% endif %}
 
 {% if post.subjectOf %}
             <p class="h-event vevent">

@@ -39,39 +39,35 @@ or (post is defined and post.genre ==  name )
     or ( category is defined and category.name == name )%}class="active"{% endif %}
 {% endmacro %}
 
-<header>
-    <section>
-        <nav>
-            <ul>
-            {% for key, data in menu.items() %}
-                <li>
-                    <a title="{{ data.text }}" href="{{ data.url|relurl(baseurl) }}" {{ activemenu(key) }} >
-                        <svg width="16" height="16">
-                            <use xlink:href="#icon-{{ key }}" />
-                        </svg>
-                        {{ data.text }}
-                    </a>
-                </li>
-            {% endfor %}
-            </ul>
-        </nav>
+<header class="header">
+    <ul>
+    {% for key, data in menu.items() %}
+        <li>
+            <a title="{{ data.text }}" href="{{ data.url|relurl(baseurl) }}" {{ activemenu(key) }} >
+                <svg width="16" height="16">
+                    <use xlink:href="#icon-{{ key }}" />
+                </svg>
+                {{ data.text }}
+            </a>
+        </li>
+    {% endfor %}
+    </ul>
 
-        <div id="header-forms">
-            {% for action in site.potentialAction %}
-            {% if 'SearchAction' == action['@type'] %}
-            <form id="search" role="search" method="get" action="{{ action.url|relurl(baseurl) }}">
-                <label for="qsub">
-                    <input type="submit" value="search" id="qsub" name="qsub" />
-                    <svg width="16" height="16">
-                        <use xlink:href="#icon-search"></use>
-                    </svg>
-                </label>
-                <input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
-            </form>
-            {% endif %}
-            {% endfor %}
-        </div>
-    </section>
+    <div id="header-forms">
+        {% for action in site.potentialAction %}
+        {% if 'SearchAction' == action['@type'] %}
+        <form id="search" role="search" method="get" action="{{ action.url|relurl(baseurl) }}">
+            <label for="qsub">
+                <input type="submit" value="search" id="qsub" name="qsub" />
+                <svg width="16" height="16">
+                    <use xlink:href="#icon-search"></use>
+                </svg>
+            </label>
+            <input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
+        </form>
+        {% endif %}
+        {% endfor %}
+    </div>
 </header>
 
 {% block content %}
@@ -80,8 +76,7 @@
 {% block pagination %}
 {% endblock %}
 
-<footer class="p-author h-card vcard">
-    <section>
+<footer class="footer p-author h-card vcard">
         <p>
             <a href="https://creativecommons.org/">CC</a>,
             1999-2019,
@@ -94,50 +89,46 @@ </svg>
                 {{ site.author.email }}
             </a>
         </p>
-        <nav>
-            <ul>
-                {% for action in site.potentialAction %}
-                {% if 'FollowAction' == action['@type'] %}
-                <li>
-                    <a href="{{ action.url }}">
-                        <svg width="16" height="16"><use xlink:href="#icon-{{ action['@type'] }}" /></svg>
-                        {{ action.name }}
-                    </a>
-                </li>
+        <ul>
+            {% for action in site.potentialAction %}
+            {% if 'FollowAction' == action['@type'] %}
+            <li>
+                <a href="{{ action.url }}">
+                    <svg width="16" height="16"><use xlink:href="#icon-{{ action['@type'] }}" /></svg>
+                    {{ action.name }}
+                </a>
+            </li>
+            {% endif %}
+            {% endfor %}
+            <li>
+                <a href="{{ site.author.follows }}">
+                    <svg width="16" height="16"><use xlink:href="#icon-following" /></svg>
+                    followings
+                </a>
+            </li>
+            {% for url in site.author.sameAs %}
+            <li>
+                {% if 'cv.html' in url %}
+                <a href="{{ url }}" class="u-url">
+                    <svg width="16" height="16"><use xlink:href="#icon-resume" /></svg>
+                    resume
+                </a>
+                {% elif 'github' in url %}
+                <a rel="me" href="{{ url }}">
+                    <svg width="16" height="16"><use xlink:href="#icon-github" /></svg>
+                    github
+                </a>
                 {% endif %}
-                {% endfor %}
-                <li>
-                    <a href="{{ site.author.follows }}">
-                        <svg width="16" height="16"><use xlink:href="#icon-following" /></svg>
-                        followings
-                    </a>
-                </li>
-                {% for url in site.author.sameAs %}
-                <li>
-                    {% if 'cv.html' in url %}
-                    <a href="{{ url }}" class="u-url">
-                        <svg width="16" height="16"><use xlink:href="#icon-resume" /></svg>
-                        resume
-                    </a>
-                    {% elif 'github' in url %}
-                    <a rel="me" href="{{ url }}">
-                        <svg width="16" height="16"><use xlink:href="#icon-github" /></svg>
-                        github
-                    </a>
-                    {% endif %}
-                </li>
-                {% endfor %}
-            </ul>
-        </nav>
-        <nav>
+            </li>
+            {% endfor %}
+        </ul>
+        <p>
             <a href="https://xn--sr8hvo.ws/%F0%9F%87%BB%F0%9F%87%AE%F0%9F%93%A2/previous">←</a>
                 Member of <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a>
             <a href="https://xn--sr8hvo.ws/%F0%9F%87%BB%F0%9F%87%AE%F0%9F%93%A2/next">→</a>
-        </nav>
-    </section>
-    <section class="tip">
-        <span>Leave me a tip! </span>
-        <nav>
+        </p>
+        <div class="tip">
+            <span>Leave me a tip! </span>
             <ul>
                 {% for action in site.potentialAction %}
                 {% if 'DonateAction' == action['@type'] %}
@@ -150,8 +141,9 @@ </li>
                 {% endif %}
                 {% endfor %}
             </ul>
-        </nav>
-    </section>
+        </div>
+
+
 <!--
     <section>
         <nav>

@@ -1,5 +1,5 @@
 <article class="h-entry hentry" lang="{{ post.inLanguage }}">
-    <header>
+    <header class="entry-header">
         <h3 class="p-name entry-title">
         {% if post.mentions %}
             <span>
@@ -38,7 +38,7 @@ {{ post.text|relurl(baseurl) }}
     </div>
     {% endif %}
 
-    <footer aria-hidden="true" hidden="hidden">
+    <footer class="entry-footer" aria-hidden="true" hidden="hidden">
         Published at
         <time datetime="{{ post.datePublished }}" class="dt-published published">{{ post.datePublished|printdate }}</time>
         <time datetime="{{ post.dateModified }}" class="dt-updated updated"></time>

@@ -9,7 +9,11 @@ }
 
 a:hover {
   color: #014384;
-  border-bottom: 1px solid #014384;
+  border-bottom-color: #014384;
+}
+
+.header a:hover {
+  border-bottom-color: #eee;
 }
 
 code,
@@ -42,14 +46,14 @@ .footnotes hr::before {
   color: #222;
 }
 
-body > header,
-body > footer{
+.header,
+.footer {
   background-color: #333;
   color: #ccc;
 }
 
-body > header a,
-body > footer a,
+.header a,
+.footer a,
 .theme input + label {
   color: #71B3F4;
 }
@@ -58,14 +62,12 @@ input {
   background-color: #222;
 }
 
-body > footer a:hover {
+.footer a:hover {
   color: #fff;
   border-bottom: 1px solid #fff;
 }      
 
-.h-feed aside a,
-.h-feed article a,
-body > nav > ul > li a {
+.pagination a {
   border-bottom: 1px solid #3173b4;
 }
 
@@ -75,4 +77,4 @@ .h-feed aside a:hover,
 .h-feed article a:hover,
 body > nav > ul > li a:hover {
   border-bottom: 1px solid #014384;
-}
+}    

@@ -4,12 +4,12 @@ background-color: #EFE2BA;
 }
 
 a {
-  color: #B77902;
+  color: #3C20F1;
 }
 
 a:hover {
-  color: #D79922;
-  border-bottom: 1px solid #D79922;
+  color: #1C00D1;
+  border-bottom: 1px solid #1C00D1;
 }
 
 code,
@@ -42,38 +42,28 @@ .footnotes hr::before {
   color: #222;
 }
 
-body > header,
-body > footer{
+.header,
+.footer{
   background-color: #D79922;
   color: #F13C20;
 }
 
-body > header a,
-body > footer a,
-.theme input + label {
-  color: #EFE2BA;
-}
-
-input {
-  background-color: #EFE2BA;
+.footer a:hover,
+.header a:hover {
   color: #F13C20;
+  border-bottom-color: #F13C20;
 }
 
-body > footer a:hover {
-  color: #fff;
-  border-bottom: 1px solid #fff;
+.header a.active {
+  color: #F13C20;
+  border-bottom-color: #F13C20;
 }
 
-.h-feed aside a,
-.h-feed article a,
-body > nav > ul > li a {
-  border-bottom: 1px solid #F13C20;
+input {
+  background-color: #EFE2BA;
+  color: #F13C20;
 }
 
-.comments .u-url:hover,
-.footnotes a:hover,
-.h-feed aside a:hover,
-.h-feed article a:hover,
-body > nav > ul > li a:hover {
+.pagination a {
   border-bottom: 1px solid #F13C20;
-}    +}

@@ -13,39 +13,16 @@ color: #eee;
   background-color: #222;
 }
 
-body > header,
-body > footer {
-  background-color: #111;
-  text-align: center;
-  padding: 0.6em 0;
-}
-
-body > nav,
-body > main,
-body > main > article,
-body > main > aside,
-body > main > section,
-body > header > section,
-body > footer > section {
-  max-width: 56em;
-  margin: 0 auto;
-  padding: 0 1em;
-}
-
-hr {
-  border: none;
-}
-
 dt {
   font-weight: bold;
 }
 
-h1, h2, h3, h4, h5, h6, hr,
+h2, h3, h4, h5, h6, hr,
 dt {
   margin: 2em 0 0.6em 0;
 }
 
-main p {
+p {
   margin: 1em 0;
 }
 
@@ -56,6 +33,7 @@ padding-bottom: 1em;
 }
 
 hr {
+  border: none;
   border-bottom: 1px dotted #999;
 }
 
@@ -93,41 +71,6 @@ sup:after {
   content: ']';
 }
 
-input, button, label {
-  -webkit-appearance:none;
-}
-
-nav > ul {
-  list-style-type: none;
-}
-
-nav > ul > li {
- display: inline-block;
-}
-
-body > header form {
-  display: inline-block;
-  padding-left: 0.6em;
-  margin-top: 1em;
-}
-
-body > header a {
-  font-weight: bold;
-  border-bottom: 3px solid transparent;
-  padding-bottom: 0.1em;
-}
-
-body > header a:hover,
-body > header a.active {
-  border-bottom: 3px solid  #eee;
-  color: #eee;
-}
-
-body > header a svg {
-  display: block;
-  margin: 0.1em auto;
-}
-
 blockquote {
   border-left: 3px solid #999;
   margin: 2em 0 2em 1em;
@@ -135,55 +78,17 @@ padding: 0 0 0 1em;
   color: #aaa;
 }
 
+input, button, label {
+  -webkit-appearance:none;
+}
+
 input {
   width: 8em;
-  padding: 0 0.3em;
+  padding: 0.3em;
   border: none;
-  background-color: #333;
-  color: #ccc;
-}
-
-.hidden,
-.theme input, input[type=submit] {
-  display: none;
-}
-
-.theme {
-  margin: 0 0.3em 0 0;
-}
-
-.theme input + label {
-  color: #f90;
-  cursor: pointer;
-  border-bottom: 3px solid transparent;
-  padding-bottom: 0.1em;
-  margin-left:0.6em;
-}
-
-.theme input:hover + label,
-.theme input:checked + label {
-  border-bottom: 3px solid #eee;
+  background-color: #555;
   color: #eee;
-}
-
-body > footer {
-  margin-top: 2em;
-}
-
-body > footer > section > * {
-  margin-bottom: 0.6em;
-}
-
-body > footer .email span {
-  display: none;
-}
-
-body > footer > section.tip > * {
-  display: inline-block;
-}
-
-body > footer > section.tip a {
-  color: #090;
+  
 }
 
 video,
@@ -202,7 +107,7 @@ margin: 2em 0;
 }
 
 figcaption {
-  margin-top: 1em;
+  text-align: center;
 }
 
 figcaption > dl {
@@ -220,10 +125,6 @@ }
 
 figcaption > dl dd {
   margin: 0 0.3em;
-}
-
-.vcard img {
-  height: 1em;
 }
 
 code, pre {
@@ -279,29 +180,11 @@ th, tr:nth-child(even) {
   background-color: rgba(255, 255, 255, .1);
 }
 
-main > header > p {
-  text-align: center;
-}
-
-article > header {
-  border-bottom: 4px double #999;
-  margin-bottom: 2em;
-}
-
-.h-feed article > header {
-  border: none;
-  margin: 0;
-}
-
-.h-feed article .photo .exif {
-  display: none;
-}
-
-main ul {
+.main ul {
   margin-left: 2em;
 }
 
-main ol {
+.main ol {
   margin-left: 3em;
 }
 
@@ -326,58 +209,176 @@ max-width: 96%;
   border-bottom: 1px solid rgba(255, 153, 0, 0);
 }
 
+.footnotes a:hover {
+  border-bottom: 1px solid #eee;
+}
+
 .footnote-back {
   margin: 0 0 0 0.6em;
 }
 
-main > section > article {
-  padding-left: 1em;
+.pagination ol,
+.footnotes ol,
+.header ul,
+.footer ul {
+  list-style-type: none;
+  margin: 0;
+}
+
+.header li,
+.footer li {
+  display: inline-block;
+}
+
+.footer p {
+  margin:0.3em;
+}
+
+.header a {
+  border-bottom: 3px none #eee;
+  padding-bottom: 0.1em;
+}
+
+.header a.active,
+.header a:hover {
+  border-bottom-style: solid;
+  color: #eee;
+}
+
+.h-card img {
+  height: 1em;
+}
+
+.pagination {
+  text-align: center;
+}
+
+.pagination li {
+  display: inline-block;
+  padding: 0.3em;
 }
 
-body > nav {
+.pagination a {
+  border-bottom-style: solid;
+}
+
+.header,
+.footer {
+  background-color: #111;
   text-align: center;
-  margin-top: 2em;
+  padding: 0.6em 1em;
+}
+
+.pagination,
+.h-feed,
+.h-entry {
+  margin:0 auto;
+  max-width: 54em;
+  padding: 0 0.3em 2em 0.3em;
 }
 
-body > nav > ul > li {
-  margin: 0 0.6em;
+
+.header {
+  display: flex;
+  justify-content:space-between;
+  justify-items:center;
 }
 
-.h-feed aside a,
-.h-feed article a,
-body > nav > ul > li a {
-  border-bottom: 1px solid rgba(255, 153, 0, 0.5);
+.header form,  .header > * {
+  display: inline-block;
 }
 
-.comments .u-url:hover,
-.footnotes a:hover,
-.h-feed aside a:hover,
-.h-feed article a:hover,
-body > nav > ul > li a:hover {
-  border-bottom: 1px solid #eee;
+.theme {
+  margin: 0 1em;
 }
 
+.theme input, input[type=submit] {
+  display: none;
+}
 
-@media all and (min-width: 58em) {
-  body > header > section {
+.theme input + label {
+  color: #f90;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  padding-bottom: 0.1em;
+  margin-left:0.6em;
+}
+
+.theme input:hover + label,
+.theme input:checked + label {
+  border-bottom: 3px solid #eee;
+  color: #eee;
+}
+
+@media all and (min-width: 78em) {
+  .header,
+  .footer {
     text-align: left;
-    display: flex;
-    justify-content:space-between;
+    position: fixed;
+    left: 0;
+    height: 100vh;
+    z-index: 10;
+    width: 22em;
+    padding: 1em;
+    display: block;
+  }
+  
+  .footer {
+    z-index: 20;
+    bottom: 0;
+    height: auto;
+  }
+  
+  .pagination,
+  .h-feed,
+  .main {
+    margin-left: 22em;
+    padding: 1em;
+    max-width: 54em;
+  }
+  
+  .header li,
+  .footer li {
+    display: block;
+    margin: 0.2em 0;
   }
 
-  body > header a svg {
-    display: inline-block;
+  .theme {
+    margin: 0 0.3em 0 0;
   }
 
-  body > header form {
-    margin-top: 0;
+  .theme, #search {
+    padding: 1em 0;
   }
+
+  input {
+    width: 16em;
+  }
+  
 }
 
-body > img {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 10em;
-  height: auto;
-}    +@media all and (max-width: 46em) {
+  .header {
+    display: block;
+  }
+  
+  .header > * {
+    display: block;
+  }
+    
+  #search {
+    margin-top: 0.6em;
+  }
+  
+  .header a {
+    display: block;
+    text-align: center;
+    margin-bottom: 0.6em;
+  }
+  
+  .header a svg {
+    display: block;
+    margin: 0 auto;
+  }
+}
+