julien/andon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(board): landscape sheets, larger sizing, and web fonts

Browse Source 
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.
This commit is contained in:
Julien Calixte
2026-05-27 22:29:04 +02:00
parent ae85d212db
commit 7a4860e111
3 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/css/main.css Normal file
View File

@@ -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;
}

20
app/components/BoardView.vue
View File

@@ -52,7 +52,10 @@ const hoveredId = ref<string | null>(null)
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; 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 { .block {
@@ -90,20 +93,25 @@ const hoveredId = ref<string | null>(null)
cursor: pointer; cursor: pointer;
padding: 0.5rem; padding: 0.5rem;
box-sizing: border-box; box-sizing: border-box;
/* ISO 216: every A-series sheet is portrait 1 : √2. */ /* ISO 216: every A-series sheet is landscape √2 : 1 (width : height). */
aspect-ratio: 1 / 1.41421356; aspect-ratio: 1.41421356 / 1;
} }
/* Each step up the A-series scales linear dimensions by √2 (A3 = A4·√2, /* 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. */ A2 = A4·2), so the boxes keep the true relative paper sizes. */
.section--a4 { width: 120px; } .section--a4 { width: var(--sheet-base); }
.section--a3 { width: calc(120px * 1.41421356); } .section--a3 { width: calc(var(--sheet-base) * 1.41421356); }
.section--a2 { width: 240px; } .section--a2 { width: calc(var(--sheet-base) * 2); }
.section.is-hovered { .section.is-hovered {
outline: 2px solid currentColor; outline: 2px solid currentColor;
} }
.section__label {
overflow-wrap: anywhere;
line-height: 1.2;
}
.section__size { .section__size {
align-self: flex-end; align-self: flex-end;
font-size: 0.75rem; font-size: 0.75rem;

12
nuxt.config.ts
View File

@@ -3,4 +3,16 @@ export default defineNuxtConfig({
compatibilityDate: '2025-07-15', compatibilityDate: '2025-07-15',
devtools: { enabled: true }, devtools: { enabled: true },
modules: ['@nuxt/eslint', '@nuxt/test-utils/module'], 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',
},
],
},
},
}) })