Essays left, tools right on desktop so both are visible from the jump - #7
Open
Korede-TA wants to merge 1 commit into
Open
Essays left, tools right on desktop so both are visible from the jump#7Korede-TA wants to merge 1 commit into
Korede-TA wants to merge 1 commit into
Conversation
The intro sentence promises "essays and visualizations", but the home page stacked ESSAYS above TOOLS, so the tools sat well below the fold behind a 13-item essay list — a visitor had to scroll to learn the visualizations exist. Wrap the two sections in a row that splits 60/40 at the -l breakpoint: essays on the left, tools on the right, both headings top-aligned and in view on first paint. Below -l the row collapses and the sections stack in source order (essays, then tools), so mobile and tablet are unchanged. Supporting changes: - tool cards go full width inside the narrower desktop column (two-up on tablet, as before), with the thumbnail crop shortened to 140px at -l via a new .tool-thumb class replacing the inline image styles - the tools array moves out of the JSX to module scope alongside homePageText - tool cards become <li> instead of <div> children of the <ul> - drop the <br /> section separators in favour of a margin on the new row - fix the malformed id="about pb5" (a className that never applied) to id="about"; rendering is unchanged Verified against a production build at 1440/1920 (side by side) and 820/390 (stacked) in both light and dark themes, with no horizontal overflow at any width. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013FWzDx2EE2Awx85v7Qk7UC
✅ Deploy Preview for soft-swan-5d0ce7 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for darling-dusk-441006 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The intro sentence promises "Essays and visualizations", but the home page stacked
ESSAYSaboveTOOLS. With 13 essays in the list, the tools sat ~1,300px below the fold — a visitor had to scroll a long way to learn the visualizations exist.This wraps the two sections in a row that splits 60/40 at the tachyons
-lbreakpoint (≥60em): essays on the left, tools on the right, both headings top-aligned at the same y and in view on first paint. Below-lthe row collapses and the sections stack in source order (essays, then tools), so tablet and mobile render exactly as before.Measured, production build (
next build+next start):#essays#toolsIdentical geometry in light and dark themes, and
documentElement.scrollWidth == clientWidthat every width (no horizontal overflow). At 820/390 the rendered output is byte-identical tomain.The 965px grid-aligned
#contentwidth fromstyles/notion.cssis untouched, so the columns fit inside the existing background-grid alignment rather than widening the page.Supporting changes
-lso all three tools reach the visible area sooner. The inline image styles move into a new.tool-thumbrule instyles/styles.css.toolsarray moves out of the JSX to module scope, next tohomePageText.<li>rather than<div>children of the<ul>.<br />section separators give way to a margin on the new row wrapper.id="about pb5"(aclassNamethat never applied) toid="about". Rendering is unchanged — deliberately not adding thepb5padding, since that would push the sections further down.New layout classes live in
components/styles.tsalongside the other tachyons class strings, so the split is described in one place.Notion Test Page ID
ed3fc4a0cd0b4f78ab0e04573e0f8246— the site root / home page (rootNotionPageIdinsite.config.ts), which is the page this PR changes. TheARCHIVESsection below the split renders empty in local runs because the Are.na API isn't reachable from this environment; that section is untouched by this change.Generated by Claude Code