this repo has no description
more
+98
-19
+98
-19
arod-web/arod-sidenotes.js
+98
-19
arod-web/arod-sidenotes.js
···
333
333
:host {
334
334
display: inline-block;
335
335
vertical-align: baseline;
336
-
font-size: 0.75em;
336
+
font-size: 0.65em;
337
337
font-weight: 500;
338
-
margin: 0 0.25em;
338
+
margin: 0 0.4em;
339
339
}
340
340
341
341
.ref {
342
342
display: inline-flex;
343
343
align-items: center;
344
344
justify-content: center;
345
-
min-width: 1.5em;
346
-
height: 1.5em;
347
-
padding: 0 0.2em;
345
+
width: 1.1em;
346
+
height: 1.1em;
347
+
padding: 0;
348
348
color: var(--accent, #090c8d);
349
349
background: rgba(9, 12, 141, 0.08);
350
350
border: 1px solid rgba(9, 12, 141, 0.2);
···
354
354
transition: all 0.2s ease;
355
355
font-variant-numeric: tabular-nums;
356
356
line-height: 1;
357
+
margin-left: 0.2em;
358
+
margin-right: 0.2em;
357
359
}
358
360
359
361
.ref:hover,
···
426
428
<style>
427
429
:host {
428
430
display: block;
429
-
font-size: 0.9em;
430
-
line-height: 1.45;
431
-
color: var(--text-muted, #666);
432
-
margin: 1.5rem 0;
433
-
padding: 0.75rem 0.75rem 0.75rem 1.5rem;
434
-
background: var(--sidenote-bg, #fafafa);
431
+
font-size: 0.85rem;
432
+
line-height: 1.5;
433
+
color: var(--text-muted, #777);
434
+
margin: 2.5rem 0 3.5rem 0;
435
+
padding-left: 1.5rem;
435
436
border-left: 2px solid var(--border, #e0e0e0);
436
-
border-radius: 4px;
437
437
position: relative;
438
+
transition: all 0.2s ease;
439
+
opacity: 0.9;
440
+
font-style: italic;
438
441
}
439
442
440
443
/* Hide on desktop - they're shown in the sidebar */
···
444
447
}
445
448
}
446
449
450
+
/* Hover effect similar to two-column layout */
451
+
:host(:hover) {
452
+
border-left-color: var(--accent, #090c8d);
453
+
opacity: 1;
454
+
}
455
+
456
+
/* Dark mode adjustments */
457
+
@media (prefers-color-scheme: dark) {
458
+
:host {
459
+
color: #999;
460
+
}
461
+
}
462
+
463
+
[data-theme="dark"] :host {
464
+
color: #999;
465
+
}
466
+
447
467
.sidenote-mobile-number {
468
+
display: inline-block;
448
469
font-weight: bold;
449
470
color: var(--accent, #090c8d);
450
-
margin-right: 0.75em;
471
+
margin-right: 0.5em;
472
+
font-size: 0.9em;
451
473
}
452
474
453
-
/* Mobile/tablet styles */
475
+
/* Mobile/tablet styles - ensure adequate spacing */
454
476
@media (max-width: 999px) {
477
+
:host {
478
+
/* Provide generous spacing between notes */
479
+
margin: 3rem 0;
480
+
/* Slightly indent from main text */
481
+
margin-left: 1rem;
482
+
/* Don't make it full width to distinguish from main text */
483
+
max-width: calc(100% - 2rem);
484
+
}
485
+
486
+
/* Reduce top margin for first sidenote after text */
487
+
p + :host,
488
+
blockquote + :host,
489
+
pre + :host {
490
+
margin-top: 2rem;
491
+
}
492
+
455
493
.sidenote-mobile-number {
456
494
display: inline;
457
495
}
···
463
501
}
464
502
}
465
503
504
+
/* Slotted content styling - keep content compact */
466
505
::slotted(*) {
467
-
margin: 0.5rem 0;
506
+
margin: 0.4rem 0;
507
+
font-size: inherit;
508
+
line-height: inherit;
509
+
color: inherit;
510
+
}
511
+
512
+
::slotted(p:first-child),
513
+
::slotted(*:first-child) {
514
+
margin-top: 0;
515
+
}
516
+
517
+
::slotted(p:last-child),
518
+
::slotted(*:last-child) {
519
+
margin-bottom: 0;
468
520
}
469
521
470
522
::slotted(img) {
523
+
display: block;
471
524
width: 100%;
472
525
height: auto;
473
526
border-radius: 4px;
527
+
margin: 0.75rem 0;
474
528
}
475
529
476
530
::slotted(pre) {
477
531
background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));
478
-
padding: 0.5rem;
532
+
padding: 0.4rem;
479
533
border-radius: 4px;
480
534
overflow-x: auto;
535
+
font-size: 0.85em;
536
+
margin: 0.5rem 0;
537
+
}
538
+
539
+
::slotted(blockquote) {
540
+
border-left: 2px solid var(--accent, #090c8d);
541
+
padding-left: 0.75rem;
542
+
margin-left: 0;
543
+
font-style: italic;
544
+
opacity: 0.9;
545
+
}
546
+
547
+
::slotted(code) {
548
+
font-size: 0.85em;
549
+
padding: 0.1em 0.3em;
550
+
background: rgba(0, 0, 0, 0.05);
551
+
border-radius: 3px;
552
+
}
553
+
554
+
@media (prefers-color-scheme: dark) {
555
+
::slotted(code) {
556
+
background: rgba(255, 255, 255, 0.1);
557
+
}
481
558
}
482
559
</style>
483
-
${number ? `<span class="sidenote-mobile-number">${number}.</span>` : ''}
484
-
<slot></slot>
560
+
<div style="padding-left: 0.75rem;">
561
+
${number ? `<span class="sidenote-mobile-number">${number}.</span>` : ''}
562
+
<slot></slot>
563
+
</div>
485
564
`;
486
565
}
487
566
}
···
489
568
// Register components with proper hyphenated names
490
569
customElements.define('article-sidenotes', ArticleSidenotes);
491
570
customElements.define('sidenote-ref', SidenoteRef);
492
-
customElements.define('side-note', SideNote);
571
+
customElements.define('side-note', SideNote);