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

5.5

Browse Source 
New big and small scope sunset and sunrise simulation
New calculations for the day tabs
Added missing icons to simple view
New record popups
Week ahead description popups
Camping profile
Tweak to some of the indoor tems
This commit is contained in:
fraxle
2026-10-08 09:53:41 +01:00
parent 71860b9dd9
commit 862f631beb
22 changed files with 2169 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/base.css
+88 -14
View File
@@ -16,7 +16,8 @@
#f5edd6 parchment page background
#fffcf2 soft cream cards, search box, table
#fdf8ee warm cream toolbars, legend, about block
#f0e4c4 pale honey table heading row
#f0e4c4 pale honey table heading row, priority banner
#ebdcb4 deep honey site header bar, footer bar, nav drawer
#fef3dc warm hover buttons on hover
#fef8ea row hover table row on hover
#fff8e4 "now" row the currently-active hour
@@ -109,8 +110,14 @@ body {
justify-content: flex-end; /* .nav-logo's margin-right:auto splits the row */
padding: 18px var(--app-pad);
gap: 28px;
background: #f5edd6;
border-bottom: 1px solid #e0d0a8;
/* Two shades deeper than the parchment page beneath, so the bar reads as
chrome rather than as more page — it is the topmost surface, so it sits a
step below the table heading row (#f0e4c4) rather than matching it.
The shadow is espresso at low alpha, not black, to stay in the warm family.
The mobile bar and drawer below repeat these three values. */
background: #ebdcb4;
border-bottom: 1px solid #c9b08a;
box-shadow: 0 3px 8px rgba(30, 18, 8, 0.10);
}
.utci-topnav a {
@@ -166,8 +173,8 @@ body {
top: calc(100% - 1px);
left: 50%;
margin-top: 0;
background: #f5edd6;
border: 1px solid #e0d0a8;
background: #fffcf2;
border: 1px solid #d4c0a0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(100, 70, 20, 0.12);
display: flex;
@@ -403,6 +410,63 @@ body {
transform: scale(1.3);
}
/* Close + Quick Record stack in the strip's top-right corner, Close above
Quick Record, rather than running side by side in the row. */
.event-note-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
align-self: flex-start;
margin: -2px -6px 0 10px;
}
/* Quick Record — the banner's one action: sends the event showing to the
journal (see quickRecord in app.js). Reads as an affordance rather than
chrome, so unlike the close pill above it it carries its brass tint
standing still. */
.event-note-record {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
padding: 4px 9px;
border: 1px solid rgba(200, 146, 42, 0.45);
border-radius: 999px;
background: rgba(200, 146, 42, 0.13);
font-family: Manrope, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8a6414;
line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.event-note-record:hover {
background: rgba(200, 146, 42, 0.28);
border-color: rgba(200, 146, 42, 0.75);
color: #6b4a0c;
}
.event-note-record:focus-visible {
outline: 2px solid #c8922a;
outline-offset: 1px;
}
/* On a tinted warning the brass disappears into the hue, so the pill drops
to the same neutral darks the rest of the tinted copy uses. */
.event-note.is-tinted .event-note-record {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.24);
color: #3f3222;
}
.event-note.is-tinted .event-note-record:hover {
background: rgba(0, 0, 0, 0.16);
border-color: rgba(0, 0, 0, 0.4);
color: #2a1a08;
}
/* Close control — a small brass "Close ×" pill in the top-right corner. It
sits at the end of the strip's flex row rather than being absolutely
positioned, so the dates line can never run underneath it. */
@@ -411,8 +475,6 @@ body {
align-items: center;
gap: 4px;
flex-shrink: 0;
align-self: flex-start;
margin: -2px -6px 0 2px; /* pull into the padding so it hugs the corner */
padding: 3px 7px;
border: 1px solid transparent;
border-radius: 999px;
@@ -491,15 +553,26 @@ body {
.event-note-dates {
margin-left: 0; /* no room to right-align on a phone */
}
/* Phone: the cross alone, pushed to the right-hand end of the row and
padded out to a ~26px touch target. */
.event-note-close {
/* Phone: both pills shrink to their icon alone, on a ~26px touch target
each, and the stack is pushed to the right-hand end of the row. */
.event-note-actions {
margin: -4px -6px 0 auto;
gap: 2px;
}
.event-note-close {
padding: 8px;
}
.event-note-close-label {
display: none;
}
/* Same treatment for Quick Record — the notebook glyph alone. It keeps its
tint, so it still reads as the button of the two. */
.event-note-record {
padding: 7px;
}
.event-note-record-label {
display: none;
}
}
/* ── Note attached to the header ─────────────────────────────────────
@@ -679,8 +752,9 @@ body {
margin: 0;
padding: 10px 20px;
height: 72px;
background: #f5edd6;
border-bottom: 1px solid #e0d0a8;
background: #ebdcb4;
border-bottom: 1px solid #c9b08a;
box-shadow: 0 3px 8px rgba(30, 18, 8, 0.10);
}
.utci-burger {
@@ -694,8 +768,8 @@ body {
right: -100%;
width: 220px;
height: 100vh;
background: #f5edd6;
border-left: 1px solid #e0d0a8;
background: #ebdcb4;
border-left: 1px solid #c9b08a;
display: flex;
flex-direction: column;
align-items: flex-start;
assets/css/table.css
+102 -8
View File
@@ -735,10 +735,12 @@
}
.utci-thead-sticky {
position: sticky;
/* Clears the profile row pinned above it. DayTabs measures that row and
publishes its height (+ its 4px margin) as --profile-row-h — it is one
line or two depending on the labels, and the old fixed 28px left the
table header tucked under it. */
/* Sits flush under the profile row pinned above it. DayTabs measures that
row and publishes its height as --profile-row-h — it is one line or two
depending on the labels, and the old fixed 28px left the table header
tucked under it. The offset is the row's exact height, so the two bands
butt together; any padding here shows as a strip of the scrolling page
between them. */
top: var(--profile-row-h, 52px) !important;
z-index: 10;
}
@@ -1749,6 +1751,36 @@
animation: popup-open-below 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
/* ── WEEK AHEAD ROW POPUP ───────────────────────────────────────────────
Replaces the desktop-only `title=` tooltips the Week Ahead rows used to
carry: tap/click a row to open this. Reuses the .col-info-popup shell. */
.col-info-popup--week { width: 240px; }
.col-info-desc--lead {
margin-bottom: 8px;
font-weight: 600;
color: #4a3420;
}
.week-popup-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
}
.week-popup-list li {
display: grid;
grid-template-columns: 18px 1fr;
column-gap: 8px;
align-items: start;
font-family: Manrope, sans-serif;
font-size: 12px;
line-height: 1.45;
color: #6b4f2a;
}
.week-popup-icon { text-align: center; }
/* ── EVENT TAG POPUP — SLIDESHOW ────────────────────────────────────────
The stage holds the current slide. On transition, evTransition is set
to 'exiting' (fade out) then 'entering' (fade in) via the hook. */
@@ -1757,6 +1789,12 @@
.ev-popup-stage {
transition: opacity 0.38s ease;
/* Shrinkable and scrollable, so a long message runs out of room inside the
stage rather than pushing the Quick Record button below it out of the
card's 260px cap. min-height:0 because a flex item won't otherwise
shrink past its content. */
min-height: 0;
overflow-y: auto;
}
.ev-popup-entering {
animation: ev-fade-in 0.38s ease both;
@@ -1765,6 +1803,43 @@
animation: ev-fade-out 0.38s ease both;
}
/* Quick Record — sends the event showing to the journal (see quickRecord in
app.js). Same pill as the event banner's, sized for this popup: full-width
so it reads as the panel's action rather than a stray chip, and outside the
crossfading stage so it stays put while the events cycle. Never shrinks, so
it survives a long message scrolling inside .col-info-desc. */
.ev-popup-record {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
flex: 0 0 auto;
margin-top: 10px;
padding: 6px 10px;
border: 1px solid rgba(200, 146, 42, 0.45);
border-radius: 999px;
background: rgba(200, 146, 42, 0.13);
font-family: Manrope, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8a6414;
line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ev-popup-record:hover {
background: rgba(200, 146, 42, 0.28);
border-color: rgba(200, 146, 42, 0.75);
color: #6b4a0c;
}
.ev-popup-record:focus-visible {
outline: 2px solid #c8922a;
outline-offset: 1px;
}
/* Slideshow navigation dots */
.ev-popup-dots {
display: flex;
@@ -2623,6 +2698,17 @@
.fsc-card--now .fsc-time {
color: #c8922a;
}
/* Event emojis: centred row under the time. Fixed height so cards without
events (which still render an empty row) match those with them. */
.fsc-ev-row {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 16px;
margin: -2px 0;
white-space: nowrap;
}
.fsc-feel {
font-family: Manrope, sans-serif;
@@ -2694,9 +2780,16 @@
88px. It must not be flexible: the connector lines are drawn from the SVG's
top edge and have to stay flush under the cards, so any height the box does
not get is height the cold end loses off the bottom. */
/* Width: 0 + min-width: 100% rather than width: 100%. The SVG's viewBox gives
it an intrinsic width of height × 1000/80 (1100px at 88px), and inside the
max-content .forecast-simple-inner that set the row's minimum width — so at
3h/4h, where the cards need far less, they were stretched apart to 1100px
and the panel scrolled. This way only the cards size the row; the curve
just fills whatever width they settle on. */
.fsc-temp-curve {
display: block;
width: 100%;
width: 0;
min-width: 100%;
flex: 0 0 auto;
height: 88px;
}
@@ -2915,8 +3008,9 @@
.utci-table.utci-table-rotated tbody td.grp-label-fill {
padding: 5px 0;
min-width: 0;
background-color: #f0e4c4;
background-image: linear-gradient(var(--grp-tint, transparent), var(--grp-tint, transparent));
/* White across the hour columns - only the pinned group label keeps the
category shade. */
background: #ffffff;
/* One rule, along the very top of the category block — the same 2px
rgba(74,50,24,0.18) the unrotated table draws down the left of each new
column group (.col-group-start), so a group boundary looks the same
@@ -2925,7 +3019,7 @@
as a double rule around the label. Every cell in the row carries the edge
— under border-collapse:separate a <tr> border never paints, so the row's
rule has to be drawn cell by cell (see the row-separator rule above). */
border-top: 2px solid rgba(74, 50, 24, 0.18);
border-top: 2px solid #ffffff; /* white under the hour columns; the label keeps its shaded rule */
border-bottom: 0;
}
assets/css/ui.css
+70 -4
View File
@@ -119,9 +119,17 @@
color: #4a3420;
line-height: 1.55;
}
/* Footer row of a card — the visibility note (when there is one) and the
Quick Record pill share a line, and wrap onto two in a narrow column. */
.almanac-entry-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.almanac-entry-visibility {
display: inline-block;
margin-top: 5px;
font-family: Manrope, sans-serif;
font-size: 10px;
font-weight: 700;
@@ -133,6 +141,38 @@
border-radius: 3px;
padding: 2px 7px;
}
/* Quick Record — files this event under its peak date in the journal (see
quickRecord in app.js). Same brass pill as the event banner's and the
table popup's, sized down for the card. */
.almanac-entry-record {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
padding: 3px 8px;
border: 1px solid rgba(200, 146, 42, 0.45);
border-radius: 999px;
background: rgba(200, 146, 42, 0.13);
font-family: Manrope, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8a6414;
line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.almanac-entry-record:hover {
background: rgba(200, 146, 42, 0.28);
border-color: rgba(200, 146, 42, 0.75);
color: #6b4a0c;
}
.almanac-entry-record:focus-visible {
outline: 2px solid #c8922a;
outline-offset: 1px;
}
.almanac-entry-accent {
width: 3px;
align-self: stretch;
@@ -683,7 +723,6 @@
border-color: #c8922a;
color: #c8922a;
background: #f5edd6;
font-weight: 600;
}
.cs-vent.on:hover {
background: #fef3dc;
@@ -1331,12 +1370,21 @@
}
/* Site-wide footer - matches about and faq pages */
/* Bookends .utci-topnav at the other end of the page, with the same deep-honey
bar, warm border and shadow — the shadow just points up instead of down.
Full-bleed the same way the header is: cancel .utci-app's side padding and
its 32px bottom (base.css) so the bar reaches the left, right and bottom
edges, then pad itself back so the text lines up with the content above. */
.utci-site-footer {
margin: 32px calc(var(--app-pad) * -1) -32px;
position: relative; /* keeps the upward shadow over the content it covers */
text-align: center;
padding: 10px 1.5rem;
padding: 18px var(--app-pad);
font-size: 0.82rem;
color: #b09870;
border-top: 1px solid #e0d0a8;
background: #ebdcb4;
border-top: 1px solid #c9b08a;
box-shadow: 0 -3px 8px rgba(30, 18, 8, 0.10);
font-family: Manrope, sans-serif;
font-weight: 600;
text-transform: none;
@@ -1690,6 +1738,24 @@
}
.insight-panel--week .insight-row--week-note .insight-value::before { content: none; }
/* Score rows open an explanatory popup on click/tap (the icon and score
used to lean on `title=` tooltips, which never show on touch). */
.insight-panel--week .insight-row--clickable {
cursor: pointer;
border-radius: 5px;
margin: 0 -6px;
padding: 4px 6px;
transition: background 0.12s;
}
.insight-panel--week .insight-row--clickable:hover,
.insight-panel--week .insight-row--clickable.is-open {
background: #f3ead2;
}
.insight-panel--week .insight-row--clickable:focus-visible {
outline: 2px solid #b07d1e;
outline-offset: 1px;
}
/* How good the day is out of 100 — the bar does the comparing, the number
settles close calls. */
.week-score {