Skip to content

docs(site): Quantify brand wordmark + minimal theme-aware footer - #23070

Open
bloxster wants to merge 6 commits into
release/3.5from
docs/quantify-brand-wordmark
Open

docs(site): Quantify brand wordmark + minimal theme-aware footer#23070
bloxster wants to merge 6 commits into
release/3.5from
docs/quantify-brand-wordmark

Conversation

@bloxster

@bloxster bloxster commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator

What

Three things, in order: restore the Quantify brand wordmark this site was missing, replace the five-column footer with the minimal one the docs sites now share, then fix what an adversarial review found in both.

Targets release/3.5 because that is the only branch carrying docs-deploy.yml — changes landed elsewhere do not publish. Needs forward-porting to main and release/3.6 after it deploys.

Commit Change
3d1e5b9812 Quantify wordmark (navbar title + footer), linked brand lockup
ca20c484ff Five-column footer → minimal, theme-aware
db81e1667e Review fixes: contrast, dark boundary, dead config, in-repo spec

1. Quantify

docusaurus-design-spec.md §7 specifies Quantify 700 for the navbar title and footer wordmark. This site was the only Erigon property not following it — it rendered both in Montserrat 800 and had no Quantify at all: no .woff2, no @font-face, no usage. cocoon.erigon.tech, zilkworm.erigon.tech and erigon.tech all had it. The font was dropped here during a licensing question later resolved in Quantify's favour, and never restored.

The vendored Quantify.woff2 is byte-identical to the copy already shipping on all three siblings (md5 8ea91606884b1e451c15ea8295c21c7e). Licence is confirmed by the holder to cover use across Erigon properties, public-repo vendoring included.

2. Minimal footer

A docs site already has a sidebar, a navbar and search, so five columns of links duplicate navigation the reader is standing in. The full footer stays on erigon.tech, where it is a primary navigation surface. Design spec §6.0 records the split.

Now: brand lockup → tagline → icon-only socials, then a bottom bar (copyright, Privacy / Cookie / Contact / hello@erigon.tech). Nunito Sans with the Quantify wordmark. Every interactive element hovers Erigon Orange #EF7716.

The surface is now theme-aware — white in light, black in dark, via --footer-* custom properties. It was hardcoded #000000 in both modes before. The text ramp had to move to fixed alpha values in the same change: Infima's emphasis vars invert with the theme and would have rendered dark-on-black.

⚠️ What this drops

  • The Products / Developers / Company / Community link columns — including the cross-site discovery links (Zilkworm Docs / Cocoon Docs / Erigon Docs). If those carried referral traffic between the properties, this is a real regression and worth a deliberate decision.
  • The Erigon Technologies AG postal address (Dammstrasse 16, 6300 Zug). If that is an imprint expectation for a Swiss AG, it needs adding back as a compact line.

Both were left out because minimal was the explicit ask; both are one-line additions.

3. Review fixes (db81e1667e)

Reviewed adversarially by GPT-5.5 and Claude Fable; every finding verified against the files before acting.

  • WCAG AA failure. --footer-fine at 0.35 alpha computed to 2.44:1 on white and 3.01:1 on black — both below the 4.5:1 needed at 0.8rem, covering the copyright line and all four legal links. Now 0.55 → 4.75:1 / 6.26:1. The premise behind 0.35 was wrong: equal alpha is not equal perceived contrast across inverted surfaces, so mirroring the dark ramp made light mode worse than the value it copied. The dark failure was inherited from the old black footer and is fixed here too.
  • Dark mode had no footer boundary. #000000 against the #0A0A0A page body is imperceptible — the footer read as the page petering out. Dark now carries a top edge. A code comment claiming black "separates unaided" was false and is corrected in place.
  • Light social borders 0.15 → 0.25; at 0.15 the boxes nearly vanished on white, while 0.15 white-on-black reads fine.
  • Dead themeConfig.footer removed — ignored since the footer was swizzled, and its discord.gg/erigon disagreed with the real footer's dsc.gg/erigon, so it was actively misleading.
  • In-repo DESIGN-SPEC.md §6 still described the black five-column footer and a Montserrat wordmark, contradicting the two commits before it. Rewritten to summarise and point at the canonical spec rather than duplicate it.

Known and deliberate

color-mix() (the 12% hover tint) is Chrome 111+, while the default production browserslist resolves to Chrome 109, so the tint no-ops on 109–110. Left as-is: colour and border hover still fire, and the obvious fix — a hardcoded rgba — would break theme awareness. Documented in the spec.

Verification

  • npm ci && npm run build clean; npm run typecheck clean
  • python3 docs/site/scripts/generate-llms.py --check → OK, 4 files match (74 pages)
  • Font actually resolves rather than silently falling back: document.fonts reports Quantify:loaded; built CSS has .navbar__title{font-family:Quantify,sans-serif;font-weight:700}; build/fonts/Quantify.woff2 present
  • Footer probed over the DevTools protocol in both colour modes: bg #FFFFFF / #000000, body Nunito Sans, wordmark Quantify, accent #EF7716, and --footer-fine serving as #0000008c / #ffffff8c

Companion PRs: erigontech/cocoon (same footer), erigontech/erigon-documents (the spec this implements — worth reviewing first), erigontech/zilkworm-docs#22.

🤖 Generated with Claude Code

Bloxster and others added 3 commits August 6, 2026 17:17
…zilkworm

docusaurus-design-spec.md §7 Font Roles specifies Quantify 700 for the navbar
title and the footer brand wordmark. This site was the only Erigon docs
property not following it — it rendered both in Montserrat 800, while
cocoon.erigon.tech, zilkworm.erigon.tech and erigon.tech itself all use
Quantify. The font was dropped here during a licensing question that was
later resolved in Quantify's favour, and never restored.

- Vendor static/fonts/Quantify.woff2 (byte-identical to the copy already
  shipping on cocoon, zilkworm and the main website: md5 8ea91606…) and add
  the @font-face, with the license note the spec asks for — Erigon
  Technologies AG holds a commercial extended license covering the brand
  wordmark on Erigon-owned sites, and self-hosting is the licensed delivery
  path, not the free CDN copy.
- .navbar__title: Montserrat 800 → Quantify 700. The rule now matches
  cocoon's byte for byte; letter-spacing was already 0.04em.
- Footer wordmark: Montserrat 800 → Quantify 700.
- Link the footer brand lockup to erigon.tech, aligning with zilkworm. One
  anchor wraps logo and wordmark so it is a single hit target rather than two
  adjacent links to the same URL, with an aria-label because the visible
  content is a wordmark plus an image. Hover tints it Erigon Orange.

Branched off release/3.5 because that is the only branch carrying
docs-deploy.yml — changes landed elsewhere do not publish. Needs
forward-porting to main and release/3.6 afterwards.

Verified: npm ci && npm run build clean, and the built output actually
resolves the font rather than silently falling back — build/fonts/
Quantify.woff2 present, built CSS has .navbar__title{font-family:Quantify,
sans-serif;font-weight:700}, and the footer wordmark plus the
aria-label="Erigon home page" anchor are in build/index.html.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…re one

Adopts the single-row footer the docs sites now share (design spec §6.0/§6.1),
keeping the brand fonts rather than zilkworm's terminal styling.

Rationale for going minimal here: a docs site already has a sidebar, a navbar
and search, so five columns of links duplicate navigation the reader is
standing in and push the useful part off-screen. The full five-column footer
stays on erigon.tech, where it is a primary navigation surface.

- Single row: brand lockup → tagline → icon-only social buttons pushed right.
  Bottom bar keeps copyright plus Privacy / Cookie / Contact /
  hello@erigon.tech.
- Nunito Sans throughout with the Quantify 700 wordmark, per §7 Font Roles.
- Every interactive element hovers Erigon Orange #EF7716 — socials (colour,
  border and a 12% background tint), legal links, and the brand lockup.
- The surface now follows the colour mode: white in light, black in dark, via
  new --footer-* custom properties. Previously it was hardcoded #000000 in
  both. The text ramp had to move to fixed alpha values in the same change:
  Infima's emphasis vars invert with the theme and would have rendered
  dark-on-black.
- --footer-top-edge is a light-mode-only hairline. A white footer on a white
  page body has no edge of its own; the black one separates unaided.
- Removed two now-dead CSS blocks: `.footer { background-color: #000000 }`
  (the swizzled footer sets its surface inline and never sets that class) and
  `.footer-social-btn` (the new buttons are styled inline). grep finds no
  remaining references to either.
- Mobile: the top row stacks with flex-direction: column. The old rule set
  grid-template-columns, which is a no-op on a flex container, and the social
  row's margin-left:auto is reset so it aligns with the brand once stacked.

What this drops: the Products / Developers / Company / Community link columns
and the Erigon Technologies AG postal address. Cross-site discovery links
(Zilkworm / Cocoon / Erigon Docs) went with the columns — worth a look if
those carried referral traffic. If the Zug address is needed for imprint
reasons, it needs adding back as a compact line.

Verified: npm run build clean, and the footer probed over CDP in both colour
modes — bg #FFFFFF light / #000000 dark, body Nunito Sans, wordmark Quantify,
--footer-accent #EF7716 in both.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Acts on an adversarial review of the previous two commits (GPT-5.5 + Fable).
Findings verified against the files before applying.

- WCAG AA: --footer-fine was 0.35 alpha in both modes. On white that computes
  to 2.44:1 and on black 3.01:1, both failing the 4.5:1 needed at 0.8rem —
  which covers the copyright line and all four legal links. Now 0.55, giving
  4.75:1 light / 6.26:1 dark. The premise behind 0.35 was wrong: equal alpha is
  not equal perceived contrast across inverted surfaces, so mirroring the dark
  ramp made light mode worse than the value it copied. The dark failure was
  inherited from the old black footer and is fixed here too.
- --footer-top-edge now exists in dark mode as well. #000000 against the
  #0A0A0A page body is imperceptible, so the footer read as the page petering
  out. The previous comment claiming black "separates unaided" was simply
  false; corrected in place rather than deleted, so it does not get
  reintroduced.
- Light-mode --footer-box-border 0.15 → 0.25: at 0.15 the social boxes nearly
  vanished on white, while 0.15 white-on-black reads fine — the same
  inverted-surface asymmetry.
- Removed the dead themeConfig.footer block. Ignored since the footer was
  swizzled, and its Discord link (discord.gg/erigon) disagreed with the real
  footer's dsc.gg/erigon, so it was actively misleading.
- Rewrote §6 of the in-repo DESIGN-SPEC.md, which still described the black
  five-column footer and a Montserrat-800 wordmark — contradicting the code in
  the two preceding commits. Now summarises the minimal footer and points at
  the canonical spec instead of duplicating it.
- Quantify licence note: the holder confirms the licence covers use across
  Erigon properties including vendoring in a public repo, so the comment no
  longer leaves that open.

Verified: tsc + build clean; served CSS carries --footer-fine:#0000008c /
#ffffff8c and --footer-top-edge:#ffffff14 in dark.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Addresses Copilot review on the companion cocoon PR; the same footer ships on
both sites, so both get the fix.

- Hover was implemented with onMouseEnter/onMouseLeave, which only fire for a
  mouse. Keyboard users tabbing through the footer got no accent state and no
  focus indicator at all. Now .footer-brand / .footer-social / .footer-legal
  declare :hover and :focus-visible together, plus an explicit focus outline.
- This also stops mutating inline styles from event handlers, which fought any
  later theming and allocated handler closures per render.
- color-mix() now has a flat rgba fallback declared before it. It is Chrome 111+
  while the default production browserslist can resolve down to Chrome 109, so
  older engines previously lost the hover tint silently; they now keep the flat
  tint. Same colour either way, since --footer-accent is flat across modes here.
- The mobile rule targeted .footer-top-grid > div:last-child, which would break
  if another div were appended. Replaced with a dedicated .footer-socials class.

Verified: tsc + build clean; footers still byte-identical to cocoon's; hover
probed over CDP resolves to rgb(239,119,22) with an empty inline style, i.e.
coming from CSS rather than a mutated attribute.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated no new comments.

Suppressed comments (3)

docs/site/src/css/custom.css:469

  • The footer palette block comment is unusually long and contains commentary about earlier revisions plus detailed contrast math. This kind of forensic detail is difficult to maintain; it should be condensed to a short, durable description of the invariants (theme-aware surface, fixed alpha ramp, 1px top edge, 0.55 fine text for AA).
/* ─── Footer palette ─────────────────────────────────────────────────────── */
/* The footer surface follows the colour mode: white in light, black in dark.
   Text is a fixed alpha ramp rather than Infima's emphasis vars, because those
   invert with the theme and would render dark-on-black (or light-on-white)
   depending on mode. Ramp values come from the

docs/site/src/css/custom.css:16

  • The new font licensing note is very long and includes forensic/historical assertions (e.g., “confirmed by the licence holder”, “no redistribution question to re-litigate”). This is hard to keep accurate over time; consider keeping only the actionable constraint (self-host, don’t switch to a third‑party CDN) and move details to the canonical design spec or PR description.

This issue also appears on line 465 of the same file.

/* Self-hosted fonts — no Google Fonts or CDN. See docusaurus-design-spec.md §7.
   Quantify is a non-free webfont. Erigon Technologies AG holds a commercial
   extended license that covers its use across Erigon properties, including
   vendoring this woff2 in a public repo — confirmed by the licence holder,
   so there is no redistribution question to re-litigate here. Self-hosting is

docs/site/DESIGN-SPEC.md:158

  • The DESIGN-SPEC summary references a specific date (“pre-2026-08”), which is brittle and will go stale. Prefer a timeless description like “previous five-column footer” without embedding dates in the spec.
- Theme-aware surface via `--footer-*` custom properties in `src/css/custom.css`: white in light mode, black in dark. It is **not** always black — that was the pre-2026-08 five-column footer.

Addresses the three suppressed comments on Copilot's review of this PR.

- Footer palette comment rewritten as a short invariants list. It had grown into
  a forensic account of earlier revisions plus contrast arithmetic. The reasons
  are kept where they stay true — why the ramp is fixed rather than Infima vars,
  why both modes need a top edge, why fine print is 0.55 and not 0.35 — and the
  "an earlier version claimed X" commentary is dropped, since that is the part
  that rots.
- Font licence note reduced to the actionable constraint: keep self-hosting, do
  not switch to the CDN copy. Licence scope belongs in the design spec, which
  now carries it, rather than being restated in a CSS comment.
- DESIGN-SPEC.md: "pre-2026-08 five-column footer" → "previous five-column
  footer". Embedded dates go stale.

Same comments ship on cocoon, so both are updated together.

Verified: tsc + build clean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@bloxster

bloxster commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator Author

Copilot's 3 suppressed comments — all addressed in faf2ec46ae

These arrived inside the collapsed Suppressed comments block of the review body rather than as inline threads, so there is nothing to resolve. Tabulating them here instead.

# File Finding Action
1 docs/site/src/css/custom.css:469 Footer palette comment is long and carries commentary about earlier revisions plus contrast arithmetic; condense to durable invariants Fixed. Rewritten as a short invariants list
2 docs/site/src/css/custom.css:16 Font licence note is long and makes forensic assertions ("confirmed by the licence holder", "no redistribution question to re-litigate"); keep only the actionable constraint Fixed. Reduced to: keep self-hosting, do not switch to the CDN copy. Licence scope lives in the design spec
3 docs/site/DESIGN-SPEC.md:158 "pre-2026-08 five-column footer" embeds a date that will go stale Fixed. Now "previous five-column footer"

The distinction I applied on #1 and #2: keep the reasons that stay true — why the ramp is fixed rather than Infima vars, why both colour modes need a top edge, why fine print is 0.55 and not 0.35 — and drop the "an earlier version claimed X" narration, which is the part that actually rots. The invariants a future editor needs are still there; the changelog-in-a-comment is gone.

Same two comments ship on the cocoon footer, so erigontech/cocoon#46 got the identical change (3ab6686) to keep the sites in step.

For context on the earlier red marks on this PR: every one was CANCELLED, not a test failure — a GitHub Actions incident (Failed to resolve action download info: Service Unavailable) plus this workflow's cancel-in-progress on PR pushes. mainnet-rpc-integ-tests passes 6/6 on release/3.5. Separately, qa-rpc-integration-tests.yml has no path filter, so a docs-only diff occupies the self-hosted QA runners; worth a paths-ignore in its own PR rather than here.

🤖 Generated with Claude Code

Regression from moving the footer's interactive states off inline styles into
CSS classes: inline `textDecoration: 'none'` beat Infima's `a:hover`, but a
plain class selector does not, so hovering the brand lockup or a legal link
underlined it.

Cleared text-decoration on :hover and :focus-visible for .footer-brand and
.footer-legal.

Verified empirically rather than by inspection: stripping the declaration at
runtime and re-hovering brings the underline back on all three docs sites, so
this was not site-specific despite only being spotted on zilkworm.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@AskAlexSharov
AskAlexSharov enabled auto-merge August 7, 2026 01:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants