The fixed page background: Coral Sunrise in light theme, Dusk in dark. A dedicated position: fixed layer, not a scroll-mapped background, so this same range is always what's behind the top and bottom of the viewport regardless of scroll position.
--text-muted holds 4.5:1 here (roughly the top 10% in light theme; the whole range in dark theme).--text-muted-on-gradient here instead, for muted text sitting directly on the raw background rather than an opaque card.--bg-primary stays defined and unchanged as the flat fallback (print, and anywhere the gradient must never appear).
All text uses Inter. Code uses JetBrains Mono.
Base unit is 4px. All spacing values are multiples of 4.
16px radius, standard padding. Used for most content containers.
14h 32m of daylight today. That's 2m 14s more than yesterday.
24px radius for prominent, hero-level content blocks.
Highlight boxes and testimonials use a bolder uniform border, not a coloured leading edge. A coloured border-left (or border-top) against an otherwise uniform border-radius clips into a rounded pill at the corners, the same admonition-block look most AI-generated interfaces default to. Every corner of the border stays the same weight here instead.
This card is distinguished from the ones above only by its border colour and weight, not by a filled background tint or an asymmetric radius.
| Date | Sunrise | Sunset | Day Length | Delta |
|---|---|---|---|---|
| 12 Feb | 07:32 | 17:14 | 9h 42m | +2m 31s |
| 13 Feb | 07:30 | 17:16 | 9h 46m | +2m 33s |
| 14 Feb | 07:28 | 17:18 | 9h 50m | +2m 35s |
| 15 Feb | 07:26 | 17:20 | 9h 54m | +2m 37s |
| 16 Feb | 07:24 | 17:22 | 9h 58m | +2m 39s |
Use the calculateSunrise() function with a LatLng parameter to get the sunrise time for any location.
// Calculate solar position for a given time and location
function getSolarPosition(date, latitude, longitude) {
const dayOfYear = getDayOfYear(date);
const declination = 23.45 * Math.sin((360/365) * (dayOfYear - 81));
const hourAngle = getHourAngle(date, longitude);
return {
elevation: calculateElevation(latitude, declination, hourAngle),
azimuth: calculateAzimuth(latitude, declination, hourAngle)
};
}Here is an example link within body text. Links use the accent colour and gain an underline on hover. They should be the only non-primary colour in body text.
A bordered square with the number in the code font, not a filled circle. The same reasoning as the callout card above: a solid-fill shape reads as a generic AI-generated step indicator.
Set a location. Enter coordinates or use the browser's geolocation.
Calculate solar times. Sunrise, sunset, dawn, and dusk for the selected date.
Track the change. See how day length shifts day over day through the year.
Content above the divider.
Content below the divider.