♿️ fix(a11y): update heading tags (#140)

sass/main.scss

@@ -150,12 +150,10 @@ article {
 
 .section-title {
     display: block;
-    font-size: 2.2em;
+    margin: 0;
-    margin-bottom: 0em;
-    margin-left: 0;
-    margin-right: 0;
-    font-weight: 550;
     color: var(--text-color-high-contrast);
+    font-weight: 550;
+    font-size: 2.2em;
 }
 
 .last-updated {

sass/parts/_home-banner.scss

@@ -17,6 +17,7 @@
         line-height: 3rem;
 
         #home-banner-header {
+            margin: 0;
             margin-bottom: 1rem;
             font-weight: 550;
             font-size: 2.8rem;

sass/parts/_misc.scss

@@ -6,6 +6,7 @@
 }
 
 .article-title {
+    margin: 0;
     color: var(--text-color-high-contrast);
     display: block;
     font-size: 2rem;

sass/parts/_posts_list.scss

@@ -32,6 +32,7 @@
 
 
         .bloglist-title {
+            margin: 0;
             font-size: 1.2em;
             font-weight: bold;
 

templates/macros/cards_pages.html

@@ -27,13 +27,13 @@
         {% endif %}
 
         <div class="card-info">
-            <h1 class="card-title">
+            <h2 class="card-title">
                 {% if page.extra.link_to %}
                     <a rel="{{ rel_attributes }}" {{ blank_target }} href={{ page.extra.link_to }}>{{page.title}}</a>
                 {% else %}
                     <a href={{ page.permalink }}>{{page.title}}</a>
                 {% endif %}
-            </h1>
+            </h2>
 
             <div class="card-description">
                 {% if page.description %}

templates/macros/content.html

@@ -49,9 +49,9 @@
 
 <main>
     <article>
-        <div class="article-title">
+        <h1 class="article-title">
             {{ page.title }}
-        </div>
+        </h1>
 
         <ul class="meta">
             {% if page.draft %}

templates/macros/list_posts.html

@@ -18,9 +18,9 @@
             {% endif %}
 
             <div class="bloglist-content">
-                <div class="bloglist-title">
+                <h2 class="bloglist-title">
                     <a href="{{ post.permalink }}">{{ post.title }}</a>
-                </div>
+                </h2>
 
                 {% if post.taxonomies.tags %}
                     <div class="bloglist-tags">

templates/macros/page_desc.html

@@ -2,7 +2,7 @@
 
 <div id="banner-container-home">
     <div id="home-banner-text">
-        <div id="home-banner-header">{{ desc.title }}</div>
+        <h1 id="home-banner-header">{{ desc.title }}</h1>
         <section id="banner-home-subtitle">
             {{ page.content | safe }}
         </section>

templates/macros/page_header.html

@@ -1,7 +1,7 @@
 {% macro page_header(title) %}
 
-<div class="title-container section-title bottom-divider">
+<h1 class="title-container section-title bottom-divider">
     {{ title }}
-</div>
+</h1>
 
 {% endmacro page_header %}