Skip to content

Align site with the EthCoordinate design system - #184

Draft
Buttaa wants to merge 1 commit into
mainfrom
ethcoordinate-theme
Draft

Align site with the EthCoordinate design system#184
Buttaa wants to merge 1 commit into
mainfrom
ethcoordinate-theme

Conversation

@Buttaa

@Buttaa Buttaa commented Aug 22, 2026

Copy link
Copy Markdown
Contributor

What

Theme layer that restyles ethstaker.org to the EthCoordinate design system and presents the site as an EthCoordinate initiative. Jekyll, Bootstrap and the page content stay as they are; the look comes from remapped Bootstrap CSS variables plus a rebuilt nav, hero, footer and page header.

  • Tokens & type — JetBrains Mono, cyan/purple accents on near-black, matching light palette. Cards, buttons, forms, tables, dropdowns, callouts and toasts are restyled through Bootstrap's own variables, so existing partials and utility classes keep working.
  • Dark by default — pre-paint theme script; the OS light preference and the saved toggle (localStorage.darkModeEnabled) still win.
  • Nav — fixed bar with the EthStaker · An EthCoordinate initiative lockup, hover dropdowns, "Start staking" CTA, mobile panel.
  • Home — hero (eyebrow, "EthStaker", lead, status terminal), section eyebrows/titles, gradient dividers, fixed-width word slot in the staking section so nothing reflows.
  • Footer — brand + "An initiative of EthCoordinate ↗", five link groups, disclaimer, © line with text social links.
  • Markdown pages — eyebrow / title / divider header and long-form typography.

Where

assets/css/main.css (rewritten: tokens, remaps, components), assets/css/markdown.css, _layouts/default.html, _layouts/markdown.html, _includes/partials/components/{head,nav,footer,dark-mode-toggle,divider-icons-template,notification,contribute,toast}.html, _includes/partials/content/index/*.html, _includes/js/aos.js, README.md (new Theme section), _config_dev.yml (dev notification off).

Notes

  • The notification bar renders in-flow under the fixed nav; the current production notice has expired, and it is switched off in _config_dev.yml for local previews.
  • Checked 106 page loads at desktop/mobile in dark and light. Pre-existing and untouched: /mev-relay-list and /smoothing-pools inline-script errors, AOS pre-animation offsets.

Screenshots

🤖 Generated with Claude Code

@netlify

netlify Bot commented Aug 22, 2026

Copy link
Copy Markdown

Deploy Preview for ethstaker ready!

Name Link
🔨 Latest commit e57a68a
🔍 Latest deploy log https://app.netlify.com/projects/ethstaker/deploys/6a8c83fbfb2ec40008f104ea
😎 Deploy Preview https://deploy-preview-184--ethstaker.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Restyle the Jekyll site to match ethcoordinate.org: JetBrains Mono,
cyan/purple tokens on near-black with a matching light palette, dark by
default (the OS preference and the saved toggle still win), a fixed nav
with an "An EthCoordinate initiative" lockup, a terminal-style hero,
eyebrow section headings, retokened Bootstrap components (cards,
buttons, forms, tables, dropdowns, callouts, toasts), and an expanded
footer that links back to EthCoordinate.

Bootstrap and all page content markup stay in place; the theme lives in
assets/css/main.css and assets/css/markdown.css by remapping Bootstrap's
CSS variables onto the shared tokens, so every existing partial picks up
the new look without rewrites.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@Buttaa
Buttaa force-pushed the ethcoordinate-theme branch from 04a3d4e to e57a68a Compare August 24, 2026 17:48
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