/* The Sky page: a one-page showcase of the weewx-skyfield almanac. Copyright (C)2022-2026 by John A Kline (john@johnkline.com) Distributed under the terms of the GNU Public License (GPLv3) */ :root{ --night:#0A0F22; --vault:#111834; --ink:#E9E4D4; --muted:#C0C5D9; --brass:#E0C27F; --line:#2A3358; color-scheme: dark; } /* The light theme (theme = light, or auto with the sun up): the paper-atlas plate, matching the panels' 'light' palette. The template resolves the report's theme option at generation time into this class on -- it must sit on the root element so color-scheme (and the canvas backdrop it governs) flips with it. */ :root.theme-light{ --night:#EFECE2; --vault:#FFFFFF; --ink:#1D2C4E; --muted:#5C6672; --brass:#A44A08; --line:#C9CFD8; color-scheme: light; } *{box-sizing:border-box} body{ background:var(--night); color:var(--ink); font-family: Charter, Georgia, 'Times New Roman', serif; margin:0; padding:32px 20px 40px; line-height:1.55; } .page{max-width:1560px; margin:0 auto; display:flex; flex-direction:column; gap:30px} .mono{font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums} .smallcaps{font-variant-caps: small-caps; letter-spacing:.14em} header{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:22px} h1{font-family: Georgia, 'Times New Roman', serif; font-variant-caps: small-caps; letter-spacing:.16em; font-weight:400; font-size:clamp(1.6rem, 4vw, 2.4rem); margin:0; color:var(--ink); text-wrap:balance} h1 .over{color:var(--brass)} .sub{color:var(--muted); margin-top:6px; font-size:.95rem} .moonbox{display:flex; align-items:center; gap:14px} .moonbox .mlabel{text-align:right} .moonbox .mname{font-variant-caps:small-caps; letter-spacing:.1em} .moonbox .mpct{color:var(--muted); font-size:.85rem} .countdown{display:flex; gap:10px; flex-wrap:wrap} .count{border:1px solid var(--line); padding:7px 12px; display:flex; gap:8px; align-items:baseline; background:var(--vault)} .count .k{color:var(--muted); font-variant-caps:small-caps; letter-spacing:.1em; font-size:.8rem} .count .v{font-size:.9rem} .count .d{color:var(--brass); font-size:.8rem} section{background:var(--vault); border:1px solid var(--line); padding:20px 22px 16px} .eyebrow{font-variant-caps:small-caps; letter-spacing:.22em; color:var(--brass); font-weight:400; font-size:.85rem; margin:0 0 4px} .caption{color:var(--muted); font-size:.85rem; margin:10px 0 0; max-width:68ch} /* The lunation panel's apsis footer: a brass supermoon callout (rendered only when one is upcoming) over the quiet perigee/apogee line. */ .supermoon{color:var(--brass); font-weight:700; font-size:.95rem; margin:10px 0 0} .apsis{color:var(--muted); font-size:.85rem; margin:8px 0 0} .caption code{font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.92em; color:var(--ink); background:none} /* Two tracks on wide screens: primary (dome, ribbons, table) beside a right rail (chips, orrery, analemma). Below the breakpoint the tracks dissolve (display:contents) and the sections reorder into one column. */ .main{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:30px; align-items:start} .primary, .rail{display:flex; flex-direction:column; gap:30px; min-width:0} /* The two sky charts are the same 680-unit drawing and cap together, so they are the same size one above the other. Uncapped the pass chart would reach 1044px on a wide screen and stand half again as large as the dome above it. */ .sec-dome svg, .sec-passchart svg{max-width:820px; margin:0 auto} @media (max-width: 1159px){ /* align-items:start would carry over from the grid rule and shrink the * flex-column items to fit their content; stretch restores full width */ .main{display:flex; flex-direction:column; align-items:stretch} .primary, .rail{display:contents} /* EVERY section needs a number here: order defaults to 0, so a * section left out of this list sorts ahead of the dome. */ .sec-dome{order:1} .sec-chips{order:2} .sec-satellites{order:3} .sec-passchart{order:4} .sec-sunpath{order:5} .sec-ribbons{order:6} .sec-daylength{order:7} .sec-eot{order:8} .sec-lunation{order:9} .sec-orrery{order:10} .sec-analemma{order:11} .sec-table{order:12} /* The pass chart is not a square chart: capping it at 560 drew it at 82% with 8.2px labels. It caps with the dome, beside which it now sits. */ .sec-sunpath svg, .sec-orrery svg, .sec-analemma svg{max-width:560px; margin:0 auto} } /* The two frames. Every chart panel carries both drawings -- the wide one this page has always shown and the narrow one built for a phone (see the `narrow` argument in docs/panels.md) -- and the viewport picks which to show. Nothing is fetched and nothing is scripted: the drawing the reader does not need is simply not displayed. The breakpoint is 600px because that is where the wide drawings' labels fall below 11px on the glass; it is deliberately well under the 1159px layout breakpoint, since a tablet in portrait has room for the wide drawings and should get them. */ .sky-phone{display:none} @media (max-width: 600px){ .sky-desk{display:none} .sky-phone{display:block} /* The narrow frame is 360 user units across and sets its type at 15 of them, which reads at 11px only if the drawing gets roughly 270px of a 320px screen. Padding is what stands between the two, so the phone layout spends less of it than the desk layout does. */ body{padding:20px 10px 28px} section{padding:14px 12px 12px} header{padding-bottom:16px} } .chips{display:flex; flex-direction:column; gap:9px} .chip{display:flex; gap:10px; align-items:flex-start; border-bottom:1px solid var(--line); padding:7px 2px} .chip:last-child{border-bottom:none} /* The chip and table swatches. Their COLOR arrives inline from the panel, as the custom properties --sky-dot and (pale bodies on the paper plate) --sky-dot-ring, so that `background` itself stays free: an inline background would outrank every rule a consuming skin could write, and these swatches are meant to be themeable alongside the SVG panels' role classes. A skin that themes them overrides `background` on [data-body=""] .dot, which beats this rule on ordinary specificity. New in 2.4; a skin that copies rules piecemeal needs this one, or its swatches lose their color. */ .dot{width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; margin-top:6px; background:var(--sky-dot); box-shadow:inset 0 0 0 1.5px var(--sky-dot-ring, transparent)} .chipname{font-variant-caps:small-caps; letter-spacing:.1em} .chipline{font-size:.85rem} .chipsub{font-size:.78rem; color:var(--muted)} /* The pass chart's dated head line: the panel's whole point is that the * chart belongs to a future minute, so the date reads before the sky. */ .passhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; flex-wrap:wrap} .passname{font-variant-caps:small-caps; letter-spacing:.1em} .passwhen{font-size:.85rem; color:var(--brass)} svg{width:100%; height:auto; display:block} svg text{fill:var(--ink)} .cardinal{font-size:14px; fill:var(--brass); letter-spacing:.1em} /* The sky charts' small labels: .skylab is the scoped hook for text drawn on the dome gradient rather than on the panel surface, whose rim is much lighter. From 2.2 it carried a lift of its own, because --muted reached only 3.70:1 there. Every text color now clears WCAG 4.5 and APCA Lc 60 on the panel AND on the dome, on both plates, so the hook points back at --muted; it stays so a skin can still style dome text apart. */ .gridlab{font-size:10px; fill:var(--muted)} /* Labels that sit ON the twilight bands rather than on the panel: the sun path's hour numbers, which follow the arc down through the bands, and the moon's times. The panel-surface gray reads 3.59:1 against the night plate's day band and 1.03 against the paper plate's astronomical one, so neither plate can use it here. The night plate has ink, which clears every one of its bands at 8.52 or better, over a casing in its night band's color that covers the sun's arc under the hour numbers. The paper plate has nothing that clears them -- not muted, not ink, not black -- so its labels read against a casing of their own instead (see _band_text), which is what every other mark over these bands already does. Like .skylab in 2.2, this rides alongside .gridlab: a skin with no .bandlab rule gets the gridlab gray and merely misses the lift. New in 2.4. */ .bandlab{fill:var(--ink)} :root.theme-light .bandlab{fill:var(--muted)} .skylab{fill:var(--muted)} .moonlab{font-size:10px; fill:#C9D0DA} /* The moon's times on the sun-path chart sit ON the twilight bands, not on the panel, and no single color clears 4.5:1 against all five of the paper plate's -- not muted, not ink, not black. So the label reads against its own casing (see _band_text) and takes the same gray every other label on that chart wears; the moon's #767E8A is its dot's RIM color, which held 4.10 on white and 1.23 on the nautical band. Fixed in 2.4. */ :root.theme-light .moonlab{fill:var(--muted)} .starlab{font-size:10px; fill:var(--muted); font-family:Georgia, serif; font-style:italic} .conlab{font-size:10px; fill:#BBC5E3; font-family:Georgia, serif; font-style:italic; letter-spacing:.14em; text-transform:uppercase} :root.theme-light .conlab{fill:#57637B} .bodylab{font-size:11px; fill:var(--ink); font-family:Georgia, serif} .satlab{fill:var(--brass); font-family:Georgia, serif} .rowlab{font-size:13px; fill:var(--ink); font-family:Georgia, serif; font-variant-caps:small-caps; letter-spacing:.06em} .timelab{font-size:11px; fill:var(--muted)} .nowlab{font-size:10px; fill:var(--brass)} .todaylab{font-size:11px; fill:var(--brass); font-family:Georgia, serif; font-style:italic} .tablewrap{overflow-x:auto} table{border-collapse:collapse; width:100%; font-size:.85rem} th{font-variant-caps:small-caps; letter-spacing:.1em; font-weight:400; color:var(--muted); text-align:right; padding:6px 10px; border-bottom:1px solid var(--brass)} th:first-child{text-align:left} td{padding:6px 10px; text-align:right; border-bottom:1px solid var(--line); font-family:ui-monospace, Menlo, Consolas, monospace; font-variant-numeric:tabular-nums} td.tname{text-align:left; font-family:Georgia, serif; font-variant-caps:small-caps; letter-spacing:.06em} td .dot{margin-right:8px; margin-top:0; vertical-align:baseline} footer{color:var(--muted); font-size:.82rem; border-top:1px solid var(--line); padding-top:16px; text-align:center} footer .sep{color:var(--brass); padding:0 6px} footer a{color:inherit; text-underline-offset:3px; text-decoration-color:var(--brass)} footer a:hover{color:var(--brass)} /* The tap tooltip (sky.js): the same text as a mark's hover , shown as a floating chip when a finger has no hover to offer. */ .skytip{position:fixed; display:none; z-index:10; max-width:min(340px, 90vw); background:var(--vault); color:var(--ink); border:1px solid var(--brass); padding:6px 10px; font-size:.85rem; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.4)} @media (prefers-reduced-motion: no-preference){ .nowpulse{animation:pulse 3s ease-in-out infinite} @keyframes pulse{50%{opacity:.55}} }