From 1f3567d92845e13a346ca301616c570aced60561 Mon Sep 17 00:00:00 2001 From: Maurice Date: Mon, 17 Aug 2026 14:55:45 +0200 Subject: [PATCH] docs(readme): free-standing cards, and drop the compound media query Opera serves the stacked phone art to a full-screen desktop window whenever the colour scheme is dark, and Chrome does not. The one unusual thing in the markup was the first source, which combined two conditions: (prefers-color-scheme: dark) and (max-width: 700px) GitHub only documents prefers-color-scheme in a README picture, so that source is gone. No arrangement of single-condition sources can express "narrow and dark", so width comes first and the colour scheme second: a phone in dark mode now gets the light stacked art. Unreadable text is broken, a light card on a dark page is not. grid-mobile-dark.svg goes with the source that referenced it. The three fields also stop being compartments in one slab. They are three cards now, each with its own wash, border and lift. Type is a grade larger throughout because the old sizes were computed against a 1012px column. Measured on the rendered page, GitHub's README column is 838px, so the label was landing at 14px and the caption at 13px. --- README.md | 3 +- docs/tiles/grid-desktop-dark.svg | 75 +++++++++++++++++--------------- docs/tiles/grid-desktop.svg | 75 +++++++++++++++++--------------- docs/tiles/grid-mobile-dark.svg | 55 ----------------------- docs/tiles/grid-mobile.svg | 75 +++++++++++++++++--------------- 5 files changed, 124 insertions(+), 159 deletions(-) delete mode 100644 docs/tiles/grid-mobile-dark.svg diff --git a/README.md b/README.md index 420ad220b..54a52e70c 100644 --- a/README.md +++ b/README.md @@ -58,9 +58,8 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa ## What you get - - + Plan, track, share diff --git a/docs/tiles/grid-desktop-dark.svg b/docs/tiles/grid-desktop-dark.svg index f4ac3912d..3b34abb66 100644 --- a/docs/tiles/grid-desktop-dark.svg +++ b/docs/tiles/grid-desktop-dark.svg @@ -1,55 +1,62 @@ - + - - + + - - + + - - - + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + - - + + - + + + + + + + + + - - + + - + + + + + + + + + - - + + diff --git a/docs/tiles/grid-desktop.svg b/docs/tiles/grid-desktop.svg index e351e8816..b770a2b4e 100644 --- a/docs/tiles/grid-desktop.svg +++ b/docs/tiles/grid-desktop.svg @@ -1,55 +1,62 @@ - + - - + + - - + + - - - + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + - - + + - + + + + + + + + + - - + + - + + + + + + + + + - - + + diff --git a/docs/tiles/grid-mobile-dark.svg b/docs/tiles/grid-mobile-dark.svg deleted file mode 100644 index 46ccd4977..000000000 --- a/docs/tiles/grid-mobile-dark.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/tiles/grid-mobile.svg b/docs/tiles/grid-mobile.svg index 8edf98ae5..387851c42 100644 --- a/docs/tiles/grid-mobile.svg +++ b/docs/tiles/grid-mobile.svg @@ -1,55 +1,62 @@ - + - - + + - - + + - - - + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + - - + + - + + + + + + + + + - - + + - + + + + + + + + + - - + +