@@ -12,7 +12,7 @@ {% endblock %}
 
 {% block pagination %}
 {% if category.paginated %}
-<div class="pagination">
+<nav class="pagination">
     <ol>
         {% for y, url in category.years.items() %}
         {% if (y == category.year) or (not category.year and loop.first) %}
@@ -30,12 +30,12 @@ </li>
         {% endif %}
         {% endfor %}
     </ol>
-</div>
+</nav>
 {% endif %}
 {% endblock %}
 
 {% block content %}
-<main class="h-feed hatom">
+<main id="main" class="h-feed hatom">
 
 {% set year = [0] %}
 {% for post in posts %}

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

@@ -60,7 +60,7 @@ </li>
 {% endblock %}
 
 {% block content %}
-<main class="main">
+<main id="main">
     <article class="h-entry hentry" lang="{{ post.inLanguage }}" id="article">
         <header class="entry-header">
             <h1 class="p-name entry-title">
@@ -145,7 +145,7 @@
         </header>
 
         {% if post.review %}
-        <div class="h-review hreview">
+        <section class="h-review hreview">
             <strong>Review summary of: <a href="{{ post.review.url }}" class="p-name u-url p-item h-product item fn url">{{ post.review.name }}</a></strong>
             <p>
                 By
@@ -162,18 +162,18 @@ <span class="best">{{ post.review.reviewRating.bestRating }}</span>
                 </span>
             </p>
             <p class="p-summary summary">{{ post.review.text }}</p>
-        </div>
+        </section>
         {% endif %}
 
         {% if post.description|length %}
-        <div class="e-summary entry-summary">
+        <section class="e-summary entry-summary">
             {{ post.description|relurl(baseurl) }}
-        </div>
+        </section>
         {% endif %}
 
-        <div class="e-content entry-content">
+        <section class="e-content entry-content">
             {{ post.text|relurl(baseurl) }}
-        </div>
+        </section>
 
     {% if 'WebPage' != post['@type'] %}
         <section class="syndication">

@@ -39,34 +39,38 @@ or (post is defined and post.genre ==  name )
     or ( category is defined and category.name == name )%}class="active"{% endif %}
 {% endmacro %}
 
-<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>
+<header id="header">
+    <div>
+        <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>
 
-    <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 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>
     </div>
 </header>
 
@@ -76,7 +80,8 @@
 {% block pagination %}
 {% endblock %}
 
-<footer class="footer p-author h-card vcard">
+<footer id="footer" class="p-author h-card vcard">
+    <div>
         <p>
             <a href="https://creativecommons.org/">CC</a>,
             1999-2019,
@@ -107,19 +112,21 @@ followings
                 </a>
             </li>
             {% for url in site.author.sameAs %}
+            {% if 'cv.html' in url %}
             <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 %}
+            </li>
+            {% elif 'github' in url %}
+            <li>
                 <a rel="me" href="{{ url }}">
                     <svg width="16" height="16"><use xlink:href="#icon-github" /></svg>
                     github
                 </a>
-                {% endif %}
             </li>
+            {% endif %}
             {% endfor %}
         </ul>
         <p>
@@ -142,51 +149,7 @@ {% endif %}
                 {% endfor %}
             </ul>
         </div>
-
-
-<!--
-    <section>
-        <nav>
-            <ul>
-                <li>
-                    <a href="https://indieweb.org/">
-                        <svg width="80" height="15">
-                            <use xlink:href="#button-indieweb"/>
-                        </svg>
-                    </a>
-                </li>
-                <li>
-                    <a href="http://microformats.org/">
-                        <svg width="80" height="15">
-                            <use xlink:href="#button-microformats"/>
-                        </svg>
-                    </a>
-                </li>
-                <li>
-                    <a href="https://www.w3.org/TR/webmention/">
-                        <svg width="80" height="15">
-                            <use xlink:href="#button-webmention"/>
-                        </svg>
-                    </a>
-                </li>
-{% block cc %}
-                <li>
-                    <a href="{{ site.license }}">
-                        <svg width="80" height="15">
-                            <use xlink:href="#button-cc"/>
-                        </svg>
-                    </a>
-                </li>
-{% endblock %}
-                <li>
-                    <svg width="80" height="15">
-                        <use xlink:href="#button-nojs"/>
-                    </svg>
-                </li>
-            </ul>
-        </nav>
-    </section>
--->
+    </div>
 </footer>
 
 <script>

@@ -14,7 +14,4 @@
 kcl(function () {
     var st = document.getElementById('css_surprise');
     st.setAttribute('media', 'all');
-    var e = document.createElement('img');
-    e.src = '/iddqd.gif';
-    document.body.appendChild(e);
 })

@@ -24,18 +24,18 @@ <a href="{{ post.url }}" class="u-url bookmark"></a>
     </header>
 
     {% if post.description|length %}
-    <div class="e-summary entry-summary">
+    <section class="e-summary entry-summary">
         {{ post.description|relurl(baseurl) }}
         <span class="more">
             <a href="{{ post.url|relurl(baseurl) }}">
             {% if post.inLanguage == 'hu' %}Tovább »{% else %}Continue »{% endif %}
             </a>
         </span>
-    </div>
+    </section>
     {% else %}
-    <div class="e-content entry-content">
+    <section class="e-content entry-content">
         {{ post.text|relurl(baseurl) }}
-    </div>
+    </section>
     {% endif %}
 
     <footer class="entry-footer" aria-hidden="true" hidden="hidden">

@@ -12,7 +12,7 @@ color: #014384;
   border-bottom-color: #014384;
 }
 
-.header a:hover {
+#header a:hover {
   border-bottom-color: #eee;
 }
 
@@ -46,15 +46,15 @@ .footnotes hr::before {
   color: #222;
 }
 
-.header,
-.footer {
+#header,
+#footer {
   background-color: #333;
   color: #ccc;
 }
 
-.header a,
-.footer a,
-.theme input + label {
+#header a,
+#footer a,
+#theme input + label {
   color: #71B3F4;
 }
 
@@ -62,19 +62,17 @@ input {
   background-color: #222;
 }
 
-.footer a:hover {
+#footer a:hover {
   color: #fff;
   border-bottom: 1px solid #fff;
 }      
 
-.pagination a {
+#pagination a {
   border-bottom: 1px solid #3173b4;
 }
 
-.comments .u-url:hover,
-.footnotes a:hover,
-.h-feed aside a:hover,
-.h-feed article a:hover,
-body > nav > ul > li a:hover {
+#comments .u-url:hover,
+#main a:hover,
+#pagination a:hover {
   border-bottom: 1px solid #014384;
-}    +}        

@@ -1,34 +0,0 @@
-main.photo {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-main.photo article {
-  max-width: 24em;
-  margin: 0.6em;
-  display: grid;
-  position: relative;
-}
-
-main.photo article figure {
-  margin: 0;
-  padding: 0;
-}
-
-main.photo article h2 {
-  margin: 0;
-  padding: 0.6em;
-  background: rgba(0,0,0,0.7);
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  text-align: center;  
-  
-}
-
-main.photo article figcaption,
-main.photo article p,
-main.photo article section {
-  display: none;
-}

@@ -29,7 +29,7 @@
 h1 {
   text-transform:uppercase;
   text-align: center;
-  padding-bottom: 1em;
+  margin: 1em 0 2em 0;
 }
 
 hr {
@@ -88,7 +88,7 @@ padding: 0.3em;
   border: none;
   background-color: #555;
   color: #eee;
-  
+
 }
 
 video,
@@ -110,20 +110,20 @@ figcaption {
   text-align: center;
 }
 
-figcaption > dl {
+.exif {
   margin-top: 1em;
   color: #666;
 }
 
-figcaption > dl * {
+.exif * {
   display: inline-block;
 }
 
-figcaption > dl dt {
+.exif dt {
   display: none;
 }
 
-figcaption > dl dd {
+.exif dd {
   margin: 0 0.3em;
 }
 
@@ -180,12 +180,12 @@ th, tr:nth-child(even) {
   background-color: rgba(255, 255, 255, .1);
 }
 
-.main ul {
+#main ul {
   margin-left: 2em;
 }
 
-.main ol {
-  margin-left: 3em;
+#main ol {
+  margin-left: 2em;
 }
 
 li p {
@@ -198,7 +198,7 @@ color: #ccc;
   font-weight: bold;
 }
 
-.comments .u-url,
+#comments .u-url,
 .footnotes a {
   display: inline-block;
   overflow: hidden;
@@ -217,30 +217,30 @@ .footnote-back {
   margin: 0 0 0 0.6em;
 }
 
-.pagination ol,
+#pagination ol,
 .footnotes ol,
-.header ul,
-.footer ul {
+#header ul,
+#footer ul {
   list-style-type: none;
   margin: 0;
 }
 
-.header li,
-.footer li {
+#header li,
+#footer li {
   display: inline-block;
 }
 
-.footer p {
+#footer p {
   margin:0.3em;
 }
 
-.header a {
+#header a {
   border-bottom: 3px none #eee;
   padding-bottom: 0.1em;
 }
 
-.header a.active,
-.header a:hover {
+#header a.active,
+#header a:hover {
   border-bottom-style: solid;
   color: #eee;
 }
@@ -249,54 +249,60 @@ .h-card img {
   height: 1em;
 }
 
-.pagination {
+#pagination {
   text-align: center;
 }
 
-.pagination li {
+#pagination li {
   display: inline-block;
   padding: 0.3em;
 }
 
-.pagination a {
+#pagination a {
   border-bottom-style: solid;
 }
 
-.header,
-.footer {
+#header,
+#footer {
   background-color: #111;
+  
+  padding: 0.6em 1em;
+}
+
+#footer {
   text-align: center;
-  padding: 0.6em 1em;
 }
 
-.pagination,
-.h-feed,
-.h-entry {
-  margin:0 auto;
+#header > *,
+#footer > * {
   max-width: 54em;
-  padding: 0 0.3em 2em 0.3em;
+  margin: 0 auto;
 }
 
+#pagination,
+#main {
+  margin:0 auto;
+  max-width: 54em;
+  padding: 1em 0.3em;
+}
 
-.header {
-  display: flex;
-  justify-content:space-between;
-  justify-items:center;
+#header #header-forms {
+  float: right;
 }
 
-.header form,  .header > * {
+#header form, #header > div > * {
   display: inline-block;
 }
 
-.theme {
+#theme {
   margin: 0 1em;
 }
 
-.theme input, input[type=submit] {
+#theme input, input[type=submit] {
   display: none;
 }
 
-.theme input + label {
+#theme input + label {
   color: #f90;
   cursor: pointer;
   border-bottom: 3px solid transparent;
@@ -304,81 +310,39 @@ padding-bottom: 0.1em;
   margin-left:0.6em;
 }
 
-.theme input:hover + label,
-.theme input:checked + label {
+#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;
-    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;
-  }
-
-  .theme {
-    margin: 0 0.3em 0 0;
-  }
-
-  .theme, #search {
-    padding: 1em 0;
-  }
-
-  input {
-    width: 16em;
-  }
-  
+.h-feed .exif {
+  display: none;
 }
 
-@media all and (max-width: 46em) {
-  .header {
+@media all and (max-width: 47em) {
+  #header > * {
     display: block;
+    text-align:center;
   }
-  
-  .header > * {
+
+  #header #header-forms {
     display: block;
+    float:unset;
   }
     
   #search {
     margin-top: 0.6em;
   }
-  
-  .header a {
+
+  #header a {
     display: block;
     text-align: center;
     margin-bottom: 0.6em;
   }
-  
-  .header a svg {
+
+  #header a svg {
     display: block;
     margin: 0 auto;
   }
-}
-                    +}            

@@ -58,7 +58,7 @@ }
 
 function doTheme() {
     var themeform = document.createElement('form');
-    themeform.className = "theme";
+    themeform.id = "theme";
     themeform.innerHTML='<svg width="16" height="16"><use xlink:href="#icon-contrast"></use></svg>';
     theme_container.insertBefore(themeform, theme_insbefore);
     var schemes = ["dark", "light"];