Visual redesign: new hero/nav/footer, PicoCSS styling, refreshed copy - #63

Summary

This is a proposal to refresh the look of jruby.org, prototyped first at johngallagher/diamond and ported here. Per the README's note to consult before large changes, I'd like this to be a starting point for discussion rather than something to merge as-is. I'm happy to iterate or narrow the scope based on feedback.

The site deploys from master through GitHub Pages, so merging this puts it live straight away.

View the before-and-after comparison: 27 pages side by side, at desktop and mobile widths.

What changed

• Design: every page now uses a new layout, nav, and footer, built on a locally vendored PicoCSS (classless) and a new stylesheets/style.css. The old main.css, carousel.css, ie7-hacks.css, and Typekit font loader are no longer referenced, but are still on disk.
• Home page: a new hero with the JRuby logo, an enterprise support banner, feature cards, the five latest news items, and Quick Links.
• Nav: Download, Get Started, Documentation, Chat, Community, Security, News, and Blog, with a hamburger menu at 960px and narrower. The nav also uses the logo.
• Download page: release tables driven by a new releases list in _config.yml.
• Content: refreshed copy on getting-started, documentation, community, contribute, security, blogs, chat, and news. nightly gets a new warning box and a reporting section, and keeps its existing links.
• Link previews: a share image, Open Graph and Twitter card tags, canonical URLs, and page descriptions.
• Accessibility: a keyboard-operable mobile menu, a skip link, visible focus styles, one h1 per page with no skipped heading levels, and labelled landmarks. Wide code blocks and tables scroll within the page on phones.
• SEO: a new sitemap.xml, better titles for the home page and old download pages, structured data on the home page and release posts, and internal links that match the canonical URLs.
• robots.txt: allows all crawlers, including AI search and training, and points to the sitemap.

Removed: please check these

These match the prototype, but you may want to keep some of them:

• Home page: the Mastodon timeline, the Engine Yard hosting credit, and the version number in the hero. The InfoWorld Bossie award is now a short note in Quick Links.
• Download page: MD5 and SHA1 links, the jruby-jars gem link, and the Windows checksum links. The x64 .exe.sha256 links I tested return 404, and I didn't test the non-x64 ones.
• Nav: Home. Blog and Chat are still there.
• Community page: the Twitter card, so /twitter is no longer linked from there.
• Chat page: the link to the Matrix logs.
• Code blocks: coloured syntax highlighting, because syntax.css is no longer loaded.
• 404 page: the old image. The page now has a short message linking to this repo's issue tracker.

Things to review

• Release automation: change_versions_in still rewrites versions in _config.yml and download.html. download.html no longer contains version strings, because it builds from releases, and it looks up each release's date and notes link from its post. The file sizes in releases are approximate and won't update automatically. I simulated the version replacement but haven't run a real release.
• Release posts: I kept this repo's posts rather than the prototype's placeholder content. Three posts had heading levels changed (10.1.0.0 and two from 2012), with no wording changes. The post layout also promotes headings in posts that skip a level.
• Old download pages: most of this PR's file count is here. All 171 got one-line link changes, and five also had a Layout key fixed to layout.
• Analytics: the existing Google Analytics snippet is unchanged. It uses ga.js and a UA- ID, which Google stopped processing in 2023, so you may want to replace it separately.

Unchanged

• Favicons and PWA: site.webmanifest, browserconfig.xml, and the existing favicon and touch icon images.
• Other files: Rakefile, cookbooks/, conf/, config.ru, patches/, templates/, apidocs/, CNAME, .htaccess, atom.xml, and Gemfile.
• Old assets: old stylesheets/, javascripts/, and images/ stay on disk even where unreferenced, because a few old posts embed images directly and there may be external hotlinks. I'm happy to clean these up in a follow-up if you prefer.

One thing to flag explicitly

The footer now includes a "Professional Support" link to Headius Enterprises, and the home page has an enterprise support banner linking to Headius. The footer link was coordinated directly with the Headius team beforehand. I'm flagging both so they're not a surprise in review.

Test plan

• bundle exec jekyll build succeeds. The Layout 'nil' requested in atom.xml warning and the server_port deprecation notice come from existing config, not this PR.
• axe-core reports no violations on all 356 HTML pages (excluding the apidocs redirects) at 1280px and 390px.
• No page scrolls sideways at 390px.
• All download links on download.html returned 200 when I last checked them.
• Keyboard test: Tab reaches the skip link and the mobile menu, Space opens the menu, and the skip link moves focus to the main content.
• Screenshots of a 27-page sample reviewed at desktop and mobile widths, from thumbnails showing the top of each page.
• Not tested with a real screen reader.
• Link previews and sitemap can only be fully checked once live on www.jruby.org, for example with Facebook's Sharing Debugger and Google Search Console.
• Would appreciate a maintainer checking the release flow on a real release.

🤖 Generated with Claude Code