Update the site's design

[enatario]

Integrate thoughtbot's new design for the entire rubycentral.org website.

[Copilot]

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

• tocbot remains in devDependencies, but all runtime usage has been removed (src/js/post/index.js no longer imports/initializes it and the CSS import was removed from src/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.