From 16b4af073ca93b0d6387dcee7f7fb88bf251f900 Mon Sep 17 00:00:00 2001
From: mat ess <mat@mat.services>
Date: Sun, 14 Aug 2022 13:05:50 -0400
Subject: [PATCH] Accessibility fixes

---
 sass/style/main.scss         |   6 ++
 sass/style/theme/light.scss  |   2 +-
 templates/base.html          |   8 ++-
 templates/macros/macros.html | 136 ++++++++++++++++++-----------------
 templates/posts.html         |   8 ++-
 5 files changed, 87 insertions(+), 73 deletions(-)

diff --git a/sass/style/main.scss b/sass/style/main.scss
index f67090d..a183c56 100644
--- a/sass/style/main.scss
+++ b/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
diff --git a/sass/style/theme/light.scss b/sass/style/theme/light.scss
index b26db5b..cd6bad8 100644
--- a/sass/style/theme/light.scss
+++ b/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;
diff --git a/templates/base.html b/templates/base.html
index 8b66d0d..9d17ba1 100644
--- a/templates/base.html
+++ b/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>
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 1e83276..2e9603c 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -55,86 +55,88 @@
 {% endmacro content %}
 
 {% macro content(page) %}
-<main>
-  <article>
-    <div class="title">
-      {{ post_macros::page_header(title=page.title) }}
+<article>
+  <div class="title">
+    {{ post_macros::page_header(title=page.title) }}
 
-      {% if page.date %}
-      <div class="meta">
-        Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+    {% if page.date %}
+    <div class="meta">
+      Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
 
-        {% if page.draft %}
-        <span class="draft-label">DRAFT</span>
-        {% endif %}
-      </div>
-      {% if page.updated %}
-      <div class="meta">
-        Updated on <time>{{ page.updated | date(format="%Y-%m-%d") }}</time>
-      </div>
-      {% endif %}
-      <div class="meta">
-        {{ page.word_count }} words, {{ page.reading_time }} minute read
-      </div>
+      {% if page.draft %}
+      <span class="draft-label">DRAFT</span>
       {% endif %}
     </div>
-
-    {% if page.extra.tldr %}
-    <div class="tldr">
-      <strong>tl;dr:</strong>
-      {{ page.extra.tldr }}
+    {% if page.updated %}
+    <div class="meta">
+      Updated on <time>{{ page.updated | date(format="%Y-%m-%d") }}</time>
     </div>
     {% endif %}
+    <div class="meta">
+      {{ page.word_count }} words, {{ page.reading_time }} minute read
+    </div>
+    {% endif %}
+  </div>
 
-    {# Optional table of contents #}
-    {% if config.extra.toc | default(value=false) %}
-    {% if page.toc %}
-    <h2>Table of Contents</h2>
-    <ul>
-      {% for h1 in page.toc %}
-      <li>
-        <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-        {% if h1.children %}
+  {% if page.extra.tldr %}
+  <div class="tldr">
+    <strong>tl;dr:</strong>
+    {{ page.extra.tldr }}
+  </div>
+  {% endif %}
+
+  {# Optional table of contents #}
+  {% if config.extra.toc | default(value=false) %}
+  {% if page.toc %}
+  <h2>Table of Contents</h2>
+  <ul>
+    {% for h1 in page.toc %}
+    <li>
+      <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+      {% if h1.children %}
+      <ul>
+        {% for h2 in h1.children %}
+        <li>
+          <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+        </li>
+
+        {% if h2.children %}
         <ul>
-          {% for h2 in h1.children %}
+          {% for h3 in h2.children %}
           <li>
-            <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
           </li>
-
-          {% if h2.children %}
-          <ul>
-            {% for h3 in h2.children %}
-            <li>
-              <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
-            </li>
-            {% endfor %}
-          </ul>
-          {% endif %}
           {% endfor %}
         </ul>
         {% endif %}
-      </li>
-      {% endfor %}
-    </ul>
-    {% endif %}
-    {% endif %}
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+  {% endif %}
 
-    <section class="body">
-      {{ page.content | safe }}
-    </section>
+  <section class="body">
+    {{ page.content | safe }}
+  </section>
 
-    {% if page.taxonomies and page.taxonomies.tags %}
-    <div class="post-tags">
-      <span class="meta" id="tagged-with-label">this post is tagged with</span>
-      <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>
-          {% endfor %}
-        </ul>
-      </nav>
-    </div>
-    {% endif %}
-  </article>
-</main>
+  {% if page.taxonomies and page.taxonomies.tags %}
+  <div class="post-tags">
+    <span class="meta" id="tagged-with-label">this post is tagged with</span>
+    <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>
+        {% endfor %}
+      </ul>
+    </nav>
+  </div>
+  {% endif %}
+</article>
 {% endmacro content %}
\ No newline at end of file
diff --git a/templates/posts.html b/templates/posts.html
index 1e346a7..128dacb 100644
--- a/templates/posts.html
+++ b/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 %}
\ No newline at end of file
+{% endblock trailing_content %}
\ No newline at end of file