/* * social-embeds.css -- the styled floor for the archive's social embeds. * * WHY THIS EXISTS * The import left ~23.5k articles carrying live `
` * markup with no script to hydrate it. koi 3.31.0 has zero `.twitter-tweet` rules, so * those blockquotes currently inherit `modules/default/content-block.css`'s generic * pull-quote treatment: 720px wide, italic, grey, and with the tweet's own permalink * rendered as unstyled grey text that does not read as a link at all. So the tweet * looks like a misformatted editorial quote rather than a tweet. * * This sheet specialises that inherited card instead of inventing a new one, and it * is the state seen by non-consenting readers AND by embeds whose post has since * been deleted -- i.e. it is a permanent presentation layer, not a loading spinner. * Today's raw text stays exactly as crawlable as it is now; nothing here changes * markup. * * WIDTH IS FUNCTIONAL, NOT TASTE * 550px is X's own rendered widget width. Matching it means the blockquote -> iframe * swap on hydration does not jump horizontally. * * EVERY RULE IS SCOPED TO THE UNHYDRATED STATE * so that nothing here can leak onto a hydrated widget, whichever way the installed * version of the platform script marks or replaces the original blockquote. The four * platforms each do it differently, and the discriminator is chosen per platform * rather than guessed -- see each section. Three use an explicit `:not(...)`; * Bluesky cannot, because it reuses the blockquote's own class on the node that * replaces it, so there the `blockquote` element qualifier IS the discriminator. * * Specificity note: `.content-block blockquote` (0,1,1) and `.content-block * blockquote p` (0,1,2) are what we are overriding. `blockquote.twitter-tweet:not()` * is (0,2,1) and its `> p` form (0,2,2), so these win on specificity without a * single !important. * * ! That holds for X and TikTok. It does NOT hold for Instagram, whose embed code * ships a long inline `style` on the blockquote and on its attribution line, and an * inline style cannot be beaten from a stylesheet by any amount of specificity. The * Instagram section therefore uses !important, on decoration only -- read the note * there before adding more. * * NO-JS SAFETY * js/social-embeds.js adds a consent panel under each card, and that panel is the * only thing on the page that can load an embed. So this sheet must never hide * anything the panel would have replaced: with JS off, whatever is left visible here * IS the reader's entire experience of that embed. Hence only the platforms' own * empty loading skeletons are hidden, never a line carrying text or a link. * * Enqueued by ig-includes/social-embeds.php, only on singular views that carry embed * markup. Standalone module, versioned by filemtime() -- deliberately NOT registered * in any minify stylesheet list, so there is no stale prod blob to force-reminify and * no versionless @import cached for a year. */ /* =========================================================================== * X (Twitter). Discriminator: `.twitter-tweet-rendered`, which widgets.js sets on * SUCCESS only -- so a deleted tweet keeps the card, which is the right outcome. * ======================================================================== */ /* The card. */ blockquote.twitter-tweet:not(.twitter-tweet-rendered) { box-sizing: border-box; max-width: 550px; margin: 24px 0; padding: 14px 18px 12px; border: 1px solid #e3e5ee; border-left: 3px solid #7464de; border-radius: 0 8px 8px 0; background: #fafafa; font-size: 15px; line-height: 1.5; } /* Tweet text is speech, so it reads upright and in body colour -- not as the site's italic grey pull-quote. */ blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p { margin: 0 0 10px; font-style: normal; color: #181c27; } /* The attribution line -- "-- Author (@handle) " -- is always the last

of the blockquote (verified present in 342/342 embeds across a 300-post sample). That makes it the card's footer, and its existing permalink the reader's route to the tweet, with no markup injected: adding an anchor of our own inside the blockquote risks widgets.js's permalink detection, which reads the LAST anchor. */ blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:last-child { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e8eaf2; font-size: 13px; line-height: 1.45; color: #5a6075; } /* X mark, decorative: the line already names the author in text, so this carries no information of its own and is correctly invisible to assistive tech. */ blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:last-child::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%235b3fd6'%20d='M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z'/%3E%3C/svg%3E") center/contain no-repeat; } /* Make the permalink look like the outbound link it has always been. */ blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:last-child a { color: #5b3fd6; font-weight: 700; text-decoration: none; } blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:last-child a:hover, blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:last-child a:focus { color: #ff2f8e; text-decoration: underline; } /* Links inside the tweet body (hashtags, @mentions, t.co media links) are the tweet's own, not ours -- keep them readable but quieter than the footer CTA. */ blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:not(:last-child) a { color: #5b3fd6; text-decoration: none; } blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:not(:last-child) a:hover, blockquote.twitter-tweet:not(.twitter-tweet-rendered) > p:not(:last-child) a:focus { text-decoration: underline; } @media (max-width: 600px) { blockquote.twitter-tweet:not(.twitter-tweet-rendered) { padding: 12px 14px 10px; font-size: 14px; } } /* =========================================================================== * Instagram (~5.3k posts). Discriminator: none needed, and that is not laziness -- * embed.js REPLACES the blockquote with `