docs: landing page visuals — StackGuardian logo and button colour

[refeed]

Two visual changes to the landing page, combined. Replaces #277 and #278, which are closed in favour of this — same commits, one review.

The page is already live at https://stackguardian.github.io/tirith/, which still shows the old logo and the old button colour; merging this fires the deploy and the site picks both up.

1. The StackGuardian icon as the site logo

  logo: {
-   alt: 'Tirith Logo',
-   src: 'img/tirith.png',
+   alt: 'StackGuardian logo',
+   src: 'img/sg-icon.png',
  },

Asset added at documentation/static/img/sg-icon.png — 512×512 RGBA PNG, 17.7 KB. That logo sits top-left on the landing page and on every documentation page.

The alt text changes with it: it read "Tirith Logo", and the image is now the StackGuardian mark, so leaving it would have a screen reader announce the wrong name.

Docusaurus emits two <img> elements for a themed logo. Both were checked — a change landing on only one looks correct until someone toggles light/dark.

favicon: 'img/tirith.png' is deliberately untouched, and that asset is now used for nothing else. The favicon is how the site is identified in a tab strip, history and bookmarks, which is a separate decision from the in-page logo. Happy to swap it and delete the orphan in a follow-up.

2. The Get started button in the icon blue

Applied by overriding the --ifm-button-* custom properties on a CSS-module class composed alongside Docusaurus's own button--primary:

.heroPrimary {
  --ifm-button-background-color: #006ee6;
  --ifm-button-border-color: #006ee6;
  --ifm-button-color: #fff;
}

--ifm-color-primary in custom.css is untouched on purpose. It also drives link colour, sidebar highlights and admonitions on every page, so changing it would repaint the whole site to recolour one button. The secondary "GitHub" button is unchanged.

The icon's exact blue fails contrast, so the fill is one shade darker

Sampled from the source PNG with a standard-library decoder: the dominant opaque colour is #007aff, confirmed at seven probe points and by a histogram over the image.

White on #007aff is 4.02:1 — below the 4.5:1 WCAG AA threshold for normal text. Rather than ship that, the fill is the same hue darkened to #006ee6 (4.80:1), with hover and active at #0062cc (5.80:1). It reads as the icon blue and stays legible.

If you would rather have the literal #007aff, it is a one-character change and this is large text, where AA only requires 3:1 — but it is a conscious trade, so it is not made silently.

The label is pinned to opaque white

Not left to --ifm-button-color, which resolves through --ifm-font-color-base-inverse and flips per theme. That variable is how this button's text ended up invisible once already: an earlier version set the label to var(--ifm-background-color), which is #0000 in light mode. A literal #fff renders identically in both themes.

Verified together, not just separately

npm run build succeeds with both commits applied, and each change is present in the emitted output rather than only in source:

• build/index.html → src="/tirith/img/sg-icon.png" and class="button button--lg button--primary heroPrimary_i6PQ"
• build/assets/css/styles.*.css → --ifm-button-background-color:#006ee6 plus the hover/active rule

Infima wraps its .button--primary rules in :where(), so a single module class wins on base, hover and active without !important.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[sonarqubecloud]

❌ The last analysis has failed.

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.