footer: restore the single-row terminal footer - #22
Merged
Conversation
Reverts #18 (5090b0a), which had replaced the footer Somnath introduced in #12 with the five-column shared corporate footer. This puts his design back exactly as he authored it — src/theme/Footer/index.tsx is byte-identical to his 06f3677 — as a reference point for comparison. His design, restored verbatim: - Single horizontal row: brand lockup, tagline, social icons pushed right. - Monospace throughout (--ifm-font-family-monospace), Quantify wordmark. - Terminal motif on the copyright line: a green "$" prompt and a "▊" block cursor bracketing the text. - Square 38x38 social buttons, borderRadius 0, accent-tinted on hover. - 2px Zilkworm Green top rule. - Zilkworm Green accent throughout, via --brand-accent. The custom.css hunk is the other half of the same revert: .footer-social-btn hover goes back to green #1F9D3E. Note that rule is dead code against this footer — it styles inline and never sets that class — so it has no visual effect either way; it is included only to make the revert complete. Authorship note: the footer content here is Somnath Banerjee's work from 06f3677; this commit only restores it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Two additions on top of the restored footer, plus one cleanup. - Link the brand lockup (logo + erigon.tech wordmark) to erigon.tech. One anchor wraps both 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 corporate orange via a new footer-scoped --footer-accent; --brand-accent (the site-wide Zilkworm Green, which also drives the sidebar, TOC and menu) is deliberately not touched. Without this var the hover would resolve to nothing and silently do nothing. - Remove .footer-social-btn and its :hover rule from custom.css. They are dead against this footer, which styles its social buttons inline and never sets that class; grep finds no remaining references. This also removes the malformed rgba(31, 157, 62,0.15) that lived inside the dead block. Typography stays monospace throughout, as in the original design. An automated reviewer flagged that as contradicting the brand font roles in docusaurus-design-spec.md section 7; keeping it is a product decision, not an oversight. Verified: tsc clean, and the lockup hover probed over CDP in both colour modes at rgb(239, 119, 22), with --brand-accent still green (#1F9D3E light, #29AE4A dark). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
bloxster
changed the title
…ment Both reviewers flagged this: .footer-top-grid is a flex container, but the mobile rule set grid-template-columns, which is a no-op there. The footer therefore never stacked at <=768px — it kept the desktop row plus a stale 2.5rem gap and old padding, and the socials stayed pushed right by margin-left:auto with no reset. The rule is a leftover from the five-column footer this design replaced. Now flex-direction: column with the margin reset, matching what docs.erigon.tech and cocoon.erigon.tech do. Also corrected the CSS header comment, which still claimed "the corporate footer stays Erigon Orange #EF7716". Not true of this footer: green drives the social and legal hovers, and only the brand lockup hovers orange via the footer-scoped --footer-accent. Verified: tsc clean. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Refactors the site footer to a single-row “terminal motif” layout with updated theming variables and responsive behavior.
Changes:
- Replaces the previous multi-column grid footer with a flex-based top row (brand lockup, blurb, social icons) and a tighter bottom bar.
- Introduces footer-specific CSS variable
--footer-accentand updates mobile responsive rules for the new flex layout. - Updates hover interactions and visual styling to align with the site’s green accent while keeping the brand lockup orange hover.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/theme/Footer/index.tsx | Rebuilds footer markup/styling into a flex-based terminal-style row with icon-only socials and updated bottom links. |
| src/css/custom.css | Adds footer accent CSS variable and fixes mobile rules for the new flex footer layout. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
… About URL Addresses all four Copilot review comments on this PR. - **Keyboard accessibility.** The brand lockup and the social buttons styled hover with onMouseEnter/onMouseLeave, which only fire for a mouse — tabbing through the footer produced no accent state and no focus indicator. Moved to .footer-brand / .footer-social / .footer-legal with :hover and :focus-visible declared together, plus an explicit focus outline. Colours are unchanged: socials and legal links hover Zilkworm Green, only the lockup hovers orange. - **--footer-accent is now genuinely scoped.** It was declared on :root while the comment claimed it was footer-scoped — true in intent (kept separate from --brand-accent) but not in CSS. Now declared on `footer`, so the name matches the behaviour. - **color-mix() fallback.** A flat rgba green is declared before the color-mix line; color-mix is Chrome 111+, so older engines keep the tint instead of losing it silently. - **About Us URL** gains its trailing slash, matching the other legal links and avoiding a redirect. Also replaced the mobile `.footer-top-grid > div:last-child` selector with the dedicated .footer-socials class, and dropped a constant left unused once the lockup hover moved to CSS. Verified: tsc + build clean. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…ver underline - **Surface now matches docs.erigon.tech and cocoon.erigon.tech**: white in light mode, black in dark, via --footer-bg / --footer-fg declared on `footer`. It was --ifm-background-surface-color, which is the Infima grey #141414 in dark rather than black. This removes one of the divergences listed in design spec §6.2. - **Fine print raised from --ifm-color-emphasis-600 to -700.** Measured on the light surface, -600 is 3.06:1 — below WCAG AA's 4.5:1 for 0.8rem text, and it covers the copyright line and all three legal links. -700 measures 5.72:1 light / 15.41:1 dark. Pre-existing, surfaced while verifying the new surface. - **Hover underline removed.** Infima's `a:hover` sets text-decoration: underline and outranks a plain class selector, so the base `text-decoration: none` did not survive the hover state. Cleared on :hover and :focus-visible. The underline was a regression from moving the footer's interactive states off inline styles into CSS: inline styles beat Infima's a:hover, stylesheet classes do not. Verified by stripping the declaration at runtime and re-hovering — the underline returns without it, on all three docs sites. Verified: tsc + build clean; footer probed over CDP in both colour modes — bg #FFFFFF light / #000000 dark, contrast 5.72:1 / 15.41:1, hover text-decoration-line: none. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Restores the single-row terminal footer originally introduced by @somnathb1 in #12, and adds a clickable brand lockup on top of it.
Reverts #18, which had replaced that footer with the five-column shared corporate footer.
Commits
c2295besrc/theme/Footer/index.tsxis byte-identical to @somnathb1's06f3677a679b4d.footer-social-btnCSSSplitting it this way keeps the revert verifiable on its own: the first commit is provably his design with nothing of mine in it, and everything added sits in the second.
The restored design
$prompt and a▊block cursorborderRadius: 0, accent-tinted on hover--brand-accentAdded on top
erigon.techwordmark, so it's one hit target rather than two adjacent links to the same URL, with anaria-labelsince the visible content is a wordmark plus an image. Hover tints it corporate orange.--footer-accent: #EF7716. Deliberately separate from--brand-accent, which is the site-wide Zilkworm Green and also drives the sidebar, TOC and menu — retinting that would have repainted the whole UI. Without this var the hover would have resolved to nothing and silently done nothing..footer-social-btnand its:hoverrule. Dead against this footer, which styles its social buttons inline and never sets that class (grepfinds no remaining references). This also removed a malformedrgba(31, 157, 62,0.15)that lived inside the dead block.Reviewer notes — known divergences from the design spec
These are deliberate, not oversights:
docusaurus-design-spec.md§7 font roles, which specify Montserrat / Nunito Sans. An automated reviewer flagged this; keeping the monospace is a product decision.hello@erigon.tech. Restoring the terminal footer necessarily drops them again, since that was exactly what fix(footer): restore the shared Erigon footer #18 was opened to add. §6 states the footer should be identical across docs.erigon.tech, cocoon.erigon.tech and zilkworm.erigon.tech, so merging this makes zilkworm the odd one out until the spec is amended.Verification
tsc --noEmitcleanrgb(239, 119, 22), with--brand-accentstill green (#1F9D3Elight /#29AE4Adark), confirming the site-wide accent is untouched🤖 Generated with Claude Code