diff --git a/app/globals.css b/app/globals.css index 1e716f2..e225e3d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -112,7 +112,9 @@ h4{font-size:18px;line-height:1.3} .hero-top{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:64px;align-items:start} .hero-top-copy{} -.hero-top-stats{display:flex;flex-direction:column;gap:32px;justify-self:end;padding-top:61px} +.hero-top-stats{display:flex;flex-direction:column;gap:28px;justify-self:end;padding-top:61px} +.hero-top-stats-items{display:flex;flex-direction:column;gap:28px} +.hero-stats-updated{font-size:11px;color:var(--ink-4);text-align:right} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;background:var(--bg);border:1px solid var(--line);padding:6px 14px;border-radius:999px;color:var(--ink-2);margin-bottom:28px;} .hero-eyebrow .led{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(44,122,255,.18);} .hero-eyebrow [data-gh-version]{color:var(--brand);font-weight:500} @@ -504,7 +506,9 @@ h4{font-size:18px;line-height:1.3} h1{font-size:54px}h2{font-size:34px} .hero h1{font-size:56px}.hero{padding:64px 0 64px} .hero-top{grid-template-columns:1fr} - .hero-top-stats{flex-direction:row;justify-self:start;margin-top:32px} + .hero-top-stats{flex-direction:row;flex-wrap:wrap;justify-self:start;margin-top:32px} + .hero-top-stats-items{flex-direction:row;gap:32px} + .hero-stats-updated{width:100%;text-align:left} .hero-concepts{grid-template-columns:repeat(2,1fr);margin-top:40px} .mock-body{grid-template-columns:1fr} .mock-sidebar{border-right:none;border-bottom:1px solid var(--ink-line);display:grid;grid-template-columns:1fr 1fr;gap:16px} diff --git a/components/community/routes/HomeRoute.tsx b/components/community/routes/HomeRoute.tsx index b2a6ac3..c4d33e0 100644 --- a/components/community/routes/HomeRoute.tsx +++ b/components/community/routes/HomeRoute.tsx @@ -23,6 +23,14 @@ function formatNum(n: number): string { return String(n) } +function formatUpdatedAt(iso: string, lang: string): string { + const d = new Date(iso) + if (isNaN(d.getTime())) return '' + return d.toLocaleString(lang, { + year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', + }) +} + export function HomeRoute({ ghVersion }: { ghVersion: string }) { const { t, i18n } = useTranslation('home') const th = (key: string) => ({ __html: t(key) }) @@ -82,31 +90,38 @@ export function HomeRoute({ ghVersion }: { ghVersion: string }) {