Accessibility fixes

sass/style/main.scss

@@ -103,6 +103,12 @@ footer {
   code {
     color: var(--text-0);
   }
+
+  code:hover {
+    background-color: var(--primary-color);
+    color: var(--hover-color);
+    border-radius: 0;
+  }
 }
 
 // Different sized headers

sass/style/theme/light.scss

@@ -3,7 +3,7 @@
   --text-1: rgba(0, 0, 0, 66%);
 
   --bg-0: #fff;
-  --bg-1: rgba(169, 169, 169, 30%);
+  --bg-1: rgba(210, 210, 210, 0.55);
 
   --primary-color: lightcoral;
   --hover-color: white;

templates/base.html

@@ -9,11 +9,15 @@
     {% include "partials/nav.html" %}
 
     {# Post page is the default #}
-    <div class="inner">
+    <main class="inner">
       {% block main_content %}
       Nothing here?!
       {% endblock main_content %}
-    </div>
+    </main>
+
+    {% block trailing_content %}
+
+    {% endblock trailing_content %}
 
     {% include "partials/footer.html" %}
   </div>

templates/macros/macros.html

@@ -55,7 +55,6 @@
 {% endmacro content %}
 
 {% macro content(page) %}
-<main>
 <article>
   <div class="title">
     {{ post_macros::page_header(title=page.title) }}
@@ -129,12 +128,15 @@
     <nav class="nav tags" aria-labelledby="tagged-with-label">
       <ul class="tags">
         {% for tag in page.taxonomies.tags %}
-          <li><a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">{{ tag }}</a></li>
+        <li>
+          <a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">
+            #{{ tag }}
+          </a>
+        </li>
         {% endfor %}
       </ul>
     </nav>
   </div>
   {% endif %}
 </article>
-</main>
 {% endmacro content %}

templates/posts.html

@@ -3,7 +3,7 @@
 {% block main_content %}
 {{ post_macros::page_header(title="blog posts") }}
 
-<main class="list">
+<div class="list">
   {%- if paginator %}
   {%- set show_pages = paginator.pages -%}
   {% else %}
@@ -12,8 +12,10 @@
   {% endif -%}
 
   {{ post_macros::list_posts(pages=show_pages) }}
-</main>
+</div>
+{% endblock main_content %}
 
+{% block trailing_content %}
 {% if paginator %}
 <ul class="pagination">
   {% if paginator.previous %}
@@ -29,4 +31,4 @@
   {% endif %}
 </ul>
 {% endif %}
-{% endblock main_content %}
+{% endblock trailing_content %}