From e27a8cdb2dbc3b7d1d3336d75063240f2890e1d3 Mon Sep 17 00:00:00 2001 From: fraxle Date: Thu, 9 Jul 2026 20:38:11 +0100 Subject: [PATCH] 3.3.2 Header menu and footer tidy --- assets/about.css | 19 +++++++--- assets/css/base.css | 19 +++++++--- assets/css/ui.css | 32 +++++++++++++++-- assets/js/app.js | 85 ++++++++++++++++++++++++--------------------- 4 files changed, 104 insertions(+), 51 deletions(-) diff --git a/assets/about.css b/assets/about.css index 38524ff..a871ca3 100644 --- a/assets/about.css +++ b/assets/about.css @@ -56,6 +56,15 @@ header a.active { color: #c8922a; } display: inline-flex; align-items: center; } +/* Invisible bridge so hover doesn't break between toggle and menu */ +.nav-dropdown::after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 100%; + height: 4px; +} .nav-dropdown-toggle .caret { display: inline-block; margin-left: 4px; @@ -68,9 +77,9 @@ header a.active { color: #c8922a; } } .nav-dropdown-menu { position: absolute; - top: 100%; - right: 0; - margin-top: 10px; + top: calc(100% - 1px); + left: 50%; + margin-top: 0; background: #f5edd6; border: 1px solid #e0d0a8; border-radius: 8px; @@ -81,7 +90,7 @@ header a.active { color: #c8922a; } padding: 6px; opacity: 0; visibility: hidden; - transform: translateY(-4px); + transform: translateX(-50%) translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 110; } @@ -89,7 +98,7 @@ header a.active { color: #c8922a; } .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; - transform: translateY(0); + transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a { text-transform: none; diff --git a/assets/css/base.css b/assets/css/base.css index 7c7710b..7776576 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -127,6 +127,15 @@ body { display: inline-flex; align-items: center; } +/* Invisible bridge so hover doesn't break between toggle and menu */ +.utci-topnav .nav-dropdown::after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 100%; + height: 4px; +} .utci-topnav .nav-dropdown-toggle .caret { display: inline-block; margin-left: 4px; @@ -139,9 +148,9 @@ body { } .utci-topnav .nav-dropdown-menu { position: absolute; - top: 100%; - right: 0; - margin-top: 10px; + top: calc(100% - 1px); + left: 50%; + margin-top: 0; background: #f5edd6; border: 1px solid #e0d0a8; border-radius: 8px; @@ -152,7 +161,7 @@ body { padding: 6px; opacity: 0; visibility: hidden; - transform: translateY(-4px); + transform: translateX(-50%) translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 110; } @@ -160,7 +169,7 @@ body { .utci-topnav .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; - transform: translateY(0); + transform: translateX(-50%) translateY(0); } .utci-topnav .nav-dropdown-menu a { text-transform: none; diff --git a/assets/css/ui.css b/assets/css/ui.css index 35d8a3d..a5c8994 100644 --- a/assets/css/ui.css +++ b/assets/css/ui.css @@ -1269,13 +1269,34 @@ /* ── 11. ABOUT + FOOTER ─────────────────────────────────────────────── */ -.utci-about { +.utci-bottom-grid { + display: flex; + gap: 24px; margin-top: 28px; + align-items: stretch; +} + +.utci-about { + flex: 0 0 920px; padding: 24px 28px; background: #fdf8ee; border: 1.5px solid #c9b08a; } +.utci-reading-box { + flex: 1; + min-width: 0; + padding: 24px 28px; + background: #fdf8ee; + border: 1.5px solid #c9b08a; +} + +.utci-reading-box .utci-about-text { + max-width: none; + margin-left: 0; + margin-right: 0; +} + .utci-about-heading { font-family: Fraunces, serif; font-size: 18px; @@ -1328,7 +1349,6 @@ .utci-footer { margin-top: 36px; padding-top: 20px; - border-top: 1px solid #d4c0a0; font-family: Manrope, sans-serif; font-size: 10px; font-weight: 700; @@ -1392,6 +1412,14 @@ @media (max-width: 800px) { + .utci-bottom-grid { + flex-direction: column; + } + + .utci-about { + flex: none; + } + .utci-app { padding: 52px 10px 32px; } diff --git a/assets/js/app.js b/assets/js/app.js index a5a9bbf..8bb8bf8 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1873,45 +1873,52 @@ export function UTCIForecast() { `; })()} -
-

What is SunScope?

-

- SunScope is a free hourly weather forecast built around felt temperature, - not just air temperature. It uses the Universal Thermal Climate Index (UTCI) - — the biometeorological standard used in heat-health warning systems worldwide — as its - foundation, combining air temperature, humidity, wind, and solar radiation into a single - honest number. Then it goes further. Our SunSoak index layers three extra - dimensions on top: a rain and snow penalty so wet, windy days read as cold as they feel; - an environment modifier that adjusts the solar load for where you actually - are — forest canopy, alpine altitude, lakeside glare, shaded riverbank, desert ground heat; - and the full radiant heat absorbed from surrounding surfaces. One number that honestly - answers: what will my body actually feel out there? -

-

- Beyond SunSoak, SunScope calculates vehicle cabin heat (choose your - vehicle type; toggle windows open), indoor temperature (seven building - types including office blocks; managed heatwave mode), urban concrete surface - temperature, UV index and sunburn time by skin type, and - soil temperature and moisture for farming and motorhome use. Switch - profiles — Places, Activities, Work — to see the data that matters for your situation, - or go Custom and build your own view. - Learn more → -

+
+
+

What is SunScope?

+

+ SunScope is a free hourly weather forecast built around felt temperature, + not just air temperature. It uses the Universal Thermal Climate Index (UTCI) + — the biometeorological standard used in heat-health warning systems worldwide — as its + foundation, combining air temperature, humidity, wind, and solar radiation into a single + honest number. Then it goes further. Our SunSoak index layers three extra + dimensions on top: a rain and snow penalty so wet, windy days read as cold as they feel; + an environment modifier that adjusts the solar load for where you actually + are — forest canopy, alpine altitude, lakeside glare, shaded riverbank, desert ground heat; + and the full radiant heat absorbed from surrounding surfaces. One number that honestly + answers: what will my body actually feel out there? +

+

+ Beyond SunSoak, SunScope calculates vehicle cabin heat (choose your + vehicle type; toggle windows open), indoor temperature (seven building + types including office blocks; managed heatwave mode), urban concrete surface + temperature, UV index and sunburn time by skin type, and + soil temperature and moisture for farming and motorhome use. Switch + profiles — Places, Activities, Work — to see the data that matters for your situation, + or go Custom and build your own view. + Learn more → +

+
+
+

Reading the table

+

+ SunSoak is the number to watch — it reflects everything your body + actually experiences, not just what the thermometer says. A large gap between SunSoak and Air + temperature means solar radiation is doing significant work on your body. On clear sunny days + that gap can exceed 10 °C even at modest air temperatures. The environment modifier in the + SunSoak dropdown adjusts the solar load for your surroundings — switch it to match where you are + for the most accurate reading. + ${' '} + How it works → + +

+
-
- Reading the table. SunSoak is the number to watch — it reflects everything your body - actually experiences, not just what the thermometer says. A large gap between SunSoak and Air - temperature means solar radiation is doing significant work on your body. On clear sunny days - that gap can exceed 10 °C even at modest air temperatures. The environment modifier in the - SunSoak dropdown adjusts the solar load for your surroundings — switch it to match where you are - for the most accurate reading. - ${' '} - How it works → - - ${isPro && html` -
+ ${isPro && html` +
+
SunScope Extra is active.
- `} -
+
+ `}