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

@@ -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);

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%;