W1.5: landing layout converged on demo-1 (hero band, alignment, section rhythm) - #429
Conversation
Hero moves out of the 720px article into a full-bleed ruby-tint band (demo-1 layout, spec 40.26 sect 3-4): left = clamp 44-64px Space Grotesk H1 + lede + chips + CTA pair (secondary now white/hairline per spec sect 2); right = obsidian course-window card - 48px chrome bar with mac dots at 80%, JetBrains Mono ruby eyebrow, 2-line Space Grotesk title (sanctioned variant), mono gray-300 meta from course_sequence.yaml. Body sections align on a centered ~1080px container (3-track grid) with 720px prose measure; endcap becomes the 896px radius-24 island with top-right glow. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Module map section rides a full-bleed #FAFAFA band (wrapper div only - copy untouched); section H2s scale to clamp 32-40px with ~80px section spacing; section eyebrows drop from ruby to gray-400 so ruby stays reserved for the hero-card eyebrow, CTAs, and mistake numerals (merge-gate design-voter nit). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ayout Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThe course page now uses a full-width hero, a browser-window summary card, a gray module-map band, and a centered article layout with a redesigned endcap. ChangesCourse landing page redesign
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Honest bin/dtest verdict (main checkout, detached at branch tip; first attempt OOM-killed at exit 137 and discarded, this is the full re-run): 34 runs, 87 assertions, 3 failures - all 9 failing screenshots are the expected set: desktop+mobile |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![coderabbitai[bot]](https://cdn.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
themes/beaver/assets/css/pages/course-list.css (2)
22-26: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueScope the H2 display-font rule to
.course-landing.
.blog .post-content h2applies to every.blogpage, while Space Grotesk is loaded only bylayouts/course/list.html. This bundle currently ships only on the course list page, so there is no live regression. Scoping the selector prevents a fallback-font change if the bundle is ever reused.♻️ Proposed scoping change
-.blog .post-content h2 { +.course-landing .post-content h2 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@themes/beaver/assets/css/pages/course-list.css` around lines 22 - 26, Update the H2 selector in the display-font rule to scope it to the `.course-landing` container instead of all `.blog` pages, while preserving the existing font-family, weight, and letter-spacing declarations.
413-421: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConfirm the light hairline border on the obsidian card.
border: 1px solid#f3f4f6`` draws a near-white outline around the#0d1117card on the ruby-tinted band. Spec §4 describes the card as obsidian with radius 16 and a chrome bar, with no light border. If the border is not intended, remove it or use a low-alpha white edge.🎨 Proposed border change
- border: 1px solid `#f3f4f6`; + border: 1px solid rgba(255, 255, 255, 0.08);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@themes/beaver/assets/css/pages/course-list.css` around lines 413 - 421, Update the .course-landing .course-window styling to remove the near-white 1px border, or replace it with a subtle low-alpha white edge consistent with the obsidian card specification; preserve the existing background, radius, shadow, and layout properties.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@layouts/course/list.html`:
- Around line 20-22: Update the Google Fonts request in the course list markup
to load the JetBrains Mono 400 weight used by .course-window__meta, while
preserving the existing 600 weight for other uses; request both weights in the
existing font URL.
In `@themes/beaver/assets/css/pages/course-list.css`:
- Around line 532-539: Add overflow hiding to the base .course-landing
.course-endcap rule, ensuring its extended ::before radial glow is clipped
within the card while preserving the existing pseudo-element positioning and
styling.
- Line 240: Update the eyebrow text color at the reviewed declaration from
`#9ca3af` to a darker gray such as `#6b7280`, preserving the existing styling while
meeting WCAG AA contrast requirements for the 12px bold text.
---
Nitpick comments:
In `@themes/beaver/assets/css/pages/course-list.css`:
- Around line 22-26: Update the H2 selector in the display-font rule to scope it
to the `.course-landing` container instead of all `.blog` pages, while
preserving the existing font-family, weight, and letter-spacing declarations.
- Around line 413-421: Update the .course-landing .course-window styling to
remove the near-white 1px border, or replace it with a subtle low-alpha white
edge consistent with the obsidian card specification; preserve the existing
background, radius, shadow, and layout properties.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 8a3406c3-cfc7-4acf-8c50-da3effad15ee
⛔ Files ignored due to path filters (3)
docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.27-w15-result-full.jpegis excluded by!**/*.jpegtest/fixtures/screenshots/macos/desktop/course/landing.pngis excluded by!**/*.pngtest/fixtures/screenshots/macos/mobile/course/landing.pngis excluded by!**/*.png
📒 Files selected for processing (3)
content/course/tech-for-non-technical-founders-2026/_index.mdlayouts/course/list.htmlthemes/beaver/assets/css/pages/course-list.css
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" | ||
| href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@600&display=swap" | ||
| rel="stylesheet" /> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Load the JetBrains Mono weight that .course-window__meta uses.
The stylesheet request includes only JetBrains+Mono:wght@600. In themes/beaver/assets/css/pages/course-list.css lines 462-467, .course-window__meta sets font-family: "JetBrains Mono" without font-weight, so it resolves to 400. Only the 600 face is available, so the meta line renders at 600 or falls back. Request both weights, or set font-weight: 600 on .course-window__meta.
🎨 Proposed font request change
- href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@600&display=swap"
+ href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@400;600&display=swap"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <link | |
| href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" | |
| href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@600&display=swap" | |
| rel="stylesheet" /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@400;600&display=swap" | |
| rel="stylesheet" /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@layouts/course/list.html` around lines 20 - 22, Update the Google Fonts
request in the course list markup to load the JetBrains Mono 400 weight used by
.course-window__meta, while preserving the existing 600 weight for other uses;
request both weights in the existing font URL.
| letter-spacing: 0.12em; | ||
| text-transform: uppercase; | ||
| color: var(--color-ruby); | ||
| color: #9ca3af; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Compute WCAG contrast ratios for the eyebrow colors on white and `#fafafa`.
python3 - <<'PY'
def lin(c):
c/=255
return c/12.92 if c<=0.03928 else ((c+0.055)/1.055)**2.4
def L(h):
h=h.lstrip('#')
r,g,b=(int(h[i:i+2],16) for i in (0,2,4))
return 0.2126*lin(r)+0.7152*lin(g)+0.0722*lin(b)
def ratio(a,b):
la,lb=L(a),L(b)
hi,lo=max(la,lb),min(la,lb)
return (hi+0.05)/(lo+0.05)
for fg in ('`#9ca3af`','`#6b7280`'):
for bg in ('`#ffffff`','`#fafafa`'):
print(fg,bg,round(ratio(fg,bg),2))
PYRepository: jetthoughts/jetthoughts.github.io
Length of output: 255
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="themes/beaver/assets/css/pages/course-list.css"
if [ -f "$file" ]; then
wc -l "$file"
sed -n '210,245p' "$file" | cat -n
else
echo "missing $file"
fd -i 'course-list.css' .
fi
python3 - <<'PY'
import re
from pathlib import Path
p = Path('themes/beaver/assets/css/pages/course-list.css')
text = p.read_text()
m = re.search(r'(\d{2,\d+})(?:px)?\s+\d*0\s+([A-Za-z]+)', text)
print("font-size-weight-variant:", m.group(0) if m else "not found")
print("`#9ca3af` occurrences:", text.count('`#9ca3af`'))
print("`#6b7280` occurrences:", text.count('`#6b7280`'))
PYRepository: jetthoughts/jetthoughts.github.io
Length of output: 1705
Use a darker eyebrow color to meet WCAG AA contrast.
#9ca3af is on 12px bold text, so it needs 4.5:1 contrast and only reaches about 2.5:1 on white. Switch it to a darker gray such as #6b7280, which keeps the quiet look and passes AA.
🎨 Proposed color change
- color: `#9ca3af`;
+ color: `#6b7280`;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| color: #9ca3af; | |
| color: `#6b7280`; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@themes/beaver/assets/css/pages/course-list.css` at line 240, Update the
eyebrow text color at the reviewed declaration from `#9ca3af` to a darker gray
such as `#6b7280`, preserving the existing styling while meeting WCAG AA contrast
requirements for the 12px bold text.
| .course-landing .course-endcap::before { | ||
| left: auto; | ||
| right: -160px; | ||
| top: -140px; | ||
| width: 400px; | ||
| height: 400px; | ||
| transform: none; | ||
| background: radial-gradient(closest-side, rgba(204, 52, 45, 0.25), transparent); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Show all .course-endcap rules to confirm overflow and position handling.
rg -n -B2 -A12 '\.course-endcap\b' themes/beaver/assets/css/pages/course-list.cssRepository: jetthoughts/jetthoughts.github.io
Length of output: 2418
🏁 Script executed:
#!/bin/bash
# Check whether .course-landing .course-endcap matches either existing base rule by inspecting
# overflow declarations after these selectors in the stylesheet.
python3 - <<'PY'
from pathlib import Path
p = Path('themes/beaver/assets/css/pages/course-list.css')
text = p.read_text()
for i, line in enumerate(text.splitlines(), 1):
if '.course-landing .course-endcap' in line:
end = min(len(text.splitlines()), i + 25)
chunk = '\n'.join(text.splitlines()[i-1:end])
print(f'-- selector at line {i} --')
print(chunk)
print('contains overflow:', 'overflow' in chunk)
print('contains explicit hidden:', 'overflow: hidden' in chunk)
PYRepository: jetthoughts/jetthoughts.github.io
Length of output: 1736
Clip the extended endcap glow.
.course-landing .course-endcap does not set overflow: hidden, while ::before has right: -160px; top: -140px; width: 400px; height: 400px. Add overflow hiding on the base .course-landing .course-endcap rule so the radial glow cannot paint outside the card.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@themes/beaver/assets/css/pages/course-list.css` around lines 532 - 539, Add
overflow hiding to the base .course-landing .course-endcap rule, ensuring its
extended ::before radial glow is clipped within the card while preserving the
existing pseudo-element positioning and styling.
Screenshot diffs detected
|
1 participant
Paul's feedback on the merged W1 page: "looks terrible, some parts modern, some parts not. Content is not aligned with the hero part." This wave fixes the three root causes, layout-only - zero copy changes.
Root causes → fixes
Evidence
docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.26-result-full.jpeg| After:40.27-w15-result-full.jpeg| Reference:40.26-reference-demo1-full.jpegGates
Known deferred (recorded): gradient H1 line (template doesn't own the line break), section-order interleave vs demo (order was W1-contracted, out of scope here).
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style