diff options
| author | Shulhan <ms@kilabit.info> | 2026-01-24 21:23:59 +0700 |
|---|---|---|
| committer | Shulhan <ms@kilabit.info> | 2026-01-24 21:23:59 +0700 |
| commit | 04422f8d237d1af542f2abe5ac5f7be0ab276843 (patch) | |
| tree | af4d7dd5d8bf40f54674a161b9e0facbf9b757a4 /_static | |
| parent | 453196d778979e084cbbedf9ba12cea398b84bf8 (diff) | |
| download | ciigo-04422f8d237d1af542f2abe5ac5f7be0ab276843.tar.xz | |
all: conform with Lighthouse recommendations
The foreground color changes to conform with color-contrast
ratio threshold, with score AAA. [1]
Add ARIA role to each section of pages: banner for topbar,
main for page, and contentinfo for footer.
This is to make the webpage more robust and functional no matter
what screen reader technology is used. [2]
For touch devices, increase the line height on Table of Contents.
This is to help users who may have difficulty in confidently targeting or
operating small controls. [3]
[1]: https://dequeuniversity.com/rules/axe/4.11/color-contrast
[2]: https://dequeuniversity.com/rules/axe/4.11/landmark-one-main
[3]: https://dequeuniversity.com/rules/axe/4.11/target-size
Diffstat (limited to '_static')
| -rw-r--r-- | _static/ciigo.css | 14 | ||||
| -rw-r--r-- | _static/index.gohtml | 7 |
2 files changed, 14 insertions, 7 deletions
diff --git a/_static/ciigo.css b/_static/ciigo.css index 3828352..e47da1d 100644 --- a/_static/ciigo.css +++ b/_static/ciigo.css @@ -2,11 +2,11 @@ /* SPDX-FileCopyrightText: 2020 Shulhan <ms@kilabit.info> */ :root { - --light-anchor: teal; + --light-anchor: maroon; --light-bg-adm-caution: lavender; --light-bg-adm-important: cornsilk; --light-bg-adm-note: gainsboro; - --light-bg-adm-tip: azure; + --light-bg-adm-tip: antiquewhite; --light-bg-adm-warning: mistyrose; --light-bg-mono: var(--light-bg-adm-important); --light-bg-table-header: var(--light-bg-adm-note); @@ -19,11 +19,11 @@ --light-fg-title: var(--light-fg); --light-fg: darkslategray; - --dark-anchor: darkturquoise; + --dark-anchor: bisque; --dark-bg-adm-caution: darkolivegreen; --dark-bg-adm-important: rgba(0, 0, 0, 0.2); --dark-bg-adm-note: slategray; - --dark-bg-adm-tip: var(--light-anchor); + --dark-bg-adm-tip: teal; --dark-bg-adm-warning: sienna; --dark-bg-mono: var(--dark-bg-adm-important); --dark-bg-table-header: var(--dark-bg-adm-note); @@ -688,3 +688,9 @@ pre { } /*}}}*/ } +@media (pointer: coarse) { + /* Styles for touch devices */ + #toc { + line-height: 1.6rem; + } +} diff --git a/_static/index.gohtml b/_static/index.gohtml index 6b550d1..11df7a0 100644 --- a/_static/index.gohtml +++ b/_static/index.gohtml @@ -19,19 +19,20 @@ {{- end }} </head> <body> - <div class="topbar"> + <div class="topbar" role="banner"> <a class="item title" href="/">{{.Title}}</a> <form class="item" action="/_internal/search"> <input type="text" name="q" placeholder="Search" /> </form> </div> - <div class="page"> + <div class="page" role="main"> <div class="container"> {{.Body}} </div> </div> - <div class="footer"> + + <div class="footer" role="contentinfo"> Powered by <a href="https://git.sr.ht/~shulhan/ciigo"> ciigo </a> </div> </body> |