Skip to content

fix(website): remove the T and C shortcuts, self-host fonts, tidy the theme - #612

Merged
bmscomp merged 6 commits into
mainfrom
fix/website-audit-p1-p2
Nov 5, 2026
Merged

bmscomp merged 6 commits into
mainfrom
fix/website-audit-p1-p2

Conversation

@bmscomp

@bmscomp bmscomp commented Nov 5, 2026 •

Copy link
Copy Markdown
Owner

Why

The 2026-11-05 audit of katesplatform.io scored 13/20. The most serious finding was the T and C shortcuts on the two figures. They failed WCAG 2.1.4 (Level A), C did the same as T despite its "next colors" hint, and Cmd+Shift+C flipped the look. The look buttons already do this job, so the shortcuts are gone. This PR fixes that P1, the eight P2s and the two P3s.

What changed

  • Claims: the diagram said LitmusChaos runs 13 disruption types. The README says 11 on a default install, with network latency and disk fill timing out. The page now says 11, and disk fill is off the feature card. The card keeps its headline of 13 types.
  • Phone menu: it scrolls when taller than the screen. At 667×375 GitHub and Get started could not be reached.
  • Layout shift: the gradient moved from .hero-glow onto .hero. Lighthouse blamed that box for the 0.153 desktop shift.
  • Fonts: nine Latin WOFF2 files are served from assets/fonts, with their OFL licences. Google is out of the CSP in both index.html and _headers.
  • Render loop: the architecture figure no longer renders while paused or off-screen.
  • Reduced motion: the Kafka figure ends healthy instead of stuck on "Broker down".
  • Phones: larger diagram text, and 44px targets on the figure controls.
  • Theme: Paper overrides are folded into the base rules, code and footer colours are tokens, --accent-strong is gone.
  • Headings: the footer's h4s are h3s, which keeps the order valid and looks the same.
  • README: the deploy section now says GitHub Pages serves the live site.
  • Polish: the small caps labels above headings are gone, and the hero's first point now names Kubernetes. Focus rings, selection, link underlines and scrollbars use the palette. Cards no longer lift on hover, and the packet and dot glows are removed. The look buttons stay on one row on phones.
  • Distill: the look switchers and the Panels and Chips themes are gone, so both figures stay in the Grid look. Two screenshots move to a new #cli section captioned by task, and two are deleted. The architecture section drops from 2,808px to 1,781px on desktop.
  • Closing action: the page now ends on a copyable brew install and Quick start, with the star and Artifact Hub as text links. The header uses the same Quick start label. The GitHub Actions step and scenario file have Copy buttons too; the multi-step quick start block doesn't, because pasting it whole would feed later lines to the kates deploy wizard.
  • Work with us: a new page, linked from the menu and footer, starts from four visitor situations that open into what we'd do. Its buttons go to GitHub Discussions, so enquiries are public for now. The header collapses to the phone menu at 1020px. The offers are new and carry no prices or customers, so check them before merging.

Deliberately not done

  • The nine repeated icon cards, which need a design decision.

website/themes/ is deleted. Nothing linked those four files, but it does remove the documented palette swap.

Testing

Run in Chromium against a local server, at 375, 667×375 and desktop widths:

  • html-validate passes and the referenced assets exist.
  • The shortcuts no longer change the look.
  • Pausing stops DOM writes, and timeline clicks still work while paused.
  • All nine fonts load with no console errors, and diagram text fits its boxes.
  • Lighthouse desktop reports a layout shift of 0.

Not tested: a real phone, Safari or Firefox, a live reduced-motion session, and the scenario lint job, though the scenario is unchanged. Lighthouse mobile scored 91 locally, but that server has no compression, so it can't be compared with the live 97. Self-hosting's performance effect needs measuring after deploy.

… theme

The T and C shortcuts failed WCAG 2.1.4, C did the same as T, and
Cmd+Shift+C flipped the look. The buttons already do this, so they go.

- Say Litmus runs 11 disruption types on a default install, and drop
  disk fill from the feature card
- Let the phone menu scroll when it is taller than the screen
- Put the hero gradient on .hero, ending the desktop layout shift
- Serve the fonts from the site and tighten the CSP in both places
- Stop rendering the architecture figure while it is paused
- Leave the reduced-motion Kafka figure healthy, not on "Broker down"
- Enlarge the phone diagram text and give its controls 44px targets
- Fold the Paper overrides into the base rules, add code and footer
  tokens, lift the Panels fault colour to AA, delete the unlinked themes
The footer jumped from h2 to h4, Lighthouse's only accessibility failure.
Its headings are h3 now and look the same. The README's deploy section
opened as if Cloudflare served the site, and GitHub Pages does.
- Remove the seven small caps labels; the hero's Kubernetes mention
  moves to its first point
- Theme the focus rings, selection, link underlines and scrollbars
- Balance headings, wrap body text cleanly and cap the section intro
- Offset anchor jumps below the sticky header
- Stop cards lifting on hover, since they are not clickable
- Remove the glows from the moving packets and dots
- On phones, keep the look buttons on one row and drop the figure
  header's scrolling subtitle
…ction

The architecture section ran 2,808px and lost its thread right after the
broker kill: three look buttons on each figure, then four screenshots
about colour palettes under a heading about architecture.

- Remove the look switchers, the Panels and Chips themes and their code,
  so both figures stay in the Grid look
- Drop the window-bar title, which repeated the figure heading
- Move two screenshots into a short section captioned by task, and
  delete the other two
- Swap the compare and CI bands so the sections keep alternating
After its strongest line the page asked for a star, and the install
command could only be retyped.

- Lead the closing section with a copyable brew install, then Quick start
- Demote the star and Artifact Hub to text links
- Rename the header's Get started to Quick start, matching the hero
- Add Copy to the GitHub Actions step and the scenario file

The quick start block gets no Copy: pasted whole, kates deploy's wizard
would read the following lines as its answers.
Visitors have nowhere to ask for help with Kates. The page starts from
four situations that open into what we'd do about each, and the buttons
go to GitHub Discussions, so enquiries start in public.

- Add Work with us to the top menu and the footer
- Collapse the header into the phone menu at 1020px, since nine items
  no longer fit, which also stops it wrapping at 814px
- Add the page to the sitemap and the html-validate job

The offers are proposed by this change, with no prices or customers.
@bmscomp
bmscomp merged commit 6485b6d into main Nov 5, 2026
64 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant