thepraandClaude Opus 5.5
2024798732
What other platforms send now shows as they meant it: - custom emoji (a post's or account's :shortcode:) as their pictures in posts, names, content warnings, bios and fields: only the shortcodes the server listed, only http(s) pictures, never inside a tag, the shortcode kept as alt text; - a threadiverse post's downvotes next to its favourites; - blurhash placeholders until a picture loads (wwwroot/js/blurhash.js, a small decoder that watches the page), and a picture's focal point; - an event's online link, participants and capacity, and whether it is tentative or cancelled. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
122 lines
3.1 KiB
CSS
122 lines
3.1 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;
|
|
}
|
|
|
|
/* a custom emoji (CustomEmojis): the height of the text it sits in */
|
|
.custom-emoji {
|
|
display: inline;
|
|
height: 1.3em;
|
|
width: auto;
|
|
max-width: 3em;
|
|
vertical-align: -0.25em;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|