@riebeckite/theme-rerurate 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +128 -93
  2. package/README_ja.md +69 -55
  3. package/dist/src/index.d.ts +5 -1
  4. package/dist/src/index.js +14 -2
  5. package/package.json +2 -2
  6. package/styles/theme.css +828 -167
package/styles/theme.css CHANGED
@@ -1,167 +1,828 @@
1
- @theme {
2
- --font-sans: var(--rb-font-body);
3
- --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
4
- --font-mono: var(--rb-font-mono);
5
- --color-rb-paper: var(--rb-color-paper);
6
- --color-rb-ink: var(--rb-color-ink);
7
- --color-rb-muted: var(--rb-color-muted);
8
- --color-rb-accent: var(--rb-color-accent);
9
- --color-rb-surface: var(--rb-color-surface);
10
- --color-rb-danger: var(--rb-color-danger);
11
- --color-rb-success: var(--rb-color-success);
12
- }
13
-
14
- @layer base {
15
- :root {
16
- --rr-color-paper: #f6efe2;
17
- --rr-color-ink: #171717;
18
- --rr-color-orange: #f66620;
19
- --rr-space-1: 0.5rem;
20
- --rr-space-2: 1rem;
21
- --rr-space-3: 1.5rem;
22
- --rr-space-4: 2rem;
23
- --rr-rule-width: 1px;
24
-
25
- color-scheme: light;
26
- --rb-color-paper: #f6efe2;
27
- --rb-color-surface: #fdf8ee;
28
- --rb-color-surface-hover: #eae0cd;
29
- --rb-color-ink: #171717;
30
- --rb-color-muted: #6e6659;
31
- --rb-color-accent: #f66620;
32
- --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
33
- --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
34
- --rb-color-danger: #b3261e;
35
- --rb-color-success: #3e7c4f;
36
- --rb-color-code-background: color-mix(
37
- in srgb,
38
- var(--rb-color-ink) 8%,
39
- transparent
40
- );
41
- --rb-color-overlay: rgb(0 0 0 / 0.4);
42
- --rb-font-body:
43
- Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
44
- "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
45
- --rb-font-heading: var(--rb-font-body);
46
- --rb-font-mono:
47
- "SFMono-Regular", Consolas, "Liberation Mono", "Noto Sans Mono CJK JP",
48
- monospace;
49
- --rb-space-1: 0.5rem;
50
- --rb-space-2: 1rem;
51
- --rb-space-3: 1.5rem;
52
- --rb-space-4: 2rem;
53
- --rb-space-6: 3rem;
54
- --rb-space-8: 4rem;
55
- --rb-rule-width: 1px;
56
- --rb-layout-page-max: 80rem;
57
- --rb-layout-article-max: 48rem;
58
- --rb-layout-sidebar: 14rem;
59
- --rb-layout-gap: 2rem;
60
- }
61
-
62
- :root[data-theme="dark"] {
63
- color-scheme: dark;
64
- --rb-color-paper: #1c1a17;
65
- --rb-color-surface: #26231f;
66
- --rb-color-surface-hover: #312d28;
67
- --rb-color-ink: #f6efe2;
68
- --rb-color-muted: #a79e8c;
69
- --rb-color-accent: #f66620;
70
- --rb-color-danger: #ff6b61;
71
- --rb-color-success: #74b386;
72
- --rb-color-code-background: color-mix(
73
- in srgb,
74
- var(--rb-color-ink) 12%,
75
- transparent
76
- );
77
- --rb-color-overlay: rgb(0 0 0 / 0.6);
78
- }
79
-
80
- @media (prefers-color-scheme: dark) {
81
- :root:not([data-theme]) {
82
- color-scheme: dark;
83
- --rb-color-paper: #1c1a17;
84
- --rb-color-surface: #26231f;
85
- --rb-color-surface-hover: #312d28;
86
- --rb-color-ink: #f6efe2;
87
- --rb-color-muted: #a79e8c;
88
- --rb-color-accent: #f66620;
89
- --rb-color-danger: #ff6b61;
90
- --rb-color-success: #74b386;
91
- --rb-color-code-background: color-mix(
92
- in srgb,
93
- var(--rb-color-ink) 12%,
94
- transparent
95
- );
96
- --rb-color-overlay: rgb(0 0 0 / 0.6);
97
- }
98
- }
99
-
100
- :root[data-typography="serif"] {
101
- --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
102
- --rb-font-heading:
103
- Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
104
- "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
105
- }
106
-
107
- :root[data-typography="sans"] {
108
- --rb-font-body:
109
- Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
110
- "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
111
- --rb-font-heading: var(--rb-font-body);
112
- }
113
-
114
- html {
115
- background: var(--rb-color-paper);
116
- color: var(--rb-color-ink);
117
- font-family: var(--rb-font-body);
118
- accent-color: var(--rb-color-accent);
119
- caret-color: var(--rb-color-accent);
120
- }
121
-
122
- body {
123
- margin: 0;
124
- background: var(--rb-color-paper);
125
- color: var(--rb-color-ink);
126
- }
127
-
128
- ::selection {
129
- background: var(--rb-color-accent);
130
- color: var(--rr-color-paper, #f6efe2);
131
- }
132
-
133
- :focus-visible {
134
- outline: 2px solid var(--rb-color-accent);
135
- outline-offset: 2px;
136
- }
137
-
138
- :root[data-rerurate-initial="on"]
139
- .rb-article-body
140
- p:first-of-type::first-letter {
141
- float: left;
142
- margin: 0.02em 0.12em 0 0;
143
- color: var(--rb-color-accent);
144
- font-size: 3.2em;
145
- font-weight: 700;
146
- line-height: 0.85;
147
- }
148
-
149
- * {
150
- scrollbar-color: var(--rb-color-muted) transparent;
151
- scrollbar-width: thin;
152
- }
153
-
154
- ::-webkit-scrollbar {
155
- width: 10px;
156
- height: 10px;
157
- }
158
-
159
- ::-webkit-scrollbar-thumb {
160
- background: var(--rb-color-muted);
161
- border: 2px solid var(--rb-color-paper);
162
- }
163
-
164
- ::-webkit-scrollbar-track {
165
- background: transparent;
166
- }
167
- }
1
+ @theme {
2
+ --font-sans: var(--rb-font-body);
3
+ --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
4
+ --font-mono: var(--rb-font-mono);
5
+ --color-rb-paper: var(--rb-color-paper);
6
+ --color-rb-ink: var(--rb-color-ink);
7
+ --color-rb-muted: var(--rb-color-muted);
8
+ --color-rb-accent: var(--rb-color-accent);
9
+ --color-rb-surface: var(--rb-color-surface);
10
+ --color-rb-danger: var(--rb-color-danger);
11
+ --color-rb-success: var(--rb-color-success);
12
+ }
13
+
14
+ @layer base {
15
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] {
16
+ --rr-color-paper: #f6efe2;
17
+ --rr-color-ink: #171717;
18
+ --rr-color-orange: #f66620;
19
+ --rr-space-1: 0.5rem;
20
+ --rr-space-2: 1rem;
21
+ --rr-space-3: 1.5rem;
22
+ --rr-space-4: 2rem;
23
+ --rr-rule-width: 1px;
24
+
25
+ color-scheme: light;
26
+ --rb-color-paper: #f6efe2;
27
+ --rb-color-surface: #fdf8ee;
28
+ --rb-color-surface-hover: #eae0cd;
29
+ --rb-color-ink: #171717;
30
+ --rb-color-muted: #6e6659;
31
+ --rb-color-accent: #f66620;
32
+ --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
33
+ --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
34
+ --rb-color-danger: #b3261e;
35
+ --rb-color-success: #3e7c4f;
36
+ --rb-color-code-background: color-mix(
37
+ in srgb,
38
+ var(--rb-color-ink) 8%,
39
+ transparent
40
+ );
41
+ --rb-color-overlay: rgb(0 0 0 / 0.4);
42
+ --rb-font-body:
43
+ Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
44
+ "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
45
+ --rb-font-heading: var(--rb-font-body);
46
+ --rb-font-mono:
47
+ "SFMono-Regular", Consolas, "Liberation Mono", "Noto Sans Mono CJK JP",
48
+ monospace;
49
+ --rb-space-1: 0.5rem;
50
+ --rb-space-2: 1rem;
51
+ --rb-space-3: 1.5rem;
52
+ --rb-space-4: 2rem;
53
+ --rb-space-6: 3rem;
54
+ --rb-space-8: 4rem;
55
+ --rb-rule-width: 1px;
56
+ --rb-layout-page-max: 80rem;
57
+ --rb-layout-article-max: 48rem;
58
+ --rb-layout-sidebar: 14rem;
59
+ --rb-layout-gap: 2rem;
60
+ }
61
+
62
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"][data-theme="dark"] {
63
+ color-scheme: dark;
64
+ --rb-color-paper: #1c1a17;
65
+ --rb-color-surface: #26231f;
66
+ --rb-color-surface-hover: #312d28;
67
+ --rb-color-ink: #f6efe2;
68
+ --rb-color-muted: #a79e8c;
69
+ --rb-color-accent: #f66620;
70
+ --rb-color-danger: #ff6b61;
71
+ --rb-color-success: #74b386;
72
+ --rb-color-code-background: color-mix(
73
+ in srgb,
74
+ var(--rb-color-ink) 12%,
75
+ transparent
76
+ );
77
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
78
+ }
79
+
80
+ @media (prefers-color-scheme: dark) {
81
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not([data-theme]) {
82
+ color-scheme: dark;
83
+ --rb-color-paper: #1c1a17;
84
+ --rb-color-surface: #26231f;
85
+ --rb-color-surface-hover: #312d28;
86
+ --rb-color-ink: #f6efe2;
87
+ --rb-color-muted: #a79e8c;
88
+ --rb-color-accent: #f66620;
89
+ --rb-color-danger: #ff6b61;
90
+ --rb-color-success: #74b386;
91
+ --rb-color-code-background: color-mix(
92
+ in srgb,
93
+ var(--rb-color-ink) 12%,
94
+ transparent
95
+ );
96
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
97
+ }
98
+ }
99
+
100
+ :is(
101
+ :root,
102
+ .rb-theme-root
103
+ )[data-theme-name="rerurate"][data-typography="serif"] {
104
+ --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
105
+ --rb-font-heading:
106
+ Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
107
+ "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
108
+ }
109
+
110
+ :is(
111
+ :root,
112
+ .rb-theme-root
113
+ )[data-theme-name="rerurate"][data-typography="sans"] {
114
+ --rb-font-body:
115
+ Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
116
+ "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
117
+ --rb-font-heading: var(--rb-font-body);
118
+ }
119
+
120
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] {
121
+ background: var(--rb-color-paper);
122
+ color: var(--rb-color-ink);
123
+ font-family: var(--rb-font-body);
124
+ accent-color: var(--rb-color-accent);
125
+ caret-color: var(--rb-color-accent);
126
+ }
127
+
128
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] ::selection {
129
+ background: var(--rb-color-accent);
130
+ color: var(--rr-color-paper, #f6efe2);
131
+ }
132
+
133
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] :focus-visible {
134
+ outline: 2px solid var(--rb-color-accent);
135
+ outline-offset: 2px;
136
+ }
137
+
138
+ :is(
139
+ :root,
140
+ .rb-theme-root
141
+ )[data-theme-name="rerurate"][data-rerurate-initial-size="small"] {
142
+ --rr-initial-size: 1.8em;
143
+ }
144
+
145
+ :is(
146
+ :root,
147
+ .rb-theme-root
148
+ )[data-theme-name="rerurate"][data-rerurate-initial-size="medium"] {
149
+ --rr-initial-size: 2.4em;
150
+ }
151
+
152
+ :is(
153
+ :root,
154
+ .rb-theme-root
155
+ )[data-theme-name="rerurate"][data-rerurate-initial-size="large"] {
156
+ --rr-initial-size: 3.2em;
157
+ }
158
+
159
+ :is(
160
+ :root,
161
+ .rb-theme-root
162
+ )[data-theme-name="rerurate"][data-rerurate-initial="on"]
163
+ .rb-article-body
164
+ p:first-of-type::first-letter {
165
+ float: left;
166
+ margin: 0.02em 0.12em 0 0;
167
+ color: var(--rb-color-accent);
168
+ font-size: var(--rr-initial-size, 2.4em);
169
+ font-weight: 700;
170
+ line-height: 1;
171
+ }
172
+
173
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] * {
174
+ scrollbar-color: var(--rb-color-muted) transparent;
175
+ scrollbar-width: thin;
176
+ }
177
+
178
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] ::-webkit-scrollbar {
179
+ width: 10px;
180
+ height: 10px;
181
+ }
182
+
183
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
184
+ ::-webkit-scrollbar-thumb {
185
+ background: var(--rb-color-muted);
186
+ border: 2px solid var(--rb-color-paper);
187
+ }
188
+
189
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
190
+ ::-webkit-scrollbar-track {
191
+ background: transparent;
192
+ }
193
+ }
194
+
195
+ /* ------------------------------------------------------------------ *
196
+ * Rerurate character layer
197
+ *
198
+ * Paper / Ink / Orange, 1px rules that stop at the text edge, type as
199
+ * graphic, flat surfaces, and a multi-colour rule motif (dark red ->
200
+ * yellow -> muted green, three equal segments) as the sanctioned
201
+ * replacement for a gradient. A short page-load composition draws a rule
202
+ * that turns into a geometric diagram. All SVG is embedded through CSS
203
+ * only.
204
+ *
205
+ * Unlayered on purpose so it beats the layered app styles and the plugin
206
+ * defaults by cascade order, without `!important`.
207
+ * ------------------------------------------------------------------ */
208
+
209
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] {
210
+ /* Secondary palette: used only as thin adjacent rule segments. */
211
+ --rr-color-red: #802520;
212
+ --rr-color-ochre: #ba8530;
213
+ --rr-color-green: #5c7f71;
214
+
215
+ /* Motion tokens. Short, restrained page-load composition only. */
216
+ --rr-motion-duration: 460ms;
217
+ --rr-motion-slow: 560ms;
218
+ --rr-motion-fast: 180ms;
219
+ --rr-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
220
+ --rr-motion-distance: 0.5rem;
221
+
222
+ /* Link hover: accent mixed toward ink so it clears WCAG AA on Paper. */
223
+ --rr-link-hover: color-mix(
224
+ in srgb,
225
+ var(--rb-color-accent) 55%,
226
+ var(--rb-color-ink)
227
+ );
228
+
229
+ /* Embedded SVG: multi-colour rule motif, vector mark, quote chevrons. */
230
+ --rr-svg-rule: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='3'%20viewBox='0%200%2096%203'%3E%3Crect%20width='32'%20height='3'%20fill='%23802520'/%3E%3Crect%20x='32'%20width='32'%20height='3'%20fill='%23b98430'/%3E%3Crect%20x='64'%20width='32'%20height='3'%20fill='%235c7f71'/%3E%3C/svg%3E");
231
+ --rr-svg-mark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='68'%20height='16'%20viewBox='0%200%2068%2016'%3E%3Crect%20y='7'%20width='58'%20height='2'%20fill='%23fff'/%3E%3Ccircle%20cx='4'%20cy='8'%20r='4'%20fill='%23fff'/%3E%3Cpath%20d='M56%203%20L64%208%20L56%2013'%20fill='none'%20stroke='%23fff'%20stroke-width='2'/%3E%3C/svg%3E");
232
+ --rr-svg-quote: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='32'%20viewBox='0%200%2040%2032'%3E%3Cpath%20d='M3%205%20L15%2016%20L3%2027'%20fill='none'%20stroke='%23f66620'%20stroke-width='3'/%3E%3Cpath%20d='M19%205%20L31%2016%20L19%2027'%20fill='none'%20stroke='%23f66620'%20stroke-width='3'/%3E%3C/svg%3E");
233
+ }
234
+
235
+ /* ---- Body rhythm: readable body, kept off the display treatment. ---- */
236
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body {
237
+ font-family: var(--rb-font-body);
238
+ line-height: 1.75;
239
+ }
240
+
241
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body p {
242
+ margin: 1.1em 0;
243
+ }
244
+
245
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
246
+ .rb-article-body
247
+ :is(ul, ol) {
248
+ margin: 1.1em 0;
249
+ padding-left: 1.4em;
250
+ }
251
+
252
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body li {
253
+ margin: 0.35em 0;
254
+ }
255
+
256
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
257
+ .rb-article-body
258
+ li::marker {
259
+ color: var(--rb-color-accent);
260
+ }
261
+
262
+ /* ---- Article header: rule first, then the title, then a diagram. ---- */
263
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-header {
264
+ margin-bottom: 2rem;
265
+ }
266
+
267
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
268
+ .rb-article-header::before {
269
+ content: "";
270
+ display: block;
271
+ width: 6rem;
272
+ height: 3px;
273
+ margin-bottom: 1.25rem;
274
+ background-image: var(--rr-svg-rule);
275
+ background-repeat: no-repeat;
276
+ background-size: 100% 100%;
277
+ transform-origin: left center;
278
+ }
279
+
280
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-header h1 {
281
+ margin: 0;
282
+ color: var(--rb-color-accent);
283
+ font-family: var(--rb-font-heading);
284
+ font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.5rem);
285
+ font-weight: 600;
286
+ line-height: 1.08;
287
+ letter-spacing: -0.015em;
288
+ text-wrap: balance;
289
+ }
290
+
291
+ /* Rule -> diagram: a precise vector mark drawn from the header rule. */
292
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
293
+ .rb-article-header::after {
294
+ content: "";
295
+ display: block;
296
+ width: 68px;
297
+ height: 16px;
298
+ margin-top: 1.5rem;
299
+ background: var(--rb-color-ink);
300
+ transform-origin: left center;
301
+ -webkit-mask-image: var(--rr-svg-mark);
302
+ -webkit-mask-repeat: no-repeat;
303
+ -webkit-mask-size: contain;
304
+ mask-image: var(--rr-svg-mark);
305
+ mask-repeat: no-repeat;
306
+ mask-size: contain;
307
+ }
308
+
309
+ /* ---- Metadata: sparse ALL CAPS English, led by a short Orange rule. ---- */
310
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-meta {
311
+ display: flex;
312
+ align-items: center;
313
+ gap: 0.6rem;
314
+ margin: 0 0 2rem;
315
+ color: var(--rb-color-muted);
316
+ font-family: var(--rb-font-heading);
317
+ font-size: 0.72rem;
318
+ font-weight: 500;
319
+ letter-spacing: 0.16em;
320
+ line-height: 1.4;
321
+ text-transform: uppercase;
322
+ }
323
+
324
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
325
+ .rb-article-meta::before {
326
+ content: "";
327
+ flex: none;
328
+ width: 1.75rem;
329
+ height: 2px;
330
+ background: var(--rb-color-accent);
331
+ }
332
+
333
+ /* ---- Headings: hierarchy from size, weight and whitespace. ---- */
334
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body h2 {
335
+ margin: 2.75rem 0 0.9rem;
336
+ padding-top: calc(3px + 0.6rem);
337
+ font-family: var(--rb-font-heading);
338
+ font-size: 1.25rem;
339
+ font-weight: 600;
340
+ line-height: 1.25;
341
+ letter-spacing: 0.002em;
342
+ /* The rule motif reappears, short, as an h2 accent, painted above the text
343
+ so `::before` stays free for the markdown-style `##` mark. */
344
+ background-image: var(--rr-svg-rule);
345
+ background-repeat: no-repeat;
346
+ background-position: 0 0;
347
+ background-size: 2.75rem 3px;
348
+ }
349
+
350
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body h3 {
351
+ margin: 2rem 0 0.6rem;
352
+ font-family: var(--rb-font-heading);
353
+ font-size: 1.05rem;
354
+ font-weight: 600;
355
+ line-height: 1.3;
356
+ }
357
+
358
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body h4 {
359
+ margin: 1.5rem 0 0.5rem;
360
+ font-family: var(--rb-font-heading);
361
+ font-size: 0.9rem;
362
+ font-weight: 600;
363
+ line-height: 1.35;
364
+ }
365
+
366
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
367
+ .rb-article-body
368
+ :is(h5, h6) {
369
+ margin: 1.25rem 0 0.4rem;
370
+ font-size: 0.85rem;
371
+ font-weight: 600;
372
+ color: var(--rb-color-muted);
373
+ }
374
+
375
+ /* ---- Markdown-style heading marks: `#` .. `#####` inline before the heading
376
+ text so each heading reads as if the marks were typed from the start. The
377
+ marks inherit the heading's own size, colour and font. On by default;
378
+ `data-rerurate-heading-marks="off"` removes them. h6 is left unmarked. ---- */
379
+
380
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
381
+ [data-rerurate-heading-marks="off"]
382
+ )
383
+ :is(
384
+ .rb-article-header h1,
385
+ .rb-article-body h2,
386
+ .rb-article-body h3,
387
+ .rb-article-body h4,
388
+ .rb-article-body h5
389
+ )::before {
390
+ display: inline;
391
+ margin-right: 0.4em;
392
+ pointer-events: none;
393
+ -webkit-user-select: none;
394
+ user-select: none;
395
+ }
396
+
397
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
398
+ [data-rerurate-heading-marks="off"]
399
+ )
400
+ .rb-article-header
401
+ h1::before {
402
+ content: "#";
403
+ }
404
+
405
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
406
+ [data-rerurate-heading-marks="off"]
407
+ )
408
+ .rb-article-body
409
+ h2::before {
410
+ content: "##";
411
+ }
412
+
413
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
414
+ [data-rerurate-heading-marks="off"]
415
+ )
416
+ .rb-article-body
417
+ h3::before {
418
+ content: "###";
419
+ }
420
+
421
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
422
+ [data-rerurate-heading-marks="off"]
423
+ )
424
+ .rb-article-body
425
+ h4::before {
426
+ content: "####";
427
+ }
428
+
429
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
430
+ [data-rerurate-heading-marks="off"]
431
+ )
432
+ .rb-article-body
433
+ h5::before {
434
+ content: "#####";
435
+ }
436
+
437
+ /* ---- `largeHeadings` opts into a slightly larger heading scale. ---- */
438
+ :is(
439
+ :root,
440
+ .rb-theme-root
441
+ )[data-theme-name="rerurate"][data-rerurate-headings="large"]
442
+ .rb-article-header
443
+ h1 {
444
+ font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
445
+ }
446
+
447
+ :is(
448
+ :root,
449
+ .rb-theme-root
450
+ )[data-theme-name="rerurate"][data-rerurate-headings="large"]
451
+ .rb-article-body
452
+ h2 {
453
+ font-size: 1.35rem;
454
+ }
455
+
456
+ :is(
457
+ :root,
458
+ .rb-theme-root
459
+ )[data-theme-name="rerurate"][data-rerurate-headings="large"]
460
+ .rb-article-body
461
+ h3 {
462
+ font-size: 1.1rem;
463
+ }
464
+
465
+ :is(
466
+ :root,
467
+ .rb-theme-root
468
+ )[data-theme-name="rerurate"][data-rerurate-headings="large"]
469
+ .rb-article-body
470
+ h4 {
471
+ font-size: 0.95rem;
472
+ }
473
+
474
+ /* ---- Links: Ink -> Orange, with the rule (underline) expanding. ---- */
475
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
476
+ :is(
477
+ .rb-article-body,
478
+ .rb-article-footer,
479
+ .rb-article-meta,
480
+ .rr-table-of-contents,
481
+ .rr-backlinks,
482
+ .rr-recent-posts
483
+ )
484
+ a {
485
+ color: inherit;
486
+ text-decoration: underline;
487
+ text-decoration-color: color-mix(
488
+ in srgb,
489
+ var(--rb-color-ink) 35%,
490
+ transparent
491
+ );
492
+ text-decoration-thickness: 1px;
493
+ text-underline-offset: 0.22em;
494
+ transition:
495
+ color var(--rr-motion-fast) var(--rr-motion-ease),
496
+ text-decoration-color var(--rr-motion-fast) var(--rr-motion-ease),
497
+ text-decoration-thickness var(--rr-motion-fast) var(--rr-motion-ease);
498
+ }
499
+
500
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
501
+ :is(
502
+ .rb-article-body,
503
+ .rb-article-footer,
504
+ .rb-article-meta,
505
+ .rr-table-of-contents,
506
+ .rr-backlinks,
507
+ .rr-recent-posts
508
+ )
509
+ a:hover {
510
+ color: var(--rr-link-hover);
511
+ text-decoration-color: var(--rb-color-accent);
512
+ text-decoration-thickness: 2px;
513
+ }
514
+
515
+ /* ---- Blockquote: flat, marked by Orange quote chevrons. ---- */
516
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
517
+ .rb-article-body
518
+ blockquote {
519
+ position: relative;
520
+ margin: 1.75rem 0;
521
+ padding: 0.1rem 0 0.1rem 3.25rem;
522
+ border: 0;
523
+ background: none;
524
+ color: color-mix(in srgb, var(--rb-color-ink) 86%, var(--rb-color-muted));
525
+ font-style: normal;
526
+ }
527
+
528
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
529
+ .rb-article-body
530
+ blockquote::before {
531
+ content: "";
532
+ position: absolute;
533
+ top: 0.3rem;
534
+ left: 0;
535
+ width: 2.25rem;
536
+ height: 1.75rem;
537
+ background-image: var(--rr-svg-quote);
538
+ background-repeat: no-repeat;
539
+ background-position: left top;
540
+ background-size: contain;
541
+ }
542
+
543
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
544
+ .rb-article-body
545
+ blockquote
546
+ p:first-of-type::before,
547
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
548
+ .rb-article-body
549
+ blockquote
550
+ p:last-of-type::after {
551
+ content: none;
552
+ }
553
+
554
+ /* ---- Rules: 1px Ink, Paper-safe, stopping at the text edge. ---- */
555
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body hr {
556
+ width: 100%;
557
+ height: 1px;
558
+ margin: 3rem 0;
559
+ border: 0;
560
+ background: var(--rb-color-border-strong);
561
+ }
562
+
563
+ /* ---- Inline code and bare pre (guarded against the code plugin). ---- */
564
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
565
+ .rb-article-body
566
+ :not(pre)
567
+ > code {
568
+ padding: 0.15em 0.4em;
569
+ border: 1px solid var(--rb-color-border);
570
+ border-radius: 0;
571
+ background: var(--rb-color-code-background);
572
+ font-family: var(--rb-font-mono);
573
+ font-size: 0.85em;
574
+ }
575
+
576
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
577
+ .rb-article-body
578
+ pre:not(:where(.rr-code *)) {
579
+ margin: 1.75rem 0;
580
+ padding: 0.85rem 1rem;
581
+ border: 1px solid var(--rb-color-border);
582
+ border-radius: 0;
583
+ background: var(--rb-color-code-background);
584
+ color: var(--rb-color-ink);
585
+ font-family: var(--rb-font-mono);
586
+ font-size: 0.85rem;
587
+ line-height: 1.65;
588
+ overflow-x: auto;
589
+ }
590
+
591
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
592
+ .rb-article-body
593
+ pre:not(:where(.rr-code *))
594
+ code {
595
+ padding: 0;
596
+ border: 0;
597
+ background: transparent;
598
+ font-size: inherit;
599
+ }
600
+
601
+ /* ---- Tables: hairline rules, no card chrome. ---- */
602
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-body table {
603
+ margin: 1.75rem 0;
604
+ font-size: 0.92em;
605
+ }
606
+
607
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
608
+ .rb-article-body
609
+ :is(th, td) {
610
+ padding: 0.55rem 0.75rem;
611
+ border-bottom: 1px solid var(--rb-color-border);
612
+ text-align: start;
613
+ vertical-align: top;
614
+ }
615
+
616
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
617
+ .rb-article-body
618
+ thead
619
+ th {
620
+ border-bottom: 1px solid var(--rb-color-ink);
621
+ background: color-mix(in srgb, var(--rb-color-ink) 4%, transparent);
622
+ font-weight: 600;
623
+ }
624
+
625
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
626
+ .rb-article-body
627
+ tbody
628
+ tr:last-child
629
+ :is(th, td) {
630
+ border-bottom: 0;
631
+ }
632
+
633
+ /* ---- Article chrome: flat rules, square corners. ---- */
634
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-article-footer {
635
+ margin-top: 3rem;
636
+ padding-top: 1.25rem;
637
+ border-top: 1px solid var(--rb-color-border);
638
+ font-size: 0.9rem;
639
+ }
640
+
641
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rb-sidebar {
642
+ padding-left: 1rem;
643
+ border-left: 1px solid var(--rb-color-border-strong);
644
+ font-size: 0.9rem;
645
+ }
646
+
647
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
648
+ :is(.rb-article-body img, .rb-article-body video, .rr-media, .rr-attachment) {
649
+ border-radius: 0;
650
+ }
651
+
652
+ /* ---- Plugin roots: flatten radii and normalise rules. ---- */
653
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-code {
654
+ margin: 1.75rem 0;
655
+ border: 1px solid var(--rb-color-border);
656
+ border-radius: 0;
657
+ }
658
+
659
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-code pre {
660
+ margin: 0;
661
+ border: 0;
662
+ border-radius: 0;
663
+ background: transparent;
664
+ font-family: var(--rb-font-mono);
665
+ }
666
+
667
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-code-tabs {
668
+ border-radius: 0;
669
+ }
670
+
671
+ /* Callouts: flat Paper/Ink, 1px rule, Orange left rule, ALL CAPS title. */
672
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-callout {
673
+ padding: 1rem 1.25rem;
674
+ border: 1px solid var(--rb-color-border);
675
+ border-left: 3px solid var(--rb-color-accent);
676
+ border-radius: 0;
677
+ background-color: color-mix(
678
+ in srgb,
679
+ var(--rb-color-ink) 4%,
680
+ var(--rb-color-paper)
681
+ );
682
+ box-shadow: none;
683
+ color: var(--rb-color-ink);
684
+ }
685
+
686
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
687
+ .rr-callout
688
+ .callout-title {
689
+ font-family: var(--rb-font-heading);
690
+ font-size: 0.72rem;
691
+ font-weight: 600;
692
+ letter-spacing: 0.16em;
693
+ text-transform: uppercase;
694
+ color: var(--rb-color-ink);
695
+ }
696
+
697
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
698
+ .rr-callout
699
+ .callout-icon {
700
+ color: var(--rb-color-accent);
701
+ }
702
+
703
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-table-of-contents {
704
+ margin: 2rem 0;
705
+ padding: 1rem 1.15rem;
706
+ font-size: 0.9rem;
707
+ }
708
+
709
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-backlinks {
710
+ margin-top: 3.5rem;
711
+ padding-top: 1.5rem;
712
+ border-top: 1px solid var(--rb-color-border);
713
+ }
714
+
715
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-recent-posts {
716
+ margin-top: 3.5rem;
717
+ padding-top: 1.5rem;
718
+ border-top: 1px solid var(--rb-color-border);
719
+ }
720
+
721
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
722
+ .rr-recent-posts
723
+ a:hover {
724
+ color: var(--rr-link-hover);
725
+ }
726
+
727
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
728
+ :is(.rr-backlinks, .rr-cardlink)
729
+ a {
730
+ border-radius: 0;
731
+ }
732
+
733
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-cardlink {
734
+ border-radius: 0;
735
+ }
736
+
737
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-search {
738
+ border-radius: 0;
739
+ }
740
+
741
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]
742
+ .rr-search
743
+ :is(input, button, a) {
744
+ border-radius: 0;
745
+ }
746
+
747
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-mermaid {
748
+ border-radius: 0;
749
+ }
750
+
751
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"] .rr-lightbox__image {
752
+ border-radius: 0;
753
+ }
754
+
755
+ /* ---- Page-load composition: rule draw-in, title rise, rule -> diagram.
756
+ Short (under 600ms) and staggered across a few elements only. The final
757
+ state is valid without motion: no base opacity/transform is hidden. ---- */
758
+ @media (prefers-reduced-motion: no-preference) {
759
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
760
+ [data-rerurate-motion="off"]
761
+ )
762
+ .rb-article-header::before {
763
+ animation: rr-rule-draw var(--rr-motion-duration) var(--rr-motion-ease) both;
764
+ }
765
+
766
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
767
+ [data-rerurate-motion="off"]
768
+ )
769
+ .rb-article-header
770
+ h1 {
771
+ animation: rr-rise var(--rr-motion-duration) var(--rr-motion-ease) 60ms both;
772
+ }
773
+
774
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
775
+ [data-rerurate-motion="off"]
776
+ )
777
+ .rb-article-header::after {
778
+ animation: rr-mark-in var(--rr-motion-slow) var(--rr-motion-ease) 120ms both;
779
+ }
780
+
781
+ :is(:root, .rb-theme-root)[data-theme-name="rerurate"]:not(
782
+ [data-rerurate-motion="off"]
783
+ )
784
+ .rb-article-meta {
785
+ animation: rr-fade var(--rr-motion-duration) var(--rr-motion-ease) 180ms
786
+ both;
787
+ }
788
+ }
789
+
790
+ @keyframes rr-rule-draw {
791
+ from {
792
+ transform: scaleX(0);
793
+ }
794
+ to {
795
+ transform: scaleX(1);
796
+ }
797
+ }
798
+
799
+ @keyframes rr-rise {
800
+ from {
801
+ opacity: 0;
802
+ transform: translateY(var(--rr-motion-distance));
803
+ }
804
+ to {
805
+ opacity: 1;
806
+ transform: translateY(0);
807
+ }
808
+ }
809
+
810
+ @keyframes rr-mark-in {
811
+ from {
812
+ opacity: 0;
813
+ transform: scaleX(0);
814
+ }
815
+ to {
816
+ opacity: 1;
817
+ transform: scaleX(1);
818
+ }
819
+ }
820
+
821
+ @keyframes rr-fade {
822
+ from {
823
+ opacity: 0;
824
+ }
825
+ to {
826
+ opacity: 1;
827
+ }
828
+ }