From f0a76508c35c6dc566d5ba096c6f3a7e3a88d54a Mon Sep 17 00:00:00 2001 From: GitHub Ace Date: Thu, 16 Oct 2025 21:01:56 +0000 Subject: [PATCH 1/2] feat(ui): add react-wrap-balancer and fluid typography Co-authored-by: nextocat --- bun.lock | 3 +++ package.json | 1 + src/App.tsx | 29 ++++++++++++++++------------- src/index.css | 25 +++++++++++++++++++++++++ 4 files changed, 45 insertions(+), 13 deletions(-) diff --git a/bun.lock b/bun.lock index 838a47c..ebac128 100644 --- a/bun.lock +++ b/bun.lock @@ -8,6 +8,7 @@ "@tailwindcss/vite": "^4.1.14", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-wrap-balancer": "^1.1.1", "tailwindcss": "^4.1.14", }, "devDependencies": { @@ -503,6 +504,8 @@ "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="], + "react-wrap-balancer": ["react-wrap-balancer@1.1.1", "", { "peerDependencies": { "react": ">=16.8.0 || ^17.0.0 || ^18" } }, "sha512-AB+l7FPRWl6uZ28VcJ8skkwLn2+UC62bjiw8tQUrZPlEWDVnR9MG0lghyn7EyxuJSsFEpht4G+yh2WikEqQ/5Q=="], + "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="], "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="], diff --git a/package.json b/package.json index 084259a..89c8e65 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@tailwindcss/vite": "^4.1.14", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-wrap-balancer": "^1.1.1", "tailwindcss": "^4.1.14" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 77b045d..d13ce31 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' import { ArrowSquareOut, ChatCircle, ArrowUp, Clock } from '@phosphor-icons/react' +import Balancer from 'react-wrap-balancer' interface AlgoliaStory { objectID: string @@ -95,7 +96,7 @@ function App() { if (loading) { return (
-

Loading...

+

Loading...

) } @@ -103,7 +104,7 @@ function App() { if (error) { return (
-

{error}

+

{error}

) } @@ -113,10 +114,10 @@ function App() {
-

+

Calm HN

-

+

Top stories from the last three months

@@ -132,19 +133,21 @@ function App() { aria-label={story.title} />
- + {index + 1} -

- - {story.title} - {story.url && ( - - )} - +

+ + + {story.title} + {story.url && ( + + )} + +

-
+
{story.score} diff --git a/src/index.css b/src/index.css index b329b2a..32b2658 100644 --- a/src/index.css +++ b/src/index.css @@ -8,6 +8,31 @@ src: url("./InterVariable.woff2") format("woff2"); } +:root { + /* Fluid typography scale using clamp() */ + /* Base: 16px-18px between 320px-1440px viewports */ + --fs-base: clamp(1rem, 0.9286rem + 0.2381vw, 1.125rem); + + /* Small: 10px-11px */ + --fs-xs: clamp(0.625rem, 0.5804rem + 0.1488vw, 0.6875rem); + + /* Medium: 14px-16px */ + --fs-sm: clamp(0.875rem, 0.8125rem + 0.2083vw, 1rem); + + /* Large: 18px-22px */ + --fs-lg: clamp(1.125rem, 1.0089rem + 0.3869vw, 1.375rem); + + /* Extra Large: 36px-48px (h1) */ + --fs-xl: clamp(2.25rem, 1.9286rem + 1.0714vw, 3rem); + + /* Line heights */ + --lh-tight: 1.25; + --lh-normal: 1.5; + --lh-relaxed: 1.625; +} + body { font-family: "InterVariable", sans-serif; + font-size: var(--fs-base); + line-height: var(--lh-normal); } \ No newline at end of file From 8a0be3c744a18a04e3f10af50d0164936ab2951d Mon Sep 17 00:00:00 2001 From: GitHub Ace Date: Thu, 16 Oct 2025 21:03:12 +0000 Subject: [PATCH 2/2] style(typography): adjust fluid font size scale Co-authored-by: Idan Gazit --- src/index.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/index.css b/src/index.css index 32b2658..d3270e0 100644 --- a/src/index.css +++ b/src/index.css @@ -10,20 +10,20 @@ :root { /* Fluid typography scale using clamp() */ - /* Base: 16px-18px between 320px-1440px viewports */ - --fs-base: clamp(1rem, 0.9286rem + 0.2381vw, 1.125rem); + /* Base: 14px-18px between 320px-1440px viewports */ + --fs-base: clamp(0.875rem, 0.7857rem + 0.2976vw, 1.125rem); - /* Small: 10px-11px */ - --fs-xs: clamp(0.625rem, 0.5804rem + 0.1488vw, 0.6875rem); + /* Small: 9px-11px */ + --fs-xs: clamp(0.5625rem, 0.5089rem + 0.1786vw, 0.6875rem); - /* Medium: 14px-16px */ - --fs-sm: clamp(0.875rem, 0.8125rem + 0.2083vw, 1rem); + /* Medium: 12px-16px */ + --fs-sm: clamp(0.75rem, 0.6429rem + 0.3571vw, 1rem); - /* Large: 18px-22px */ - --fs-lg: clamp(1.125rem, 1.0089rem + 0.3869vw, 1.375rem); + /* Large: 16px-22px */ + --fs-lg: clamp(1rem, 0.8571rem + 0.4762vw, 1.375rem); - /* Extra Large: 36px-48px (h1) */ - --fs-xl: clamp(2.25rem, 1.9286rem + 1.0714vw, 3rem); + /* Extra Large: 28px-48px (h1) */ + --fs-xl: clamp(1.75rem, 1.3929rem + 1.1905vw, 3rem); /* Line heights */ --lh-tight: 1.25;