From 792da49cac5fddffa3cf3b10a523e2e5cfd311d9 Mon Sep 17 00:00:00 2001
From: Vincent van der Wal <github@vincentvanderwal.nl>
Date: Sat, 1 Aug 2026 13:05:27 +0200
Subject: [PATCH] small adjustments buttons

---
 .../week/[location]/DailyStripSticky.svelte   | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/routes/weather/week/[location]/DailyStripSticky.svelte b/src/routes/weather/week/[location]/DailyStripSticky.svelte
index c2c335c..704f5d8 100644
--- a/src/routes/weather/week/[location]/DailyStripSticky.svelte
+++ b/src/routes/weather/week/[location]/DailyStripSticky.svelte
@@ -205,13 +205,18 @@
 					{@const maxStyle = getTempStyle(tempMax, String(units.temperature_unit))}
 					{@const lowPrecip = !precipIsSignificant(precipSum, String(units.precipitation_unit))}
 					{@const lowWind = !windIsSignificant(windMax, gustMax, String(units.wind_speed_unit))}
+					{@const relLabel = getRelativeDayLabel(time, daily.timezone)}
+					{@const isToday = relLabel === 'Today'}
 					{#if tempMax != null && !isNaN(tempMax) && !(tempMax === 0 && tempMin === 0)}
 						<button
 							type="button"
 							class="strip-cell flex shrink-0 cursor-pointer flex-col items-center justify-start gap-0.5 rounded-xl border px-1 {selected
 								? 'border-primary bg-primary/10 ring-1 ring-primary/50'
-								: 'border-border/60 bg-card'}"
+								: isToday
+									? 'today-cell border-primary/35 bg-primary/4'
+									: 'border-border/60 bg-card'}"
 							aria-pressed={selected}
+							aria-current={isToday ? 'date' : undefined}
 							onclick={() => onSelectDay(time, index)}
 						>
 							<!-- weekday drifts to the left edge and the date fades in at the
@@ -231,9 +236,11 @@
 							</span>
 
 							<span
-								class="rel-label overflow-hidden leading-[1.25] whitespace-nowrap text-muted-foreground"
+								class="rel-label overflow-hidden leading-[1.25] whitespace-nowrap {isToday
+									? 'font-semibold text-primary/80'
+									: 'text-muted-foreground'}"
 							>
-								{getRelativeDayLabel(time, daily.timezone)}
+								{relLabel}
 							</span>
 
 							<!-- Two centered rows: day + night icons, then day + night temps.
@@ -419,14 +426,16 @@
 		   docked bar reads as a row of tiles instead of narrow slivers */
 		--cell-w-min: var(--cell-h-min);
 		--icon-full: 44px;
-		--icon-min: 21px;
+		/* the compact icon carries the square tile: sized so the content fills it
+		   and the leftover slack under the temps stays small */
+		--icon-min: 27px;
 		--pt-full: 7px;
 		--pt-min: 2px;
 		--gap-full: 8px;
 		--gap-min: 4px;
 		/* bar (strip-row) vertical padding */
 		--pad-full: 8px;
-		--pad-min: 8px;
+		--pad-min: 5px;
 		/* fonts */
 		--dow-font-full: 11px;
 		--dow-font-min: 11px;
@@ -450,9 +459,11 @@
 		   square tile (measured against the tile's mid-line) */
 		--icon-lift: -1px;
 		/* cell bottom padding (roomy when full, a little breathing room under the
-		   temps when compact so they don't sit on the tile edge) */
+		   temps when compact so they don't sit on the tile edge). The compact
+		   tile is taller than its content here, so the leftover slack already
+		   supplies that gap and the padding stays at zero. */
 		--pb-full: 6px;
-		--pb-min: 8px;
+		--pb-min: 0px;
 		/* extra scrub distance beyond the height difference — slows the collapse
 		   down; the surplus just slides content under the (opaque) bar */
 		--collapse-extra: 0px;
@@ -473,11 +484,11 @@
 			--cell-h-full: 208px;
 			--cell-h-min: 56px;
 			--icon-full: 80px;
-			--icon-min: 22px;
+			--icon-min: 24px;
 			--pt-full: 10px;
 			--gap-full: 10px;
 			--gap-min: 6px;
-			--pad-min: 4px;
+			--pad-min: 3px;
 			--dow-font-full: 13px;
 			--dow-font-min: 10px;
 			--rel-font-full: 11px;
@@ -490,7 +501,8 @@
 			--day-icon-nudge: 3px;
 			--night-icon-nudge: 6px;
 			--pb-full: 10px;
-			--pb-min: 5px;
+			--pb-min: 3px;
+			--icon-lift: 0px;
 			--collapse-extra: 60px;
 		}
 		.daystrip {
@@ -682,6 +694,10 @@
 		   it to sit optically dead centre in the square tile. */
 		margin-top: calc(var(--icon-gap-full) * var(--k));
 		transform: translateY(calc(-1 * var(--icon-lift) * (1 - var(--k))));
+		/* the compact icon overlaps the temperature badge below it, and reads far
+		   better over that colour than under it */
+		position: relative;
+		z-index: 1;
 	}
 	.icon-wrap {
 		/* tuck the icon into its line box: the glyphs carry generous built-in