mirror of https://github.com/jpanther/congo.git
♿️ Improve contrast and other accessibility issues
James Panther
parent
ccfd369c67
commit
90f36f8221
|
|
@ -14,9 +14,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
|
||||
### Changed
|
||||
|
||||
- Adjusted contrast of some items to improve accessibility
|
||||
- Upgrade to Chart.js v3.6.2
|
||||
- Upgrade to Mermaid v8.13.6
|
||||
|
||||
### Fixed
|
||||
|
||||
- Missing ARIA descriptions and alt tags on some images and links
|
||||
|
||||
## [1.5.3] - 2021-11-18
|
||||
|
||||
### Changed
|
||||
|
|
|
|||
|
|
@ -727,7 +727,7 @@ video {
|
|||
}
|
||||
|
||||
.prose h1 {
|
||||
color: var(--color-neutral-800);
|
||||
color: var(--color-neutral-900);
|
||||
font-weight: 800;
|
||||
font-size: 2.25em;
|
||||
margin-top: 0;
|
||||
|
|
@ -1700,11 +1700,11 @@ body a, body button {
|
|||
|
||||
.chroma .c {
|
||||
font-style: italic;
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.dark .chroma .c {
|
||||
color: var(--color-neutral-500);
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
/* CommentHashbang */
|
||||
|
|
@ -1712,66 +1712,66 @@ body a, body button {
|
|||
.chroma .ch {
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.dark .chroma .ch {
|
||||
color: var(--color-neutral-500);
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
/* CommentMultiline */
|
||||
|
||||
.chroma .cm {
|
||||
font-style: italic;
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.dark .chroma .cm {
|
||||
color: var(--color-neutral-500);
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
/* CommentSingle */
|
||||
|
||||
.chroma .c1 {
|
||||
font-style: italic;
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.dark .chroma .c1 {
|
||||
color: var(--color-neutral-500);
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
/* CommentSpecial */
|
||||
|
||||
.chroma .cs {
|
||||
font-style: italic;
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.dark .chroma .cs {
|
||||
color: var(--color-neutral-500);
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
/* CommentPreproc */
|
||||
|
||||
.chroma .cp {
|
||||
font-style: italic;
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.dark .chroma .cp {
|
||||
color: var(--color-neutral-500);
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
/* CommentPreprocFile */
|
||||
|
||||
.chroma .cpf {
|
||||
font-style: italic;
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.dark .chroma .cpf {
|
||||
color: var(--color-neutral-500);
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
/* Generic */
|
||||
|
|
@ -2356,20 +2356,20 @@ body a, body button {
|
|||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.text-neutral-800 {
|
||||
color: var(--color-neutral-800);
|
||||
.text-neutral-500 {
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.text-primary-500 {
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
|
||||
.text-primary-700 {
|
||||
color: var(--color-primary-700);
|
||||
.text-neutral-800 {
|
||||
color: var(--color-neutral-800);
|
||||
}
|
||||
|
||||
.text-neutral-300 {
|
||||
color: var(--color-neutral-300);
|
||||
.text-primary-700 {
|
||||
color: var(--color-primary-700);
|
||||
}
|
||||
|
||||
.text-primary-400 {
|
||||
|
|
@ -2412,14 +2412,14 @@ body a, body button {
|
|||
color: var(--color-primary-700);
|
||||
}
|
||||
|
||||
.hover\:text-primary-400:hover {
|
||||
color: var(--color-primary-400);
|
||||
}
|
||||
|
||||
.hover\:text-primary-500:hover {
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
|
||||
.hover\:text-primary-400:hover {
|
||||
color: var(--color-primary-400);
|
||||
}
|
||||
|
||||
.hover\:text-neutral:hover {
|
||||
color: var(--color-neutral);
|
||||
}
|
||||
|
|
@ -2433,9 +2433,9 @@ body a, body button {
|
|||
text-decoration-color: var(--color-neutral-300);
|
||||
}
|
||||
|
||||
.hover\:underline-primary-300:hover {
|
||||
-webkit-text-decoration-color: var(--color-primary-300);
|
||||
text-decoration-color: var(--color-primary-300);
|
||||
.hover\:underline-primary-400:hover {
|
||||
-webkit-text-decoration-color: var(--color-primary-400);
|
||||
text-decoration-color: var(--color-primary-400);
|
||||
}
|
||||
|
||||
.hover\:underline-primary-500:hover {
|
||||
|
|
@ -2452,7 +2452,7 @@ body a, body button {
|
|||
}
|
||||
|
||||
.dark .dark\:prose-light {
|
||||
color: var(--color-neutral-400);
|
||||
color: var(--color-neutral-300);
|
||||
}
|
||||
|
||||
.dark .dark\:prose-light a {
|
||||
|
|
@ -2492,15 +2492,15 @@ body a, body button {
|
|||
}
|
||||
|
||||
.dark .dark\:prose-light h2 {
|
||||
color: var(--color-neutral);
|
||||
color: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
.dark .dark\:prose-light h3 {
|
||||
color: var(--color-neutral);
|
||||
color: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
.dark .dark\:prose-light h4 {
|
||||
color: var(--color-neutral);
|
||||
color: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
.dark .dark\:prose-light figure figcaption {
|
||||
|
|
@ -2658,6 +2658,11 @@ body a, body button {
|
|||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.sm\:text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.sm\:last\:mr-0:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -302,31 +302,31 @@ body button {
|
|||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
@apply italic text-neutral-400 dark:text-neutral-500;
|
||||
@apply italic text-neutral-500 dark:text-neutral-400;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.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 */
|
||||
.chroma .cm {
|
||||
@apply italic text-neutral-400 dark:text-neutral-500;
|
||||
@apply italic text-neutral-500 dark:text-neutral-400;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
@apply italic text-neutral-400 dark:text-neutral-500;
|
||||
@apply italic text-neutral-500 dark:text-neutral-400;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
@apply italic text-neutral-400 dark:text-neutral-500;
|
||||
@apply italic text-neutral-500 dark:text-neutral-400;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
@apply italic text-neutral-400 dark:text-neutral-500;
|
||||
@apply italic text-neutral-500 dark:text-neutral-400;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
@apply italic text-neutral-400 dark:text-neutral-500;
|
||||
@apply italic text-neutral-500 dark:text-neutral-400;
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
#### Blockquote without attribution
|
||||
### Blockquote without attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **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>
|
||||
> — <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 |
|
||||
| Alice | 23 |
|
||||
|
||||
#### Inline Markdown within tables
|
||||
### Inline Markdown within tables
|
||||
|
||||
| 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 block with backticks
|
||||
### Code block with backticks
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -79,7 +79,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
|
|||
</html>
|
||||
```
|
||||
|
||||
#### Code block indented with four spaces
|
||||
### Code block indented with four spaces
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
|
@ -92,7 +92,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
|
|||
</body>
|
||||
</html>
|
||||
|
||||
#### Code block with Hugo's internal highlight shortcode
|
||||
### Code block with Hugo's internal highlight shortcode
|
||||
|
||||
{{< highlight html >}}
|
||||
|
||||
|
|
@ -110,19 +110,19 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
|
|||
|
||||
## List Types
|
||||
|
||||
#### Ordered List
|
||||
### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
#### Unordered List
|
||||
### Unordered List
|
||||
|
||||
- List item
|
||||
- Another item
|
||||
- And another item
|
||||
|
||||
#### Nested list
|
||||
### Nested list
|
||||
|
||||
- Fruit
|
||||
- Apple
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
{{ if .Site.Params.article.showBreadcrumbs | default false }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
{{ 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 }}
|
||||
</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") }}
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
{{ partial "extend-article-link.html" . }}
|
||||
{{ end }}
|
||||
</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" . }}
|
||||
</div>
|
||||
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<span class="article-pagination-title mt-[0.1rem] leading-6"
|
||||
>{{ .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) }}
|
||||
{{ partial "meta/date.html" .NextInSection }}
|
||||
{{ end }}
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<span class="article-pagination-title mt-[0.1rem] leading-6"
|
||||
>{{ .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) }}
|
||||
{{ partial "meta/date.html" .PrevInSection }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
|
||||
href="{{ $url }}"
|
||||
target="_blank"
|
||||
alt="{{ $name | title }}"
|
||||
aria-label="{{ $name | title }}"
|
||||
rel="me noopener noreferrer"
|
||||
>{{ partial "icon.html" $name }}</a
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
{{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
|
||||
<div class="flex">
|
||||
{{ 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 }}
|
||||
<div class="place-self-center">
|
||||
{{ 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 }}
|
||||
</div>
|
||||
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
|
||||
|
|
@ -15,7 +21,7 @@
|
|||
{{ with .Site.Author.bio | markdownify | emojify }}
|
||||
<div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div>
|
||||
{{ end }}
|
||||
{{ partialCached "author-links.html" . }}
|
||||
<div class="text-2xl sm:text-lg">{{ partialCached "author-links.html" . }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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" .) }}
|
||||
</ol>
|
||||
{{ define "crumb" }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<footer class="py-10">
|
||||
{{/* Footer menu */}}
|
||||
{{ 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">
|
||||
{{ range .Site.Menus.footer }}
|
||||
<li class="mb-1 sm:mb-0 sm:mr-7 sm:last:mr-0">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="flex justify-between">
|
||||
<div>
|
||||
{{/* 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 }}
|
||||
{{ . | emojify | markdownify }}
|
||||
{{- else }}
|
||||
|
|
@ -30,11 +30,11 @@
|
|||
</p>
|
||||
{{/* Theme attribution */}}
|
||||
{{ if .Site.Params.attribution | default true }}
|
||||
<p class="text-xs text-neutral-300 dark:text-neutral-600">
|
||||
{{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
|
||||
<p class="text-xs text-neutral-400 dark:text-neutral-600">
|
||||
{{ $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>`
|
||||
}}
|
||||
{{ $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 }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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 */}}
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
>
|
||||
<header class="flex flex-col items-center mb-3">
|
||||
{{ 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 }}
|
||||
<h1 class="text-4xl font-extrabold">
|
||||
{{ .Site.Author.name | default .Site.Title }}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
href="{{ printf .url $.Permalink $.Title }}"
|
||||
title="{{ i18n .title }}"
|
||||
aria-label="{{ i18n .title }}"
|
||||
>{{ partial "icon.html" .icon }}</a
|
||||
>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ module.exports = {
|
|||
borderLeftColor: theme("colors.primary.200"),
|
||||
},
|
||||
h1: {
|
||||
color: theme("colors.neutral.800"),
|
||||
color: theme("colors.neutral.900"),
|
||||
position: "relative",
|
||||
},
|
||||
h2: {
|
||||
|
|
@ -149,7 +149,7 @@ module.exports = {
|
|||
light: {
|
||||
css: [
|
||||
{
|
||||
color: theme("colors.neutral.400"),
|
||||
color: theme("colors.neutral.300"),
|
||||
a: {
|
||||
color: theme("colors.primary.400"),
|
||||
textDecorationColor: theme("colors.neutral.500"),
|
||||
|
|
@ -178,13 +178,13 @@ module.exports = {
|
|||
color: theme("colors.neutral.DEFAULT"),
|
||||
},
|
||||
h2: {
|
||||
color: theme("colors.neutral.DEFAULT"),
|
||||
color: theme("colors.neutral.50"),
|
||||
},
|
||||
h3: {
|
||||
color: theme("colors.neutral.DEFAULT"),
|
||||
color: theme("colors.neutral.50"),
|
||||
},
|
||||
h4: {
|
||||
color: theme("colors.neutral.DEFAULT"),
|
||||
color: theme("colors.neutral.50"),
|
||||
},
|
||||
"figure figcaption": {
|
||||
color: theme("colors.neutral.400"),
|
||||
|
|
|
|||
Loading…
Reference in New Issue