cloud cover

src/routes/weather/week/[location]/DailyStripSticky.svelte

@@ -240,7 +240,7 @@
 							     Both stay perfectly centered when compact (the night icon melts
 							     away and the day icon re-centers on its own); when full, small
 							     k-driven nudges line each temp up under its icon. -->
-							<div class="flex w-full items-center justify-center">
+							<div class="icon-row flex w-full items-center justify-center">
 								<div class="icon-wrap">
 									<svg class="day-icon fill-foreground">
 										<use
@@ -413,9 +413,11 @@
 	.sentinel,
 	.daystrip {
 		--cell-w-full: 76px;
-		--cell-w-min: 58px;
 		--cell-h-full: 140px;
 		--cell-h-min: 64px;
+		/* collapsed cells are square: the width follows the compact height, so the
+		   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;
 		--pt-full: 7px;
@@ -439,9 +441,18 @@
 		/* full state only: nudge each temp to sit under "its" icon */
 		--tmax-nudge: 0px;
 		--tmin-nudge: 5px;
-		/* cell bottom padding (roomy when full, tight when compact) */
+		/* full state only: gap above the icons, and the day / night icon offsets
+		   that tighten the pair around the cell centre */
+		--icon-gap-full: 2px;
+		--day-icon-nudge: 2px;
+		--night-icon-nudge: 4px;
+		/* compact only: signed shift that lands the lone icon dead centre in the
+		   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) */
 		--pb-full: 6px;
-		--pb-min: 6px;
+		--pb-min: 8px;
 		/* extra scrub distance beyond the height difference — slows the collapse
 		   down; the surplus just slides content under the (opaque) bar */
 		--collapse-extra: 0px;
@@ -460,7 +471,6 @@
 		.daystrip {
 			--cell-w-full: 120px;
 			--cell-h-full: 208px;
-			--cell-w-min: 64px;
 			--cell-h-min: 56px;
 			--icon-full: 80px;
 			--icon-min: 22px;
@@ -476,8 +486,11 @@
 			--tmax-padx-full: 12px;
 			--tmax-nudge: 0px;
 			--tmin-nudge: 8px;
+			--icon-gap-full: 6px;
+			--day-icon-nudge: 3px;
+			--night-icon-nudge: 6px;
 			--pb-full: 10px;
-			--pb-min: 2px;
+			--pb-min: 5px;
 			--collapse-extra: 60px;
 		}
 		.daystrip {
@@ -652,6 +665,10 @@
 		width: var(--cell-w);
 		padding-top: var(--pt);
 		padding-bottom: calc(var(--pb-min) + (var(--pb-full) - var(--pb-min)) * var(--k));
+		/* The collapsed rows that shrink to zero height still paid for their flex
+		   gap, which pushed the temps onto the tile's bottom edge. Fading the gap
+		   out with the collapse gives that space back as real bottom padding. */
+		row-gap: calc(2px * var(--k));
 	}
 	/* Side buttons keep the compact width in BOTH states, so almost nothing to
 	   the left of the first day changes size during the collapse — the first
@@ -659,6 +676,13 @@
 	.strip-side {
 		width: var(--cell-w-min);
 	}
+	.icon-row {
+		/* full: keep the icons off the weekday / date block above them.
+		   compact: the icon is the only thing between the two text rows, so lift
+		   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))));
+	}
 	.icon-wrap {
 		/* tuck the icon into its line box: the glyphs carry generous built-in
 		   padding, so pulling the neighbours in keeps the cells tight */
@@ -668,6 +692,8 @@
 		display: block;
 		width: var(--icon);
 		height: var(--icon);
+		/* full only: settle the pair a touch right of centre */
+		transform: translateX(calc(var(--day-icon-nudge) * var(--k)));
 	}
 	/* The night icon sits beside the day icon (slightly low, like a companion)
 	   and melts away completely when compact so the day icon re-centers. */
@@ -678,6 +704,7 @@
 		opacity: var(--rel);
 		margin-left: calc(-4px * var(--rel));
 		margin-bottom: calc(6px * var(--rel));
+		transform: translateX(calc(-1 * var(--night-icon-nudge) * var(--k)));
 	}
 	/* weekday centered when full, pushed to the edges when compact */
 	.dow-row {