feat(ui): layout edge-to-edge + font Geist su tutta l'app

- Font: Geist (Vercel) sostituisce Fraunces/Inter Tight; GeistMono al posto di JetBrains Mono. `--font-display`, `--font-sans`, `--font-mono` mappati tutti su Geist via alias CSS — vocabolario tipografico unificato sans-serif moderno.
- Layout: rimosso `mx-auto max-w-7xl` da 7 pagine app (root, onboarding, profile, plan, tracking, fasting, shopping, recipe detail). Sostituito con `w-full px-6 sm:px-10 lg:px-16 xl:px-24` — edge-to-edge, ma respiro su 4K. Welcome/sign-in/sign-up restano stretti (testo lungo / form login).
- Tailwind: fontFamily fallback display da `Georgia, serif` a `system-ui` sans. Rimosse le OpenType features di Fraunces (`cv11`, `dlig`) — Geist usa `ss01`/`ss03`.
- Cleanup: rimosso `docs/~\$D_KetoPath.docx` (Word lockfile residuo).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
lucianoandClaude Opus 4.7 committed 2026-05-07 11:04:40 +02:00
1 parent d467e212cb
commit 41b3646325
14 files changed
+37 -37

No files matched your search

+1
View File
@@ -23,6 +23,7 @@
"better-auth": "^1.0.21", "better-auth": "^1.0.21",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"geist": "^1.7.0",
"lucide-react": "^0.439.0", "lucide-react": "^0.439.0",
"next": "^14.2.5", "next": "^14.2.5",
"next-intl": "^3.17.2", "next-intl": "^3.17.2",
+1 -1
View File
@@ -43,7 +43,7 @@ function FastingPageContent({
return ( return (
<div className="relative"> <div className="relative">
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead issueLabel="N. 07 — Digiuno" /> <Masthead issueLabel="N. 07 — Digiuno" />
<main className="relative overflow-hidden pb-24 pt-10 sm:pt-12"> <main className="relative overflow-hidden pb-24 pt-10 sm:pt-12">
<CursorGlow color="hsl(var(--pomodoro))" size={520} /> <CursorGlow color="hsl(var(--pomodoro))" size={520} />
+3 -23
View File
@@ -1,5 +1,6 @@
import { GeistMono } from 'geist/font/mono';
import { GeistSans } from 'geist/font/sans';
import type { Metadata, Viewport } from 'next'; import type { Metadata, Viewport } from 'next';
import { Fraunces, Inter_Tight, JetBrains_Mono } from 'next/font/google';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { NextIntlClientProvider } from 'next-intl'; import { NextIntlClientProvider } from 'next-intl';
import { getMessages, getTranslations, setRequestLocale } from 'next-intl/server'; import { getMessages, getTranslations, setRequestLocale } from 'next-intl/server';
@@ -10,27 +11,6 @@ import { locales, type Locale } from '@/i18n';
import '@/styles/globals.css'; import '@/styles/globals.css';
const fraunces = Fraunces({
subsets: ['latin'],
variable: '--font-display',
display: 'swap',
style: ['normal', 'italic'],
});
const interTight = Inter_Tight({
subsets: ['latin'],
variable: '--font-sans',
display: 'swap',
weight: ['400', '500', '600'],
});
const mono = JetBrains_Mono({
subsets: ['latin'],
variable: '--font-mono',
display: 'swap',
weight: ['400', '500'],
});
export function generateStaticParams() { export function generateStaticParams() {
return locales.map((locale) => ({ locale })); return locales.map((locale) => ({ locale }));
} }
@@ -88,7 +68,7 @@ export default async function LocaleLayout({
const messages = await getMessages(); const messages = await getMessages();
return ( return (
<html lang={locale} className={`${fraunces.variable} ${interTight.variable} ${mono.variable}`}> <html lang={locale} className={`${GeistSans.variable} ${GeistMono.variable}`}>
<body className="bg-background text-foreground min-h-screen font-sans antialiased"> <body className="bg-background text-foreground min-h-screen font-sans antialiased">
<NextIntlClientProvider locale={locale} messages={messages}> <NextIntlClientProvider locale={locale} messages={messages}>
{children} {children}
@@ -49,7 +49,7 @@ function OnboardingPageContent({
return ( return (
<div className="relative"> <div className="relative">
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead issueLabel="N. 03 — Inizio" /> <Masthead issueLabel="N. 03 — Inizio" />
<main className="relative overflow-hidden pb-24 pt-10 sm:pt-12"> <main className="relative overflow-hidden pb-24 pt-10 sm:pt-12">
<CursorGlow color="hsl(var(--oro))" size={520} /> <CursorGlow color="hsl(var(--oro))" size={520} />
+1 -1
View File
@@ -18,7 +18,7 @@ export default async function HomePage({ params: { locale } }: { params: { local
function HomeContent({ userName }: { userName: string | null }) { function HomeContent({ userName }: { userName: string | null }) {
return ( return (
<div className="relative"> <div className="relative">
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead /> <Masthead />
{userName ? <SignedInDashboard userName={userName} /> : <MarketingLanding />} {userName ? <SignedInDashboard userName={userName} /> : <MarketingLanding />}
</div> </div>
+1 -1
View File
@@ -57,7 +57,7 @@ function PlanPageContent({
return ( return (
<div className="relative"> <div className="relative">
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead issueLabel="N. 05 — Cucina" /> <Masthead issueLabel="N. 05 — Cucina" />
<main className="relative overflow-hidden py-10 sm:py-12"> <main className="relative overflow-hidden py-10 sm:py-12">
<CursorGlow color="hsl(var(--pomodoro))" size={520} /> <CursorGlow color="hsl(var(--pomodoro))" size={520} />
+1 -1
View File
@@ -58,7 +58,7 @@ function ProfilePageContent({
return ( return (
<div className="relative"> <div className="relative">
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead issueLabel="N. 04 — Profilo" /> <Masthead issueLabel="N. 04 — Profilo" />
<main className="relative overflow-hidden pb-24 pt-10 sm:pt-12"> <main className="relative overflow-hidden pb-24 pt-10 sm:pt-12">
<CursorGlow color="hsl(var(--oliva))" size={520} /> <CursorGlow color="hsl(var(--oliva))" size={520} />
@@ -110,7 +110,7 @@ function RecipeContent({ recipe }: { recipe: RecipeView }) {
const phasesAll = recipe.phases.length === 3; const phasesAll = recipe.phases.length === 3;
return ( return (
<div className="mx-auto min-h-screen max-w-5xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead issueLabel={`N. 08 — ${t(`categoryLabel.${recipe.category}`)}`} /> <Masthead issueLabel={`N. 08 — ${t(`categoryLabel.${recipe.category}`)}`} />
<main className="py-10 sm:py-14"> <main className="py-10 sm:py-14">
<Link <Link
+1 -1
View File
@@ -53,7 +53,7 @@ function ShoppingPageContent({ list }: { list: ShoppingList | null }) {
return ( return (
<div className="relative"> <div className="relative">
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead issueLabel="N. 09 — La spesa" /> <Masthead issueLabel="N. 09 — La spesa" />
<main className="relative overflow-hidden pb-24 pt-10 sm:pt-12"> <main className="relative overflow-hidden pb-24 pt-10 sm:pt-12">
<CursorGlow color="hsl(var(--oliva))" size={520} /> <CursorGlow color="hsl(var(--oliva))" size={520} />
+1 -1
View File
@@ -65,7 +65,7 @@ function TrackingPageContent({
return ( return (
<div className="relative"> <div className="relative">
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10"> <div className="min-h-screen w-full px-6 sm:px-10 lg:px-16 xl:px-24">
<Masthead issueLabel="N. 06 — Tracking" /> <Masthead issueLabel="N. 06 — Tracking" />
<main className="relative overflow-hidden pb-24 pt-10 sm:pt-12"> <main className="relative overflow-hidden pb-24 pt-10 sm:pt-12">
<CursorGlow color="hsl(var(--oro))" size={520} /> <CursorGlow color="hsl(var(--oro))" size={520} />
+10 -3
View File
@@ -14,6 +14,12 @@
@layer base { @layer base {
:root { :root {
/* Font aliases — il pacchetto `geist` espone --font-geist-sans / --font-geist-mono.
* Mappiamo le nostre tre keyword (display/sans/mono) tutte a Geist. */
--font-display: var(--font-geist-sans);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--carta: 42 38% 94%; --carta: 42 38% 94%;
--carta-light: 44 45% 97%; --carta-light: 44 45% 97%;
--carta-dim: 40 30% 88%; --carta-dim: 40 30% 88%;
@@ -87,7 +93,7 @@
@apply bg-background text-foreground font-sans; @apply bg-background text-foreground font-sans;
font-feature-settings: font-feature-settings:
'ss01' on, 'ss01' on,
'cv11' on; 'ss03' on;
} }
/* paper grain — applied once, fixed, non-interactive */ /* paper grain — applied once, fixed, non-interactive */
@@ -117,10 +123,11 @@
h2, h2,
h3 { h3 {
font-optical-sizing: auto; font-optical-sizing: auto;
letter-spacing: -0.02em;
font-feature-settings: font-feature-settings:
'ss01' on, 'ss01' on,
'liga' on, 'ss03' on,
'dlig' on; 'liga' on;
} }
.font-mono { .font-mono {
+15 -3
View File
@@ -12,9 +12,21 @@ const config: Config = {
}, },
extend: { extend: {
fontFamily: { fontFamily: {
display: ['var(--font-display)', 'Georgia', 'serif'], display: [
sans: ['var(--font-sans)', 'system-ui', 'sans-serif'], 'var(--font-display)',
mono: ['var(--font-mono)', 'ui-monospace', 'monospace'], 'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'sans-serif',
],
sans: [
'var(--font-sans)',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'sans-serif',
],
mono: ['var(--font-mono)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
}, },
fontSize: { fontSize: {
// tighter editorial display sizes // tighter editorial display sizes
Binary file not shown.
BIN
View File
Binary file not shown.