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.

Keep mention hover icons from reflowing following text

The previous version animated the icon pseudo-elements' width 0 -> 0.85em on
hover, which pushed any text after the mention sideways (only unnoticed because
the test mention ended its paragraph). Reserve the icon width + margin permanently
(invisible at rest via opacity 0) and animate only opacity + transform on hover —
neither affects layout, so following text stays put. Same technique the author
handle link uses. Color stays var(--sun)/currentColor, i.e. the per-publication
theme accent. Verified in-browser: trailing text holds its x-position between rest
and hover while both icons fade in.

author
Jeremy Herve date (Jun 12, 2026, 9:04 PM +0200) commit 2b145558 parent c8e4693c
+10 -12
+10 -12
src/pages/[author]/[slug]/[rkey].astro
··· 278 278 .reader__article :global(a.skypress-mention)::after { 279 279 content: ""; 280 280 display: inline-block; 281 - width: 0; 281 + /* Width + margin are RESERVED permanently (not animated) so revealing the icons on 282 + hover never reflows text that follows the mention — only opacity + transform 283 + animate, and neither affects layout. */ 284 + width: 0.8em; 282 285 height: 0.8em; 283 286 opacity: 0; 284 287 vertical-align: -0.1em; ··· 291 294 mask-size: contain; 292 295 transition: 293 296 opacity 0.15s ease, 294 - width 0.15s ease, 295 - margin 0.15s ease, 296 297 transform 0.15s ease; 297 298 } 298 299 .reader__article :global(a.skypress-mention)::before { 300 + margin-right: 0.15em; 299 301 -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 302 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 303 transform: translateX(-3px); 302 304 } 303 305 .reader__article :global(a.skypress-mention)::after { 306 + margin-left: 0.15em; 304 307 -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 308 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); 309 + transform: translate(-2px, 2px); 307 310 } 308 311 .reader__article :global(a.skypress-mention:hover), 309 312 .reader__article :global(a.skypress-mention:focus-visible) { 310 313 color: var(--sun); 311 314 } 315 + /* Hover/focus only fades + settles the icons (opacity + transform) — width and margin 316 + stay fixed so nothing after the mention shifts. */ 312 317 .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 - } 318 + .reader__article :global(a.skypress-mention:focus-visible)::before, 319 319 .reader__article :global(a.skypress-mention:hover)::after, 320 320 .reader__article :global(a.skypress-mention:focus-visible)::after { 321 - width: 0.85em; 322 - margin-left: 0.2em; 323 321 opacity: 1; 324 322 transform: translate(0, 0); 325 323 }