gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3.3.2

Browse Source 
Header menu and footer tidy
This commit is contained in:
fraxle
2026-07-09 20:38:11 +01:00
parent fb8547c8b8
commit e27a8cdb2d
4 changed files with 104 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/about.css
+14 -5
View File
@@ -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;
assets/css/base.css
+14 -5
View File
@@ -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;
assets/css/ui.css
+30 -2
View File
@@ -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;
}
assets/js/app.js
+46 -39
View File
@@ -1873,45 +1873,52 @@ export function UTCIForecast() {
</div>`;
})()}
<div class="utci-about">
<h2 class="utci-about-heading">What is SunScope?</h2>
<p class="utci-about-text">
SunScope is a free hourly weather forecast built around <strong>felt temperature</strong>,
not just air temperature. It uses the <strong>Universal Thermal Climate Index (UTCI)</strong>
— 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 <strong>SunSoak</strong> index layers three extra
dimensions on top: a rain and snow penalty so wet, windy days read as cold as they feel;
an <strong>environment modifier</strong> 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: <em>what will my body actually feel out there?</em>
</p>
<p class="utci-about-text">
Beyond SunSoak, SunScope calculates <strong>vehicle cabin heat</strong> (choose your
vehicle type; toggle windows open), <strong>indoor temperature</strong> (seven building
types including office blocks; managed heatwave mode), <strong>urban concrete surface
temperature</strong>, <strong>UV index and sunburn time</strong> by skin type, and
<strong>soil temperature and moisture</strong> 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.
<a href="./about.html" class="utci-about-link">Learn more →</a>
</p>
<div class="utci-bottom-grid">
<div class="utci-about">
<h2 class="utci-about-heading">What is SunScope?</h2>
<p class="utci-about-text">
SunScope is a free hourly weather forecast built around <strong>felt temperature</strong>,
not just air temperature. It uses the <strong>Universal Thermal Climate Index (UTCI)</strong>
— 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 <strong>SunSoak</strong> index layers three extra
dimensions on top: a rain and snow penalty so wet, windy days read as cold as they feel;
an <strong>environment modifier</strong> 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: <em>what will my body actually feel out there?</em>
</p>
<p class="utci-about-text">
Beyond SunSoak, SunScope calculates <strong>vehicle cabin heat</strong> (choose your
vehicle type; toggle windows open), <strong>indoor temperature</strong> (seven building
types including office blocks; managed heatwave mode), <strong>urban concrete surface
temperature</strong>, <strong>UV index and sunburn time</strong> by skin type, and
<strong>soil temperature and moisture</strong> 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.
<a href="./about.html" class="utci-about-link">Learn more →</a>
</p>
</div>
<div class="utci-reading-box">
<h2 class="utci-about-heading">Reading the table</h2>
<p class="utci-about-text">
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.
${' '}<a onClick=${openWelcome}
style=${{ color: '#9a7d5a', borderBottom: '1px solid rgba(154,125,90,0.4)', paddingBottom: '1px', textDecoration: 'none', cursor: 'pointer' }}>
How it works →
</a>
</p>
</div>
</div>
<div class="utci-footer">
<em>Reading the table.</em> 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.
${' '}<a onClick=${openWelcome}
style=${{ color: '#9a7d5a', borderBottom: '1px solid rgba(154,125,90,0.4)', paddingBottom: '1px', textDecoration: 'none', cursor: 'pointer' }}>
How it works →
</a>
${isPro && html`
<div style=${{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid #d4c0a0' }}>
${isPro && html`
<div class="utci-footer">
<div style=${{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid #d4c0a0', textAlign: 'center' }}>
SunScope Extra is active.
<a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00"
target="_blank" rel="noopener noreferrer"
@@ -1919,8 +1926,8 @@ export function UTCIForecast() {
Manage or cancel subscription →
</a>
</div>
`}
</div>
</div>
`}
<footer class="utci-site-footer">
© 2026 <a href="https://fraxle.net" target="_blank" rel="noopener noreferrer">Fraxle.NET</a>