Redesign and modernise quantecon.org

[mmcky]

Summary

Refresh the site visual design and content, based on John's feedback about re-optimising the website for accessibility and modern design. Reference sites: Kaggle, HuggingFace, DrivenData.

Visual & Layout

• Full-screen hero (100vh) with updated tagline and 3 CTAs (Lectures, Workshops, Books)
• Always-visible navbar logo with reordered navigation: Lectures | Workshops | Books | Projects ▼ | About ▼ | News
• New card-based component system (.qe-card, .qe-badge, .qe-btn, .qe-section)
• Metrics bar on homepage (8 Lecture Series, 5+ Books, 30+ Workshops, 2 Code Libraries)
• Redesigned 4-column footer (Branding, Resources, Organization, Connect)
• Consolidated from 3 icon libraries down to Bootstrap Icons only
• CSS custom properties for brand colours
• Scroll-down chevron indicator on hero

Pages Updated

• Homepage: dynamic lecture grid, featured books with NEW badges, workshops section, open source projects, latest news cards
• News: card-based layout with inline expand/collapse (no page navigation), coloured tag pills (news/lectures/workshop/books/tools/announcement), year-grouped archive accordion for older posts
• Post: clean article layout with metadata header, max-width for readability, share on X button
• Books: wider card layout with cover images, author info, NEW badges
• Workshops: recent workshops with descriptions, older grouped by year in accordions
• About: expanded with sections for mission, history, affiliations, get involved
• Infrastructure: rewritten with simplified timeline component
• Team: removed Swiper testimonials, added open positions CTA

Technical

• Removed 11 unused CDN libraries (AOS, Swiper, Boxicons, Remix Icons, GLightbox, etc.)
• Fixed Bootstrap JS SRI hash for 5.2.0
• Migrated Sass @import → @use
• Simplified main.js from 202 to 87 lines
• Updated Twitter → X branding throughout
• Updated README.md with tag colour reference and brand colour palette

Tag Colour Reference

Tag	Colour	Hex
news	Blue	#0072bc
lectures	Dark blue	#306998
workshop	Green	#6EAC5B
books	Red	#D25663
tools	Yellow	#FCC837
announcement	Dark grey	#283039

Test plan

• Review Netlify deploy preview across all pages
• Verify hero section renders full-screen with scroll indicator
• Verify navbar logo is visible and nav order is correct
• Test news page expand/collapse on desktop and mobile
• Check coloured tag pills render correctly on news cards
• Verify books page card layout with cover images
• Test workshop accordion expand/collapse for archived years
• Confirm no console errors from missing CDN resources
• Check mobile responsive behaviour across all layouts

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for grand-swan-ca5201 ready!

Name	Link
🔨 Latest commit	5a99525
🔍 Latest deploy log	https://app.netlify.com/projects/grand-swan-ca5201/deploys/69cda9bea1acc900081593a7
😎 Deploy Preview	https://deploy-preview-194--grand-swan-ca5201.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Copilot]

Pull request overview

Modernizes the QuantEcon Jekyll site theme by introducing a new component-based design system, redesigned homepage/news UX, and updated content across key pages to align with accessibility and contemporary layout patterns.

Changes:

• Reworked layouts for Home, News (inline expand/collapse + archive accordion), Posts, Books, Lectures, Code, Team, and Footer using new .qe-* components.
• Simplified frontend JS/CSS and removed multiple third-party CDN dependencies; updated MathJax integration and site metadata.
• Refreshed content on About / Infrastructure / Workshops and updated social links to X.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
pages/workshops.md	Adds intro + reorganizes workshops into “Recent” and accordion-based “Past” sections.
pages/infrastructure.html	Redesigns infrastructure page into cards + simplified timeline.
pages/available-positions.md	Updates social link to X domain.
pages/about.md	Expands About page structure and content.
assets/sass/_timeline.scss	Replaces legacy timeline styling with new simplified timeline styles (+ legacy support).
assets/main.scss	Migrates to Sass @use, adds component system styles, and updates global layout/theme styling.
assets/js/main.js	Simplifies JS (header scroll, back-to-top, mobile nav, smooth scrolling).
_layouts/team.html	Removes testimonials carousel and adds positions CTA button.
_layouts/post.html	Redesigns post layout with metadata header, tags, and “Share on X”.
_layouts/news.html	Implements card-based news with collapsible bodies and year-grouped archive accordion.
_layouts/lectures.html	Converts lecture listing to card grid.
_layouts/home.html	Major homepage redesign with hero + CTAs, metrics bar, cards, and latest news.
_layouts/default.html	Updates navbar/footer structure, removes unused CDNs, upgrades MathJax, updates icons.
_layouts/code.html	Converts code listing to card grid.
_layouts/books.html	Converts books listing to card layout with cover images and “NEW” badge.
_config.yml	Updates site description.
README.md	Adds development notes, tag palette reference, and brand colour table.
Gemfile	Bumps Jekyll requirement and removes minima dependency.

[mmcky]

Comments from @jstac email

• Is there a way to 'fade' the background image so that the text / buttons / etc stand out more?
• Maybe drop the words 'Browse' and 'Explore' on the buttons?
• Maybe add a button called 'Code'

[mmcky]

All three items addressed:

1. Fade the background image — Added a dark overlay (rgba 0,0,0,0.45) on the hero so text and buttons stand out more clearly.
2. Drop "Browse" and "Explore" — Hero buttons now just say "Lectures", "Workshops", "Books".
3. Add a Code button — Added a fourth CTA button linking to /code/.

[mmcky]

Feedback from @HumphreyYang

---

I just tried to see what it would look like on a phone, and I spotted that the past workshop section seems to not be responding to the layout change with text overflow:

https://deploy-preview-194--grand-swan-ca5201.netlify.app/workshops/

It might be a minor issue with the .workshop container div or accordion structure?

[mmcky]

Comments from @DrDrij

---

1. Set badges to start on a new line for consistency, depending on your browser width the badges can appear in different places (see attached)
   Add the following to .qe-badge
   display: block;
   width: fit-content;
   margin: 0.5rem 0;
2. Add some simple small icons to the “Open Source Projects” panel (similar layout to “Books & Textbooks)
3. I LOVE the stats panel just below the hero image, can there be a big number too? eg. 360K yearly readers, 0.6 million downloads
4. Add target=“_blank” to the link on the Paula and Gregory logo (external sites to open in a new window)
5. Add a link to home in the mobile hamburger navigation
6. Make the close and hamburger icons ‘on top’ of each other so the touch target to open/close is in the same spot
7. Center the hero buttons on mobile, add justify-content: center; to the buttons container
   so they spacing displays evenly
8. Mobile menu - it looks like the sections with children have their title hidden, suggest removing the lines commented out below (See screenshot)
   .navbar .dropdown .dropdown-toggle {
   display: flex;
   align-items: center;
   /* justify-content: space-between; /
   / padding: 0 3px; /
   font-family: "Roboto", sans-serif;
   / font-size: 15px; /
   font-weight: 600;
   / color: hsla(0, 0%, 100%, .7); /
   / white-space: nowrap; */
   transition: .3s;
   position: relative;
   background: none;
   border: none;
   cursor: pointer;
   }

[mmcky]

Feedback addressed in commits 038cc17 and fc3eb7e

@HumphreyYang

• Workshop text overflow on mobile — Fixed by removing min-width: 400px from .workshop-details ul, so the list reflows naturally on narrow screens.

@DrDrij

1. Badges on new line — Changed .qe-badge to display: block; width: fit-content; margin: 0.5rem 0 for consistent placement regardless of viewport width.
2. Icons on Open Source Projects panel — Tracked in Add icons to Open Source Projects section on homepage #195. Current language-based icons are fine for now.
3. Big numbers on metrics bar — Tracked in Add prominent usage metrics to homepage metrics bar #196. Need to confirm accurate figures before adding.
4. target="_blank" on Chow sponsor logo — Added target="_blank" rel="noopener noreferrer" to the homepage sponsor link.
5. Home link in mobile nav — Added as first nav item with d-lg-none (hidden on desktop, visible in mobile menu).
6. Hamburger/close icon same position — Changed .navbar-mobile .mobile-nav-toggle to position: fixed with consistent top/right so the touch target stays put.
7. Center hero buttons on mobile — Added justify-content: center on the button container below 575px.
8. Mobile dropdown toggle styles — Restored full visible styles (display: flex, font-family, font-weight, etc.) so "Projects" and "About" titles show properly in the mobile menu.

[mmcky]

Addressing @jstac's feedback

Changes in commit 5a99525:

1. Hero headline prominence

"the text 'Open Source Tools..' doesn't jump out at the reader as much as it might"

• Darkened background overlay from 45% to 55% opacity to push the mountain image further back
• Increased headline size from 2.5rem to 3rem
• Changed font weight from 200 (ultra-light) to 400 (regular) -- this was the main issue
• Added text-shadow for extra legibility

2. Hero button symmetry

"The 'Lectures' button is blue and the rest are white. I think I prefer symmetry."

• Changed Lectures button from solid blue to white outline -- all four buttons now match

3. Lecture links no longer open new tabs

"clicking on a lecture series opens a new tab. Now I've lived with that for a while I find it intrusive."

• Removed target="_blank" from lecture card links on both the homepage and /lectures/ page

4. New workshops added

"Bank of Portugal and Hitotsubashi could be added to /workshops/"

• February 2026, International University of Japan -- Computational Methods for Simulation
• October 2025, Bank of Portugal -- Computational Methods for Macroeconomic Modeling
• September 2025, Hitotsubashi University -- Hitotsubashi Computational Economics Workshop
• Added to both the full workshops page and the homepage "Recent Workshops" sidebar
• Updated intro paragraph on both pages to mention Bank of Portugal and Hitotsubashi University

Additional improvements

• Tag badges now appear on homepage Latest News cards (matching the news page)
• copilot-instructions.md updated with note about workshops requiring dual updates
• Opened Convert homepage workshops section to use a Jekyll collection #197 to track converting workshops to a Jekyll collection for automatic updates