Accessibility and formatting pass

Touch-ups to improve site legibility and responsive layout

theme/funkwhale/static/css/style.css

 html { 
   font-family: 'Open Sans', 'helvetica', sans-serif;
-  background: white;
   font-size: 14px;
+  --color-funkwhale-blue-dark: #28587D;
+  --color-funkwhale-blue-light: #4082B4;
+  --color-background-main: #FFF;
+  --color-text-link: var(--color-funkwhale-blue-dark);
+  background: var(--color-background-main);
 }
 
 /* Titles */
@@ -25,7 +29,7 @@ h1, h2 {
 }
 
 .latest
-{-
+{
   padding: 10px 10px;
   border-bottom: 1px dotted #eee;
 }
@@ -72,8 +76,6 @@ article ol.posts
 }
 
 /* Articles */
-p.post_entry {  
-}
 article > header {
   list-style-type: none;
   padding: 0px 10px;
@@ -98,10 +100,10 @@ article > header {
 
 
 /* Links */;
-a  { color:#4082b4; text-decoration:none; }
-a:visited { color:#4082b4; text-decoration:none; }
-a:link { color:#4082b4; text-decoration:none; }
-a:active { color:#4082b4; text-decoration:none; }
+a  { color:var(--color-funkwhale-blue-dark); text-decoration:none; }
+a:visited { color:var(--color-funkwhale-blue-dark); text-decoration:none; }
+a:link { color:var(--color-funkwhale-blue-dark); text-decoration:none; }
+a:active { color:var(--color-funkwhale-blue-dark); text-decoration:none; }
 a:hover { text-decoration: underline; }
 
 /* Code */
@@ -118,18 +120,17 @@ aside {
   position: fixed;
   top: 0; left: 0;
   padding: 30px;
-  background: linear-gradient(90deg,#28587d,#4082b4);
+  background: linear-gradient(90deg,var(--color-funkwhale-blue-dark),var(--color-funkwhale-blue-light));
   color: white;
   box-shadow: 0 0 3px black;
   text-align: center;
   padding-top: 8%;
   background-size: cover;
-
 }
-    aside a  { color:#fff; text-decoration:none; }
-    aside a:visited { color:#fff; text-decoration:none; }
-    aside a:link { color:#fff; text-decoration:none; }
-    aside a:active { color:#fff; text-decoration:none; }
+    aside a  { color:var(--color-background-main); text-decoration:none; }
+    aside a:visited { color:var(--color-background-main); text-decoration:none; }
+    aside a:link { color:var(--color-background-main); text-decoration:none; }
+    aside a:active { color:var(--color-background-main); text-decoration:none; }
     aside a:hover { text-decoration: underline; }
 
 aside > ul {
@@ -150,8 +151,7 @@ aside > h2 {
   margin-bottom: 40px;
 }
 
-.social
-{
+.social {
   display: inline-block;
   margin-top: 40px;
 }
@@ -161,8 +161,8 @@ aside > h2 {
   display: block;
   margin-left: -30px;
   margin-right: -30px;
-  border: 1px solid #fff;
-  margin-top: 40px;
+  border: 1px solid var(--color-background-main);
+  margin-top: 70px;
 }
 
 .nav > ul > li
@@ -172,7 +172,7 @@ aside > h2 {
 
 .nav a
 {
-    color: #fff;
+    color: var(--color-background-main);
     text-decoration: none;
     transition: all .3s ease-in-out;
 }
@@ -193,7 +193,7 @@ aside > h2 {
 {
   display: block;
   padding: 0.77273rem 0;
-  border-bottom: 1px dotted #fff;
+  border-bottom: 1px dotted var(--color-background-main);
 }
 
 
@@ -201,9 +201,12 @@ aside > h2 {
 {
   display: block;
   padding: 0.33147rem 0;
-  border-bottom: 1px dotted #fff;
+  border-bottom: 1px dotted var(--color-background-main);
 } 
 
+.logo-container a img {
+  margin: auto;
+}
 
 /*--------Responsive------------*/
 
@@ -217,6 +220,7 @@ aside > h2 {
     width: 100%;
     padding: 0;
     padding-top: 1px;
+    padding-bottom: 3px;
   }
 
   .nav
@@ -243,6 +247,19 @@ aside > h2 {
     width: 50px;
     margin: 10px auto;
   }
+
+  .logo-container {
+    display: flexbox;
+  }
+
+  .nav {
+    margin-top: 0px;
+  }
+
+  .social {
+    margin-top: 25px;
+    margin-bottom: 0px;
+  }
 }
 
 img {