jeremy.herve.bzh / skypress
A calm place to write long-form, and publish it to the open social web. skypress.blog/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Reveal Bluesky + external-link icons on article mentions on hover

Match the profile-page author handle link more fully: on hover/focus the mention
brightens to --sun and a Bluesky logo (left) and external-arrow (right) slide in.
They're drawn as currentColor mask pseudo-elements (::before/::after) because the
mention arrives as sanitised HTML and can't carry nested <svg> children; the icons
inherit the link colour and collapse to zero width at rest so the mention reads as
plain inline text. The sanitiser already gives the anchor target="_blank" + safe rel,
so mentions open in a new tab. Verified in the browser (hover reveals both icons in
--sun).

author
Jeremy Herve date (Jun 12, 2026, 8:59 PM +0200) commit c8e4693c parent 47d8a03b
+50 -2
+50 -2
src/pages/[author]/[slug]/[rkey].astro
··· 264 264 .reader__article :global(a) { 265 265 color: var(--sun); 266 266 } 267 - /* @mentions read as part of the prose, brightening to --sun on hover — the same 268 - quiet treatment as the author handle link on profile pages. */ 267 + /* @mentions read as part of the prose and brighten to --sun on hover — the same 268 + treatment as the author handle link on profile pages. The Bluesky logo (left) and an 269 + external-link arrow (right) slide in on hover/focus, drawn as mask pseudo-elements 270 + because the mention arrives as sanitised HTML and can't carry nested <svg> children. 271 + (The sanitiser already gives the anchor target="_blank" + a safe rel.) */ 269 272 .reader__article :global(a.skypress-mention) { 270 273 color: inherit; 271 274 text-decoration: none; 272 275 transition: color 0.15s ease; 273 276 } 277 + .reader__article :global(a.skypress-mention)::before, 278 + .reader__article :global(a.skypress-mention)::after { 279 + content: ""; 280 + display: inline-block; 281 + width: 0; 282 + height: 0.8em; 283 + opacity: 0; 284 + vertical-align: -0.1em; 285 + background-color: currentColor; 286 + -webkit-mask-repeat: no-repeat; 287 + mask-repeat: no-repeat; 288 + -webkit-mask-position: center; 289 + mask-position: center; 290 + -webkit-mask-size: contain; 291 + mask-size: contain; 292 + transition: 293 + opacity 0.15s ease, 294 + width 0.15s ease, 295 + margin 0.15s ease, 296 + transform 0.15s ease; 297 + } 298 + .reader__article :global(a.skypress-mention)::before { 299 + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 568 501'%3E%3Cpath d='M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.66 0 75.293 0 57.947 0-28.906 76.135-1.611 123.121 33.664Z'/%3E%3C/svg%3E"); 300 + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 568 501'%3E%3Cpath d='M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.66 0 75.293 0 57.947 0-28.906 76.135-1.611 123.121 33.664Z'/%3E%3C/svg%3E"); 301 + transform: translateX(-3px); 302 + } 303 + .reader__article :global(a.skypress-mention)::after { 304 + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); 305 + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); 306 + transform: translate(2px, 2px); 307 + } 274 308 .reader__article :global(a.skypress-mention:hover), 275 309 .reader__article :global(a.skypress-mention:focus-visible) { 276 310 color: var(--sun); 311 + } 312 + .reader__article :global(a.skypress-mention:hover)::before, 313 + .reader__article :global(a.skypress-mention:focus-visible)::before { 314 + width: 0.85em; 315 + margin-right: 0.2em; 316 + opacity: 1; 317 + transform: translateX(0); 318 + } 319 + .reader__article :global(a.skypress-mention:hover)::after, 320 + .reader__article :global(a.skypress-mention:focus-visible)::after { 321 + width: 0.85em; 322 + margin-left: 0.2em; 323 + opacity: 1; 324 + transform: translate(0, 0); 277 325 } 278 326 /* First paragraph: a quiet editorial lead-in */ 279 327 .reader__article :global(p:first-of-type) {