From 7a4860e111806ee18269181be8fc5e38b98226ca Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Wed, 27 May 2026 22:29:04 +0200
Subject: [PATCH] style(board): landscape sheets, larger sizing, and web fonts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render A-series sheets in landscape (√2:1), size them off a single
--sheet-base variable so A2/A3/A4 keep exact ISO ratios while leaving room
for labels (which now wrap). Load Playfair Display + Cutive Mono via the
coollabs fonts API: Playfair Display for headings, Cutive Mono for the board.
---
 app/assets/css/main.css      | 10 ++++++++++
 app/components/BoardView.vue | 20 ++++++++++++++------
 nuxt.config.ts               | 12 ++++++++++++
 3 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/css/main.css

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
new file mode 100644
index 0000000..dfd489a
--- /dev/null
+++ b/app/assets/css/main.css
@@ -0,0 +1,10 @@
+/* Headings use Playfair Display (loaded via the coollabs fonts API in
+   nuxt.config). The board supplies its own Cutive Mono for section labels. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Playfair Display', Georgia, serif;
+}
diff --git a/app/components/BoardView.vue b/app/components/BoardView.vue
index 3ca7130..78351f4 100644
--- a/app/components/BoardView.vue
+++ b/app/components/BoardView.vue
@@ -52,7 +52,10 @@ const hoveredId = ref<string | null>(null)
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: 'Cutive Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  /* Base = A4 long side; A3/A2 derive from it by √2 so ratios stay exact.
+     Tune this single value to resize the whole board. */
+  --sheet-base: 220px;
 }
 
 .block {
@@ -90,20 +93,25 @@ const hoveredId = ref<string | null>(null)
   cursor: pointer;
   padding: 0.5rem;
   box-sizing: border-box;
-  /* ISO 216: every A-series sheet is portrait 1 : √2. */
-  aspect-ratio: 1 / 1.41421356;
+  /* ISO 216: every A-series sheet is landscape √2 : 1 (width : height). */
+  aspect-ratio: 1.41421356 / 1;
 }
 
 /* Each step up the A-series scales linear dimensions by √2 (A3 = A4·√2,
    A2 = A4·2), so the boxes keep the true relative paper sizes. */
-.section--a4 { width: 120px; }
-.section--a3 { width: calc(120px * 1.41421356); }
-.section--a2 { width: 240px; }
+.section--a4 { width: var(--sheet-base); }
+.section--a3 { width: calc(var(--sheet-base) * 1.41421356); }
+.section--a2 { width: calc(var(--sheet-base) * 2); }
 
 .section.is-hovered {
   outline: 2px solid currentColor;
 }
 
+.section__label {
+  overflow-wrap: anywhere;
+  line-height: 1.2;
+}
+
 .section__size {
   align-self: flex-end;
   font-size: 0.75rem;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 368c32b..b9ca62b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,4 +3,16 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
   modules: ['@nuxt/eslint', '@nuxt/test-utils/module'],
+  css: ['~/assets/css/main.css'],
+  app: {
+    head: {
+      link: [
+        { rel: 'preconnect', href: 'https://api.fonts.coollabs.io' },
+        {
+          rel: 'stylesheet',
+          href: 'https://api.fonts.coollabs.io/css2?family=Cutive+Mono&family=Playfair+Display:wght@400;700;800&display=swap',
+        },
+      ],
+    },
+  },
 })