From 1a5c37d01125815db212f4d6bce1a793f073fa8a Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Tue, 25 Aug 2026 13:14:12 +0000
Subject: [PATCH] Today's hourly cards: bigger icon/temp (~150%), rain%/wind on
 2 lines with icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icon 26->39px, temp font-size scaled ~150%. Rain% and wind now render on
separate lines (was one line with a '·' separator) with a small Droplet/
Wind icon in front of each. large prop on PointMeta keeps the next-2-days
cards at their existing smaller size -- only today's hourly strip is meant
to read as the detailed/primary view.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/index.css         | 15 +++++++++------
 frontend/src/pages/Display.tsx | 27 +++++++++++++++++----------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1b42eb8..26512c4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -114,11 +114,14 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
 .wx-astro { display: flex; gap: clamp(10px, 1.2vw, 18px); color: var(--text-muted); font-size: clamp(0.7rem, 0.85vw, 0.9rem); }
 .wx-astro-item { display: inline-flex; align-items: center; gap: 4px; }
 
-/* Rain% + wind, one line, shown on hourly and 3-hourly point cards */
-.wx-meta { display: flex; align-items: center; gap: 4px; font-size: clamp(0.6rem, 0.72vw, 0.72rem); white-space: nowrap; }
+/* Rain% and wind, each their own line with a small leading icon — shown on hourly
+   and 3-hourly point cards. .wx-meta-lg (today's hourly cards) runs ~150% bigger
+   than the default (next-2-days cards), matching today's larger icon/temp. */
+.wx-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: clamp(0.6rem, 0.72vw, 0.72rem); white-space: nowrap; }
+.wx-meta-lg { font-size: clamp(0.9rem, 1.08vw, 1.08rem); gap: 3px; }
+.wx-meta-line { display: inline-flex; align-items: center; gap: 3px; }
 .wx-meta-precip { color: #7dd3fc; }
 .wx-meta-wind { color: var(--text-muted); }
-.wx-meta-sep { color: var(--text-muted); opacity: .5; }
 
 /* Today — wrapped in its own block so its hourly cards read as one distinct
    group, not a continuation of the "Coming up" cards below it. Fills its grid
@@ -144,19 +147,19 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
   min-height: 0;
 }
 .wx-hour-card {
-  flex: 1 0 clamp(52px, 5.2vw, 76px);
+  flex: 1 0 clamp(74px, 7.4vw, 106px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  gap: 4px;
+  gap: 5px;
   padding: clamp(6px, 1vh, 10px) 4px;
   border-radius: var(--radius);
   background: var(--surface-2);
 }
 .wx-hour-card.now { background: rgba(201,168,76,0.16); border: 1px solid rgba(201,168,76,0.4); }
 .wx-hour-time { font-size: clamp(0.68rem, 0.82vw, 0.88rem); color: var(--text-muted); }
-.wx-hour-temp { font-size: clamp(0.85rem, 1vw, 1.1rem); font-weight: 600; }
+.wx-hour-temp { font-size: clamp(1.28rem, 1.5vw, 1.65rem); font-weight: 600; }
 
 /* "Coming up" — tomorrow/day-after (3-hourly) above, days 4-7 (daily) below,
    sharing one grid row between them so the pair always fits. */
diff --git a/frontend/src/pages/Display.tsx b/frontend/src/pages/Display.tsx
index be22dda..da37a09 100644
--- a/frontend/src/pages/Display.tsx
+++ b/frontend/src/pages/Display.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { CloudOff, Sunrise, Sunset, Umbrella } from 'lucide-react'
+import { CloudOff, Sunrise, Sunset, Umbrella, Droplet, Wind } from 'lucide-react'
 import { fetchForecast, fetchDisplayConfig } from '../api'
 import { WeatherIcon } from '../lib/icons'
 import type { ForecastPayload, ForecastPoint, Astro } from '../types'
@@ -51,16 +51,23 @@ function AstroRow({ astro }: { astro?: Astro }) {
   )
 }
 
-// Rain% + wind on one line ("12% · SW 8mph") — was two separate lines, which was
-// part of what pushed the hourly strip past a single viewport's worth of height.
-function PointMeta({ point }: { point: ForecastPoint }) {
+// Rain% and wind, each on their own line with a small leading icon. `large` bumps
+// the text size for today's hourly cards; the next-2-days cards stay at the
+// smaller default so today still reads as the primary/detailed view.
+function PointMeta({ point, large }: { point: ForecastPoint; large?: boolean }) {
   if (point.precip_prob == null && point.wind_speed_mph == null) return null
+  const iconSize = large ? 13 : 10
   return (
-    <span className="wx-meta">
-      {point.precip_prob != null && <span className="wx-meta-precip">{Math.round(point.precip_prob)}%</span>}
-      {point.precip_prob != null && point.wind_speed_mph != null && <span className="wx-meta-sep">·</span>}
+    <span className={`wx-meta${large ? ' wx-meta-lg' : ''}`}>
+      {point.precip_prob != null && (
+        <span className="wx-meta-line wx-meta-precip">
+          <Droplet size={iconSize} strokeWidth={2} />
+          {Math.round(point.precip_prob)}%
+        </span>
+      )}
       {point.wind_speed_mph != null && (
-        <span className="wx-meta-wind">
+        <span className="wx-meta-line wx-meta-wind">
+          <Wind size={iconSize} strokeWidth={2} />
           {point.wind_dir_deg != null ? `${compassFromDeg(point.wind_dir_deg)} ` : ''}
           {Math.round(point.wind_speed_mph)}mph
         </span>
@@ -242,9 +249,9 @@ function HourCard({ point, isNow }: { point: ForecastPoint; isNow: boolean }) {
   return (
     <div className={`wx-hour-card${isNow ? ' now' : ''}`}>
       <span className="wx-hour-time">{isNow ? 'Now' : formatHour(point.ts)}</span>
-      <WeatherIcon icon={point.icon} size={26} />
+      <WeatherIcon icon={point.icon} size={39} />
       <span className="wx-hour-temp">{roundTemp(point.temp_c)}</span>
-      <PointMeta point={point} />
+      <PointMeta point={point} large />
     </div>
   )
 }