Merge branch 'feature/purple-a11y-menu' into 'master'

Feature/purple a11y menu

See merge request !2

public/index.html

@@ -17,7 +17,7 @@
     <header>
       <div class="js" lang="en" id="accessibility-options">
         <button type="button">
-          Accessibility Options
+          Accessibility&nbsp;Options
         </button>
         <fieldset class="display-none" id="font-selection">
           <legend class="font-Ubuntu">Font</legend>

public/style.css

@@ -311,6 +311,9 @@ p {
   border: 1px solid #6600ea;
   border-radius: 15px;
 }
+#font-selection label:hover {
+  cursor: pointer;
+}
 #font-selection input[type="radio"] {
   margin-right: 5pt;
 }
@@ -388,7 +391,7 @@ p {
   body {
     max-width: 900pt;
   }
-  .flex > * {
+  .content > * {
     flex-basis: 20rem;
   }
   header {
@@ -404,25 +407,38 @@ p {
     line-height: 0;
   }
 
+  #accessibility-options {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: inherit;
+    color: #efefef;
+    background-color: #6600ea;
+    border: 0;
+    border-bottom-left-radius: 1.5em;
+    font-weight: bold;
+    padding: 0 0 0 0.5em;
+  }
   #font-selection {
     margin: auto;
+    color: #efefef;
+    background-color: #6600ea;
   }
-  #font-selection ul {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin: 0 1rem;
-    padding: 0.5rem;
-    border-radius: 20px;
-    justify-content: space-around;
+  #font-selection legend {
+    border: 0;
+    padding-top: 2em;
+    padding-left: 0;
+    margin-left: 0;
   }
-  #font-selection li {
-    min-width: 0;
+  #font-selection ul {
+    -moz-columns: 1;
+    columns: 1;
+    color: #efefef;
+    background-color: #6600ea;
+    margin: 0;
   }
-  #font-selection legend {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
+  #font-selection li:hover {
+    background-color: #5b00d2;
   }
 }
 
@@ -469,3 +485,17 @@ p {
     border: 1px solid #6600ea;
   }
 }
+
+@media (prefers-color-scheme: dark) and (min-width: 50em) {
+  #font-selection {
+    color: black;
+    background: #6600ea;
+  }
+  #font-selection ul {
+    color: black;
+    background: #6600ea;
+  }
+  #font-selection li:hover {
+    background-color: #8432ee;
+  }
+}