fz0x1/jrnl
1
0
Fork 0
mirror of https://github.com/jrnl-org/jrnl.git synced 2025-05-10 16:48:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix failing contrast test in accessibility tools on docs site (#1126)

Browse source 
* 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).
This commit is contained in:
Jonathan Wren 2020-12-26 11:01:27 -08:00 • committed by GitHub
parent 9a4c3e41a6
commit 870f9aed17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
docs_theme/assets/index.css
View file

@ -66,6 +66,7 @@ h3 {
} }
header { header {
background-color: --mid-purple;
background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%); background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
color: var(--white); color: var(--white);
border: 0px solid transparent; border: 0px solid transparent;
@ -202,6 +203,7 @@ nav a:visited:hover {
nav a.cta { nav a.cta {
display: inline-block; display: inline-block;
color: var(--white); color: var(--white);
background-color: --mid-purple;
background-image: linear-gradient(259deg, var(--mid-purple) 0%, var(--dark-purple) 100%); background-image: linear-gradient(259deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
box-shadow: 0 2px 8px 0 var(--blacker-shadow); box-shadow: 0 2px 8px 0 var(--blacker-shadow);
border-radius: 50px; border-radius: 50px;
@ -213,6 +215,7 @@ nav a.cta {
nav a.cta:hover { nav a.cta:hover {
text-decoration: none; text-decoration: none;
background-color: --mid-purple;
background-image: linear-gradient(259deg, var(--bright-purple) 0%, var(--dark-purple) 100%); background-image: linear-gradient(259deg, var(--bright-purple) 0%, var(--dark-purple) 100%);
box-shadow: 0 4px 16px 0 var(--black-shadow); box-shadow: 0 4px 16px 0 var(--black-shadow);
color: var(--off-white); color: var(--off-white);

4
docs_theme/assets/theme.css
View file

@ -76,7 +76,8 @@ div.rst-content {
} }
.wy-nav-top { .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 { .wy-nav-top .fa-bars {
@ -172,6 +173,7 @@ a.icon-home:before {
.wy-nav-side { .wy-nav-side {
background-color: --mid-purple;
background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%); background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
font-weight: 300; font-weight: 300;
height: 100%; height: 100%;