From b76ad35c073961f93c7252ef57c9ebdde8e1fe6a Mon Sep 17 00:00:00 2001 From: Corey Blais Date: Tue, 2 Jun 2026 17:10:55 -0400 Subject: [PATCH] Size adoption report for letter paper --- frontend/src/App.tsx | 77 ++++++++++++++++++++++---------------------- 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9e9bba0..07edabd 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4228,11 +4228,12 @@ function App() { box-sizing: border-box; color: var(--ink); font-family: Inter, Arial, sans-serif; - line-height: 1.45; + font-size: 13px; + line-height: 1.38; margin: 0 auto; - max-width: 1080px; + max-width: 8.5in; min-height: 100vh; - padding: 32px; + padding: 0.4in; position: relative; } *, *::before, *::after { box-sizing: inherit; } @@ -4244,29 +4245,29 @@ function App() { border-radius: 16px; box-shadow: 0 16px 34px rgba(86, 63, 34, 0.14); display: grid; - gap: 22px; - grid-template-columns: minmax(150px, 190px) minmax(240px, 1fr) minmax(190px, 240px); - min-height: 214px; - padding: 18px; + gap: 14px; + grid-template-columns: 1.35in minmax(2.1in, 1fr) 1.65in; + min-height: 1.62in; + padding: 0.16in; } h1, h2, h3, p { margin: 0; } - h1 { color: var(--red); font-size: 34px; letter-spacing: 0; } + h1 { color: var(--red); font-size: 24px; letter-spacing: 0; } h2 { border-bottom: 1px solid var(--border); color: var(--green); - font-size: 19px; - margin: 28px 0 12px; - padding-bottom: 8px; + font-size: 16px; + margin: 20px 0 8px; + padding-bottom: 6px; } - h3 { color: var(--blue); font-size: 14px; margin: 18px 0 8px; text-transform: uppercase; } + h3 { color: var(--blue); font-size: 12px; margin: 14px 0 6px; text-transform: uppercase; } .muted { color: var(--muted); margin-top: 6px; } .brand-logo { align-self: center; height: auto; justify-self: start; - max-height: 190px; + max-height: 1.3in; object-fit: contain; - width: 190px; + width: 1.3in; } .report-title { align-self: center; @@ -4278,23 +4279,23 @@ function App() { aspect-ratio: 1; background: #fff; border: 3px solid var(--paper); - border-radius: 18px; + border-radius: 14px; box-shadow: 0 10px 22px rgba(86, 63, 34, 0.16); - height: 132px; - margin: 0 auto 12px; + height: 0.95in; + margin: 0 auto 8px; object-fit: cover; - width: 132px; + width: 0.95in; } - .qr { align-self: center; justify-self: end; max-width: 240px; text-align: center; width: 100%; } - .qr svg { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px; width: 128px; } - .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; overflow-wrap: anywhere; } + .qr { align-self: center; justify-self: end; max-width: 1.65in; text-align: center; width: 100%; } + .qr svg { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; width: 0.92in; } + .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; } .qr-join-label { color: var(--green); - font-size: 12px; + font-size: 10px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; - margin-bottom: -18px; + margin-bottom: -14px; position: relative; text-transform: uppercase; z-index: 1; @@ -4302,41 +4303,41 @@ function App() { .qr-wordmark { display: block; height: auto; - margin: -18px auto -8px; - max-height: 96px; + margin: -14px auto -6px; + max-height: 0.74in; object-fit: contain; - width: min(100%, 240px); + width: min(100%, 1.65in); } .qr-note { color: var(--blue); font-family: "Avenir Next", "Arial Rounded MT Bold", Arial, sans-serif; - font-size: 12px; + font-size: 10px; font-weight: 800; letter-spacing: 0; line-height: 1.28; - margin-top: 8px; + margin-top: 5px; } .grid { stroke: rgba(53, 129, 98, 0.16); } .current { fill: none; stroke: ${escapeReportHtml(selectedBird.chartColor)}; stroke-linecap: round; stroke-width: 4; } .historical { fill: none; opacity: .45; stroke: ${escapeReportHtml(selectedBird.chartColor)}; stroke-linecap: round; stroke-width: 3; } .dot { fill: ${escapeReportHtml(selectedBird.chartColor)}; stroke: white; stroke-width: 2; } - .facts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } - .fact { background: ${panelBackground}; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } - .fact span { color: var(--muted); display: block; font-size: 12px; margin-bottom: 4px; text-transform: uppercase; } + .facts { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); } + .fact { background: ${panelBackground}; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; } + .fact span { color: var(--muted); display: block; font-size: 10px; margin-bottom: 3px; text-transform: uppercase; } table { border-collapse: collapse; width: 100%; } - th, td { border-bottom: 1px solid var(--border); padding: 9px 8px; text-align: left; vertical-align: top; } - th { color: var(--muted); font-size: 12px; text-transform: uppercase; } - .note { border-bottom: 1px solid var(--border); padding: 10px 0; } - .note p { margin-top: 6px; white-space: pre-wrap; } - main { margin-top: 24px; } + th, td { border-bottom: 1px solid var(--border); padding: 6px 7px; text-align: left; vertical-align: top; } + th { color: var(--muted); font-size: 10px; text-transform: uppercase; } + .note { border-bottom: 1px solid var(--border); padding: 7px 0; } + .note p { margin-top: 4px; white-space: pre-wrap; } + main { margin-top: 16px; } @media print { - @page { margin: 14mm; } + @page { margin: 0.4in; size: letter; } body { margin: 0 auto; padding: 0; } header { box-shadow: none; break-inside: avoid; } button { display: none; } } @media (max-width: 820px) { - body { padding: 20px; } + body { padding: 18px; } header { grid-template-columns: 1fr; justify-items: center;