marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

♿️ Improve contrast and other accessibility issues

pull/61/head
James Panther 2021-12-21 13:22:45 +11:00
parent ccfd369c67
commit 90f36f8221
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
16 changed files with 88 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -14,9 +14,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Changed ### Changed
- Adjusted contrast of some items to improve accessibility
- Upgrade to Chart.js v3.6.2 - Upgrade to Chart.js v3.6.2
- Upgrade to Mermaid v8.13.6 - Upgrade to Mermaid v8.13.6
### Fixed
- Missing ARIA descriptions and alt tags on some images and links
## [1.5.3] - 2021-11-18 ## [1.5.3] - 2021-11-18
### Changed ### Changed

69
assets/css/compiled/main.css
View File

@ -727,7 +727,7 @@ video {
} }
.prose h1 { .prose h1 {
color: var(--color-neutral-800); color: var(--color-neutral-900);
font-weight: 800; font-weight: 800;
font-size: 2.25em; font-size: 2.25em;
margin-top: 0; margin-top: 0;
@ -1700,11 +1700,11 @@ body a, body button {
.chroma .c { .chroma .c {
font-style: italic; font-style: italic;
color: var(--color-neutral-400); color: var(--color-neutral-500);
} }
.dark .chroma .c { .dark .chroma .c {
color: var(--color-neutral-500); color: var(--color-neutral-400);
} }
/* CommentHashbang */ /* CommentHashbang */
@ -1712,66 +1712,66 @@ body a, body button {
.chroma .ch { .chroma .ch {
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
color: var(--color-neutral-400); color: var(--color-neutral-500);
} }
.dark .chroma .ch { .dark .chroma .ch {
color: var(--color-neutral-500); color: var(--color-neutral-400);
} }
/* CommentMultiline */ /* CommentMultiline */
.chroma .cm { .chroma .cm {
font-style: italic; font-style: italic;
color: var(--color-neutral-400); color: var(--color-neutral-500);
} }
.dark .chroma .cm { .dark .chroma .cm {
color: var(--color-neutral-500); color: var(--color-neutral-400);
} }
/* CommentSingle */ /* CommentSingle */
.chroma .c1 { .chroma .c1 {
font-style: italic; font-style: italic;
color: var(--color-neutral-400); color: var(--color-neutral-500);
} }
.dark .chroma .c1 { .dark .chroma .c1 {
color: var(--color-neutral-500); color: var(--color-neutral-400);
} }
/* CommentSpecial */ /* CommentSpecial */
.chroma .cs { .chroma .cs {
font-style: italic; font-style: italic;
color: var(--color-neutral-400); color: var(--color-neutral-500);
} }
.dark .chroma .cs { .dark .chroma .cs {
color: var(--color-neutral-500); color: var(--color-neutral-400);
} }
/* CommentPreproc */ /* CommentPreproc */
.chroma .cp { .chroma .cp {
font-style: italic; font-style: italic;
color: var(--color-neutral-400); color: var(--color-neutral-500);
} }
.dark .chroma .cp { .dark .chroma .cp {
color: var(--color-neutral-500); color: var(--color-neutral-400);
} }
/* CommentPreprocFile */ /* CommentPreprocFile */
.chroma .cpf { .chroma .cpf {
font-style: italic; font-style: italic;
color: var(--color-neutral-400); color: var(--color-neutral-500);
} }
.dark .chroma .cpf { .dark .chroma .cpf {
color: var(--color-neutral-500); color: var(--color-neutral-400);
} }
/* Generic */ /* Generic */
@ -2356,20 +2356,20 @@ body a, body button {
color: var(--color-neutral-700); color: var(--color-neutral-700);
} }
.text-neutral-800 { .text-neutral-500 {
color: var(--color-neutral-800); color: var(--color-neutral-500);
} }
.text-primary-500 { .text-primary-500 {
color: var(--color-primary-500); color: var(--color-primary-500);
} }
.text-primary-700 { .text-neutral-800 {
color: var(--color-primary-700); color: var(--color-neutral-800);
} }
.text-neutral-300 { .text-primary-700 {
color: var(--color-neutral-300); color: var(--color-primary-700);
} }
.text-primary-400 { .text-primary-400 {
@ -2412,14 +2412,14 @@ body a, body button {
color: var(--color-primary-700); color: var(--color-primary-700);
} }
.hover\:text-primary-400:hover {
color: var(--color-primary-400);
}
.hover\:text-primary-500:hover { .hover\:text-primary-500:hover {
color: var(--color-primary-500); color: var(--color-primary-500);
} }
.hover\:text-primary-400:hover {
color: var(--color-primary-400);
}
.hover\:text-neutral:hover { .hover\:text-neutral:hover {
color: var(--color-neutral); color: var(--color-neutral);
} }
@ -2433,9 +2433,9 @@ body a, body button {
text-decoration-color: var(--color-neutral-300); text-decoration-color: var(--color-neutral-300);
} }
.hover\:underline-primary-300:hover { .hover\:underline-primary-400:hover {
-webkit-text-decoration-color: var(--color-primary-300); -webkit-text-decoration-color: var(--color-primary-400);
text-decoration-color: var(--color-primary-300); text-decoration-color: var(--color-primary-400);
} }
.hover\:underline-primary-500:hover { .hover\:underline-primary-500:hover {
@ -2452,7 +2452,7 @@ body a, body button {
} }
.dark .dark\:prose-light { .dark .dark\:prose-light {
color: var(--color-neutral-400); color: var(--color-neutral-300);
} }
.dark .dark\:prose-light a { .dark .dark\:prose-light a {
@ -2492,15 +2492,15 @@ body a, body button {
} }
.dark .dark\:prose-light h2 { .dark .dark\:prose-light h2 {
color: var(--color-neutral); color: var(--color-neutral-50);
} }
.dark .dark\:prose-light h3 { .dark .dark\:prose-light h3 {
color: var(--color-neutral); color: var(--color-neutral-50);
} }
.dark .dark\:prose-light h4 { .dark .dark\:prose-light h4 {
color: var(--color-neutral); color: var(--color-neutral-50);
} }
.dark .dark\:prose-light figure figcaption { .dark .dark\:prose-light figure figcaption {
@ -2658,6 +2658,11 @@ body a, body button {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
.sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.sm\:last\:mr-0:last-child { .sm\:last\:mr-0:last-child {
margin-right: 0px; margin-right: 0px;
} }

14
assets/css/main.css
View File

@ -302,31 +302,31 @@ body button {
} }
/* Comment */ /* Comment */
.chroma .c { .chroma .c {
@apply italic text-neutral-400 dark:text-neutral-500; @apply italic text-neutral-500 dark:text-neutral-400;
} }
/* CommentHashbang */ /* CommentHashbang */
.chroma .ch { .chroma .ch {
@apply italic font-semibold text-neutral-400 dark:text-neutral-500; @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
} }
/* CommentMultiline */ /* CommentMultiline */
.chroma .cm { .chroma .cm {
@apply italic text-neutral-400 dark:text-neutral-500; @apply italic text-neutral-500 dark:text-neutral-400;
} }
/* CommentSingle */ /* CommentSingle */
.chroma .c1 { .chroma .c1 {
@apply italic text-neutral-400 dark:text-neutral-500; @apply italic text-neutral-500 dark:text-neutral-400;
} }
/* CommentSpecial */ /* CommentSpecial */
.chroma .cs { .chroma .cs {
@apply italic text-neutral-400 dark:text-neutral-500; @apply italic text-neutral-500 dark:text-neutral-400;
} }
/* CommentPreproc */ /* CommentPreproc */
.chroma .cp { .chroma .cp {
@apply italic text-neutral-400 dark:text-neutral-500; @apply italic text-neutral-500 dark:text-neutral-400;
} }
/* CommentPreprocFile */ /* CommentPreprocFile */
.chroma .cpf { .chroma .cpf {
@apply italic text-neutral-400 dark:text-neutral-500; @apply italic text-neutral-500 dark:text-neutral-400;
} }
/* Generic */ /* Generic */
.chroma .g { .chroma .g {

18
exampleSite/content/samples/markdown.md
View File

@ -35,12 +35,12 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
#### Blockquote without attribution ### Blockquote without attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae. > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote. > **Note** that you can use _Markdown syntax_ within a blockquote.
#### Blockquote with attribution ### Blockquote with attribution
> Don't communicate by sharing memory, share memory by communicating.<br> > Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite> > — <cite>Rob Pike[^1]</cite>
@ -56,7 +56,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
| Bob | 27 | | Bob | 27 |
| Alice | 23 | | Alice | 23 |
#### Inline Markdown within tables ### Inline Markdown within tables
| Italics | Bold | Code | | Italics | Bold | Code |
| --------- | -------- | ------ | | --------- | -------- | ------ |
@ -64,7 +64,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
## Code Blocks ## Code Blocks
#### Code block with backticks ### Code block with backticks
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -79,7 +79,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
</html> </html>
``` ```
#### Code block indented with four spaces ### Code block indented with four spaces
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
@ -92,7 +92,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
</body> </body>
</html> </html>
#### Code block with Hugo's internal highlight shortcode ### Code block with Hugo's internal highlight shortcode
{{< highlight html >}} {{< highlight html >}}
@ -110,19 +110,19 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
## List Types ## List Types
#### Ordered List ### Ordered List
1. First item 1. First item
2. Second item 2. Second item
3. Third item 3. Third item
#### Unordered List ### Unordered List
- List item - List item
- Another item - Another item
- And another item - And another item
#### Nested list ### Nested list
- Fruit - Fruit
- Apple - Apple

4
layouts/_default/single.html
View File

@ -4,10 +4,10 @@
{{ if .Site.Params.article.showBreadcrumbs | default false }} {{ if .Site.Params.article.showBreadcrumbs | default false }}
{{ partial "breadcrumbs.html" . }} {{ partial "breadcrumbs.html" . }}
{{ end }} {{ end }}
<h1 class="mt-0 text-4xl font-extrabold text-neutral-800 dark:text-neutral"> <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
{{ .Title | emojify }} {{ .Title | emojify }}
</h1> </h1>
<div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500"> <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta.html" (dict "context" . "scope" "single") }} {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
</div> </div>
</header> </header>

2
layouts/partials/article-link.html
View File

@ -30,7 +30,7 @@
{{ partial "extend-article-link.html" . }} {{ partial "extend-article-link.html" . }}
{{ end }} {{ end }}
</h3> </h3>
<div class="text-sm text-neutral-400 dark:text-neutral-500"> <div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta.html" . }} {{ partial "article-meta.html" . }}
</div> </div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}

4
layouts/partials/article-pagination.html
View File

@ -11,7 +11,7 @@
<span class="article-pagination-title mt-[0.1rem] leading-6" <span class="article-pagination-title mt-[0.1rem] leading-6"
>{{ .NextInSection.Title | emojify }}</span >{{ .NextInSection.Title | emojify }}</span
> >
<span class="mt-[0.1rem] text-xs text-neutral-400 dark:text-neutral-500"> <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }} {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
{{ partial "meta/date.html" .NextInSection }} {{ partial "meta/date.html" .NextInSection }}
{{ end }} {{ end }}
@ -27,7 +27,7 @@
<span class="article-pagination-title mt-[0.1rem] leading-6" <span class="article-pagination-title mt-[0.1rem] leading-6"
>{{ .PrevInSection.Title | emojify }}</span >{{ .PrevInSection.Title | emojify }}</span
> >
<span class="mt-[0.1rem] text-xs text-neutral-400 dark:text-neutral-500"> <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }} {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
{{ partial "meta/date.html" .PrevInSection }} {{ partial "meta/date.html" .PrevInSection }}
{{ end }} {{ end }}

2
layouts/partials/author-links.html
View File

@ -6,7 +6,7 @@
class="px-1 hover:text-primary-700 dark:hover:text-primary-400" class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
href="{{ $url }}" href="{{ $url }}"
target="_blank" target="_blank"
alt="{{ $name | title }}" aria-label="{{ $name | title }}"
rel="me noopener noreferrer" rel="me noopener noreferrer"
>{{ partial "icon.html" $name }}</a >{{ partial "icon.html" $name }}</a
> >

12
layouts/partials/author.html
View File

@ -1,11 +1,17 @@
{{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }} {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
<div class="flex"> <div class="flex">
{{ with .Site.Author.image }} {{ with .Site.Author.image }}
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" src="{{ . | relURL }}" /> <img
class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full"
width="96"
height="96"
alt="Author"
src="{{ . | relURL }}"
/>
{{ end }} {{ end }}
<div class="place-self-center"> <div class="place-self-center">
{{ with .Site.Author.name | markdownify | emojify }} {{ with .Site.Author.name | markdownify | emojify }}
<div class="text-[0.6rem] leading-3 text-neutral-400 dark:text-neutral-500 uppercase"> <div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
{{ i18n "author.byline_title" | markdownify | emojify }} {{ i18n "author.byline_title" | markdownify | emojify }}
</div> </div>
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300"> <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
@ -15,7 +21,7 @@
{{ with .Site.Author.bio | markdownify | emojify }} {{ with .Site.Author.bio | markdownify | emojify }}
<div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div> <div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div>
{{ end }} {{ end }}
{{ partialCached "author-links.html" . }} <div class="text-2xl sm:text-lg">{{ partialCached "author-links.html" . }}</div>
</div> </div>
</div> </div>
{{ end }} {{ end }}

2
layouts/partials/breadcrumbs.html
View File

@ -1,4 +1,4 @@
<ol class="text-sm text-neutral-400 dark:text-neutral-500"> <ol class="text-sm text-neutral-500 dark:text-neutral-400">
{{ template "crumb" (dict "p1" . "p2" .) }} {{ template "crumb" (dict "p1" . "p2" .) }}
</ol> </ol>
{{ define "crumb" }} {{ define "crumb" }}

10
layouts/partials/footer.html
View File

@ -1,7 +1,7 @@
<footer class="py-10"> <footer class="py-10">
{{/* Footer menu */}} {{/* Footer menu */}}
{{ if .Site.Menus.footer }} {{ if .Site.Menus.footer }}
<nav class="pb-4 text-base font-medium text-neutral-400 dark:text-neutral-500"> <nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
<ul class="flex flex-col list-none sm:flex-row"> <ul class="flex flex-col list-none sm:flex-row">
{{ range .Site.Menus.footer }} {{ range .Site.Menus.footer }}
<li class="mb-1 sm:mb-0 sm:mr-7 sm:last:mr-0"> <li class="mb-1 sm:mb-0 sm:mr-7 sm:last:mr-0">
@ -19,7 +19,7 @@
<div class="flex justify-between"> <div class="flex justify-between">
<div> <div>
{{/* Copyright */}} {{/* Copyright */}}
<p class="text-sm text-neutral-400 dark:text-neutral-500"> <p class="text-sm text-neutral-500 dark:text-neutral-400">
{{- with .Site.Copyright }} {{- with .Site.Copyright }}
{{ . | emojify | markdownify }} {{ . | emojify | markdownify }}
{{- else }} {{- else }}
@ -30,11 +30,11 @@
</p> </p>
{{/* Theme attribution */}} {{/* Theme attribution */}}
{{ if .Site.Params.attribution | default true }} {{ if .Site.Params.attribution | default true }}
<p class="text-xs text-neutral-300 dark:text-neutral-600"> <p class="text-xs text-neutral-400 dark:text-neutral-600">
{{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" {{ $hugo := printf `<a class="hover:underline hover:underline-primary-400 hover:text-primary-500"
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>` href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
}} }}
{{ $congo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }} {{ $congo := printf `<a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
{{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }} {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
</p> </p>
{{ end }} {{ end }}

2
layouts/partials/header.html
View File

@ -1,5 +1,5 @@
<header <header
class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-800 dark:text-neutral" class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral"
> >
{{/* Site logo/title */}} {{/* Site logo/title */}}
<div> <div>

2
layouts/partials/home/profile.html
View File

@ -5,7 +5,7 @@
> >
<header class="flex flex-col items-center mb-3"> <header class="flex flex-col items-center mb-3">
{{ with .Site.Author.image }} {{ with .Site.Author.image }}
<img class="mb-2 rounded-full w-36 h-36" src="{{ . | relURL }}" /> <img class="mb-2 rounded-full w-36 h-36" alt="Author" src="{{ . | relURL }}" />
{{ end }} {{ end }}
<h1 class="text-4xl font-extrabold"> <h1 class="text-4xl font-extrabold">
{{ .Site.Author.name | default .Site.Title }} {{ .Site.Author.name | default .Site.Title }}

1
layouts/partials/sharing-links.html
View File

@ -7,6 +7,7 @@
class="bg-neutral-300 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800 m-1 hover:bg-primary-500 hover:text-neutral rounded min-w-[2.4rem] inline-block text-center p-1" class="bg-neutral-300 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800 m-1 hover:bg-primary-500 hover:text-neutral rounded min-w-[2.4rem] inline-block text-center p-1"
href="{{ printf .url $.Permalink $.Title }}" href="{{ printf .url $.Permalink $.Title }}"
title="{{ i18n .title }}" title="{{ i18n .title }}"
aria-label="{{ i18n .title }}"
>{{ partial "icon.html" .icon }}</a >{{ partial "icon.html" .icon }}</a
> >
{{ end }} {{ end }}

2
layouts/shortcodes/lead.html
View File

@ -1,3 +1,3 @@
<p class="!mb-9 text-xl text-neutral-400 dark:text-neutral-500"> <p class="!mb-9 text-xl text-neutral-500 dark:text-neutral-400">
{{ .Inner }} {{ .Inner }}
</p> </p>

10
tailwind.config.js
View File

@ -93,7 +93,7 @@ module.exports = {
borderLeftColor: theme("colors.primary.200"), borderLeftColor: theme("colors.primary.200"),
}, },
h1: { h1: {
color: theme("colors.neutral.800"), color: theme("colors.neutral.900"),
position: "relative", position: "relative",
}, },
h2: { h2: {
@ -149,7 +149,7 @@ module.exports = {
light: { light: {
css: [ css: [
{ {
color: theme("colors.neutral.400"), color: theme("colors.neutral.300"),
a: { a: {
color: theme("colors.primary.400"), color: theme("colors.primary.400"),
textDecorationColor: theme("colors.neutral.500"), textDecorationColor: theme("colors.neutral.500"),
@ -178,13 +178,13 @@ module.exports = {
color: theme("colors.neutral.DEFAULT"), color: theme("colors.neutral.DEFAULT"),
}, },
h2: { h2: {
color: theme("colors.neutral.DEFAULT"), color: theme("colors.neutral.50"),
}, },
h3: { h3: {
color: theme("colors.neutral.DEFAULT"), color: theme("colors.neutral.50"),
}, },
h4: { h4: {
color: theme("colors.neutral.DEFAULT"), color: theme("colors.neutral.50"),
}, },
"figure figcaption": { "figure figcaption": {
color: theme("colors.neutral.400"), color: theme("colors.neutral.400"),