style: improve toc animation
the3ash committed
Jul 11, 2025 at 13:34 UTC
9252c296d4077fd6921b57e18490bc2d231e0050
1 file changed
+33
-14
src/components/ui/TableOfContents.astro
+33
-14
@@ -163,8 +163,8 @@ import { SITE } from '@/config'
163
}
164
})
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
const titleLink = document.querySelector('.toc-link.toc-title')
169
if (titleLink) {
170
titleLink.classList.add('active')
@@ -232,7 +232,6 @@ import { SITE } from '@/config'
232
display: block;
233
color: transparent;
234
text-decoration: none;
235
- transition: all 0.2s ease-out;
235
position: relative;
236
padding-left: 0;
237
height: 1.125rem;
@@ -244,27 +243,47 @@ import { SITE } from '@/config'
243
overflow: hidden;
244
white-space: nowrap;
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;
250
}
251
249
- .toc-link:hover {
252
+ .toc-link::after {
253
+ content: attr(data-text);
254
+ position: absolute;
255
+ left: -0.5rem;
256
+ top: 0;
257
font-family: var(--font-sans);
258
font-size: var(--font-size-s);
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;
280
}
281
282
.toc-level-1 .toc-link:hover::before,
283
.toc-level-2 .toc-link:hover::before,
284
.toc-level-3 .toc-link:hover::before {
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;
287
}
288
289
.toc-link.active {
@@ -285,6 +304,7 @@ import { SITE } from '@/config'
304
background-color: var(--text-tertiary);
305
transform: translateY(-50%);
306
opacity: 0.4;
307
+ transition: all 0.1s ease-out;
308
}
309
310
.toc-link:hover::before,
@@ -293,7 +313,6 @@ import { SITE } from '@/config'
313
background-color: var(--text-primary);
314
}
315
296
- /* Fixed positioning */
316
.toc-container.fixed-position {
317
position: fixed;
318
top: 12rem; /* Position below BackButton */