thepraandClaude Opus 5.5
0f68e74e38
The Sun lights the globe where it really is (wwwroot/js/sun.js, the Astronomical Almanac's low-precision solar coordinates): the day map shaded by the Sun's height and the Earth–Sun distance, warm city lights on the night side, and a twilight blend about 13° wide between them. It shows now, refreshed every 30 s, or the moment of the hovered, focused or pinned post: a click on a card pins it, and the subsolar point travels there the shorter way round. The panel's top corner shows that moment, the phase of the day and solar time at the post's place, and the season in its hemisphere (or in both, for a post without a place). Its tooltip shows the subsolar point, declination, axial tilt, distance, irradiance, day length and the next equinox or solstice. Land borders are thin paths. Country names are in the reader's language and appear as the camera comes closer: largest countries first, away from the globe's edge, never overlapping. They come from world-atlas 2.0.2 (Natural Earth 1:50m), prepared by tools/globe/prepare-countries.py, and are vendored with their hashes in SOURCES.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
112 lines
2.8 KiB
CSS
112 lines
2.8 KiB
CSS
/* The feed: post HTML as PrivaPub's Mastodon API sends it (already sanitized; Mastodon's link markup hides the
|
|
scheme in .invisible and shortens long links with .ellipsis), the globe's point labels, which replace the look of
|
|
globe.gl's own tooltip box, its CDN groups and country names, and the card it is pinned to. */
|
|
@layer components {
|
|
.post-content p {
|
|
margin-block: 0 0.5em;
|
|
}
|
|
|
|
.post-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post-content a {
|
|
color: var(--color-primary);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.post-content a.mention,
|
|
.post-content a.hashtag {
|
|
text-decoration-line: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.post-content .invisible {
|
|
display: none;
|
|
}
|
|
|
|
.post-content .ellipsis::after {
|
|
content: "…";
|
|
}
|
|
|
|
.post-content blockquote {
|
|
border-inline-start: 3px solid var(--neo-strong);
|
|
padding-inline-start: 0.75rem;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.post-content pre,
|
|
.post-content code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 0.85em;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.post-content ul {
|
|
list-style: disc;
|
|
padding-inline-start: 1.25rem;
|
|
}
|
|
|
|
.post-content ol {
|
|
list-style: decimal;
|
|
padding-inline-start: 1.25rem;
|
|
}
|
|
|
|
/* daisyUI's tooltip is a pill; a block of nerd stats needs the corners of a box. */
|
|
.tooltip-content:has(> .nerd-stats) {
|
|
border-radius: var(--radius-box);
|
|
padding: 0.5rem 0.65rem;
|
|
max-width: min(22rem, 90vw);
|
|
}
|
|
|
|
.float-tooltip-kap {
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.globe-label {
|
|
font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
padding: 0.4rem 0.55rem;
|
|
border-radius: 0.5rem;
|
|
color: var(--color-base-content);
|
|
background: var(--color-base-100);
|
|
box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
|
|
}
|
|
|
|
.globe-label span {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
/* A CDN's group on the globe: a label in orbit, not a place. */
|
|
.globe-cdn {
|
|
font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
white-space: nowrap;
|
|
padding: 0.15rem 0.45rem;
|
|
border-radius: 999px;
|
|
color: var(--color-base-content);
|
|
background: color-mix(in oklab, var(--color-base-100) 80%, transparent);
|
|
box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* A country's name on the globe, on the land by day and by night alike: light text in a dark halo. The globe sets
|
|
its size and opacity by zoom, and hides it through visibility (the label renderer owns display). */
|
|
.globe-country {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
letter-spacing: 0.03em;
|
|
white-space: nowrap;
|
|
color: rgb(255 255 255 / 0.9);
|
|
text-shadow: 0 0 2px rgb(0 0 0 / 0.95), 0 0 6px rgb(0 0 0 / 0.6);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* The card the globe is pinned to (a click on it): its moment and place stay on the globe. */
|
|
[data-globe-pinned] {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|