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:
1 parent
d467e212cb
commit
41b3646325
14 files changed
+37
-37
No files matched your search
@@ -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",
|
||||||
|
|||||||
@@ -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} />
|
||||||
|
|||||||
@@ -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} />
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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} />
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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} />
|
||||||
|
|||||||
@@ -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} />
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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.
Generated
BIN
Binary file not shown.
Reference in new issue
Block a user