forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
style: improve toc animation
+33
-14
+33
-14
src/components/ui/TableOfContents.astro
+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 */