diff options
| author | Adam Soltys <[email protected]> | 2026-09-27 19:10:05 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-27 19:10:05 -0700 |
| commit | 55cb118f25ddd69ffe9cc4bd44a36b1e689ee19e (patch) | |
| tree | 2446aaf0c3827ac124d9c75d967b62a8ef6d6f5a /src/style.css | |
| parent | 10b7a97a3ecfc2f8e084c81520c78942ac745ec5 (diff) | |
| download | coinosv3-55cb118f25ddd69ffe9cc4bd44a36b1e689ee19e.tar.gz coinosv3-55cb118f25ddd69ffe9cc4bd44a36b1e689ee19e.zip | |
Links in posts show as the cards their pages describe.
A plain link becomes an Open Graph card: picture, title, a line, the site.
The registrar fetches the page on the reader's behalf (names/preview.js,
GET /preview?url=): only public hosts, at most half a megabyte of HTML,
cached a day. The client warms the card with the rest of the post so the row
arrives whole, keeps a few hundred cards across sessions, and leaves a page
with nothing to say as a bare link. Pictures and YouTube keep their boxes.
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VhUKyXKtsJ67QAFfb7QR9D
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 15 |
1 files changed, 15 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 1e5a1c7..11b9cf0 100644 --- a/src/style.css +++ b/src/style.css @@ -833,6 +833,21 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } padding: 4px 7px; border-radius: 8px; background: rgba(18, 18, 18, .6); text-decoration: none; } .yt-open:hover { background: rgba(18, 18, 18, .85); text-decoration: none; } +/* A link, as the card its page describes: picture on top, title, a line, + the site. The whole card is the link. */ +.link-card { + display: block; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; + overflow: hidden; color: inherit; text-decoration: none; background: var(--surface2); +} +.link-card:hover { text-decoration: none; border-color: var(--line-strong); } +.link-thumb { display: block; width: 100%; max-height: 220px; object-fit: cover; background: var(--surface2); } +.link-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } +.link-title, .link-desc { + display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; +} +.link-title { font-weight: 600; line-height: 1.3; } +.link-site { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.quote-card .link-thumb { max-height: 140px; } /* the profile notes feed: page-scrolled (no inner scrollbox); on phones it runs edge to edge — the card walls step outside #app's padding */ .notes-feed { padding: 2px 14px; } |