From 870f9aed17d85cccb6a4a53b0b998024e9d20a74 Mon Sep 17 00:00:00 2001
From: Jonathan Wren <jonathan@nowandwren.com>
Date: Sat, 26 Dec 2020 11:01:27 -0800
Subject: [PATCH] Fix failing contrast test in accessibility tools on docs site
 (#1126)

* add background-color as fallback for gradients on docs site

This is both for old browser support, and for accessibility. Some
accessibility tools turn off gradients since they can make text hard to
read for those with visual impairment.

* change mobile header color for docs site

The mobile header was using a light-purple to dark-purple gradient, even
though every other gradient on the site is mid-purple to dark-purple.
This commit changes that both for consistency on the site, and because
light-purple causes an accessibility issue with the white text in the
header (even though the accessibility tools don't notice because of the
gradient).
---
 docs_theme/assets/index.css | 3 +++
 docs_theme/assets/theme.css | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs_theme/assets/index.css b/docs_theme/assets/index.css
index 6a05be25e..472de17e0 100644
--- a/docs_theme/assets/index.css
+++ b/docs_theme/assets/index.css
@@ -66,6 +66,7 @@ h3 {
 }
 
 header {
+  background-color: --mid-purple;
   background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
   color: var(--white);
   border: 0px solid transparent;
@@ -202,6 +203,7 @@ nav a:visited:hover {
 nav a.cta {
   display: inline-block;
   color: var(--white);
+  background-color: --mid-purple;
   background-image: linear-gradient(259deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
   box-shadow: 0 2px 8px 0 var(--blacker-shadow);
   border-radius: 50px;
@@ -213,6 +215,7 @@ nav a.cta {
 
 nav a.cta:hover {
   text-decoration: none;
+  background-color: --mid-purple;
   background-image: linear-gradient(259deg, var(--bright-purple) 0%, var(--dark-purple) 100%);
   box-shadow: 0 4px 16px 0 var(--black-shadow);
   color: var(--off-white);
diff --git a/docs_theme/assets/theme.css b/docs_theme/assets/theme.css
index 9c78ded8d..29b32c68c 100644
--- a/docs_theme/assets/theme.css
+++ b/docs_theme/assets/theme.css
@@ -76,7 +76,8 @@ div.rst-content {
 }
 
 .wy-nav-top {
-  background-image: linear-gradient(-211deg, var(--light-purple) 0%, var(--dark-purple) 100%);
+  background-color: --mid-purple;
+  background-image: linear-gradient(-211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
 }
 
 .wy-nav-top .fa-bars {
@@ -172,6 +173,7 @@ a.icon-home:before {
 
 
 .wy-nav-side {
+  background-color: --mid-purple;
   background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
   font-weight: 300;
   height: 100%;