docs: redesign homepage with clean layout and type system

[murray-ds]

Summary

• Redesigned homepage with clean white hero, dual radial gradients, and syntax-highlighted code editor
• Replaced logo images with text-based scrolling marquee using Jinja loops
• Established Tailwind-aligned CSS type scale system for consistent sizing
• Reordered feature sections to original order, replaced static images with inline code windows
• Restyled header to white background with dark text and green active tab indicator
• Scoped homepage-only CSS overrides to template inline styles
• Deleted 16 unused image assets (logos, features, SVGs)
• Updated CTAs to direct technical decision-makers to Analysis Modules page

Test plan

• Run mkdocs serve and verify homepage renders correctly
• Check hero section displays code editor with green radial gradients
• Verify scrolling logo bar animates smoothly with edge fade
• Confirm all 4 feature sections display in correct order with working links
• Verify "Get Started" section shows pip install command and code window
• Check header styling on all pages (white background, dark text, green active tab)
• Confirm non-homepage pages still display content correctly
• Test responsive layout on mobile viewport (768px breakpoint)

🤖 Generated with Claude Code

[claude]

Claude finished @murray-ds's task in 2m 12s —— View job

---

PR Review: docs/homepage-touch-up

• Gather context and read changed files
• Analyze code quality, accessibility, and best practices
• Post review feedback

---

Overall Assessment

This is a solid, well-executed homepage redesign. The code is clean and well-structured with good accessibility considerations. A few minor issues worth noting for future maintenance.

---

Issues Found

1. Inconsistent use of CSS custom properties (extra.css)

Several hardcoded colors exist alongside the defined CSS variable system. These should use variables for maintainability:

Location	Hardcoded value	Suggested variable
.get-started background (line 362)	#0d0d0d	--color-dark-bg or similar
.code-titlebar background (line 168)	#181825	--color-code-titlebar
.code-window background (line 153)	#1e1e2e	--color-code-bg
.logo-bar-label color (line 247)	#7a8578	--neutral-500 or similar
.logo-scroll span color (line 267)	#a8b5a5	--neutral-400 or similar

The Catppuccin Mocha palette colors used in the code windows are consistently applied, but should be defined as variables at the top alongside the rest of the system. Fix this →

2. Potential active tab indicator issue (extra.css, lines 458–461)

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  border-bottom-color: var(--green-500);
}

This only sets border-bottom-color without ensuring border-bottom-width and border-bottom-style are set. If the Material theme doesn't establish a border-bottom on active tab links, this rule won't render a visible indicator. Worth verifying at 768px+ widths and across Material theme versions — a theme update could silently break this.

3. Missing will-change hint for scroll animation (extra.css, line 256)

The logo scroll animation would benefit from will-change: transform to hint to the browser to promote the element to a compositor layer:

.logo-scroll {
  will-change: transform;
  /* existing rules */
}

Note: this is already performance-safe since the element is always animating, not intermittently.

4. !important on header title margin (extra.css, line 428)

.md-header__title {
  margin-left: 0 !important; /* needed to override Material's inline JS margin */
}

The comment explains why this is necessary, which is good. However, this is brittle — a Material theme upgrade that changes how it injects that inline style could require re-investigation. Consider leaving a reference to the Material issue/version where this was needed to help future maintainers.

5. Fractional flex value on .hero-text (extra.css, line 113)

.hero-text {
  flex: 0.8;
}

Using flex: 0.8 (fractional flex-grow/shrink) is valid CSS but unusual and can produce unexpected layouts across browsers. The pairing with flex: 1.4 on .hero-code achieves roughly a 1:1.75 ratio — consider expressing this as flex: 4 / flex: 7 (integer ratios) for clarity and predictability.

---

Positives Worth Noting

• Accessibility: aria-hidden="true" on duplicated logo scroll items and prefers-reduced-motion support is excellent. The motion fallback correctly hides duplicated items (line 284–286).
• Type scale system: The Tailwind-aligned CSS custom property type scale (--text-xs through --text-4xl) is well-structured and consistently applied.
• Responsive design: Both the hero (flex-direction: column at 48em) and features section handle mobile correctly, including overriding the nth-child(even) reverse layout.
• Image cleanup: Deleting 12 unused logo images and 2 feature images reduces repo weight and build noise.
• Scoped homepage overrides: Using an inline <style> block in home.html to override sidebar/content visibility keeps homepage-specific layout changes from leaking into the global stylesheet.
• Vendor prefix: -webkit-mask-image alongside mask-image (lines 252–253) is correct for cross-browser support.
• loading="lazy" on images: Good performance practice on the feature section images.

---

[github-actions]

🚀 Cloudflare Pages Deployment

✅ Preview deployed successfully!

Preview URL: https://caa7ed1e.pyretailscience-docs.pages.dev
Deployment ID: caa7ed1e-7155-4f5f-ae1c-6a2eca6b682b

---

This preview will be updated automatically when you push new changes to this PR.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
see 2 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.