4.9.2

Simple cards are now separate

assets/css/table.css

@@ -2371,6 +2371,10 @@
   border: none;
   background: transparent;
   padding: 10px 8px 12px;
+  /* 2px each side = 4px between neighbouring cards. Done with margin rather
+     than a grid gap so the cards stay centred on their landing hour and keep
+     lining up with the curve below. */
+  margin: 0 2px;
   display: flex;
   flex-direction: column;
   align-items: center;

assets/js/app.js

@@ -1315,10 +1315,14 @@ export function UTCIForecast() {
                   // Card wears the same hue as its feel tag, washed right back so
                   // the tag still reads as the strong swatch on top of it.
                   const cardRgb = fscRgb(dispTemp, 0.70) || [245, 245, 245];
+                  // Border is the same hue a few shades down, so it edges the card
+                  // without introducing a colour that isn't already on it.
+                  const edgeRgb = fscRgb(dispTemp, 0.40) || [200, 200, 200];
                   return html`
                     <div key=${r.iso} class=${'fsc-card' + (isNow ? ' fsc-card--now' : '')}
                          style=${{
                            background: `rgb(${cardRgb[0]},${cardRgb[1]},${cardRgb[2]})`,
+                           ...(isNow ? {} : { border: `1px solid rgb(${edgeRgb[0]},${edgeRgb[1]},${edgeRgb[2]})` }),
                            ...(fscPlot ? { gridColumn: fscPlot.cardCol(fscPlot.landing[ri]) } : {}),
                          }}>
                       <div class="fsc-time">${localHHMMs}</div>