commit 56de6ef559c708e64102c06deca45c5ec362b490 · anil.recoil.org/slop

+10 -10

arod-web/arod-menu.js

···

       29
        
             <style>

     

       30
        
               :host {

     

       31
        
                 --menu-height: 3.5rem;

     

       32
       -
                 --menu-bg: #ffffff;

     

       33
       -
                 --menu-border: #e0e0e0;

     

       34
       -
                 --menu-text: #222;

     

       35
       -
                 --menu-hover: #0066cc;

     

       36
        
                 --menu-mobile-breakpoint: 768px;

     

       37
        
       

     

       38
        
                 display: block;

     
···

       54
        
               }

     

       55
        
       

     

       56
        
               :host([theme="light"]) {

     

       57
       -
                 --menu-bg: #ffffff;

     

       58
       -
                 --menu-border: #e0e0e0;

     

       59
       -
                 --menu-text: #222;

     

       60
       -
                 --menu-hover: #0066cc;

     

       61
        
               }

     

       62
        
       

     

       63
        
               :host([theme="dark"]) {

     
···

       84
        
               }

     

       85
        
       

     

       86
        
               .menu-logo {

     

       87
       -
                 font-size: 1.25rem;

     

       88
       -
                 font-weight: 600;

     

       89
        
                 color: var(--menu-text);

     

       90
        
                 text-decoration: none;

     

       91
        
               }

···

       29
        
             <style>

     

       30
        
               :host {

     

       31
        
                 --menu-height: 3.5rem;

     

       32
       +
                 --menu-bg: #fffffc;

     

       33
       +
                 --menu-border: #666;

     

       34
       +
                 --menu-text: #1a1a1a;

     

       35
       +
                 --menu-hover: #090c8d;

     

       36
        
                 --menu-mobile-breakpoint: 768px;

     

       37
        
       

     

       38
        
                 display: block;

     
···

       54
        
               }

     

       55
        
       

     

       56
        
               :host([theme="light"]) {

     

       57
       +
                 --menu-bg: #fffffc;

     

       58
       +
                 --menu-border: #666;

     

       59
       +
                 --menu-text: #1a1a1a;

     

       60
       +
                 --menu-hover: #090c8d;

     

       61
        
               }

     

       62
        
       

     

       63
        
               :host([theme="dark"]) {

     
···

       84
        
               }

     

       85
        
       

     

       86
        
               .menu-logo {

     

       87
       +
                 font-size: 1.2rem;

     

       88
       +
                 font-weight: 700;

     

       89
        
                 color: var(--menu-text);

     

       90
        
                 text-decoration: none;

     

       91
        
               }

+53 -8

arod-web/arod-search.js

···

       37
        
           this.shadowRoot.innerHTML = `

     

       38
        
             <style>

     

       39
        
               :host {

     

       40
       -
                 --search-bg: #ffffff;

     

       41
        
                 --search-border: #e0e0e0;

     

       42
       -
                 --search-text: #222;

     

       43
        
                 --search-muted: #666;

     

       44
       -
                 --search-accent: #0066cc;

     

       45
        
                 --search-overlay: rgba(0, 0, 0, 0.5);

     

       46
        
               }

     

       47
        
       

     
···

       56
        
                 }

     

       57
        
               }

     

       58
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       59
        
               .search-trigger {

     

       60
        
                 display: flex;

     

       61
        
                 align-items: center;

     
···

       71
        
       

     

       72
        
               .search-trigger:hover {

     

       73
        
                 border-color: var(--search-accent);

     

       74
       -
                 background: rgba(0, 102, 204, 0.05);

     

       75
        
               }

     

       76
        
       

     

       77
        
               .search-icon {

     
···

       82
        
               .search-shortcut {

     

       83
        
                 font-size: 0.75rem;

     

       84
        
                 padding: 0.125rem 0.375rem;

     

       85
       -
                 background: var(--search-border);

     

       86
        
                 border-radius: 3px;

     

       87
        
                 color: var(--search-muted);

     

       88
        
                 font-family: monospace;

     
···

       154
        
               }

     

       155
        
       

     

       156
        
               .search-close:hover {

     

       157
       -
                 background: var(--search-border);

     

       158
        
               }

     

       159
        
       

     

       160
        
               .search-results {

     
···

       179
        
               }

     

       180
        
       

     

       181
        
               .search-result-item:hover {

     

       182
       -
                 background: rgba(0, 102, 204, 0.1);

     

       183
        
               }

     

       184
        
       

     

       185
        
               .result-title {

     
···

       224
        
       

     

       225
        
               .key {

     

       226
        
                 padding: 0.125rem 0.375rem;

     

       227
       -
                 background: var(--search-border);

     

       228
        
                 border-radius: 3px;

     

       229
        
                 font-family: monospace;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       230
        
               }

     

       231
        
       

     

       232
        
               @keyframes fadeIn {

···

       37
        
           this.shadowRoot.innerHTML = `

     

       38
        
             <style>

     

       39
        
               :host {

     

       40
       +
                 --search-bg: #fffffc;

     

       41
        
                 --search-border: #e0e0e0;

     

       42
       +
                 --search-text: #1a1a1a;

     

       43
        
                 --search-muted: #666;

     

       44
       +
                 --search-accent: #090c8d;

     

       45
        
                 --search-overlay: rgba(0, 0, 0, 0.5);

     

       46
        
               }

     

       47
        
       

     
···

       56
        
                 }

     

       57
        
               }

     

       58
        
       

     

       59
       +
               /* Explicit light theme */

     

       60
       +
               :host-context([data-theme="light"]) {

     

       61
       +
                 --search-bg: #fffffc;

     

       62
       +
                 --search-border: #e0e0e0;

     

       63
       +
                 --search-text: #1a1a1a;

     

       64
       +
                 --search-muted: #666;

     

       65
       +
                 --search-accent: #090c8d;

     

       66
       +
                 --search-overlay: rgba(0, 0, 0, 0.5);

     

       67
       +
               }

     

       68
       +
       

     

       69
       +
               /* Explicit dark theme */

     

       70
       +
               :host-context([data-theme="dark"]) {

     

       71
       +
                 --search-bg: #1a1a1a;

     

       72
       +
                 --search-border: #444;

     

       73
       +
                 --search-text: #e0e0e0;

     

       74
       +
                 --search-muted: #999;

     

       75
       +
                 --search-accent: #4db8ff;

     

       76
       +
                 --search-overlay: rgba(0, 0, 0, 0.8);

     

       77
       +
               }

     

       78
       +
       

     

       79
        
               .search-trigger {

     

       80
        
                 display: flex;

     

       81
        
                 align-items: center;

     
···

       91
        
       

     

       92
        
               .search-trigger:hover {

     

       93
        
                 border-color: var(--search-accent);

     

       94
       +
                 background: rgba(9, 12, 141, 0.05);

     

       95
        
               }

     

       96
        
       

     

       97
        
               .search-icon {

     
···

       102
        
               .search-shortcut {

     

       103
        
                 font-size: 0.75rem;

     

       104
        
                 padding: 0.125rem 0.375rem;

     

       105
       +
                 background: rgba(0, 0, 0, 0.08);

     

       106
        
                 border-radius: 3px;

     

       107
        
                 color: var(--search-muted);

     

       108
        
                 font-family: monospace;

     
···

       174
        
               }

     

       175
        
       

     

       176
        
               .search-close:hover {

     

       177
       +
                 background: rgba(0, 0, 0, 0.08);

     

       178
        
               }

     

       179
        
       

     

       180
        
               .search-results {

     
···

       199
        
               }

     

       200
        
       

     

       201
        
               .search-result-item:hover {

     

       202
       +
                 background: rgba(9, 12, 141, 0.1);

     

       203
        
               }

     

       204
        
       

     

       205
        
               .result-title {

     
···

       244
        
       

     

       245
        
               .key {

     

       246
        
                 padding: 0.125rem 0.375rem;

     

       247
       +
                 background: rgba(0, 0, 0, 0.08);

     

       248
        
                 border-radius: 3px;

     

       249
        
                 font-family: monospace;

     

       250
       +
               }

     

       251
       +
       

     

       252
       +
               /* Selected result highlighting */

     

       253
       +
               .search-result-item.selected {

     

       254
       +
                 background: rgba(9, 12, 141, 0.15);

     

       255
       +
               }

     

       256
       +
       

     

       257
       +
               /* Dark mode adjustments for backgrounds */

     

       258
       +
               @media (prefers-color-scheme: dark) {

     

       259
       +
                 .search-shortcut,

     

       260
       +
                 .key {

     

       261
       +
                   background: rgba(255, 255, 255, 0.1);

     

       262
       +
                 }

     

       263
       +
       

     

       264
       +
                 .search-close:hover {

     

       265
       +
                   background: rgba(255, 255, 255, 0.1);

     

       266
       +
                 }

     

       267
       +
       

     

       268
       +
                 .search-result-item:hover {

     

       269
       +
                   background: rgba(77, 184, 255, 0.1);

     

       270
       +
                 }

     

       271
       +
       

     

       272
       +
                 .search-result-item.selected {

     

       273
       +
                   background: rgba(77, 184, 255, 0.15);

     

       274
       +
                 }

     

       275
        
               }

     

       276
        
       

     

       277
        
               @keyframes fadeIn {

+19 -18

arod-web/arod-sidenotes.js

···

       43
        
                 --content-width: 40rem;

     

       44
        
                 --sidenote-width: 18rem;

     

       45
        
                 --gap: 2.5rem;

     

       46
       -
                 --bg: #ffffff;

     

       47
       -
                 --text: #222;

     

       48
        
                 --text-muted: #666;

     

       49
       -
                 --accent: #0066cc;

     

       50
        
                 --sidenote-bg: #fafafa;

     

       51
        
                 --border: #e0e0e0;

     

       52
        
       

     
···

       95
        
                 .sidenote-wrapper {

     

       96
        
                   position: absolute;

     

       97
        
                   width: 100%;

     

       98
       -
                   font-size: 0.75rem;

     

       99
       -
                   line-height: 1.4;

     

       100
        
                   color: var(--text-muted);

     

       101
        
                   padding-left: 1rem;

     

       102
        
                   border-left: 2px solid var(--border);

     
···

       374
        
               :host {

     

       375
        
                 display: inline-block;

     

       376
        
                 vertical-align: baseline;

     

       377
       -
                 font-size: 0.85em;

     

       378
        
                 font-weight: 500;

     

       379
       -
                 margin: 0 0.15em;

     

       380
        
               }

     

       381
        
       

     

       382
        
               .ref {

     

       383
        
                 display: inline-flex;

     

       384
        
                 align-items: center;

     

       385
        
                 justify-content: center;

     

       386
       -
                 min-width: 1.4em;

     

       387
       -
                 height: 1.4em;

     

       388
       -
                 padding: 0 0.3em;

     

       389
       -
                 color: var(--accent, #0066cc);

     

       390
       -
                 background: rgba(0, 102, 204, 0.1);

     

       391
       -
                 border: 1px solid rgba(0, 102, 204, 0.3);

     

       392
       -
                 border-radius: 3px;

     

       393
        
                 cursor: pointer;

     

       394
        
                 text-decoration: none;

     

       395
        
                 transition: all 0.2s ease;

     

       396
        
                 font-variant-numeric: tabular-nums;

     

       0
        
       
     

       397
        
               }

     

       398
        
       

     

       399
        
               .ref:hover,

     

       400
        
               :host([highlighted]) .ref {

     

       401
       -
                 background: var(--accent, #0066cc);

     

       402
        
                 border-color: var(--accent, #0066cc);

     

       403
        
                 color: white;

     

       404
        
                 transform: scale(1.05);

     
···

       466
        
             <style>

     

       467
        
               :host {

     

       468
        
                 display: block;

     

       469
       -
                 font-size: 0.85rem;

     

       470
       -
                 line-height: 1.4;

     

       471
        
                 color: var(--text-muted, #666);

     

       472
        
                 margin: 1rem 0;

     

       473
        
                 padding: 0.75rem 0.75rem 0.75rem 1rem;

     
···

       485
        
       

     

       486
        
               .sidenote-mobile-number {

     

       487
        
                 font-weight: bold;

     

       488
       -
                 color: var(--accent, #0066cc);

     

       489
        
                 margin-right: 0.5em;

     

       490
        
               }

     

       491

···

       43
        
                 --content-width: 40rem;

     

       44
        
                 --sidenote-width: 18rem;

     

       45
        
                 --gap: 2.5rem;

     

       46
       +
                 --bg: #fffffc;

     

       47
       +
                 --text: #1a1a1a;

     

       48
        
                 --text-muted: #666;

     

       49
       +
                 --accent: #090c8d;

     

       50
        
                 --sidenote-bg: #fafafa;

     

       51
        
                 --border: #e0e0e0;

     

       52
        
       

     
···

       95
        
                 .sidenote-wrapper {

     

       96
        
                   position: absolute;

     

       97
        
                   width: 100%;

     

       98
       +
                   font-size: 0.85rem;

     

       99
       +
                   line-height: 1.45;

     

       100
        
                   color: var(--text-muted);

     

       101
        
                   padding-left: 1rem;

     

       102
        
                   border-left: 2px solid var(--border);

     
···

       374
        
               :host {

     

       375
        
                 display: inline-block;

     

       376
        
                 vertical-align: baseline;

     

       377
       +
                 font-size: 0.75em;

     

       378
        
                 font-weight: 500;

     

       379
       +
                 margin: 0 0.25em;

     

       380
        
               }

     

       381
        
       

     

       382
        
               .ref {

     

       383
        
                 display: inline-flex;

     

       384
        
                 align-items: center;

     

       385
        
                 justify-content: center;

     

       386
       +
                 min-width: 1.5em;

     

       387
       +
                 height: 1.5em;

     

       388
       +
                 padding: 0 0.2em;

     

       389
       +
                 color: var(--accent, #090c8d);

     

       390
       +
                 background: rgba(9, 12, 141, 0.08);

     

       391
       +
                 border: 1px solid rgba(9, 12, 141, 0.2);

     

       392
       +
                 border-radius: 50%;

     

       393
        
                 cursor: pointer;

     

       394
        
                 text-decoration: none;

     

       395
        
                 transition: all 0.2s ease;

     

       396
        
                 font-variant-numeric: tabular-nums;

     

       397
       +
                 line-height: 1;

     

       398
        
               }

     

       399
        
       

     

       400
        
               .ref:hover,

     

       401
        
               :host([highlighted]) .ref {

     

       402
       +
                 background: var(--accent, #090c8d);

     

       403
        
                 border-color: var(--accent, #0066cc);

     

       404
        
                 color: white;

     

       405
        
                 transform: scale(1.05);

     
···

       467
        
             <style>

     

       468
        
               :host {

     

       469
        
                 display: block;

     

       470
       +
                 font-size: 0.9em;

     

       471
       +
                 line-height: 1.45;

     

       472
        
                 color: var(--text-muted, #666);

     

       473
        
                 margin: 1rem 0;

     

       474
        
                 padding: 0.75rem 0.75rem 0.75rem 1rem;

     
···

       486
        
       

     

       487
        
               .sidenote-mobile-number {

     

       488
        
                 font-weight: bold;

     

       489
       +
                 color: var(--accent, #090c8d);

     

       490
        
                 margin-right: 0.5em;

     

       491
        
               }

     

       492

+37 -14

arod-web/arod-theme.js

···

       44
        
                 position: relative;

     

       45
        
                 padding: 0.5rem;

     

       46
        
                 background: transparent;

     

       47
       -
                 border: 1px solid var(--theme-border, #e0e0e0);

     

       48
        
                 border-radius: 4px;

     

       49
       -
                 color: var(--theme-text, #222);

     

       50
        
                 cursor: pointer;

     

       51
        
                 transition: all 0.2s ease;

     

       52
        
               }

     
···

       59
        
               }

     

       60
        
       

     

       61
        
               .theme-toggle:hover {

     

       62
       -
                 border-color: var(--theme-accent, #0066cc);

     

       63
       -
                 background: rgba(0, 102, 204, 0.05);

     

       64
        
               }

     

       65
        
       

     

       66
        
               .theme-icon {

     
···

       74
        
                 position: absolute;

     

       75
        
                 top: calc(100% + 0.5rem);

     

       76
        
                 right: 0;

     

       77
       -
                 background: var(--theme-menu-bg, #ffffff);

     

       78
       -
                 border: 1px solid var(--theme-border, #e0e0e0);

     

       79
        
                 border-radius: 4px;

     

       80
        
                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

     

       81
        
                 overflow: hidden;

     
···

       84
        
       

     

       85
        
               @media (prefers-color-scheme: dark) {

     

       86
        
                 .theme-menu {

     

       87
       -
                   --theme-menu-bg: #2a2a2a;

     

       0
        
       
     

       88
        
                   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

     

       89
        
                 }

     

       90
        
               }

     
···

       100
        
                 padding: 0.75rem 1rem;

     

       101
        
                 background: transparent;

     

       102
        
                 border: none;

     

       103
       -
                 color: var(--theme-text, #222);

     

       104
        
                 cursor: pointer;

     

       105
        
                 width: 100%;

     

       106
        
                 text-align: left;

     

       107
        
                 transition: background 0.2s ease;

     

       108
        
               }

     

       109
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       110
        
               .theme-option:hover {

     

       111
       -
                 background: rgba(0, 102, 204, 0.1);

     

       112
        
               }

     

       113
        
       

     

       114
        
               .theme-option.active {

     

       115
       -
                 background: rgba(0, 102, 204, 0.15);

     

       116
       -
                 color: var(--theme-accent, #0066cc);

     

       117
        
               }

     

       118
        
       

     

       119
        
               .theme-label {

     
···

       133
        
               :host([data-theme="dark"]) .theme-toggle {

     

       134
        
                 --theme-border: #444;

     

       135
        
                 --theme-text: #e0e0e0;

     

       136
       -
                 --theme-menu-bg: #2a2a2a;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       137
        
               }

     

       138
        
       

     

       139
        
               :host([data-theme="light"]) .theme-toggle {

     

       140
        
                 --theme-border: #e0e0e0;

     

       141
       -
                 --theme-text: #222;

     

       142
       -
                 --theme-menu-bg: #ffffff;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       143
        
               }

     

       144
        
             </style>

     

       145

···

       44
        
                 position: relative;

     

       45
        
                 padding: 0.5rem;

     

       46
        
                 background: transparent;

     

       47
       +
                 border: 1px solid var(--theme-border, #666);

     

       48
        
                 border-radius: 4px;

     

       49
       +
                 color: var(--theme-text, #1a1a1a);

     

       50
        
                 cursor: pointer;

     

       51
        
                 transition: all 0.2s ease;

     

       52
        
               }

     
···

       59
        
               }

     

       60
        
       

     

       61
        
               .theme-toggle:hover {

     

       62
       +
                 border-color: var(--theme-accent, #090c8d);

     

       63
       +
                 background: rgba(9, 12, 141, 0.05);

     

       64
        
               }

     

       65
        
       

     

       66
        
               .theme-icon {

     
···

       74
        
                 position: absolute;

     

       75
        
                 top: calc(100% + 0.5rem);

     

       76
        
                 right: 0;

     

       77
       +
                 background: #fffffc;

     

       78
       +
                 border: 1px solid #e0e0e0;

     

       79
        
                 border-radius: 4px;

     

       80
        
                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

     

       81
        
                 overflow: hidden;

     
···

       84
        
       

     

       85
        
               @media (prefers-color-scheme: dark) {

     

       86
        
                 .theme-menu {

     

       87
       +
                   background: #2a2a2a;

     

       88
       +
                   border-color: #444;

     

       89
        
                   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

     

       90
        
                 }

     

       91
        
               }

     
···

       101
        
                 padding: 0.75rem 1rem;

     

       102
        
                 background: transparent;

     

       103
        
                 border: none;

     

       104
       +
                 color: #1a1a1a;

     

       105
        
                 cursor: pointer;

     

       106
        
                 width: 100%;

     

       107
        
                 text-align: left;

     

       108
        
                 transition: background 0.2s ease;

     

       109
        
               }

     

       110
        
       

     

       111
       +
               @media (prefers-color-scheme: dark) {

     

       112
       +
                 .theme-option {

     

       113
       +
                   color: #e0e0e0;

     

       114
       +
                 }

     

       115
       +
               }

     

       116
       +
       

     

       117
        
               .theme-option:hover {

     

       118
       +
                 background: rgba(9, 12, 141, 0.1);

     

       119
        
               }

     

       120
        
       

     

       121
        
               .theme-option.active {

     

       122
       +
                 background: rgba(9, 12, 141, 0.15);

     

       123
       +
                 color: var(--theme-accent, #090c8d);

     

       124
        
               }

     

       125
        
       

     

       126
        
               .theme-label {

     
···

       140
        
               :host([data-theme="dark"]) .theme-toggle {

     

       141
        
                 --theme-border: #444;

     

       142
        
                 --theme-text: #e0e0e0;

     

       143
       +
               }

     

       144
       +
       

     

       145
       +
               :host([data-theme="dark"]) .theme-menu {

     

       146
       +
                 background: #2a2a2a;

     

       147
       +
                 border-color: #444;

     

       148
       +
               }

     

       149
       +
       

     

       150
       +
               :host([data-theme="dark"]) .theme-option {

     

       151
       +
                 color: #e0e0e0;

     

       152
        
               }

     

       153
        
       

     

       154
        
               :host([data-theme="light"]) .theme-toggle {

     

       155
        
                 --theme-border: #e0e0e0;

     

       156
       +
                 --theme-text: #1a1a1a;

     

       157
       +
               }

     

       158
       +
       

     

       159
       +
               :host([data-theme="light"]) .theme-menu {

     

       160
       +
                 background: #fffffc;

     

       161
       +
                 border-color: #e0e0e0;

     

       162
       +
               }

     

       163
       +
       

     

       164
       +
               :host([data-theme="light"]) .theme-option {

     

       165
       +
                 color: #1a1a1a;

     

       166
        
               }

     

       167
        
             </style>

     

       168

+52 -22

arod-web/example.html

···

       12
        
         <script src="arod-sidenotes.js"></script>

     

       13
        
       

     

       14
        
         <style>

     

       15
       -
           /* Base styles that respond to theme */

     

       16
        
           :root {

     

       17
       -
             --bg: #ffffff;

     

       18
       -
             --text: #222;

     

       19
        
             --text-muted: #666;

     

       20
       -
             --accent: #0066cc;

     

       0
        
       
     

       21
        
             --border: #e0e0e0;

     

       0
        
       
     

       22
        
           }

     

       23
        
       

     

       24
        
           [data-theme="dark"] {

     
···

       26
        
             --text: #e0e0e0;

     

       27
        
             --text-muted: #999;

     

       28
        
             --accent: #4db8ff;

     

       0
        
       
     

       29
        
             --border: #444;

     

       0
        
       
     

       30
        
           }

     

       31
        
       

     

       32
        
           * {

     
···

       36
        
           }

     

       37
        
       

     

       38
        
           body {

     

       39
       -
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

     

       40
       -
             line-height: 1.6;

     

       41
        
             color: var(--text);

     

       42
        
             background: var(--bg);

     

       43
        
             transition: background 0.3s ease, color 0.3s ease;

     
···

       51
        
           }

     

       52
        
       

     

       53
        
           h1 {

     

       54
       -
             font-size: 2.5rem;

     

       55
       -
             margin: 2rem 0;

     

       0
        
       
     

       0
        
       
     

       56
        
           }

     

       57
        
       

     

       58
        
           h2 {

     

       59
       -
             font-size: 1.75rem;

     

       60
       -
             margin: 2rem 0 1rem;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       61
        
           }

     

       62
        
       

     

       63
        
           p {

     

       64
       -
             margin-bottom: 1.25rem;

     

       0
        
       
     

       0
        
       
     

       65
        
             text-align: justify;

     

       66
        
           }

     

       67
        
       

     

       68
        
           code {

     

       69
        
             font-family: 'SF Mono', Consolas, monospace;

     

       70
       -
             font-size: 0.9em;

     

       71
        
             padding: 0.2em 0.4em;

     

       72
       -
             background: var(--border);

     

       73
        
             border-radius: 3px;

     

       74
        
           }

     

       75
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       76
        
           pre {

     

       77
        
             padding: 1rem;

     

       78
        
             margin: 1.5rem 0;

     

       79
       -
             background: var(--border);

     

       0
        
       
     

       80
        
             border-radius: 4px;

     

       81
        
             overflow-x: auto;

     

       82
        
           }

     

       83
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       84
        
           pre code {

     

       85
        
             background: none;

     

       86
        
             padding: 0;

     

       87
        
           }

     

       88
        
       

     

       89
        
           blockquote {

     

       90
       -
             margin: 1.5rem 0;

     

       91
       -
             padding-left: 1rem;

     

       92
       -
             border-left: 3px solid var(--accent);

     

       0
        
       
     

       0
        
       
     

       93
        
             font-style: italic;

     

       0
        
       
     

       94
        
             color: var(--text-muted);

     

       95
        
           }

     

       96
        
       

     

       97
        
           .hero {

     

       98
        
             text-align: center;

     

       99
       -
             padding: 4rem 0;

     

       100
       -
             background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,102,204,0.05) 100%);

     

       101
        
             border-radius: 8px;

     

       102
       -
             margin: 2rem 0;

     

       103
        
           }

     

       104
        
       

     

       105
        
           .hero h1 {

     

       106
       -
             margin-bottom: 1rem;

     

       0
        
       
     

       0
        
       
     

       107
        
           }

     

       108
        
       

     

       109
        
           .hero p {

     

       110
       -
             font-size: 1.25rem;

     

       111
        
             color: var(--text-muted);

     

       112
        
             text-align: center;

     

       113
        
           }

···

       12
        
         <script src="arod-sidenotes.js"></script>

     

       13
        
       

     

       14
        
         <style>

     

       15
       +
           /* Base styles that match anil.recoil.org */

     

       16
        
           :root {

     

       17
       +
             --bg: #fffffc;

     

       18
       +
             --text: #1a1a1a;

     

       19
        
             --text-muted: #666;

     

       20
       +
             --accent: #01261b;

     

       21
       +
             --link: #090c8d;

     

       22
        
             --border: #e0e0e0;

     

       23
       +
             --secondary: #666;

     

       24
        
           }

     

       25
        
       

     

       26
        
           [data-theme="dark"] {

     
···

       28
        
             --text: #e0e0e0;

     

       29
        
             --text-muted: #999;

     

       30
        
             --accent: #4db8ff;

     

       31
       +
             --link: #4db8ff;

     

       32
        
             --border: #444;

     

       33
       +
             --secondary: #999;

     

       34
        
           }

     

       35
        
       

     

       36
        
           * {

     
···

       40
        
           }

     

       41
        
       

     

       42
        
           body {

     

       43
       +
             font-family: system-ui, -apple-system, sans-serif;

     

       44
       +
             line-height: 1.45;

     

       45
        
             color: var(--text);

     

       46
        
             background: var(--bg);

     

       47
        
             transition: background 0.3s ease, color 0.3s ease;

     
···

       55
        
           }

     

       56
        
       

     

       57
        
           h1 {

     

       58
       +
             font-size: 1.0rem;

     

       59
       +
             font-weight: 700;

     

       60
       +
             margin-top: 0.5em;

     

       61
       +
             margin-bottom: 0.6em;

     

       62
        
           }

     

       63
        
       

     

       64
        
           h2 {

     

       65
       +
             font-size: 1rem;

     

       66
       +
             margin-bottom: 0.5em;

     

       67
       +
             font-weight: 500;

     

       68
       +
           }

     

       69
       +
       

     

       70
       +
           h3 {

     

       71
       +
             font-size: 1rem;

     

       72
       +
             margin-bottom: 0.5em;

     

       73
       +
             font-weight: 400;

     

       74
        
           }

     

       75
        
       

     

       76
        
           p {

     

       77
       +
             font-size: 0.9em;

     

       78
       +
             margin-top: 0.2em;

     

       79
       +
             margin-bottom: 0.5em;

     

       80
        
             text-align: justify;

     

       81
        
           }

     

       82
        
       

     

       83
        
           code {

     

       84
        
             font-family: 'SF Mono', Consolas, monospace;

     

       85
       +
             font-size: 0.85em;

     

       86
        
             padding: 0.2em 0.4em;

     

       87
       +
             background: rgba(0, 0, 0, 0.05);

     

       88
        
             border-radius: 3px;

     

       89
        
           }

     

       90
        
       

     

       91
       +
           [data-theme="dark"] code {

     

       92
       +
             background: rgba(255, 255, 255, 0.1);

     

       93
       +
           }

     

       94
       +
       

     

       95
        
           pre {

     

       96
        
             padding: 1rem;

     

       97
        
             margin: 1.5rem 0;

     

       98
       +
             background: rgba(0, 0, 0, 0.03);

     

       99
       +
             border: 1px solid var(--border);

     

       100
        
             border-radius: 4px;

     

       101
        
             overflow-x: auto;

     

       102
        
           }

     

       103
        
       

     

       104
       +
           [data-theme="dark"] pre {

     

       105
       +
             background: rgba(255, 255, 255, 0.05);

     

       106
       +
             border-color: #444;

     

       107
       +
           }

     

       108
       +
       

     

       109
        
           pre code {

     

       110
        
             background: none;

     

       111
        
             padding: 0;

     

       112
        
           }

     

       113
        
       

     

       114
        
           blockquote {

     

       115
       +
             position: relative;

     

       116
       +
             padding: 0.5rem 1rem;

     

       117
       +
             padding-top: 0;

     

       118
       +
             margin: 0.5rem 0;

     

       119
       +
             border-left: 4px solid #cdc;

     

       120
        
             font-style: italic;

     

       121
       +
             padding-bottom: 0.1em;

     

       122
        
             color: var(--text-muted);

     

       123
        
           }

     

       124
        
       

     

       125
        
           .hero {

     

       126
        
             text-align: center;

     

       127
       +
             padding: 2rem 0;

     

       128
       +
             background: linear-gradient(135deg, rgba(1,38,27,0.05) 0%, rgba(1,38,27,0.02) 100%);

     

       129
        
             border-radius: 8px;

     

       130
       +
             margin: 1rem 0;

     

       131
        
           }

     

       132
        
       

     

       133
        
           .hero h1 {

     

       134
       +
             font-size: 1.2rem;

     

       135
       +
             font-weight: 700;

     

       136
       +
             margin-bottom: 0.5rem;

     

       137
        
           }

     

       138
        
       

     

       139
        
           .hero p {

     

       140
       +
             font-size: 0.9em;

     

       141
        
             color: var(--text-muted);

     

       142
        
             text-align: center;

     

       143
        
           }