From 44e624ed02223b025aee994eebacf75684ecdc72 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 10 Aug 2026 00:14:57 +0000 Subject: [PATCH] feat: put essays and tools side by side on desktop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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
  • instead of
    children of the
      - drop the
      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 Claude-Session: https://claude.ai/code/session_013FWzDx2EE2Awx85v7Qk7UC --- components/styles.ts | 11 ++++ pages/index.tsx | 126 +++++++++++++++++++++---------------------- styles/styles.css | 24 +++++++++ 3 files changed, 96 insertions(+), 65 deletions(-) diff --git a/components/styles.ts b/components/styles.ts index 56a4f79..921b56f 100644 --- a/components/styles.ts +++ b/components/styles.ts @@ -28,4 +28,15 @@ export const layoutDefaultClasses: StyleClasses = { settingsBlockAction: "link dim ph3 pv2 hide", settingsBlockDropdown: "link dim ph3 pv2 underline", postDescription: "f7 pv1 gray", + + // The intro promises "essays and visualizations", so on desktop the two sit + // side by side and both land above the fold. Below -l they stack back into + // source order: essays, then tools. + splitSections: "flex-l flex-row-l items-start-l mb4", + essaysSection: "w-100 w-60-l pr4-l", + toolsSection: "w-100 w-40-l", + toolsList: "f5 list pl2 pl0-l flex flex-row flex-wrap w-100", + // full width inside the narrow desktop column, two-up on tablet + toolCard: "pa1 flex flex-column w-100 w-50-ns w-100-l mb1 mt1", + toolThumb: "tool-thumb", }; diff --git a/pages/index.tsx b/pages/index.tsx index 45c1048..fca06cc 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -69,6 +69,28 @@ const homePageText = [ ]; const textVersion = 0; +const tools = [ + { + title: "African Artifacts Index", + url: "https://artifacts-index.surulere.dev", + image: "/artifacts-index-preview.png", + description: + "Cross-cultural index of museum collections for discovery and comparative analysis", + }, + { + title: "Archive 3D", + url: "https://archive-3d.surulere.dev", + image: "/archive-3d-preview.jpeg", + description: "Visualize and explore vector-similar archives in 3D", + }, + { + title: "Map Tool", + url: "https://map-tool.surulere.dev", + image: "/map-tool-preview.png", + description: "Simple tool to view and share maps on the web.", + }, +]; + interface HomePageContentProps extends types.PageProps { substackHandle?: string; substackEssays?: SubstackEssay[]; @@ -110,7 +132,7 @@ export const HomePageContent: React.FC = ({ return (
      -
      +

      {homePageText[textVersion].tagline}

      @@ -118,17 +140,18 @@ export const HomePageContent: React.FC = ({

      - ESSAYS - - Read on Substack - - <> +
      +
      + ESSAYS + + Read on Substack + {allItems.length > 0 && (
        {allItems.map((item: any, i) => ( @@ -173,61 +196,34 @@ export const HomePageContent: React.FC = ({ scrolling="no" /> )} - -
        +
      - TOOLS -
        - {[ - { - title: "African Artifacts Index", - url: "https://artifacts-index.surulere.dev", - image: "/artifacts-index-preview.png", - description: "Cross-cultural index of museum collections for discovery and comparative analysis", - }, - { - title: "Archive 3D", - url: "https://archive-3d.surulere.dev", - image: "/archive-3d-preview.jpeg", - description: "Visualize and explore vector-similar archives in 3D", - }, - { - title: "Map Tool", - url: "https://map-tool.surulere.dev", - image: "/map-tool-preview.png", - description: "Simple tool to view and share maps on the web.", - }, - ].map((tool, i) => ( -
        - -
        - {tool.title} -
        - {tool.title} -         +
        + TOOLS +
          + {tools.map((tool, i) => ( +
        • + +
          + {tool.title} +
          + {tool.title} +           - - {tool.description?.length > 200 - ? tool.description?.substring(0, 197) + "..." - : tool.description} - -
        - ))} -
      -
      + + {tool.description?.length > 200 + ? tool.description?.substring(0, 197) + "..." + : tool.description} + + + ))} +
    + +
    ARCHIVES

    diff --git a/styles/styles.css b/styles/styles.css index 8ed206d..a90afe3 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -153,6 +153,30 @@ body.DARK { border-color: var(--border-color), } +/* + * home page tool cards + */ + +.tool-thumb { + width: 100%; + height: 175px; + overflow: hidden; +} + +.tool-thumb img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* at -l the cards share a row with the essays list, so they get a shorter crop + to keep all three in view without scrolling */ +@media screen and (min-width: 60em) { + .tool-thumb { + height: 140px; + } +} + .horizontal-scroll-shadow{ background-image: linear-gradient(to right, transparent, transparent), linear-gradient(to right, transparent, transparent), linear-gradient(to right, rgba(0, 0, 20, .10), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, .10), rgba(255, 255, 255, 0)); /* Shadows */