From f9becddbc68f75731a87d0b4d6a4cfde45327082 Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Mon, 31 Aug 2026 22:33:44 +0000 Subject: [PATCH] Carry the sunshine to the two awake timers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The list said awake in gold while the big card and the day-bar pill still said it in purple, which left the app describing one state in two colours. Both move across, so asleep against awake is night-blue against day-gold everywhere. Text takes --wake-ink, not --wake. A gold light enough to read as sunshine is not legible as text on a pale ground: the bright value measures 1.71:1 against the card it would sit on, where the ink makes 4.96, and 4.71 on the pill's tint — the same split the pee button has always used, dark ink on the yellow rather than yellow ink. Worth noting for later: this now makes awake considerably easier to read than asleep, whose blue-on-blue pill has been sitting at 2.57:1 since long before any of this. Untouched, being a separate question about the sleep colour. --- src/changelog.json | 1 + src/style.css | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/changelog.json b/src/changelog.json index 71269a4..665fc94 100644 --- a/src/changelog.json +++ b/src/changelog.json @@ -1,4 +1,5 @@ [ + { "date": "2026-08-31", "text": "The awake timer is sunshine too now — both the big “Awake for” card and the pill in the day bar — so the whole app tells asleep and awake apart by night-blue against day-gold rather than by blue against purple" }, { "date": "2026-08-31", "text": "Awake stretches in the Sleep & wake list are sunshine yellow now instead of the app's purple — the same idea as the ☀️ on the timer pill — so asleep and awake read as night and day down the list rather than as two shades of the same accent" }, { "date": "2026-08-31", "text": "The Walks list reads newest first as well, so a walk in progress is the top row and every list in the app now runs the same way" }, { "date": "2026-08-31", "text": "The Walks panel and its two charts have moved down the page, below “Pees, poos & meals”" }, diff --git a/src/style.css b/src/style.css index 48a70db..a7cb4fe 100644 --- a/src/style.css +++ b/src/style.css @@ -223,7 +223,9 @@ body::before { /* Big timer still on screen: keep the pill's slot but show nothing. */ .bar-clock.standby { visibility: hidden; } .bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep); } -.bar-clock.awake { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); } +/* Dark text on the yellow, the way the pee button already does it: a gold + light enough to read as sunshine is never legible as text on a pale ground. */ +.bar-clock.awake { background: color-mix(in srgb, var(--wake) 18%, var(--surface)); color: var(--wake-ink); } .big-clock { text-align: center; @@ -251,8 +253,8 @@ body::before { } .big-clock.asleep { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sleep) 10%, var(--surface))); } .big-clock.asleep .bc-time { color: var(--sleep); } -.big-clock.awake { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 10%, var(--surface))); } -.big-clock.awake .bc-time { color: var(--accent); } +.big-clock.awake { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--wake) 10%, var(--surface))); } +.big-clock.awake .bc-time { color: var(--wake-ink); } /* Quick actions: a stack of explicit rows (see index.html) instead of one auto-fit grid, so the grouping is the same at every width. Equal columns