-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.webc
596 lines (575 loc) · 22.4 KB
/
index.webc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
---
layout: base
---
<header>
<div aria-hidden="true" style="font-size: 2em">👀</div>
<h1>scrollspy navigation component</h1>
<p>Web component for sticky-positioned page anchor menus</p>
<ul role="list">
<li>
<a href="https://github.com/hexagoncircle/scrollspy-nav">
<svg
width="98"
height="96"
viewBox="0 0 98 96"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="#24292f"
/>
</svg>
<span>Go to the repo</span>
</a>
</li>
<li>
<a href="https://ryanmulligan.dev/blog/scrollspy-nav/">
<svg
xmlns="http://www.w3.org/2000/svg"
width="36"
height="36"
fill="#2f2727"
viewBox="0 0 256 256"
>
<path
d="M208,24H72A32,32,0,0,0,40,56V224a8,8,0,0,0,8,8H192a8,8,0,0,0,0-16H56a16,16,0,0,1,16-16H208a8,8,0,0,0,8-8V32A8,8,0,0,0,208,24Zm-24,96-25.61-19.2a4,4,0,0,0-4.8,0L128,120V40h56Z"
></path>
</svg>
<span>Read the blog post</span>
</a>
</li>
</ul>
</header>
<main>
<section>
<scrollspy-nav role="navigation" aria-label="Navigation test one">
<ul>
<li>
<a href="#section-1">Products</a>
</li>
<li>
<a href="#section-2">A Super Long Section Title</a>
</li>
<li>
<a href="#section-3">Services</a>
</li>
<li>
<a href="#section-4">Testimonials</a>
</li>
<li>
<a href="#section-5">Another Long Section Title</a>
</li>
<li>
<a href="#section-6">Contact us</a>
</li>
</ul>
</scrollspy-nav>
<article id="section-1">
<h2>Products</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, quaerat
veritatis maxime delectus, amet veniam omnis repellendus dolorem
recusandae, libero obcaecati. Aspernatur, consequatur! Ex provident
molestias optio cum eum? Esse?
</p>
<p>
Sed sit veritatis pariatur iste assumenda fugiat repellat commodi
perspiciatis. Deserunt vel corrupti est? Aut harum ducimus illo,
exercitationem nisi facilis molestiae, repellendus accusamus voluptates
provident nihil aliquid, quo nulla!
</p>
<p>
Esse facere est unde, temporibus exercitationem recusandae aspernatur
quidem sequi sapiente commodi doloribus atque minus quibusdam nesciunt?
Voluptate explicabo libero expedita perferendis fugit temporibus aliquid
tempore distinctio? Odit, iste enim!
</p>
<p>
Quas ipsa nihil inventore obcaecati laborum voluptatem, magni molestias
dignissimos placeat commodi ut ipsam adipisci tempora labore rerum
facilis officiis, vel esse, doloribus delectus? Excepturi sunt quaerat
error inventore omnis?
</p>
<p>
Suscipit iusto dolorem magnam recusandae aut iure incidunt illum
obcaecati aliquam ratione quis fugiat, pariatur reprehenderit quae
deserunt dolorum error labore assumenda officiis maiores, eaque fuga
quasi. Nemo, dolorem consequatur?
</p>
</article>
<article id="section-2">
<h2>A Super Long Section Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur porro
quae modi veniam ad neque sunt similique vel necessitatibus ratione,
fugiat aperiam consequuntur, eveniet, optio dignissimos qui ducimus
quaerat numquam.
</p>
<p>
Itaque ducimus fugiat consequatur quod esse sint minima. Animi quos non
est accusamus vitae aspernatur veniam obcaecati. Dolore inventore nihil
iusto. Illo repellendus cupiditate tenetur harum nemo corporis est
maiores.
</p>
<p>
Eum, tenetur ullam in dolor perferendis blanditiis quas repellat magni
modi minima voluptate, minus eveniet dolores sed voluptas? Repellendus
provident fugiat quam voluptate autem repellat ea! Beatae tempore
ratione quam?
</p>
<p>
Nobis reiciendis dolorum voluptatem cum beatae temporibus repudiandae
voluptas perspiciatis rerum in minima doloremque repellendus sequi
dolorem molestias ullam labore maiores consequatur assumenda earum rem
dicta aspernatur, blanditiis nemo. Voluptas.
</p>
</article>
<article id="section-3">
<h2>Services</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates est
harum doloremque nobis doloribus dicta labore dignissimos laborum
tempore. Quod nam corporis quaerat aspernatur voluptate suscipit dolorum
consectetur laudantium nisi.
</p>
<p>
Ratione odio, nesciunt, soluta dolorem voluptatibus nihil harum deserunt
doloremque, non possimus sequi facilis natus laudantium temporibus
doloribus dolores veniam amet optio omnis! At fuga, deleniti laborum
harum obcaecati deserunt!
</p>
<p>
Voluptatibus doloribus eveniet est nostrum, minus fuga, non, repellat
quasi expedita pariatur commodi culpa illo! Consequatur dicta facilis
modi ipsum perferendis vel minima atque nobis nostrum quibusdam earum,
tenetur temporibus.
</p>
</article>
<article id="section-4">
<h2>Testimonials</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus provident
nobis, iste ratione sint a atque ullam fugit, at ut ducimus voluptatem.
Commodi facilis, expedita consectetur ipsam libero cum architecto!
</p>
<p>
Maxime placeat itaque sunt temporibus perferendis et delectus debitis,
assumenda id dignissimos non nisi deserunt ipsa doloremque cupiditate
quae corrupti natus commodi. Aperiam numquam eum id odio veniam suscipit
sapiente!
</p>
<p>
Nihil quasi molestias maxime odio nulla deserunt ea maiores rem corrupti
reiciendis ab nostrum assumenda iusto placeat, qui, quam quo! Eligendi
voluptates culpa repellat libero in architecto, possimus recusandae
asperiores?
</p>
<p>
Commodi, ut provident, odio veniam minus cumque similique aut amet
dolore ex doloribus dignissimos autem omnis facilis repellendus
exercitationem consequatur deleniti ad voluptas quod facere! Quas quae
minima quod tenetur.
</p>
<p>
A est laboriosam ad! Officia beatae dolor aut magni esse. Dignissimos,
hic culpa autem possimus recusandae soluta fugit rem non quod ratione
praesentium quam expedita amet dolorum est laudantium incidunt.
</p>
</article>
<article id="section-5">
<h2>Another Long Section Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias rerum
consequatur corrupti facere dignissimos. Modi blanditiis quibusdam esse
ipsam. Eligendi hic doloremque recusandae voluptate, aspernatur qui
accusantium officia doloribus minus?
</p>
<p>
Cupiditate eum mollitia soluta quibusdam. Assumenda eveniet tempore
animi deleniti saepe itaque eum, commodi, facilis voluptate cumque
accusamus aperiam deserunt voluptatem voluptatibus nam rerum ipsa
provident nobis dolorem incidunt. Vel?
</p>
<p>
Consequatur eligendi tempora facere? Dolorum a inventore omnis porro
corporis ipsum molestias delectus odio eum blanditiis doloribus,
pariatur, reprehenderit at deleniti rerum optio mollitia debitis cumque,
obcaecati necessitatibus! Illo, inventore?
</p>
<p>
Cumque eum ex accusamus natus labore debitis, hic eaque ducimus fugit
blanditiis corrupti, quisquam omnis optio iusto, ab modi voluptates iure
fuga. Quis molestiae provident voluptatibus minus reiciendis cum
voluptatem!
</p>
</article>
<article id="section-6">
<h2>Contact us</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem dolorem,
autem error fugit unde saepe minus quae doloremque corrupti tenetur
incidunt obcaecati natus quasi eum eligendi quo itaque. Magni, ea.
</p>
<p>
Commodi laboriosam deleniti, sed culpa deserunt nesciunt, maiores
accusamus vitae voluptate assumenda eius sequi placeat aspernatur
repudiandae inventore maxime recusandae. Aliquid corporis dolorum hic
quaerat asperiores. Ullam quibusdam quidem autem.
</p>
<p>
Deleniti, natus porro ipsam quia non adipisci quasi ducimus, hic iste
eaque pariatur eos. Sapiente, laudantium aliquam? Similique, beatae
minima quasi sunt quisquam laboriosam quos consequuntur soluta ea ut
dolores.
</p>
<p>
Libero repellendus sunt eligendi omnis amet molestiae odio laudantium
animi. Eos, necessitatibus, assumenda sunt explicabo iusto eum corrupti
facere consequuntur fuga itaque quod rerum doloremque voluptatem
quibusdam molestiae deserunt magni!
</p>
</article>
</section>
<section>
<scrollspy-nav
class="nav-two"
role="navigation"
aria-label="Navigation test two"
>
<ul>
<li>
<a href="#section-2-1">One</a>
</li>
<li>
<a href="#section-2-2">Two</a>
</li>
<li>
<a href="#section-2-3">Three</a>
</li>
<li>
<a href="#section-2-4">Four</a>
</li>
</ul>
</scrollspy-nav>
<article id="section-2-1">
<h2>One</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, quaerat
veritatis maxime delectus, amet veniam omnis repellendus dolorem
recusandae, libero obcaecati. Aspernatur, consequatur! Ex provident
molestias optio cum eum? Esse?
</p>
<p>
Sed sit veritatis pariatur iste assumenda fugiat repellat commodi
perspiciatis. Deserunt vel corrupti est? Aut harum ducimus illo,
exercitationem nisi facilis molestiae, repellendus accusamus voluptates
provident nihil aliquid, quo nulla!
</p>
<p>
Esse facere est unde, temporibus exercitationem recusandae aspernatur
quidem sequi sapiente commodi doloribus atque minus quibusdam nesciunt?
Voluptate explicabo libero expedita perferendis fugit temporibus aliquid
tempore distinctio? Odit, iste enim!
</p>
<p>
Quas ipsa nihil inventore obcaecati laborum voluptatem, magni molestias
dignissimos placeat commodi ut ipsam adipisci tempora labore rerum
facilis officiis, vel esse, doloribus delectus? Excepturi sunt quaerat
error inventore omnis?
</p>
<p>
Suscipit iusto dolorem magnam recusandae aut iure incidunt illum
obcaecati aliquam ratione quis fugiat, pariatur reprehenderit quae
deserunt dolorum error labore assumenda officiis maiores, eaque fuga
quasi. Nemo, dolorem consequatur?
</p>
</article>
<article id="section-2-2">
<h2>Two</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur porro
quae modi veniam ad neque sunt similique vel necessitatibus ratione,
fugiat aperiam consequuntur, eveniet, optio dignissimos qui ducimus
quaerat numquam.
</p>
<p>
Itaque ducimus fugiat consequatur quod esse sint minima. Animi quos non
est accusamus vitae aspernatur veniam obcaecati. Dolore inventore nihil
iusto. Illo repellendus cupiditate tenetur harum nemo corporis est
maiores.
</p>
<p>
Eum, tenetur ullam in dolor perferendis blanditiis quas repellat magni
modi minima voluptate, minus eveniet dolores sed voluptas? Repellendus
provident fugiat quam voluptate autem repellat ea! Beatae tempore
ratione quam?
</p>
<p>
Nobis reiciendis dolorum voluptatem cum beatae temporibus repudiandae
voluptas perspiciatis rerum in minima doloremque repellendus sequi
dolorem molestias ullam labore maiores consequatur assumenda earum rem
dicta aspernatur, blanditiis nemo. Voluptas.
</p>
</article>
<article id="section-2-3">
<h2>Three</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates est
harum doloremque nobis doloribus dicta labore dignissimos laborum
tempore. Quod nam corporis quaerat aspernatur voluptate suscipit dolorum
consectetur laudantium nisi.
</p>
<p>
Ratione odio, nesciunt, soluta dolorem voluptatibus nihil harum deserunt
doloremque, non possimus sequi facilis natus laudantium temporibus
doloribus dolores veniam amet optio omnis! At fuga, deleniti laborum
harum obcaecati deserunt!
</p>
<p>
Voluptatibus doloribus eveniet est nostrum, minus fuga, non, repellat
quasi expedita pariatur commodi culpa illo! Consequatur dicta facilis
modi ipsum perferendis vel minima atque nobis nostrum quibusdam earum,
tenetur temporibus.
</p>
</article>
<article id="section-2-4">
<h2>Four</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus provident
nobis, iste ratione sint a atque ullam fugit, at ut ducimus voluptatem.
Commodi facilis, expedita consectetur ipsam libero cum architecto!
</p>
<p>
Maxime placeat itaque sunt temporibus perferendis et delectus debitis,
assumenda id dignissimos non nisi deserunt ipsa doloremque cupiditate
quae corrupti natus commodi. Aperiam numquam eum id odio veniam suscipit
sapiente!
</p>
<p>
Nihil quasi molestias maxime odio nulla deserunt ea maiores rem corrupti
reiciendis ab nostrum assumenda iusto placeat, qui, quam quo! Eligendi
voluptates culpa repellat libero in architecto, possimus recusandae
asperiores?
</p>
<p>
Commodi, ut provident, odio veniam minus cumque similique aut amet
dolore ex doloribus dignissimos autem omnis facilis repellendus
exercitationem consequatur deleniti ad voluptas quod facere! Quas quae
minima quod tenetur.
</p>
<p>
A est laboriosam ad! Officia beatae dolor aut magni esse. Dignissimos,
hic culpa autem possimus recusandae soluta fugit rem non quod ratione
praesentium quam expedita amet dolorum est laudantium incidunt.
</p>
</article>
</section>
<section class="page-section sidebar">
<scrollspy-nav
class="nav-three"
role="navigation"
aria-label="Navigation test three"
>
<ul>
<li>
<a href="#section-3-1">Appetizers</a>
</li>
<li>
<a href="#section-3-2">The Main Course</a>
</li>
<li>
<a href="#section-3-3">Signature Cocktails</a>
</li>
<li>
<a href="#section-3-4">Desserts</a>
</li>
</ul>
</scrollspy-nav>
<article id="section-3-1">
<h2>Appetizers</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, quaerat
veritatis maxime delectus, amet veniam omnis repellendus dolorem
recusandae, libero obcaecati. Aspernatur, consequatur! Ex provident
molestias optio cum eum? Esse?
</p>
<p>
Sed sit veritatis pariatur iste assumenda fugiat repellat commodi
perspiciatis. Deserunt vel corrupti est? Aut harum ducimus illo,
exercitationem nisi facilis molestiae, repellendus accusamus voluptates
provident nihil aliquid, quo nulla!
</p>
<p>
Esse facere est unde, temporibus exercitationem recusandae aspernatur
quidem sequi sapiente commodi doloribus atque minus quibusdam nesciunt?
Voluptate explicabo libero expedita perferendis fugit temporibus aliquid
tempore distinctio? Odit, iste enim!
</p>
<p>
Quas ipsa nihil inventore obcaecati laborum voluptatem, magni molestias
dignissimos placeat commodi ut ipsam adipisci tempora labore rerum
facilis officiis, vel esse, doloribus delectus? Excepturi sunt quaerat
error inventore omnis?
</p>
<p>
Suscipit iusto dolorem magnam recusandae aut iure incidunt illum
obcaecati aliquam ratione quis fugiat, pariatur reprehenderit quae
deserunt dolorum error labore assumenda officiis maiores, eaque fuga
quasi. Nemo, dolorem consequatur?
</p>
</article>
<article id="section-3-2">
<h2>The Main Course</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur porro
quae modi veniam ad neque sunt similique vel necessitatibus ratione,
fugiat aperiam consequuntur, eveniet, optio dignissimos qui ducimus
quaerat numquam.
</p>
<p>
Itaque ducimus fugiat consequatur quod esse sint minima. Animi quos non
est accusamus vitae aspernatur veniam obcaecati. Dolore inventore nihil
iusto. Illo repellendus cupiditate tenetur harum nemo corporis est
maiores.
</p>
<p>
Eum, tenetur ullam in dolor perferendis blanditiis quas repellat magni
modi minima voluptate, minus eveniet dolores sed voluptas? Repellendus
provident fugiat quam voluptate autem repellat ea! Beatae tempore
ratione quam?
</p>
<p>
Nobis reiciendis dolorum voluptatem cum beatae temporibus repudiandae
voluptas perspiciatis rerum in minima doloremque repellendus sequi
dolorem molestias ullam labore maiores consequatur assumenda earum rem
dicta aspernatur, blanditiis nemo. Voluptas.
</p>
</article>
<article id="section-3-3">
<h2>Signature Cocktails</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates est
harum doloremque nobis doloribus dicta labore dignissimos laborum
tempore. Quod nam corporis quaerat aspernatur voluptate suscipit dolorum
consectetur laudantium nisi.
</p>
<p>
Ratione odio, nesciunt, soluta dolorem voluptatibus nihil harum deserunt
doloremque, non possimus sequi facilis natus laudantium temporibus
doloribus dolores veniam amet optio omnis! At fuga, deleniti laborum
harum obcaecati deserunt!
</p>
<p>
Voluptatibus doloribus eveniet est nostrum, minus fuga, non, repellat
quasi expedita pariatur commodi culpa illo! Consequatur dicta facilis
modi ipsum perferendis vel minima atque nobis nostrum quibusdam earum,
tenetur temporibus.
</p>
</article>
<article id="section-3-4">
<h2>Desserts</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus provident
nobis, iste ratione sint a atque ullam fugit, at ut ducimus voluptatem.
Commodi facilis, expedita consectetur ipsam libero cum architecto!
</p>
<p>
Maxime placeat itaque sunt temporibus perferendis et delectus debitis,
assumenda id dignissimos non nisi deserunt ipsa doloremque cupiditate
quae corrupti natus commodi. Aperiam numquam eum id odio veniam suscipit
sapiente!
</p>
<p>
Nihil quasi molestias maxime odio nulla deserunt ea maiores rem corrupti
reiciendis ab nostrum assumenda iusto placeat, qui, quam quo! Eligendi
voluptates culpa repellat libero in architecto, possimus recusandae
asperiores?
</p>
<p>
Commodi, ut provident, odio veniam minus cumque similique aut amet
dolore ex doloribus dignissimos autem omnis facilis repellendus
exercitationem consequatur deleniti ad voluptas quod facere! Quas quae
minima quod tenetur.
</p>
<p>
A est laboriosam ad! Officia beatae dolor aut magni esse. Dignissimos,
hic culpa autem possimus recusandae soluta fugit rem non quod ratione
praesentium quam expedita amet dolorum est laudantium incidunt.
</p>
</article>
</section>
</main>
<style>
header {
text-align: center;
margin-block: 25vh;
}
header ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1rem;
list-style: none;
padding: 0;
margin: 0;
}
header a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
text-align: center;
}
header svg {
--icon-size: 1.5rem;
box-sizing: border-box;
width: var(--icon-size);
height: var(--icon-size);
}
main {
margin-block-end: 50vh;
}
section + section {
margin-block-start: 6rem;
}
scrollspy-nav {
margin-inline: calc(var(--page-gutters) * -1);
padding-inline: var(--page-gutters);
scrollbar-width: none;
}
scrollspy-nav::-webkit-scrollbar {
display: none;
}
article {
scroll-margin-top: 6rem;
inline-size: min(65ch, 100%);
margin-inline: auto;
}
* + article {
margin-block-start: 4rem;
}
.nav-two {
--scrollspy-nav-marker-top: 0;
--scrollspy-nav-marker-height: 5px;
--scrollspy-nav-marker-color: royalblue;
--scrollspy-nav-marker-duration: 400ms;
--scrollspy-nav-marker-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-three {
--scrollspy-nav-marker-top: 0;
--scrollspy-nav-marker-height: 100%;
--scrollspy-nav-marker-color: papayawhip;
--scrollspy-nav-marker-duration: 300ms;
--scrollspy-nav-marker-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-three > * {
gap: unset;
}
.nav-three a {
padding-inline: 1.5rem;
transition: color var(--scrollspy-nav-marker-duration)
var(--scrollspy-nav-marker-ease);
}
</style>