systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: adjust colors to improve accessibility (#159)

Browse source
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).
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
baseURL = "http://localhost"

2
src/sass/_chroma_base.scss
View file

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

41
src/sass/_chroma_dark.scss
View file

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

60
src/sass/_chroma_light.scss
View file

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

2
src/sass/_color_mode.scss
View file

@ -16,6 +16,7 @@
--code-background: #{$code-background};
--code-accent-color: #{darken($code-background, 6)};
--code-accent-color-lite: #{darken($code-background, 2)};
--code-font-color: #{$code-font-color};
--accent-color: #{$gray-200};
--accent-color-lite: #{$gray-100};
@ -58,6 +59,7 @@
--code-background: #{$code-background-dark};
--code-accent-color: #{darken($code-background-dark, 4)};
--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-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-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-font-color-dark: $gray-100 !default;
@ -56,8 +59,8 @@ $body-background-dark: mix(
invert($body-background, 75%),
$second-color
) !default;
$link-color-dark: lighten(desaturate($link-color, 40), 25) !default;
$link-color-visited-dark: lighten($link-color-visited, 10) !default;
$link-color-dark: rgba(110, 168, 212, 1) !default;
$link-color-visited-dark: rgba(186, 142, 240) !default;
$code-background: lighten($gray-200, 4) !default;
$code-background-dark: darken($body-background-dark, 2) !default;

2
src/sass/_markdown.scss
View file

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