From 04422f8d237d1af542f2abe5ac5f7be0ab276843 Mon Sep 17 00:00:00 2001 From: Shulhan Date: Sat, 24 Jan 2026 21:23:59 +0700 Subject: 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 --- _static/ciigo.css | 14 ++++++++++---- _static/index.gohtml | 7 ++++--- staticfs.go | 12 ++++++------ testdata/watcher_test.txt | 22 ++++++++++++---------- watcher_test.go | 4 ++-- 5 files changed, 34 insertions(+), 25 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 */ :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 }} -
+ -
+
{{.Body}}
-