Fork of Chiri for Astro for my blog
0
fork

Configure Feed

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

style: improve toc animation

the3ash 9252c296 1ca94b38

+33 -14
+33 -14
src/components/ui/TableOfContents.astro
··· 163 163 } 164 164 }) 165 165 166 - // If no active item found and we're at the top, activate the title link 167 - if (!currentActive && window.pageYOffset < 200) { 166 + // Always highlight the first item ("Back to top") unless another TOC item is active 167 + if (!currentActive) { 168 168 const titleLink = document.querySelector('.toc-link.toc-title') 169 169 if (titleLink) { 170 170 titleLink.classList.add('active') ··· 232 232 display: block; 233 233 color: transparent; 234 234 text-decoration: none; 235 - transition: all 0.2s ease-out; 236 235 position: relative; 237 236 padding-left: 0; 238 237 height: 1.125rem; ··· 244 243 overflow: hidden; 245 244 white-space: nowrap; 246 245 text-overflow: ellipsis; 246 + transition: 247 + color 0.2s ease-out, 248 + font-size 0.2s ease-out, 249 + text-indent 0.2s ease-out; 247 250 } 248 251 249 - .toc-link:hover { 252 + .toc-link::after { 253 + content: attr(data-text); 254 + position: absolute; 255 + left: -0.5rem; 256 + top: 0; 250 257 font-family: var(--font-sans); 251 258 font-size: var(--font-size-s); 252 259 letter-spacing: var(--spacing-m); 253 - text-indent: 1.125rem; 254 - text-decoration: none; 260 + line-height: 1.125rem; 261 + color: var(--text-primary); 262 + opacity: 0; 263 + transition: 264 + opacity 0.2s ease-out, 265 + left 0.2s ease-out; 266 + pointer-events: none; 267 + overflow: hidden; 268 + white-space: nowrap; 269 + text-overflow: ellipsis; 270 + max-width: 100%; 271 + } 272 + 273 + .toc-link:hover::after { 274 + opacity: 1; 275 + left: -0.75rem; 276 + } 277 + 278 + .toc-level-0 .toc-link:hover::after { 279 + opacity: 0; 255 280 } 256 281 257 282 .toc-level-1 .toc-link:hover::before, 258 283 .toc-level-2 .toc-link:hover::before, 259 284 .toc-level-3 .toc-link:hover::before { 260 285 width: 0.75rem; 261 - } 262 - 263 - .toc-level-0 .toc-link:hover::after, 264 - .toc-level-1 .toc-link:hover::after, 265 - .toc-level-2 .toc-link:hover::after, 266 - .toc-level-3 .toc-link:hover::after { 267 - opacity: 1; 286 + transition: width 0.1s ease-out; 268 287 } 269 288 270 289 .toc-link.active { ··· 285 304 background-color: var(--text-tertiary); 286 305 transform: translateY(-50%); 287 306 opacity: 0.4; 307 + transition: all 0.1s ease-out; 288 308 } 289 309 290 310 .toc-link:hover::before, ··· 293 313 background-color: var(--text-primary); 294 314 } 295 315 296 - /* Fixed positioning */ 297 316 .toc-container.fixed-position { 298 317 position: fixed; 299 318 top: 12rem; /* Position below BackButton */