From 65fc30a717c5095ec5afde324a060eb6330e0a80 Mon Sep 17 00:00:00 2001
From: MatthiasSaihttam <MatthiasSaihttam1@gmail.com>
Date: Sat, 11 Sep 2021 15:18:34 -0400
Subject: [PATCH] Accessibility improvements

* Make the accent color in the dark theme lighter
* Change the selected tab to an h1 (and CSS changes)
* Change the main wrap to a `main` tag
---
 main/static/main/main.css                | 15 ++++++++++++---
 main/templates/whispermaphone/about.html | 10 +++++-----
 main/templates/whispermaphone/index.html |  4 ++--
 main/templates/whispermaphone/login.html |  2 +-
 main/templates/whispermaphone/page.html  |  4 ++--
 main/templates/whispermaphone/post.html  |  2 +-
 6 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/main/static/main/main.css b/main/static/main/main.css
index 4b9cfbf..70f49d8 100644
--- a/main/static/main/main.css
+++ b/main/static/main/main.css
@@ -9,9 +9,11 @@
     :root {
         /*Background and text colors from Atom One Dark*/
         --background-color: #23252E;
+        /*C9CED5*/
         --text-color: #C5CBD3;
         /*A lot of accent colors work with this one*/
-        --accent-color: #78916e;
+        /*Old, og: #78916e; AA compliant: #7F9875; AAA compliant: #96BD86 */
+        --accent-color: #7F9875;
         /* Pink     Official Green   Forest      Lime    Dark theme-green    Yellow  Muted yellow    */
         /* #D787FF  #5FAF87,         #286546     #75a98a #78916e,            #968540 #9a9168         */
     }
@@ -167,7 +169,7 @@ a {
 /* Navbar styles */
 #main-nav {
     padding: 4% 30px 15px;
-    font-size: 3em;
+    font-size: 3rem !important;
     font-weight: normal;
     margin: 0;
     overflow: auto;
@@ -180,7 +182,14 @@ a {
     font-family: Georgia, Libre Baskerville, serif;
 }
 
-#main-nav span.text {
+#main-nav h1.text {
     border-bottom: 4px solid var(--accent-color);
 }
 
+#main-nav h1 {
+    /* Disable browser styles for h1 */
+    font-size: inherit;
+    font-weight: inherit;
+    display: inline;
+}
+
diff --git a/main/templates/whispermaphone/about.html b/main/templates/whispermaphone/about.html
index 1d03876..1d68376 100644
--- a/main/templates/whispermaphone/about.html
+++ b/main/templates/whispermaphone/about.html
@@ -4,7 +4,7 @@
 
 {% block navigation %}
     <a href="/" class="text" style="border: none">Thoughts</a>
-    <span class="text">About</span>{% if authenticated %}
+    <h1 class="text">About</h1>{% if authenticated %}
     <a href="/post" class="text" style="border: none">Post</a>
 {% endif %}
 {% endblock %}
@@ -93,7 +93,7 @@
         There are no guarantees when you’re shouting into the void. But the void doesn’t normally shout back.
         No one ever said the void wasn’t listening. You’re listening. This is my void.
     </p>
-    
+
     <p class="text">
         I use single quotes to indicate that I’m paraphrasing, and double-quotes to indicate a direct quotation from someone else.
         Sometimes I will not cite my source, because the origin is less important that the words.
@@ -243,7 +243,7 @@
     <p class="text">
         I bought a book earlier today. I am writing instead of reading it. The irony. I created this site to give me a space to write, and yet, often I post here merely things that I have read. The irony.
     </p>
-    
+
     <p class="text">
         Thank you for coming to my website, and reading some of my thoughts.
         It really does mean a lot to me that you’re interested enough to read them.
@@ -269,7 +269,7 @@
     </p>
 
     <p class="text">
-        Pray with me. <em>The Lord is close to the brokenhearted and saves those who are crushed in spirit.</em> The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. 
+        Pray with me. <em>The Lord is close to the brokenhearted and saves those who are crushed in spirit.</em> The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me. The LORD is close to me.
     </p>
 
     <p class="text">
@@ -302,7 +302,7 @@
     <p class="text">
         Poetry is text written to convey emotion. Text is written to convey emotion. This is text.
     </p>
-    
+
     <p>
         This is not text.
     </p>
diff --git a/main/templates/whispermaphone/index.html b/main/templates/whispermaphone/index.html
index 10d0cc7..dcfe070 100644
--- a/main/templates/whispermaphone/index.html
+++ b/main/templates/whispermaphone/index.html
@@ -4,7 +4,7 @@
 {% block title %}Thoughts{% endblock %}
 
 {% block navigation %}
-    <span class="text" aria-current="page">Thoughts</span>
+    <h1 class="text" aria-current="page">Thoughts</h1>
     <a href="/about" class="text">About</a>{% if authenticated %}
     <a href="/post" class="text" style="border: none">Post</a>
 {% endif %}
@@ -22,7 +22,7 @@
             <div class="main">
                 <span class="main-text text">{{thought.text}}</span>
             </div>
-            
+
             {% with file_type=thought.get_media_type %}
                 {% if file_type or thought.extended_text.strip %}
                     <div class="extended">
diff --git a/main/templates/whispermaphone/login.html b/main/templates/whispermaphone/login.html
index c36e900..e27520e 100644
--- a/main/templates/whispermaphone/login.html
+++ b/main/templates/whispermaphone/login.html
@@ -9,7 +9,7 @@
 
 {% block navigation %}
     <a href="/" class="text" style="border: none">Thoughts</a>
-    <span class="text">Login</span>
+    <h1 class="text">Login</h1>
 {% endblock %}
 
 {% block main %}
diff --git a/main/templates/whispermaphone/page.html b/main/templates/whispermaphone/page.html
index ce6ed9f..033e954 100644
--- a/main/templates/whispermaphone/page.html
+++ b/main/templates/whispermaphone/page.html
@@ -26,10 +26,10 @@
     </nav>
 </header>
 
-<section class="main-wrap">
+<main class="main-wrap" id="main-content">
     {% block main %}
     {% endblock %}
-</section>
+</main>
 
 {% block scripts %}
 {% endblock %}
diff --git a/main/templates/whispermaphone/post.html b/main/templates/whispermaphone/post.html
index e331771..16c2ed2 100644
--- a/main/templates/whispermaphone/post.html
+++ b/main/templates/whispermaphone/post.html
@@ -10,7 +10,7 @@
 {% block navigation %}
     <a href="/" class="text" style="border: none">Thoughts</a>
     <a href="/about" class="text" style="border: none">About</a>
-    <span class="text">Post</span>
+    <h1 class="text">Post</h1>
 {% endblock %}
 
 {% block main %}