fix colors to meet accessibility guidelines (4.5 contrast ratio for text)

This commit is contained in:
Jonathan Wren 2020-12-04 16:41:57 -08:00
parent 5cc256075e
commit dc5b8bd4e9
No known key found for this signature in database
GPG key ID: 43D5FF8722E7F68A
5 changed files with 47 additions and 21 deletions

View file

@ -17,10 +17,10 @@ Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
line-height: 1.3rem; line-height: 1.3rem;
} }
.hljs-keyword, .hljs-operator { .hljs-keyword, .hljs-operator {
color: #F92672; color: #d03269;
} }
.hljs-pattern-match { .hljs-pattern-match {
color: #F92672; color: #d03269;
} }
.hljs-pattern-match .hljs-constructor { .hljs-pattern-match .hljs-constructor {
color: #61aeee; color: #61aeee;
@ -41,32 +41,42 @@ Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
color: #e2b93d; color: #e2b93d;
} }
.hljs-constructor .hljs-string { .hljs-constructor .hljs-string {
color: #9CCC65; color: #5A781D;
} }
.hljs-comment, .hljs-quote { .hljs-comment, .hljs-quote {
color: #b18eb1; color: #696369;
font-style: italic; font-style: italic;
} }
.hljs-doctag, .hljs-formula { .hljs-doctag, .hljs-formula {
color: #c678dd; color: #c678dd;
} }
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
color: #e06c75; color: #C63945;
} }
.hljs-literal { .hljs-literal {
color: #56b6c2; color: #56b6c2;
} }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
color: #98c379; color: #5A781D;
} }
.hljs-built_in, .hljs-class .hljs-title { .hljs-built_in, .hljs-class .hljs-title {
color: #e6c07b; color: #956a2f;
} }
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
color: #d19a66; color: #956a2f;
} }
.rst-content a tt, .rst-content a tt, .rst-content a code {
color: #4c76aa;
}
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
color: #007A7A;
}
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
color: #61aeee; color: #5a70a9;
} }
.hljs-emphasis { .hljs-emphasis {
font-style: italic; font-style: italic;
@ -77,3 +87,12 @@ Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
.hljs-link { .hljs-link {
text-decoration: underline; text-decoration: underline;
} }
.rst-content .note .admonition-title {
background: #3b77c4;
}
.rst-content .tip .admonition-title {
background: #2a8068;
}

View file

@ -202,3 +202,19 @@ ol > li:before {
font-weight: 600; font-weight: 600;
} }
/* ------------------------------------------------------------ */
/* Accessibility-related color changes */
/* ------------------------------------------------------------ */
a {
color: #684688;
text-decoration: none;
}
a:hover {
color: #A3629F;
}
.rst-content code {
color: #D83D2D;
}

View file

@ -22,7 +22,7 @@ should be created and whether you wish to encrypt it.
To make a new entry, just type To make a new entry, just type
``` sh ``` text
jrnl yesterday: Called in sick. Used the time to clean the house and spent 4h on writing my book. jrnl yesterday: Called in sick. Used the time to clean the house and spent 4h on writing my book.
``` ```

11
docs/theme/index.css vendored
View file

@ -168,21 +168,12 @@ nav a#twitter-nav {
display: none; display: none;
} }
a {
color: #684688;
text-decoration: underline;
}
nav a { nav a {
font-size: 14pt; font-size: 14pt;
line-height: 40pt; line-height: 40pt;
margin: 0 40px; margin: 0 40px;
} }
a:hover {
color: #A3629F;
}
nav a.cta { nav a.cta {
display: inline-block; display: inline-block;
color: white; color: white;
@ -250,7 +241,7 @@ main {
.flex section p { .flex section p {
padding-left: 40px; padding-left: 40px;
color: #888; color: #6E6E6E;
font-size: 12pt; font-size: 12pt;
margin: 0; margin: 0;
} }

View file

@ -19,7 +19,7 @@ Composing mode is entered by either starting `jrnl` without any arguments --
which will launch an external editor -- or by just writing an entry on the which will launch an external editor -- or by just writing an entry on the
command line: command line:
```sh ```text
jrnl today at 3am: I just met Steve Buscemi in a bar! What a nice guy. jrnl today at 3am: I just met Steve Buscemi in a bar! What a nice guy.
``` ```