main.css: increase accessibility

- add definitions for em, i, b, code, samp & kbd (replace span);
- redefine h4 (replaces h6); remove h5 & h6 (unused);
- use dark orange instead of blue for code & selected options, to
  differentiate them from blue links;
- increase contrast to reach at least WACG level AA (colors were tested
  at https://juicystudio.com/services/luminositycontrastratio.php);
- adjust a few margins/paddings.

diff --git a/static/css/main.css b/static/css/main.css
index 6afe25f5edde77c3b1b55a6aa63f05714ea447b9..43a0885e6c07da55f167b5a84d029764dd6071fc 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -129,16 +129,23 @@ body {
 h1 {  font-size: 2.75em;  font-family: 'Dosis'; }
 h2 {  font-size: 2.75em;  font-family: 'Dosis';        }
 h3 {  font-size: 1.625em; font-family: 'Dosis';        }
-h4 {  font-size: 1.375em; font-family: 'Dosis EBold'; color: #4d4d4d;  }
-h5 {  font-size: 1.25em;  font-family: 'Dosis EBold'; color: #4d4d4d; }
-h6 {  font-size: 1.125em; font-family: 'Dosis EBold'; color: #4d4d4d; }
+h4 {  font-size: 1.125em;  font-family: 'Signika Semmibold'; color: #4d4d4d; }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4 {
     line-height: 1.2;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 
+h4 {
+    margin: 1.5em 0 0;
+}
+
+#fsf-intro h3,
+.troubleshooting + .troubleshooting h4 {
+    margin-top: .3em;
+}
+
 ul.os a.current,
 .main dt,
 .troubleshooting dt,
@@ -197,6 +204,21 @@ a:focus > img + strong {
     color: #0e3878;
 }
 
+b, i, em {
+    color: #905300;
+}
+
+code,
+kbd,
+samp {
+    color: #905300;
+    font-family: monospace;
+    padding: 0 .2em;
+}
+code {
+    display: inline-block;
+}
+
 /* Guide Sections Background */
 /* Blue*/
 #section1,
@@ -269,8 +291,8 @@ a:focus > img + strong {
 
 #header ul.os {
     line-height: 1;
-    margin: .5em 0 .5em;
-    padding: 0 0 .25em;
+    margin: .5em 0 .8em;
+    padding: 0 0 .5em;
     border-bottom: 1px solid #94b3e2;
     font-size: 1.25em;
 }
@@ -289,17 +311,23 @@ a:focus > img + strong {
     padding: .25em 0 .25em 2em;
 }
 
+#header #fsf-intro {
+    margin-top: 1em;
+}
+#header .intro {
+    margin-top: .4em;
+}
+
 #header #infographic {
     float: left;
     display: block;
     background: #fff;
     border-radius: 3px;
-    margin: 0 1em .5em 0;
+    margin: .2em 1em .5em 0;
     padding: .5em;
     width: 250px;
 }
 
-
 #header #infographic img {
     display: inline-block;
     width: 100%;
@@ -312,7 +340,7 @@ a:focus > img + strong {
 .section-intro {
     padding-bottom: 1.5em;
     border-bottom: 1px solid #5f8dd3;
-    margin-bottom: 2em;
+    margin-bottom: 1.3em;
 }
 
 .section-intro  p {
@@ -330,7 +358,7 @@ a:focus > img + strong {
 
 .section-intro h2 em,
 .sidebar h2 em {
-    color: #94b3e2;
+    color: #487bc9;
 }
 
 .section-intro p.image { text-align: center; }
@@ -362,7 +390,7 @@ a:focus > img + strong {
 .main h3:first-child { margin: 0 0 0.5em; }
 
 .main > h3 em {
-    color: #94b3e2;
+    color: #487bc9;
     display: block;
 }
 
@@ -448,14 +476,13 @@ ul.images li > img {
     letter-spacing: 2px;
     padding: .25em .5em;
     color: #2f5faa;
-    opacity: .5;
     border: 1px solid #5f8dd3;
     border-radius: 3px;
 }
 
 .troubleshooting > h4:hover,
 .troubleshooting > h4.expanded {
-    opacity: 1;
+    color: #0e3878;
 }
 
 .troubleshooting > h4.expanded,