diff --git a/assets/css/header.css b/assets/css/header.css index a28bd1b..4f40b34 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -284,7 +284,7 @@ /* Fixed-width label prevents the bar from shifting when text swaps */ .scope-play-label { display: inline-block; - min-width: 58px; + min-width: 64px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } diff --git a/assets/css/table.css b/assets/css/table.css index 04c7a91..4dc5a92 100644 --- a/assets/css/table.css +++ b/assets/css/table.css @@ -338,6 +338,11 @@ color: #6a4c1a; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; } +@media (min-width: 1024px) { + .floating-profile-btn { + display: none; + } +} .floating-profile-btn:hover { background: #fff; border-color: #c8922a; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14); } .floating-profile-btn.is-open { background: #fff; border-color: #c8922a; } .floating-profile-icon { font-size: 16px; line-height: 1; flex: none; } @@ -470,6 +475,23 @@ cursor: pointer; transition: filter 0.15s, border-color 0.15s; } +/* Remove alpha from the default fallback color and any potential inherited + semi-transparent backgrounds while keeping the hue. */ +.active-profile-row:not([style*="background"]) { + background-color: #fdf8ee; +} +@media (min-width: 1024px) { + .active-profile-row { + position: sticky; + top: 0 !important; /* Stick to the very top of the viewport */ + z-index: 11; + } + .utci-thead-sticky { + position: sticky; + top: 28px !important; /* Corrected to match the height of the active-profile-row + margins */ + z-index: 10; + } +} .active-profile-row:hover, .active-profile-row:focus-visible { filter: brightness(1.06); diff --git a/assets/css/ui.css b/assets/css/ui.css index bb5bc13..9d89938 100644 --- a/assets/css/ui.css +++ b/assets/css/ui.css @@ -1392,14 +1392,17 @@ .utci-footer { margin-top: 36px; - padding-top: 20px; + padding: 10px 0; font-family: Manrope, sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9a7d5a; - line-height: 2.2; + display: flex; + flex-direction: column; + justify-content: center; + line-height: 1.2; } /* The "Reading the table." intro snippet */ @@ -1415,7 +1418,7 @@ /* Site-wide footer - matches about and faq pages */ .utci-site-footer { text-align: center; - padding: 2rem 1.5rem; + padding: 10px 1.5rem; font-size: 0.82rem; color: #b09870; border-top: 1px solid #e0d0a8; diff --git a/assets/js/app.js b/assets/js/app.js index bfae2da..178e00b 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -896,7 +896,7 @@ export function UTCIForecast() { class=${`scope-play ${(playing || simMs != null) ? 'is-playing' : ''}`} onClick=${() => { if (playing || simMs != null) { setPlaying(false); setSimMs(null); } else setPlaying(true); }} title=${playing ? 'Stop time-lapse' : 'Play a 24-hour time-lapse on the scope'}> - ${(playing || simMs != null) ? '◼' : '▶'}${simClock ?? 'Day cycle'} + ${(playing || simMs != null) ? '◼' : '▶'}${simClock ?? 'Cycle 24h'} <${DayTimeline} windowStart=${windowStart} diff --git a/assets/js/components/DayTabs.js b/assets/js/components/DayTabs.js index 209dbf5..76fc8bc 100644 --- a/assets/js/components/DayTabs.js +++ b/assets/js/components/DayTabs.js @@ -34,7 +34,7 @@ import { h, Fragment } from '../../vendor/preact.js'; import htm from '../../vendor/htm.js'; import { confidenceBand, utciCategory, VEHICLE_SPEEDS, VEHICLE_TYPES, BUILDING_TYPES, FUR_COLORS } from '../utils.js'; -import { FREE_DAYS, UTCI_ENVIRONMENTS, deriveProfileMain } from '../config.js'; +import { FREE_DAYS, UTCI_ENVIRONMENTS, deriveProfileMain, FILTER_PROFILES, variantIcons } from '../config.js'; import { calcVehicleInteriorTemp } from '../physics.js'; import { CloudIcon, PrecipIcon, HouseIcon, CarIcon, FogIcon, IceIcon } from '../components.js'; import { SubscribeModal } from './SubscribeModal.js'; @@ -175,7 +175,12 @@ export function DayTabs({ title="Change profile & settings"> Profile - ${mainLabel} + + ${activeProfile === 'outdoors' + ? (variantIcons[outdoorsVariant] || '🌤️') + : (FILTER_PROFILES[activeProfile]?.icon || '🎯')} + ${mainLabel} + ${mainConfigValue && html`