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

@@ -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;
+}
+

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>

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">

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 %}

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 %}

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 %}