From 7105307dd978fdd575e07c683e0a5ba9a3b2502f Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sat, 7 Nov 2015 21:39:36 -0800
Subject: [PATCH] Install flow accessibility tweaks

* Make everything bigger and bolder to account for inverse (light on
  dark) text.
* Give links better hover/focus state for the sake of tab navigation.

// FREEBIE
---
 stylesheets/options.css  | 14 +++++++++++---
 stylesheets/options.scss | 16 ++++++++++++++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/stylesheets/options.css b/stylesheets/options.css
index 1fec38ac..303d29c2 100644
--- a/stylesheets/options.css
+++ b/stylesheets/options.css
@@ -858,7 +858,9 @@ input, button, select, textarea {
 p {
   max-width: 30em;
   margin: 1em auto;
-  line-height: 1.5em; }
+  line-height: 1.5em;
+  font-size: 1.2em;
+  font-weight: bold; }
 
 a {
   cursor: pointer; }
@@ -896,10 +898,14 @@ a {
     .nav .dot.selected {
       background: #a2d2f4; }
 
+.link:hover, .link:focus {
+  background: rgba(255, 255, 255, 0.3);
+  outline: none; }
 .link, .link:visited, .link:hover {
+  padding: 0 3px;
   color: white;
   font-weight: bold;
-  border-bottom: dashed 1px white;
+  border-bottom: dashed 2px white;
   text-decoration: none; }
 
 .container {
@@ -947,7 +953,9 @@ h3.step {
     color: #454545;
     background: white; }
   #device-name:focus {
-    outline: white auto 5px; }
+    outline: none; }
+  #device-name:hover, #device-name:focus {
+    background: rgba(255, 255, 255, 0.3); }
 
 #verifyCode,
 #code,
diff --git a/stylesheets/options.scss b/stylesheets/options.scss
index 70bfd9a4..8165a5fa 100644
--- a/stylesheets/options.scss
+++ b/stylesheets/options.scss
@@ -58,6 +58,8 @@ p {
   max-width: 30em;
   margin: 1em auto;
   line-height: 1.5em;
+  font-size: 1.2em;
+  font-weight: bold;
 }
 
 a {
@@ -107,10 +109,15 @@ a {
 }
 
 .link {
+  &:hover, &:focus {
+    background: rgba(255,255,255,0.3);
+    outline: none;
+  }
   &, &:visited, &:hover {
+    padding: 0 3px;
     color: white;
     font-weight: bold;
-    border-bottom: dashed 1px white;
+    border-bottom: dashed 2px white;
     text-decoration: none;
   }
 }
@@ -174,8 +181,13 @@ h3.step {
   }
 
   &:focus {
-    outline: white auto 5px;
+    outline: none;
   }
+
+  &:hover, &:focus {
+    background: rgba(255,255,255,0.3);
+  }
+
 }
 
 #verifyCode,