Understanding the Weather Page
Every city has a dedicated weather page at `/weather/{city-slug}`. The page is made up of four main sections rendered top to bottom.
1 · Weather Hero
The large card at the top of the page is the Weather Hero. Its background gradient changes automatically based on the current condition:
Clear / SunnyWarm amber-to-sky gradient with dark amber text.
Clouds / OvercastNeutral slate gradient with dark text.
Rain / ShowersDeep slate-to-indigo gradient with white text.
DrizzleSlate-to-sky gradient with white text.
Snow / IceCool blue-to-white gradient with dark text.
ThunderstormDark gray-to-purple gradient with white text.
Fog / Mist / HazeMuted gray gradient with dark text.
The hero displays:
- City name and country code
- Condition description and the observation time
- Current temperature in large display type
- Feels like, daily high, and daily low temperatures
- Condition icon and main condition label (e.g. "Rain")
- Data provider label (e.g. "Open-Meteo")
Temperatures are shown in metric units (°C) by default. The feels-like temperature accounts for wind chill and humidity.
2 · Hourly Forecast Strip
Below the hero is a horizontally scrollable strip of hourly forecast cards, covering the next 24 hours.
Reading the Cards
Each card shows:
- Time label (e.g. "3 PM")
- Condition icon
- Temperature for that hour
- Precipitation probability (hidden when 0%)
- Colour dot — blue for cold, amber for mild, orange for warm
The first card (current hour) is highlighted in sky blue and labelled Now.
Date Dividers
When the strip crosses midnight a date label appears (e.g. "Thu") with a thin vertical divider line, so you can instantly see which hours belong to the next day.
Wind Row
Below the cards is a compact wind row showing wind speed in km/h and a
directional arrow for each hour. A — is shown when wind speed is zero.
Scrolling
Use the ← / → arrow buttons in the section header, drag/swipe on touch screens, or use a mouse wheel (horizontal scroll). Faded edges on either side indicate more content in that direction.
The hourly strip is optional — if the weather provider doesn't return hourly data for a city it is simply hidden rather than showing an empty state.
3 · 5-Day Forecast Strip
A card listing the next five days with:
- Day name — "Today", "Tomorrow", or the short weekday (e.g. "Sat")
- Condition icon
- Precipitation probability (shown in sky blue; hidden when 0%)
- Low temperature in muted text
- Temperature range bar — a gradient bar scaled across all five days so you can visually compare ranges at a glance
- High temperature in bold
The temperature bar colours range from sky-blue (cool) through amber to orange (warm), representing the relative warmth of that day's range compared to the rest of the forecast week.
4 · Weather Details Grid
A responsive grid of stat cards (2 columns on mobile, up to 4 on desktop) with deeper measurements:
WindSpeed in km/h, cardinal direction, and gust speed in m/s.
HumidityRelative humidity percentage with a comfort label (e.g. "Very dry air", "The dew point is high").
PressureAtmospheric pressure in hPa with a system label (high/low/standard).
VisibilityShown in km when ≥ 1000 m, otherwise in metres.
Cloud CoverPercentage coverage with labels for clear skies or mostly overcast.
PrecipitationAccumulated precipitation in mm and today's probability from the forecast.
Sunrise / SunsetSunrise time with sunset shown as a sub-label.
UV IndexNumeric index with a risk label: Low · Moderate · High · Very High · Extreme. Hidden when UV index is 0 (night-time).