github
/
hugo-geekdoc
mirror of https://github.com/thegeeklab/hugo-geekdoc.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: adjust colors to improve accessibility (#159)

This commit is contained in:
Robert Kaussow 2021-07-05 08:42:48 +02:00 committed by GitHub
parent 564b30aa56
commit 9682ef999b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 78 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exampleSite/content/usage/getting-started.md
View File

@ -41,7 +41,7 @@ To prepare your new site environment just a few steps are required:
3. Install the Geekdoc theme from a [release bundle](#option-1-download-pre-build-release-bundle) (recommended) or from [Git branch](#option-2-clone-the-github-repository). 3. Install the Geekdoc theme from a [release bundle](#option-1-download-pre-build-release-bundle) (recommended) or from [Git branch](#option-2-clone-the-github-repository).
4. Create the minimal required Hugo configuration `config.toml`. For all configuration options see [here](/usage/configuration/). 4. Create the minimal required Hugo configuration `config.toml`. For all configuration options take a look at the [configuration](/usage/configuration/) page.
```Toml ```Toml
baseURL = "http://localhost" baseURL = "http://localhost"

2
src/sass/_chroma_base.scss
View File

@ -1,6 +1,6 @@
@mixin chroma_base { @mixin chroma_base {
.chroma { .chroma {
color: #999; color: var(--code-font-color);
margin: 1rem 0; margin: 1rem 0;
} }
.chroma code { .chroma code {

41
src/sass/_chroma_dark.scss
View File

@ -5,9 +5,11 @@
/* Other */ /* Other */
.chroma .x { .chroma .x {
color: inherit;
} }
/* Error */ /* Error */
.chroma .err { .chroma .err {
color: inherit;
} }
/* LineTableTD */ /* LineTableTD */
.chroma .lntd { .chroma .lntd {
@ -42,7 +44,7 @@
.chroma .hl { .chroma .hl {
display: block; display: block;
width: 100%; width: 100%;
background-color: #ffffcc; background-color: #4f1605;
} }
/* LineNumbersTable */ /* LineNumbersTable */
.chroma .lnt { .chroma .lnt {
@ -52,7 +54,7 @@
.chroma .ln { .chroma .ln {
margin-right: 0.4em; margin-right: 0.4em;
padding: 0 0.4em 0 0.4em; padding: 0 0.4em 0 0.4em;
color: #7f7f7f; color: #b3b3b3;
} }
/* Keyword */ /* Keyword */
.chroma .k { .chroma .k {
@ -85,6 +87,7 @@
} }
/* Name */ /* Name */
.chroma .n { .chroma .n {
color: inherit;
} }
/* NameAttribute */ /* NameAttribute */
.chroma .na { .chroma .na {
@ -97,6 +100,7 @@
} }
/* NameBuiltinPseudo */ /* NameBuiltinPseudo */
.chroma .bp { .chroma .bp {
color: inherit;
} }
/* NameClass */ /* NameClass */
.chroma .nc { .chroma .nc {
@ -104,15 +108,19 @@
} }
/* NameConstant */ /* NameConstant */
.chroma .no { .chroma .no {
color: inherit;
} }
/* NameDecorator */ /* NameDecorator */
.chroma .nd { .chroma .nd {
color: inherit;
} }
/* NameEntity */ /* NameEntity */
.chroma .ni { .chroma .ni {
color: inherit;
} }
/* NameException */ /* NameException */
.chroma .ne { .chroma .ne {
color: inherit;
} }
/* NameFunction */ /* NameFunction */
.chroma .nf { .chroma .nf {
@ -120,6 +128,7 @@
} }
/* NameFunctionMagic */ /* NameFunctionMagic */
.chroma .fm { .chroma .fm {
color: inherit;
} }
/* NameLabel */ /* NameLabel */
.chroma .nl { .chroma .nl {
@ -128,12 +137,15 @@
} }
/* NameNamespace */ /* NameNamespace */
.chroma .nn { .chroma .nn {
color: inherit;
} }
/* NameOther */ /* NameOther */
.chroma .nx { .chroma .nx {
color: inherit;
} }
/* NameProperty */ /* NameProperty */
.chroma .py { .chroma .py {
color: inherit;
} }
/* NameTag */ /* NameTag */
.chroma .nt { .chroma .nt {
@ -161,12 +173,15 @@
} }
/* NameVariableMagic */ /* NameVariableMagic */
.chroma .vm { .chroma .vm {
color: inherit;
} }
/* Literal */ /* Literal */
.chroma .l { .chroma .l {
color: inherit;
} }
/* LiteralDate */ /* LiteralDate */
.chroma .ld { .chroma .ld {
color: inherit;
} }
/* LiteralString */ /* LiteralString */
.chroma .s { .chroma .s {
@ -262,26 +277,27 @@
} }
/* Punctuation */ /* Punctuation */
.chroma .p { .chroma .p {
color: inherit;
} }
/* Comment */ /* Comment */
.chroma .c { .chroma .c {
color: #6272a4; color: #96a6d8;
} }
/* CommentHashbang */ /* CommentHashbang */
.chroma .ch { .chroma .ch {
color: #6272a4; color: #96a6d8;
} }
/* CommentMultiline */ /* CommentMultiline */
.chroma .cm { .chroma .cm {
color: #6272a4; color: #96a6d8;
} }
/* CommentSingle */ /* CommentSingle */
.chroma .c1 { .chroma .c1 {
color: #6272a4; color: #96a6d8;
} }
/* CommentSpecial */ /* CommentSpecial */
.chroma .cs { .chroma .cs {
color: #6272a4; color: #96a6d8;
} }
/* CommentPreproc */ /* CommentPreproc */
.chroma .cp { .chroma .cp {
@ -293,10 +309,11 @@
} }
/* Generic */ /* Generic */
.chroma .g { .chroma .g {
color: inherit;
} }
/* GenericDeleted */ /* GenericDeleted */
.chroma .gd { .chroma .gd {
color: #8b080b; color: #d98f90;
} }
/* GenericEmph */ /* GenericEmph */
.chroma .ge { .chroma .ge {
@ -304,10 +321,12 @@
} }
/* GenericError */ /* GenericError */
.chroma .gr { .chroma .gr {
color: inherit;
} }
/* GenericHeading */ /* GenericHeading */
.chroma .gh { .chroma .gh {
font-weight: bold; font-weight: bold;
color: inherit;
} }
/* GenericInserted */ /* GenericInserted */
.chroma .gi { .chroma .gi {
@ -315,13 +334,15 @@
} }
/* GenericOutput */ /* GenericOutput */
.chroma .go { .chroma .go {
color: #44475a; color: #8f9ea8;
} }
/* GenericPrompt */ /* GenericPrompt */
.chroma .gp { .chroma .gp {
color: inherit;
} }
/* GenericStrong */ /* GenericStrong */
.chroma .gs { .chroma .gs {
color: inherit;
} }
/* GenericSubheading */ /* GenericSubheading */
.chroma .gu { .chroma .gu {
@ -329,6 +350,7 @@
} }
/* GenericTraceback */ /* GenericTraceback */
.chroma .gt { .chroma .gt {
color: inherit;
} }
/* GenericUnderline */ /* GenericUnderline */
.chroma .gl { .chroma .gl {
@ -336,5 +358,6 @@
} }
/* TextWhitespace */ /* TextWhitespace */
.chroma .w { .chroma .w {
color: inherit;
} }
} }

60
src/sass/_chroma_light.scss
View File

@ -5,6 +5,7 @@
/* Other */ /* Other */
.chroma .x { .chroma .x {
color: inherit;
} }
/* Error */ /* Error */
.chroma .err { .chroma .err {
@ -92,18 +93,19 @@
} }
/* Name */ /* Name */
.chroma .n { .chroma .n {
color: inherit;
} }
/* NameAttribute */ /* NameAttribute */
.chroma .na { .chroma .na {
color: #008080; color: #006767;
} }
/* NameBuiltin */ /* NameBuiltin */
.chroma .nb { .chroma .nb {
color: #0086b3; color: #556165;
} }
/* NameBuiltinPseudo */ /* NameBuiltinPseudo */
.chroma .bp { .chroma .bp {
color: #999999; color: #676767;
} }
/* NameClass */ /* NameClass */
.chroma .nc { .chroma .nc {
@ -112,7 +114,7 @@
} }
/* NameConstant */ /* NameConstant */
.chroma .no { .chroma .no {
color: #008080; color: #006767;
} }
/* NameDecorator */ /* NameDecorator */
.chroma .nd { .chroma .nd {
@ -135,6 +137,7 @@
} }
/* NameFunctionMagic */ /* NameFunctionMagic */
.chroma .fm { .chroma .fm {
color: inherit;
} }
/* NameLabel */ /* NameLabel */
.chroma .nl { .chroma .nl {
@ -147,9 +150,11 @@
} }
/* NameOther */ /* NameOther */
.chroma .nx { .chroma .nx {
color: inherit;
} }
/* NameProperty */ /* NameProperty */
.chroma .py { .chroma .py {
color: inherit;
} }
/* NameTag */ /* NameTag */
.chroma .nt { .chroma .nt {
@ -157,28 +162,31 @@
} }
/* NameVariable */ /* NameVariable */
.chroma .nv { .chroma .nv {
color: #008080; color: #006767;
} }
/* NameVariableClass */ /* NameVariableClass */
.chroma .vc { .chroma .vc {
color: #008080; color: #006767;
} }
/* NameVariableGlobal */ /* NameVariableGlobal */
.chroma .vg { .chroma .vg {
color: #008080; color: #006767;
} }
/* NameVariableInstance */ /* NameVariableInstance */
.chroma .vi { .chroma .vi {
color: #008080; color: #006767;
} }
/* NameVariableMagic */ /* NameVariableMagic */
.chroma .vm { .chroma .vm {
color: inherit;
} }
/* Literal */ /* Literal */
.chroma .l { .chroma .l {
color: inherit;
} }
/* LiteralDate */ /* LiteralDate */
.chroma .ld { .chroma .ld {
color: inherit;
} }
/* LiteralString */ /* LiteralString */
.chroma .s { .chroma .s {
@ -238,31 +246,31 @@
} }
/* LiteralNumber */ /* LiteralNumber */
.chroma .m { .chroma .m {
color: #009999; color: #027e83;
} }
/* LiteralNumberBin */ /* LiteralNumberBin */
.chroma .mb { .chroma .mb {
color: #009999; color: #027e83;
} }
/* LiteralNumberFloat */ /* LiteralNumberFloat */
.chroma .mf { .chroma .mf {
color: #009999; color: #027e83;
} }
/* LiteralNumberHex */ /* LiteralNumberHex */
.chroma .mh { .chroma .mh {
color: #009999; color: #027e83;
} }
/* LiteralNumberInteger */ /* LiteralNumberInteger */
.chroma .mi { .chroma .mi {
color: #009999; color: #027e83;
} }
/* LiteralNumberIntegerLong */ /* LiteralNumberIntegerLong */
.chroma .il { .chroma .il {
color: #009999; color: #027e83;
} }
/* LiteralNumberOct */ /* LiteralNumberOct */
.chroma .mo { .chroma .mo {
color: #009999; color: #027e83;
} }
/* Operator */ /* Operator */
.chroma .o { .chroma .o {
@ -276,47 +284,49 @@
} }
/* Punctuation */ /* Punctuation */
.chroma .p { .chroma .p {
color: inherit;
} }
/* Comment */ /* Comment */
.chroma .c { .chroma .c {
color: #999988; color: #676765;
font-style: italic; font-style: italic;
} }
/* CommentHashbang */ /* CommentHashbang */
.chroma .ch { .chroma .ch {
color: #999988; color: #676765;
font-style: italic; font-style: italic;
} }
/* CommentMultiline */ /* CommentMultiline */
.chroma .cm { .chroma .cm {
color: #999988; color: #676765;
font-style: italic; font-style: italic;
} }
/* CommentSingle */ /* CommentSingle */
.chroma .c1 { .chroma .c1 {
color: #999988; color: #676765;
font-style: italic; font-style: italic;
} }
/* CommentSpecial */ /* CommentSpecial */
.chroma .cs { .chroma .cs {
color: #999999; color: #676767;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
/* CommentPreproc */ /* CommentPreproc */
.chroma .cp { .chroma .cp {
color: #999999; color: #676767;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
/* CommentPreprocFile */ /* CommentPreprocFile */
.chroma .cpf { .chroma .cpf {
color: #999999; color: #676767;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
/* Generic */ /* Generic */
.chroma .g { .chroma .g {
color: inherit;
} }
/* GenericDeleted */ /* GenericDeleted */
.chroma .gd { .chroma .gd {
@ -334,7 +344,7 @@
} }
/* GenericHeading */ /* GenericHeading */
.chroma .gh { .chroma .gh {
color: #999999; color: #676767;
} }
/* GenericInserted */ /* GenericInserted */
.chroma .gi { .chroma .gi {
@ -343,7 +353,7 @@
} }
/* GenericOutput */ /* GenericOutput */
.chroma .go { .chroma .go {
color: #888888; color: #6f6f6f;
} }
/* GenericPrompt */ /* GenericPrompt */
.chroma .gp { .chroma .gp {
@ -355,7 +365,7 @@
} }
/* GenericSubheading */ /* GenericSubheading */
.chroma .gu { .chroma .gu {
color: #aaaaaa; color: #5f5f5f;
} }
/* GenericTraceback */ /* GenericTraceback */
.chroma .gt { .chroma .gt {

2
src/sass/_color_mode.scss
View File

@ -16,6 +16,7 @@
--code-background: #{$code-background}; --code-background: #{$code-background};
--code-accent-color: #{darken($code-background, 6)}; --code-accent-color: #{darken($code-background, 6)};
--code-accent-color-lite: #{darken($code-background, 2)}; --code-accent-color-lite: #{darken($code-background, 2)};
--code-font-color: #{$code-font-color};
--accent-color: #{$gray-200}; --accent-color: #{$gray-200};
--accent-color-lite: #{$gray-100}; --accent-color-lite: #{$gray-100};
@ -58,6 +59,7 @@
--code-background: #{$code-background-dark}; --code-background: #{$code-background-dark};
--code-accent-color: #{darken($code-background-dark, 4)}; --code-accent-color: #{darken($code-background-dark, 4)};
--code-accent-color-lite: #{darken($code-background-dark, 2)}; --code-accent-color-lite: #{darken($code-background-dark, 2)};
--code-font-color: #{$code-font-color-dark};
--accent-color: #{darken($body-background-dark, 4)}; --accent-color: #{darken($body-background-dark, 4)};
--accent-color-lite: #{darken($body-background-dark, 2)}; --accent-color-lite: #{darken($body-background-dark, 2)};

7
src/sass/_defaults.scss
View File

@ -44,6 +44,9 @@ $body-font-color: $gray-800 !default;
$body-font-weight: normal !default; $body-font-weight: normal !default;
$body-min-width: 20rem !default; $body-min-width: 20rem !default;
$code-font-color: rgba(95, 95, 95, 1) !default;
$code-font-color-dark: rgba(185, 185, 185, 1) !default;
$body-background-dark: $gray-800 !default; $body-background-dark: $gray-800 !default;
$body-font-color-dark: $gray-100 !default; $body-font-color-dark: $gray-100 !default;
@ -56,8 +59,8 @@ $body-background-dark: mix(
invert($body-background, 75%), invert($body-background, 75%),
$second-color $second-color
) !default; ) !default;
$link-color-dark: lighten(desaturate($link-color, 40), 25) !default; $link-color-dark: rgba(110, 168, 212, 1) !default;
$link-color-visited-dark: lighten($link-color-visited, 10) !default; $link-color-visited-dark: rgba(186, 142, 240) !default;
$code-background: lighten($gray-200, 4) !default; $code-background: lighten($gray-200, 4) !default;
$code-background-dark: darken($body-background-dark, 2) !default; $code-background-dark: darken($body-background-dark, 2) !default;

2
src/sass/_markdown.scss
View File

@ -166,6 +166,8 @@
code { code {
background-color: var(--code-background); background-color: var(--code-background);
border-radius: $border-radius;
color: var(--code-font-color);
font-size: 0.85em; font-size: 0.85em;
line-height: 1.45em; line-height: 1.45em;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;