[bendichter]

Summary

Redesigns https://nwb.org/tools/core/ so it leads with what most visitors need instead of presenting 15 equal cards. Page height drops from about 4,480px to 2,680px on desktop (1440px wide) and from about 9,450px to 5,770px on a phone (390px wide).

The Netlify deploy preview shows the result at /tools/core/.

Changes

Structure and content

• A "Start here" tier with the six tools most users need (PyNWB, MatNWB, AqNWB, NeuroConv, NWB GUIDE, NWB Inspector), each labelled with its task (Read & write / Convert / Validate).
• A second tier, "For extension authors and developers", with three compact columns: Extending NWB, Schemas & specification, Core development.
• "Extending NWB" is split: HDMF Specification Language, NWB Schema and HDMF Common Schema move to a new schema category.
• Rewritten intro. It no longer refers to "the main NWB website" (this is that website), and the ecosystem link is now relative.
• New optional front matter on tool pages: task, tech (language/type tag) and install (one-liner). install is set only where the tool page already documents a single command (PyNWB, NeuroConv, NWB Inspector).

Layout

• The page banner is shorter on every interior page of the site: it now sizes to its title with a 230px minimum (190px on phones) instead of a fixed 350px, and the title scales with clamp() so it no longer runs edge to edge on phones. Long titles and the Supporting NWB subtitle grow the banner rather than overflow it. The homepage hero is unchanged.
• Intro and section lead paragraphs are capped at 70 characters per line.
• Section headings are bolder with a rule above, and a sticky in-page nav sits under the site header (driven by a page_nav front matter list).
• New horizontal card: small logo on the left, text on the right. The grid fills its rows (3 × 2 for the featured tier).

Cards and links

• The whole card links to the tool page. Docs is the primary action and Source is a secondary GitHub link, replacing the two equal buttons plus "Learn More".
• Cards without docs simply omit the Docs link, so rows no longer look uneven.

Accessibility and performance

• Link orange on tools pages changes from #d17128 (about 3.4:1 on white) to #b35a14 (about 4.8:1), and card titles use the navy.
• Tool images are resized to their display box, converted to WebP and lazy-loaded with explicit dimensions. The 15 core logos go from about 1.7 MB to about 110 KB.

How it is built

• tool-grid shortcode gains variant (card default, featured, compact), title, id, and accepts comma-separated categories. New tool-columns wrapper shortcode.
• static/images is additionally mounted as assets/images in hugo.yaml so templates can resize images without moving any files. GIFs and anything not found there are emitted unchanged.

Effect on other pages

• Community Tools uses the same list layout and shortcode. Its cards keep their existing design, but it picks up the narrower intro, bolder H2s, darker link colour and optimised images.
• Individual tool pages pick up only the darker link colour.
• All other interior pages change only in banner height and title scaling. This is done in CSS (.hero:not(.homeHero)), so no other layouts are edited. The Community Gallery's own banner-height overrides are removed so it matches.
• The orange is unchanged elsewhere on the site; fixing it site-wide would be a separate change.

Not done

• The AqNWB logo is still the only wide, unframed one. It now sits in the same 72px tile as the others, but a framed square version would need new artwork.

Testing

• Built locally with Hugo extended 0.152.2 (Netlify) and 0.128.0 (GitHub Pages workflow); both succeed.
• Checked /tools/core/ at 1440px and 390px wide, and /tools/community/ at 1440px wide: no horizontal overflow and no broken images.
• Loaded all 154 sitemap pages at 1440px and 390px wide and checked that each banner title sits below the fixed header and inside the banner.
• Search (pagefind) was not exercised locally.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for nwborg ready!

Name	Link
🔨 Latest commit	b1e32d4
🔍 Latest deploy log	https://app.netlify.com/projects/nwborg/deploys/6acb99ad947b9f00080b14e7
😎 Deploy Preview	https://deploy-preview-205--nwborg.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.