Update the site's design - #2
Merged
Merged
Conversation
…er to work with this setup
Blank slate CSS and compilation changes
* Update the stylelint to more closely align with our best practices * Run lint fix on files
* Simplify nav html and adjust location in html * Add logo * set open and close state for nav * use data attrs instead of classes * responsive header * uncomment footer
* type setup * border radius * more semantic naming for font sizing and clamping * button styling * link styling * color logo
* style base top nav items * add aria current to links
* Basic footer styling * Add gridding and design out footer more * Add newsletter back in with styling * lint
* Build HTML for new homepage content * Remove generated labels and tool versions file * rebase and reconcile comments --------- Co-authored-by: Elaina Natario <elaina.natario@gmail.com>
* CTA component wiring up * Create CTA component * add cta component to every page
* Basic outline for hero component * color themed backgrounds * basic typography for hero * Style basic link list * cta buttons and fancy link styling * add container across the board for max width on content * lint * Add image component
* Basics for info block design * section component build * test with custom programs * typographic styling * add gridding to sections * add images to text and image blocks * layout bug fixes * lint
* fix some duplicate ids * layout adjustments * lint * adjust photos
* Add partial for a headshot * style images * Add to about page * adjust grid breakpoint
* Add search to nav * collapse navigation to just header nav
* Use brand typefaces * gentler type scale * simplify font family custom property * quick fixes * lint * image updates to bw and uniform corners * special corner for hero image * Update logo to primary one
* adjust hero header to include marquee and remove image * add in gallery photos on homepage * crossfade images * fade in on collage * integrate yellow * MORE YELLOW * rearranging of items in hero * overhaul link list section * info block on home * grid fix * info block and section grid update * adjust hero typography * create feature info block
* logo sponsors component * adjust ruby alliance area * adjust section content
* news feed basic wip * design out post article * update toc style and architecture * featured news * pagination styling * more featured items * tagging * lint * typography update * finesse tag logic
* relinking a bunch of things to real links * link adjustment on programs
This reverts commit 1433fb3.
Horizontally scrollable timeline track with year markers and short labels pulled from Ghost CMS. Clicking a year swaps a detail panel below with the page's full body content. Defaults to the most recent entry on load. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add timeline to about page
mghaught
approved these changes
Jul 9, 2026
There was a problem hiding this comment.
Pull request overview
This PR overhauls the Ruby Central Ghost theme to match thoughtbot’s new site design, introducing a new component-based template structure, a layered CSS architecture, and updated JS behaviors for navigation and interactive sections.
Changes:
- Replaces legacy page-/layout-scoped CSS with layered, token-driven base/components/utilities CSS and new UI components (hero, global nav/footer, news listing, timeline, etc.).
- Refactors templates/partials to a new component library and updates key pages (home, news index, about, post, plus new custom templates).
- Updates the frontend build/dev workflow (separate CSS build/watch via Lightning CSS; improved LiveReload watching including
.hbs).
Reviewed changes
Copilot reviewed 105 out of 117 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| utils/reload.js | Expands LiveReload to watch the theme root and additional extensions. |
| src/js/post/index.js | Replaces tocbot usage with custom post TOC generation/highlighting. |
| src/js/app/timeline.js | Adds timeline interaction (select year, show matching detail, scroll behavior). |
| src/js/app/navigation-top.js | Removes legacy top navigation JS. |
| src/js/app/index.js | Switches app entry to new modules and adds tag-nav “active link” logic. |
| src/js/app/home-involvement.js | Adds hover-driven home involvement image swapping. |
| src/js/app/global-nav.js | Adds mobile/global nav toggle behavior for the new header. |
| src/css/utilities/_hide-visually.css | Introduces a visually-hidden utility for accessibility patterns. |
| src/css/utilities/_grid.css | Introduces reusable grid utilities for the new layouts. |
| src/css/utilities/_container.css | Introduces a reusable container utility for consistent page widths. |
| src/css/resets/_normalize.css | Adds normalize.css as the reset layer. |
| src/css/pages/post.css | Removes legacy post page styles. |
| src/css/pages/open-source.css | Removes legacy open-source page styles. |
| src/css/pages/home.css | Removes legacy home page styles. |
| src/css/pages/conferences.css | Removes legacy conferences page styles. |
| src/css/pages/about.css | Removes legacy about page styles. |
| src/css/modern.css | Removes legacy “modern” styling block. |
| src/css/layout/reset.css | Removes legacy layout reset. |
| src/css/layout/navigation-top.css | Removes legacy navigation-top layout styles. |
| src/css/layout/footer.css | Removes legacy footer layout styles. |
| src/css/layout/dropdown.css | Removes legacy dropdown styling. |
| src/css/layout/container.css | Removes legacy container styles (replaced by utilities). |
| src/css/components/static-content.css | Removes legacy static content component styling. |
| src/css/components/sponsors.css | Removes legacy sponsors component styling. |
| src/css/components/profile-image.css | Removes legacy profile image styling. |
| src/css/components/get-involved.css | Removes legacy “get involved” component styling. |
| src/css/components/divider.css | Removes legacy divider styling. |
| src/css/components/code.css | Removes legacy code styling (replaced by new system). |
| src/css/components/button.css | Removes legacy button component styling. |
| src/css/components/back.css | Removes legacy “back” link styling. |
| src/css/components/.gitkeep | Keeps components directory tracked. |
| src/css/components/_video-tease.css | Adds new video tease component styling. |
| src/css/components/_timeline.css | Adds timeline component styling. |
| src/css/components/_team-member.css | Adds team member component styling. |
| src/css/components/_sponsor-logo.css | Adds sponsor logo component styling. |
| src/css/components/_sponsor-group.css | Adds sponsor group component styling. |
| src/css/components/_section.css | Adds reusable section layout component styling. |
| src/css/components/_post.css | Adds new post header/TOC styling. |
| src/css/components/_pagination.css | Adds pagination styling aligned with the new design. |
| src/css/components/_news.css | Adds new news listing, featured news, and tag-nav styling. |
| src/css/components/_link-list.css | Adds link-list component styling for featured lists/navigation blocks. |
| src/css/components/_info-block.css | Adds info-block component styling (incl. container query layout). |
| src/css/components/_info-block-feature.css | Adds featured info-block variant styling. |
| src/css/components/_image.css | Adds a shared responsive image wrapper style. |
| src/css/components/_home-stats.css | Adds marquee-style home stats component styling. |
| src/css/components/_home-involvement.css | Adds home involvement section styling. |
| src/css/components/_hero.css | Adds new hero component styling. |
| src/css/components/_global-nav.css | Adds new global navigation styling + container query behavior. |
| src/css/components/_global-footer.css | Adds new global footer styling + container query behavior. |
| src/css/components/_cta.css | Adds CTA callout component styling. |
| src/css/components/_cta-buttons.css | Adds CTA button-group layout styling. |
| src/css/base/variables.css | Removes legacy CSS variable set (replaced by new tokens). |
| src/css/base/typography.css | Removes legacy typography base (replaced by new base type system). |
| src/css/base/_variables.css | Introduces new design tokens (colors, typography, spacing, borders, etc.). |
| src/css/base/_typography.css | Introduces new base typography rules and heading utility classes. |
| src/css/base/_tables.css | Adds base table styling and wrappers. |
| src/css/base/_modal.css | Adds base dialog/modal styling with motion-aware transitions. |
| src/css/base/_media.css | Adds base media element normalization and SVG fill defaults. |
| src/css/base/_lists.css | Adds base list and definition list styling. |
| src/css/base/_layout.css | Adds base layout and theme background switching by page class. |
| src/css/base/_forms.css | Adds comprehensive base form controls styling (incl. data-URI icons). |
| src/css/base/_fonts.css | Switches from Google Fonts imports to self-hosted variable fonts. |
| src/css/base/_disclosures.css | Adds base details/summary disclosure styling. |
| src/css/base/_buttons.css | Adds new button system and variants. |
| src/css/base/_animation.css | Adds reduced-motion-aware smooth scrolling. |
| src/css/app.css | Rebuilds the CSS entrypoint using @layer + new import structure. |
| rollup.config.js | Removes PostCSS pipeline from Rollup (CSS now built separately). |
| post.hbs | Rebuilds post layout (grid + TOC + redesigned header). |
| partials/person.hbs | Removes legacy person partial. |
| partials/pagination.hbs | Updates pagination markup and accessibility labeling. |
| partials/navigation.hbs | Replaces navigation markup with the new global header/nav structure. |
| partials/navigation-top.hbs | Removes legacy navigation-top partial. |
| partials/icons/menu.hbs | Adds new menu icon SVG partial. |
| partials/icons/logo.hbs | Adds new logo SVG partial. |
| partials/icons/gem-badge.hbs | Adds gem badge SVG partial. |
| partials/icons/arrow.hbs | Adds arrow icon SVG partial. |
| partials/get-involved.hbs | Removes legacy get-involved partial. |
| partials/footer.hbs | Replaces footer with new global footer layout and newsletter form. |
| partials/components/video-tease.hbs | Adds video tease component partial. |
| partials/components/timeline.hbs | Adds timeline component partial powered by tagged pages. |
| partials/components/team-member.hbs | Adds team-member component partial. |
| partials/components/sponsor-logo.hbs | Adds sponsor-logo component partial. |
| partials/components/sponsor-group.hbs | Adds sponsor-group component partial. |
| partials/components/section.hbs | Adds generic “section” wrapper partial with grid options. |
| partials/components/news-tease.hbs | Adds a news teaser list item component. |
| partials/components/news-tag-nav.hbs | Adds a news topic/tag filter nav component. |
| partials/components/news-featured.hbs | Adds a featured news component. |
| partials/components/link-list.hbs | Adds link list component (optionally featured) for navigation blocks. |
| partials/components/info-block.hbs | Adds info-block component partial. |
| partials/components/info-block-feature.hbs | Adds featured info-block partial. |
| partials/components/image.hbs | Adds responsive image component using img_url srcset variants. |
| partials/components/hero.hbs | Adds generic hero component partial. |
| partials/components/hero-home.hbs | Adds home hero component partial (currently includes placeholder images). |
| partials/components/cta.hbs | Adds CTA component partial wrapper. |
| partials/components/cta-buttons.hbs | Adds CTA button(s) partial to render primary/secondary CTAs. |
| package.json | Bumps theme version + adds Lightning CSS build/watch scripts and deps. |
| index.hbs | Replaces simple post list with redesigned news index layout + featured slot + tag nav. |
| home.hbs | Replaces home layout with new components and section composition. |
| default.hbs | Updates favicon/link tags and swaps nav render to {{navigation}}. |
| custom-sponsors.hbs | Adds new sponsors custom template using new components. |
| custom-programs.hbs | Adds new programs custom template using new components. |
| custom-events.hbs | Adds new events custom template using new components. |
| custom-community.hbs | Adds new community custom template using new components. |
| assets/images/favicon.svg | Adds new SVG favicon asset. |
| about.hbs | Replaces about page layout with new hero/timeline/team/governance sections. |
| .stylelintrc.json | Updates stylelint ordering/quoting rules. |
| .stylelintignore | Adds ignore rules for normalize and vendor CSS. |
| .gitignore | Ignores local Netlify folder. |
Comments suppressed due to low confidence (1)
package.json:80
tocbotremains indevDependencies, but all runtime usage has been removed (src/js/post/index.jsno longer imports/initializes it and the CSS import was removed fromsrc/css/app.css). Keeping it adds unnecessary install size and potential supply-chain surface.
"rollup-plugin-terser": "7.0.2",
"stylelint": "14.9.1",
"stylelint-order": "5.0.0",
"tocbot": "^4.25.0"
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.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.
Integrate thoughtbot's new design for the entire rubycentral.org website.