···
vertical-align: baseline;
color: var(--accent, #090c8d);
background: rgba(9, 12, 141, 0.08);
border: 1px solid rgba(9, 12, 141, 0.2);
···
transition: all 0.2s ease;
font-variant-numeric: tabular-nums;
357
+
margin-left: 0.2em;
358
+
margin-right: 0.2em;
···
431
-
color: var(--text-muted, #666);
433
-
padding: 0.75rem 0.75rem 0.75rem 1.5rem;
434
-
background: var(--sidenote-bg, #fafafa);
431
+
font-size: 0.85rem;
433
+
color: var(--text-muted, #777);
434
+
margin: 2.5rem 0 3.5rem 0;
435
+
padding-left: 1.5rem;
border-left: 2px solid var(--border, #e0e0e0);
436
-
border-radius: 4px;
438
+
transition: all 0.2s ease;
440
+
font-style: italic;
/* Hide on desktop - they're shown in the sidebar */
···
450
+
/* Hover effect similar to two-column layout */
452
+
border-left-color: var(--accent, #090c8d);
456
+
/* Dark mode adjustments */
457
+
@media (prefers-color-scheme: dark) {
463
+
[data-theme="dark"] :host {
.sidenote-mobile-number {
468
+
display: inline-block;
color: var(--accent, #090c8d);
450
-
margin-right: 0.75em;
471
+
margin-right: 0.5em;
453
-
/* Mobile/tablet styles */
475
+
/* Mobile/tablet styles - ensure adequate spacing */
@media (max-width: 999px) {
478
+
/* Provide generous spacing between notes */
480
+
/* Slightly indent from main text */
482
+
/* Don't make it full width to distinguish from main text */
483
+
max-width: calc(100% - 2rem);
486
+
/* Reduce top margin for first sidenote after text */
488
+
blockquote + :host,
.sidenote-mobile-number {
···
504
+
/* Slotted content styling - keep content compact */
507
+
font-size: inherit;
508
+
line-height: inherit;
512
+
::slotted(p:first-child),
513
+
::slotted(*:first-child) {
517
+
::slotted(p:last-child),
518
+
::slotted(*:last-child) {
background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));
539
+
::slotted(blockquote) {
540
+
border-left: 2px solid var(--accent, #090c8d);
541
+
padding-left: 0.75rem;
543
+
font-style: italic;
549
+
padding: 0.1em 0.3em;
550
+
background: rgba(0, 0, 0, 0.05);
551
+
border-radius: 3px;
554
+
@media (prefers-color-scheme: dark) {
556
+
background: rgba(255, 255, 255, 0.1);
483
-
${number ? `<span class="sidenote-mobile-number">${number}.</span>` : ''}
560
+
<div style="padding-left: 0.75rem;">
561
+
${number ? `<span class="sidenote-mobile-number">${number}.</span>` : ''}
···
// Register components with proper hyphenated names
customElements.define('article-sidenotes', ArticleSidenotes);
customElements.define('sidenote-ref', SidenoteRef);
492
-
customElements.define('side-note', SideNote);
571
+
customElements.define('side-note', SideNote);
anil.recoil.org