more fluent design

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

@@ -119,7 +119,7 @@
 	</defs>
 </svg>
 
-<div in:fade out:fade class="mb-6 min-h-[260px]">
+<div transition:fade={{ duration: 200 }} class="mb-6 min-h-[260px]">
 	<!-- negative margin + matching padding: the scroll box gains room so a
 	     lifted/scaled/shadowed card is never clipped, while the first card still
 	     lines up with the page content edge -->

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { fade } from 'svelte/transition';
+
 	import { storedVariablePrefs } from '$lib/stores/settings';
 
 	import { formatUtcOffset, formatZoned, getZonedHour, isSameDayInZone } from '$lib/utils/date';
@@ -236,10 +238,11 @@
 {#if cellData.length > 0}
 	{@const hourly = data.hourly}
 	{@const iconPx = is3h ? 38 : 33}
-	<!-- Full-bleed to the viewport edges on mobile (main has p-5 = 1.25rem);
+	<!-- Full-bleed to the viewport edges on mobile (main has p-3 = 0.75rem);
 	     a contained rounded card on md+ -->
 	<section
-		class="-mx-5 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
+		transition:fade={{ duration: 200 }}
+		class="-mx-3 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
 	>
 		<!-- Card toolbar -->
 		<div

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

@@ -153,7 +153,7 @@
 	);
 </script>
 
-<section class="mt-8" in:fade={{ duration: 200 }}>
+<section class="mt-8" transition:fade={{ duration: 200 }}>
 	<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
 		<h3 class="text-lg font-bold">
 			Meteograms
@@ -239,7 +239,7 @@
 	{:else}
 		<!-- one full-bleed card on mobile / contained card on md+, graphs stacked
 		     tightly so they read as one fluent meteogram -->
-		<div class="-mx-5 border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border">
+		<div class="-mx-3 border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border">
 			{#each renderPanels as panel, i (panel.id)}
 				<div
 					class="px-0 pt-2 pb-1 md:px-4 {i > 0 ? 'border-t border-border/50' : 'md:pt-4'} {i ===

src/routes/weather/week/[location]/variables.ts

@@ -201,8 +201,19 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
 		color: '#26a69a',
 		width: 2,
 		fill: true,
-		fillOpacity: 0.15,
-		windArrows: true
+		fillOpacity: 0.15
+	},
+	{
+		key: 'wind_direction',
+		label: 'Wind direction',
+		short: 'Dir',
+		field: 'winddirection_10m',
+		api: 'wind_direction_10m',
+		type: 'line',
+		kind: 'wind',
+		color: '#14b8a6',
+		windArrows: true,
+		marker: true
 	},
 	{
 		key: 'wind_gusts',
@@ -325,7 +336,7 @@ export function neededHourlyApiVars(
 		if (!def) continue;
 		s.add(apiNameOf(def));
 		if (def.pictograms) s.add('weather_code');
-		if (def.key === 'wind') s.add('wind_direction_10m');
+		if (def.windArrows || def.key === 'wind') s.add('wind_direction_10m');
 	}
 
 	return [...s];