corrected and improved semantic markup

content/pages/datenschutz.md

@@ -8,6 +8,7 @@ featured_image:
     alt: die Abkürzung "DSGVO" vor einem blauem, einem Computerchip nachempfundenen Hintergrund
     credit: Gerd Altmann | pixabay.com
     credit_link: https://pixabay.com/users/geralt-9301
+footer_line: Erstellt nach Vorlage des <a href="https://www.ihk.de/" target="_blank">IHK</a>
 ---
 
 ## I. Name und Anschrift des Verantwortlichen

theme/static/css/custom.css

@@ -400,7 +400,7 @@ figcaption {
 
 
 /* settings for articles */
-#article-body, #page-body {
+#content-body, #content-body {
   overflow: hidden;
   display: flex;
   justify-content: space-between;
@@ -494,7 +494,7 @@ figcaption {
     min-width: 300px;
   }
 
-  .wcard-title .tag-content {
+  .wcard-title, .tag-content {
     flex: 1 0 calc((100% - (2 * var(--pico-nav-element-spacing-horizontal))) * 0.382);
     min-width: 185px;
     display: flex;

theme/templates/article.html

@@ -14,9 +14,12 @@
 {% endblock content_header %} 
 
 {% block content_body %}
-<article id="article-body">
+<article>
+  <div id="content-body">
     <div class="body-column-text">
-  {% if article.content | length is not eq(0) %}{{ article.content }}{% endif %}
+    {% if article.content | length is not eq(0) %}
+    {{ article.content }}
+    {% endif %}
     {% if article.stats or article.tags %}
       <div>
         <h2>Details</h2>
@@ -34,13 +37,17 @@
           {% endif %}
         {% endif %}
         {% if article.tags is defined %}
-        <li>Schlagworte: <ul class="article-tags">
+          <li>Schlagworte: 
-          {% for t in article.tags %}<li><a href="/tag/{{ t | lower }}/">{{ t }}</a></li>{% endfor %}
+            <ul class="article-tags">
-        </ul></li>
+            {% for t in article.tags %}
+              <li><a href="/tag/{{ t | lower }}/">{{ t }}</a></li>
+            {% endfor %}
+            </ul>
+          </li>
         {% endif %} 
         </ul>
       </div>
-{% endif %}
+    {% endif %}
     </div>
     <div class="body-column-img">
     {% if article.featured_image is defined %}
@@ -52,8 +59,12 @@
       <h2>Klappentext</h2>
       <blockquote>{{ article.klappentext }}</blockquote>
     {% endif %} 
-</article>
+    </div>  
-<footer class="article-footer">
+  </div>
+  {% endblock content_body %}
+  {% block content_footer %}
+  <footer class="content-footer">
     <a href="/{{ article.save_as.split('/')[:-1] | join('/') }}/">&larr; {{ article.category }}</a>
-</footer>
+  </footer>
-{% endblock content_body %}
+</article>
+{% endblock content_footer %}

theme/templates/contact.html

@@ -1,15 +1,13 @@
-{% extends "page.html" %}
+{% extends "page.html" %} {% block content_header %}
-
-{% block content_body %}
-{% if page.featured_image %}
-  {% from 'includes/macros.html' import pi %}
-  {% set i = page.featured_image[0] %}
-  {{ pi(i.pic, i.link, i.text, i.alt, i.credit, i.credit_link) }}
-{% endif %} 
 <article>
-  {% include "includes/contact_form.html" %}
+  {% if page.featured_image %}
+  <header class="content-header">
+    {% from 'includes/macros.html' import fi %} {% set i =
+    page.featured_image[0] %} {{ fi(i.pic, i.link, i.text, i.alt, i.credit,
+    i.credit_link) }}
+  </header>
+  {% endif %} {% endblock content_header %} {% block content_body %} {% include
+  "includes/contact_form.html" %} {% endblock content_body %} {% block
+  content_footer %}
 </article>
-{% endblock content_body %}
-
-{% block content_footer %}
 {% endblock content_footer %}

theme/templates/includes/macros.html

@@ -8,12 +8,6 @@
 </div>
 {% endmacro %}
 
-{# output a featured image for a page #}
-{% macro pi(pic, link='', alt='', title='', credit='', credit_link='') %}
-  <article id="no-bottom-margin">{{ fi(pic, link, text, alt, credit, credit_link) }}</article>
-{% endmacro %} 
-
-
 {# output a card image #}
 {% macro ci(pic, link='', alt='', title='', credit='', credit_link='') %}
 <div class="card-image">

theme/templates/page.html

@@ -1,7 +1,10 @@
 {% extends "base.html" %}
-{% block title %}{{ page.title }} - {{ SITENAME }}{% endblock %}
+{% block title %}
-{% block metadesc %}{% if page.summary %}{{ page.summary|e }}{% else %}{{ super() }}{% endif
+  {{ page.title }} - {{ SITENAME }}
-%}{% endblock %}
+{% endblock %}
+{% block metadesc %}
+{% if page.summary %}{{ page.summary|e }}{% else %}{{ super() }}{% endif %}
+{% endblock %}
 
 {% block content_header %}
 <header id="main-header">
@@ -10,24 +13,30 @@
 {% endblock content_header %}
 
 {% block content_body %}
-<article id="page-body">
+<article>
+  <div id="content-body">
     <div class="body-column-text">
     {{ page.content }}
     </div>
     <div class="body-column-image">
-  {% if page.featured_image is defined %}
+    {% if page.featured_image %}
       {% from 'includes/macros.html' import fi %}
       {% set i = page.featured_image[0] %}
       {{ fi(i.pic, i.link, i.text, i.alt, i.credit, i.credit_link) }}
     {% endif %} 
     </div>  
-</div>
+  </div>
-{% endblock content_body %}
+  {% endblock content_body %}
 
-{% block content_footer %}
+  {% block content_footer %}
-{% if page.footer_line is defined %}
+  {% if page.footer_line %}
-<p class="muted">{{ page.footer_line }}</p>
+  <footer class="content-footer">
-{% elif page.footer_include is defined %}
+    <p>{{ page.footer_line }}</p>
-{% include page.footer_include %}
+  </footer>
-{% endif %}
+  {% elif page.footer_include %}
-{% endblock content_footer %}
+  <footer class="content-footer">
+    {% include page.footer_include %}
+  </footer>
+  {% endif %}
+  {% endblock content_footer %}
+</article>

theme/templates/termine.html

@@ -4,12 +4,15 @@
 {% set date_format = "%d.%m." %}
 {% set time_format = "%H:%M" %}
 {% block content_body %}
-  {% if page.featured_image %}
+<article>
+{% if page.featured_image %}
+  <header class="content-header">
     {% from 'includes/macros.html' import fi %}
     {% set i = page.featured_image[0] %}
-    <article id="no-bottom-margin">{{ fi(i.pic, i.link, i.text, i.alt, i.credit, i.credit_link) }}</article>
+    {{ fi(i.pic, i.link, i.text, i.alt, i.credit, i.credit_link) }}
-  {% endif %} 
+  </header>
-<article id="page-body">
+{% endif %} 
+  <div id="content-body">
     <table class="events">
       <thead>
         <tr>
@@ -28,14 +31,16 @@
           </td>
         </tr>
         {% endfor %}
-      <tr><td colspan="2"><small class="tr-muted">Letzte Aktualisierung: {{ page.written_at | strftime("%d.%m.%Y, %H:%M Uhr") }}</small></td></tr>
+      </tbody>
-    </body>
     </table>
+  </div>
+  {% endblock content_body %}
+  {% if page.written_at is defined %}
+  {% block content_footer %}
+  <footer class="content-footer">
+    <p>Letzte Aktualisierung: {{ page.written_at | strftime("%d.%m.%Y, %H:%M Uhr") }}</p>
+  </footer>
+  {% endblock content_footer %}
+  {% endif %}
 </article>
-{% endblock content_body %}
-
-{% if page.written_at is defined %}
-{% block content_footer %}
-{% endblock content_footer %}
-{% endif %}
 {% endif %}