From eeaa4138fa6f253eaf75b05ff38b35635a60e81d Mon Sep 17 00:00:00 2001 From: jenstandstad Date: Sat, 15 Aug 2026 09:13:30 +0200 Subject: [PATCH] Improve timeline date legibility --- e2e/board.smoke.spec.ts | 2 ++ src/styles.css | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/e2e/board.smoke.spec.ts b/e2e/board.smoke.spec.ts index 6fa2ff7..9cbc33c 100644 --- a/e2e/board.smoke.spec.ts +++ b/e2e/board.smoke.spec.ts @@ -32,6 +32,8 @@ test('move, folder expansion, empty-board pan, desktop wheel zoom, mobile pinch, timeline: Number.parseInt(getComputedStyle(document.querySelector('.timeline')!).zIndex, 10), })) expect(temporalLayering.links).toBeGreaterThan(temporalLayering.timeline) + expect(await page.locator('.timeline .year').first().evaluate(element => Number.parseFloat(getComputedStyle(element).fontSize))).toBeGreaterThanOrEqual(12) + expect(await page.locator('.timeline-label button').evaluate(element => Number.parseFloat(getComputedStyle(element).fontSize))).toBeGreaterThanOrEqual(11) await expect(page.locator('.documents-panel')).toHaveClass(/\bclosed\b/) await expect(page.locator('.brief-panel')).toBeVisible() await expect(page.getByRole('button', { name: 'Case brief', exact: true })).toContainText('2') diff --git a/src/styles.css b/src/styles.css index 69deacd..ad8ac68 100644 --- a/src/styles.css +++ b/src/styles.css @@ -196,10 +196,10 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; } .timeline { background: #0d231e; border-top: 1px solid #3c544d; display: grid; grid-template-columns: 180px 1fr 165px; align-items: center; padding: 0 25px; z-index: 8; } .temporal-links { position: fixed; z-index: 9; inset: 0; width: 100vw; height: 100vh; pointer-events: none; overflow: visible; }.temporal-links line { stroke: #8b9792; stroke-width: 1; opacity: .42; vector-effect: non-scaling-stroke; } .timeline-label { border-right: 1px solid #314a43; height: 67px; display: flex; flex-direction: column; justify-content: center; } -.timeline-label b { font: 600 14px IBM Plex Mono; margin: 4px 0; }.timeline-label button { width: max-content; max-width: 170px; padding: 0; overflow: hidden; color: #a07142; background: transparent; border: 0; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer; font: 8px IBM Plex Mono; } +.timeline-label b { font: 600 15px IBM Plex Mono; margin: 4px 0; }.timeline-label button { width: max-content; max-width: 170px; padding: 1px 0; overflow: hidden; color: #d29a61; background: transparent; border: 0; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer; font: 500 11px IBM Plex Mono; } .timeline-track { height: 75px; margin: 0 43px; position: relative; } .axis { position: absolute; left: 0; right: 0; top: 45px; height: 1px; background: #61736d; } -.year { position: absolute; top: 53px; transform: translateX(-50%); font: 9px IBM Plex Mono; color: #6f8981; } +.year { position: absolute; top: 53px; transform: translateX(-50%); color: #b7c7c1; font: 600 12px IBM Plex Mono; letter-spacing: .02em; text-shadow: 0 1px 1px #020907; } .year::before { content: ''; position: absolute; left: 50%; top: -9px; height: 5px; border-left: 1px solid #6a7e78; } .marker { position: absolute; width: 19px; height: 29px; transform: translateX(-50%); border: 0; background: transparent; cursor: pointer; padding: 0; } .marker i { display: block; width: 10px; height: 10px; border: 2px solid #8eb3a7; background: #16352e; rotate: 45deg; box-shadow: 0 0 0 3px #0d231e; }