owflow 0.1.4 → 0.1.5
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.
- package/dist/commands/diagrams-mermaid.md +37 -0
- package/dist/commands/html-renderer.md +37 -0
- package/dist/skills/development/SKILL.md +15 -0
- package/dist/skills/diagrams-mermaid/SKILL.md +156 -0
- package/dist/skills/diagrams-mermaid/references/reference.md +148 -0
- package/dist/skills/flow-init/SKILL.md +15 -0
- package/dist/skills/html-renderer/SKILL.md +159 -0
- package/dist/skills/html-renderer/references/index.html +318 -0
- package/dist/skills/html-renderer/references/styles.css +388 -0
- package/dist/skills/html-renderer/references/tokens.json +104 -0
- package/dist/skills/migration/SKILL.md +12 -0
- package/dist/skills/performance/SKILL.md +12 -0
- package/dist/skills/research/SKILL.md +8 -0
- package/package.json +1 -1
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>HTML Renderer Reference</title>
|
|
7
|
+
<link rel="stylesheet" href="./styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<main class="hr-page">
|
|
11
|
+
<section class="hr-section hr-stack">
|
|
12
|
+
<span class="hr-heading-eyebrow">Reference Base</span>
|
|
13
|
+
<h1 class="hr-heading-h1">Warm editorial HTML component reference</h1>
|
|
14
|
+
<p class="hr-text-muted">
|
|
15
|
+
This page demonstrates all required building blocks for markdown to
|
|
16
|
+
HTML output.
|
|
17
|
+
</p>
|
|
18
|
+
</section>
|
|
19
|
+
|
|
20
|
+
<section class="hr-section hr-stack">
|
|
21
|
+
<h2 class="hr-heading-h2">Heading scale</h2>
|
|
22
|
+
<h1 class="hr-heading-h1">H1 Display Headline</h1>
|
|
23
|
+
<h2 class="hr-heading-h2">H2 Section Headline</h2>
|
|
24
|
+
<h3 class="hr-heading-h3">H3 Subsection Headline</h3>
|
|
25
|
+
<h4 class="hr-heading-h4">H4 Utility Headline</h4>
|
|
26
|
+
</section>
|
|
27
|
+
|
|
28
|
+
<section class="hr-section hr-stack">
|
|
29
|
+
<h2 class="hr-heading-h2">Text block</h2>
|
|
30
|
+
<div class="hr-text-block hr-stack">
|
|
31
|
+
<p>
|
|
32
|
+
Text blocks should carry the main narrative, with generous line
|
|
33
|
+
height and warm contrast against the canvas.
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
Lists remain simple and semantic, while styles stay tied to global
|
|
37
|
+
tokens.
|
|
38
|
+
</p>
|
|
39
|
+
<ul>
|
|
40
|
+
<li>Use one visual rhythm across all paragraphs.</li>
|
|
41
|
+
<li>Keep spacing and emphasis token-based.</li>
|
|
42
|
+
<li>Avoid local one-off colors in content blocks.</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
</section>
|
|
46
|
+
|
|
47
|
+
<section class="hr-section hr-stack">
|
|
48
|
+
<h2 class="hr-heading-h2">Cards</h2>
|
|
49
|
+
<div class="hr-grid">
|
|
50
|
+
<article class="hr-card">
|
|
51
|
+
<h3 class="hr-card-title">Default content card</h3>
|
|
52
|
+
<p class="hr-card-text">
|
|
53
|
+
Standard container for summaries, supporting notes, and grouped
|
|
54
|
+
metadata.
|
|
55
|
+
</p>
|
|
56
|
+
<span class="hr-badge">Default</span>
|
|
57
|
+
</article>
|
|
58
|
+
|
|
59
|
+
<article class="hr-card hr-card-featured">
|
|
60
|
+
<h3 class="hr-card-title">Featured surface card</h3>
|
|
61
|
+
<p class="hr-card-text">
|
|
62
|
+
High-emphasis card for key outcomes, strategic calls to action,
|
|
63
|
+
or highlighted analysis.
|
|
64
|
+
</p>
|
|
65
|
+
<span class="hr-badge">Priority</span>
|
|
66
|
+
</article>
|
|
67
|
+
</div>
|
|
68
|
+
</section>
|
|
69
|
+
|
|
70
|
+
<section class="hr-section hr-stack">
|
|
71
|
+
<h2 class="hr-heading-h2">Table</h2>
|
|
72
|
+
<div class="hr-table-wrap">
|
|
73
|
+
<table class="hr-table">
|
|
74
|
+
<thead>
|
|
75
|
+
<tr>
|
|
76
|
+
<th>Element</th>
|
|
77
|
+
<th>Purpose</th>
|
|
78
|
+
<th>Main token group</th>
|
|
79
|
+
<th>Priority</th>
|
|
80
|
+
</tr>
|
|
81
|
+
</thead>
|
|
82
|
+
<tbody>
|
|
83
|
+
<tr>
|
|
84
|
+
<td>Card</td>
|
|
85
|
+
<td>Grouped content blocks</td>
|
|
86
|
+
<td>surface + radius + spacing</td>
|
|
87
|
+
<td>High</td>
|
|
88
|
+
</tr>
|
|
89
|
+
<tr>
|
|
90
|
+
<td>Quote</td>
|
|
91
|
+
<td>Context and citations</td>
|
|
92
|
+
<td>primary + display typography</td>
|
|
93
|
+
<td>Medium</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<tr>
|
|
96
|
+
<td>Highlight</td>
|
|
97
|
+
<td>Important callouts</td>
|
|
98
|
+
<td>semantic + border accent</td>
|
|
99
|
+
<td>High</td>
|
|
100
|
+
</tr>
|
|
101
|
+
</tbody>
|
|
102
|
+
</table>
|
|
103
|
+
</div>
|
|
104
|
+
</section>
|
|
105
|
+
|
|
106
|
+
<section class="hr-section hr-stack">
|
|
107
|
+
<h2 class="hr-heading-h2">Diagram container</h2>
|
|
108
|
+
|
|
109
|
+
<h3 class="hr-heading-h3">Flowchart</h3>
|
|
110
|
+
<div class="hr-diagram">
|
|
111
|
+
<div class="mermaid">
|
|
112
|
+
flowchart TD
|
|
113
|
+
markdownInput[MarkdownInput] --> semanticParse[SemanticParse]
|
|
114
|
+
semanticParse --> componentSelect[ComponentSelect]
|
|
115
|
+
componentSelect --> tokenBind[TokenBinding]
|
|
116
|
+
tokenBind --> htmlOutput[HtmlOutput]
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<h3 class="hr-heading-h3">Sequence diagram</h3>
|
|
121
|
+
<div class="hr-diagram">
|
|
122
|
+
<div class="mermaid">
|
|
123
|
+
sequenceDiagram
|
|
124
|
+
participant U as User
|
|
125
|
+
participant CLI as Copilot CLI
|
|
126
|
+
participant S as html-renderer skill
|
|
127
|
+
participant FS as Filesystem
|
|
128
|
+
U->>CLI: render notes.md
|
|
129
|
+
CLI->>S: invoke skill
|
|
130
|
+
S->>FS: read notes.md + references/
|
|
131
|
+
S->>FS: write notes.html
|
|
132
|
+
S-->>CLI: done
|
|
133
|
+
CLI-->>U: open notes.html
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<h3 class="hr-heading-h3">State diagram</h3>
|
|
138
|
+
<div class="hr-diagram">
|
|
139
|
+
<div class="mermaid">
|
|
140
|
+
stateDiagram-v2
|
|
141
|
+
[*] --> Draft
|
|
142
|
+
Draft --> Review: submit
|
|
143
|
+
Review --> Draft: request changes
|
|
144
|
+
Review --> Approved: accept
|
|
145
|
+
Approved --> Published: publish
|
|
146
|
+
Published --> [*]
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<h3 class="hr-heading-h3">Entity relationship</h3>
|
|
151
|
+
<div class="hr-diagram">
|
|
152
|
+
<div class="mermaid">
|
|
153
|
+
erDiagram
|
|
154
|
+
AUTHOR ||--o{ DOCUMENT : writes
|
|
155
|
+
DOCUMENT ||--|{ SECTION : contains
|
|
156
|
+
SECTION ||--o{ BLOCK : contains
|
|
157
|
+
AUTHOR {
|
|
158
|
+
string id PK
|
|
159
|
+
string name
|
|
160
|
+
}
|
|
161
|
+
DOCUMENT {
|
|
162
|
+
string id PK
|
|
163
|
+
string title
|
|
164
|
+
string authorId FK
|
|
165
|
+
}
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
</section>
|
|
169
|
+
|
|
170
|
+
<section class="hr-section hr-stack">
|
|
171
|
+
<h2 class="hr-heading-h2">Grid templates</h2>
|
|
172
|
+
|
|
173
|
+
<h3 class="hr-heading-h3">Two columns</h3>
|
|
174
|
+
<div class="hr-grid hr-grid-2">
|
|
175
|
+
<article class="hr-card">
|
|
176
|
+
<h3 class="hr-card-title">Left column</h3>
|
|
177
|
+
<p class="hr-card-text">Equal-width cells. Good for compare/contrast pairs.</p>
|
|
178
|
+
</article>
|
|
179
|
+
<article class="hr-card">
|
|
180
|
+
<h3 class="hr-card-title">Right column</h3>
|
|
181
|
+
<p class="hr-card-text">Stacks to a single column under 720px.</p>
|
|
182
|
+
</article>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<h3 class="hr-heading-h3">Three columns</h3>
|
|
186
|
+
<div class="hr-grid hr-grid-3">
|
|
187
|
+
<article class="hr-card">
|
|
188
|
+
<h3 class="hr-card-title">Discover</h3>
|
|
189
|
+
<p class="hr-card-text">Frame the problem and surface signals.</p>
|
|
190
|
+
</article>
|
|
191
|
+
<article class="hr-card">
|
|
192
|
+
<h3 class="hr-card-title">Decide</h3>
|
|
193
|
+
<p class="hr-card-text">Pick an approach with a clear rationale.</p>
|
|
194
|
+
</article>
|
|
195
|
+
<article class="hr-card">
|
|
196
|
+
<h3 class="hr-card-title">Deliver</h3>
|
|
197
|
+
<p class="hr-card-text">Ship in small, verifiable steps.</p>
|
|
198
|
+
</article>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<h3 class="hr-heading-h3">Four columns</h3>
|
|
202
|
+
<div class="hr-grid hr-grid-4">
|
|
203
|
+
<article class="hr-card">
|
|
204
|
+
<h3 class="hr-card-title">Spec</h3>
|
|
205
|
+
<p class="hr-card-text">Define what success looks like.</p>
|
|
206
|
+
</article>
|
|
207
|
+
<article class="hr-card">
|
|
208
|
+
<h3 class="hr-card-title">Plan</h3>
|
|
209
|
+
<p class="hr-card-text">Sequence the work into task groups.</p>
|
|
210
|
+
</article>
|
|
211
|
+
<article class="hr-card">
|
|
212
|
+
<h3 class="hr-card-title">Build</h3>
|
|
213
|
+
<p class="hr-card-text">Implement against the plan.</p>
|
|
214
|
+
</article>
|
|
215
|
+
<article class="hr-card">
|
|
216
|
+
<h3 class="hr-card-title">Verify</h3>
|
|
217
|
+
<p class="hr-card-text">Prove the outcome with tests.</p>
|
|
218
|
+
</article>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<h3 class="hr-heading-h3">Featured + supporting (2 / 1)</h3>
|
|
222
|
+
<div class="hr-grid hr-grid-feature">
|
|
223
|
+
<article class="hr-card hr-card-featured">
|
|
224
|
+
<h3 class="hr-card-title">Primary outcome</h3>
|
|
225
|
+
<p class="hr-card-text">
|
|
226
|
+
A wide, high-emphasis card that anchors the section while the
|
|
227
|
+
two narrow cards carry supporting detail.
|
|
228
|
+
</p>
|
|
229
|
+
<span class="hr-badge">Priority</span>
|
|
230
|
+
</article>
|
|
231
|
+
<article class="hr-card">
|
|
232
|
+
<h3 class="hr-card-title">Supporting note</h3>
|
|
233
|
+
<p class="hr-card-text">Context that complements the primary outcome.</p>
|
|
234
|
+
</article>
|
|
235
|
+
<article class="hr-card">
|
|
236
|
+
<h3 class="hr-card-title">Supporting note</h3>
|
|
237
|
+
<p class="hr-card-text">Additional context, kept secondary.</p>
|
|
238
|
+
</article>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<h3 class="hr-heading-h3">Content + sidebar</h3>
|
|
242
|
+
<div class="hr-grid hr-grid-sidebar">
|
|
243
|
+
<article class="hr-card">
|
|
244
|
+
<h3 class="hr-card-title">Main content</h3>
|
|
245
|
+
<p class="hr-card-text">
|
|
246
|
+
A wider primary cell paired with a narrower companion. Use for
|
|
247
|
+
feature descriptions with quick-reference metadata to the side.
|
|
248
|
+
</p>
|
|
249
|
+
</article>
|
|
250
|
+
<aside class="hr-card">
|
|
251
|
+
<h3 class="hr-card-title">At a glance</h3>
|
|
252
|
+
<p class="hr-card-text">Status, owner, last update, links.</p>
|
|
253
|
+
<span class="hr-badge">Meta</span>
|
|
254
|
+
</aside>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<h3 class="hr-heading-h3">Auto-fit (default)</h3>
|
|
258
|
+
<div class="hr-grid">
|
|
259
|
+
<article class="hr-card">
|
|
260
|
+
<h3 class="hr-card-title">Auto-fit cell</h3>
|
|
261
|
+
<p class="hr-card-text">Reflows from 1 to N columns based on viewport width.</p>
|
|
262
|
+
</article>
|
|
263
|
+
<article class="hr-card">
|
|
264
|
+
<h3 class="hr-card-title">Auto-fit cell</h3>
|
|
265
|
+
<p class="hr-card-text">Each cell respects a 260px minimum.</p>
|
|
266
|
+
</article>
|
|
267
|
+
<article class="hr-card">
|
|
268
|
+
<h3 class="hr-card-title">Auto-fit cell</h3>
|
|
269
|
+
<p class="hr-card-text">Best default when card count is unknown.</p>
|
|
270
|
+
</article>
|
|
271
|
+
</div>
|
|
272
|
+
</section>
|
|
273
|
+
|
|
274
|
+
<section class="hr-section hr-stack">
|
|
275
|
+
<h2 class="hr-heading-h2">Quote</h2>
|
|
276
|
+
<blockquote class="hr-quote">
|
|
277
|
+
<p>
|
|
278
|
+
Great readability comes from predictable rhythm, not from visual
|
|
279
|
+
noise.
|
|
280
|
+
</p>
|
|
281
|
+
<footer>Design rule for long-form interface blocks</footer>
|
|
282
|
+
</blockquote>
|
|
283
|
+
</section>
|
|
284
|
+
|
|
285
|
+
<section class="hr-section hr-stack">
|
|
286
|
+
<h2 class="hr-heading-h2">Important highlights</h2>
|
|
287
|
+
|
|
288
|
+
<aside class="hr-highlight hr-highlight-note">
|
|
289
|
+
<p class="hr-highlight-title">Note</p>
|
|
290
|
+
<p>
|
|
291
|
+
Use this variant for neutral guidance and implementation tips.
|
|
292
|
+
</p>
|
|
293
|
+
</aside>
|
|
294
|
+
|
|
295
|
+
<aside class="hr-highlight hr-highlight-warning">
|
|
296
|
+
<p class="hr-highlight-title">Warning</p>
|
|
297
|
+
<p>
|
|
298
|
+
Use this variant for constraints that may break consistency or
|
|
299
|
+
accessibility.
|
|
300
|
+
</p>
|
|
301
|
+
</aside>
|
|
302
|
+
|
|
303
|
+
<aside class="hr-highlight hr-highlight-important">
|
|
304
|
+
<p class="hr-highlight-title">Important</p>
|
|
305
|
+
<p>
|
|
306
|
+
Use this variant for decisions that affect rendering output and
|
|
307
|
+
shared conventions.
|
|
308
|
+
</p>
|
|
309
|
+
</aside>
|
|
310
|
+
</section>
|
|
311
|
+
</main>
|
|
312
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
|
313
|
+
<script>
|
|
314
|
+
window.mermaid &&
|
|
315
|
+
mermaid.initialize({ startOnLoad: true, theme: "neutral", securityLevel: "loose" });
|
|
316
|
+
</script>
|
|
317
|
+
</body>
|
|
318
|
+
</html>
|
|
@@ -0,0 +1,388 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Mirrored from tokens.json to keep CSS runtime simple. */
|
|
3
|
+
--hr-color-primary: #cc785c;
|
|
4
|
+
--hr-color-primary-active: #a9583e;
|
|
5
|
+
--hr-color-primary-disabled: #e6dfd8;
|
|
6
|
+
--hr-color-ink: #141413;
|
|
7
|
+
--hr-color-body: #3d3d3a;
|
|
8
|
+
--hr-color-body-strong: #252523;
|
|
9
|
+
--hr-color-muted: #6c6a64;
|
|
10
|
+
--hr-color-muted-soft: #8e8b82;
|
|
11
|
+
--hr-color-hairline: #e6dfd8;
|
|
12
|
+
--hr-color-hairline-soft: #ebe6df;
|
|
13
|
+
--hr-color-canvas: #faf9f5;
|
|
14
|
+
--hr-color-surface-soft: #f5f0e8;
|
|
15
|
+
--hr-color-surface-card: #efe9de;
|
|
16
|
+
--hr-color-surface-cream-strong: #e8e0d2;
|
|
17
|
+
--hr-color-surface-dark: #181715;
|
|
18
|
+
--hr-color-surface-dark-elevated: #252320;
|
|
19
|
+
--hr-color-surface-dark-soft: #1f1e1b;
|
|
20
|
+
--hr-color-on-primary: #ffffff;
|
|
21
|
+
--hr-color-on-dark: #faf9f5;
|
|
22
|
+
--hr-color-on-dark-soft: #a09d96;
|
|
23
|
+
--hr-color-accent-teal: #5db8a6;
|
|
24
|
+
--hr-color-accent-amber: #e8a55a;
|
|
25
|
+
--hr-color-success: #5db872;
|
|
26
|
+
--hr-color-warning: #d4a017;
|
|
27
|
+
--hr-color-error: #c64545;
|
|
28
|
+
|
|
29
|
+
--hr-font-display: "Copernicus", "Tiempos Headline", "Cormorant Garamond", "EB Garamond", Georgia, serif;
|
|
30
|
+
--hr-font-body: "StyreneB", "Styrene B", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
31
|
+
--hr-font-code: "JetBrains Mono", ui-monospace, monospace;
|
|
32
|
+
|
|
33
|
+
--hr-space-xxs: 4px;
|
|
34
|
+
--hr-space-xs: 8px;
|
|
35
|
+
--hr-space-sm: 12px;
|
|
36
|
+
--hr-space-md: 16px;
|
|
37
|
+
--hr-space-lg: 24px;
|
|
38
|
+
--hr-space-xl: 32px;
|
|
39
|
+
--hr-space-xxl: 48px;
|
|
40
|
+
--hr-space-section: 96px;
|
|
41
|
+
|
|
42
|
+
--hr-radius-xs: 4px;
|
|
43
|
+
--hr-radius-sm: 6px;
|
|
44
|
+
--hr-radius-md: 8px;
|
|
45
|
+
--hr-radius-lg: 12px;
|
|
46
|
+
--hr-radius-xl: 16px;
|
|
47
|
+
--hr-radius-pill: 9999px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
*,
|
|
51
|
+
*::before,
|
|
52
|
+
*::after {
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
body {
|
|
57
|
+
margin: 0;
|
|
58
|
+
font-family: var(--hr-font-body);
|
|
59
|
+
color: var(--hr-color-body);
|
|
60
|
+
background: var(--hr-color-canvas);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.hr-page {
|
|
64
|
+
max-width: 1100px;
|
|
65
|
+
margin: 0 auto;
|
|
66
|
+
padding: var(--hr-space-xl) var(--hr-space-lg) var(--hr-space-section);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.hr-section {
|
|
70
|
+
margin-top: var(--hr-space-section);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.hr-section:first-child {
|
|
74
|
+
margin-top: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.hr-heading-eyebrow {
|
|
78
|
+
display: inline-block;
|
|
79
|
+
margin: 0 0 var(--hr-space-sm);
|
|
80
|
+
color: var(--hr-color-muted);
|
|
81
|
+
letter-spacing: 0.12em;
|
|
82
|
+
text-transform: uppercase;
|
|
83
|
+
font-size: 12px;
|
|
84
|
+
font-weight: 600;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.hr-heading-h1,
|
|
88
|
+
.hr-heading-h2,
|
|
89
|
+
.hr-heading-h3,
|
|
90
|
+
.hr-heading-h4 {
|
|
91
|
+
margin: 0;
|
|
92
|
+
color: var(--hr-color-ink);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.hr-heading-h1 {
|
|
96
|
+
font-family: var(--hr-font-display);
|
|
97
|
+
font-size: clamp(2.5rem, 5vw, 4rem);
|
|
98
|
+
font-weight: 400;
|
|
99
|
+
letter-spacing: -1.5px;
|
|
100
|
+
line-height: 1.05;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.hr-heading-h2 {
|
|
104
|
+
font-family: var(--hr-font-display);
|
|
105
|
+
font-size: clamp(2rem, 4vw, 3rem);
|
|
106
|
+
font-weight: 400;
|
|
107
|
+
letter-spacing: -1px;
|
|
108
|
+
line-height: 1.1;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.hr-heading-h3 {
|
|
112
|
+
font-family: var(--hr-font-display);
|
|
113
|
+
font-size: clamp(1.7rem, 3vw, 2.25rem);
|
|
114
|
+
font-weight: 400;
|
|
115
|
+
letter-spacing: -0.5px;
|
|
116
|
+
line-height: 1.15;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.hr-heading-h4 {
|
|
120
|
+
font-size: 1.125rem;
|
|
121
|
+
font-weight: 500;
|
|
122
|
+
line-height: 1.4;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.hr-stack {
|
|
126
|
+
display: grid;
|
|
127
|
+
gap: var(--hr-space-md);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.hr-text-block {
|
|
131
|
+
max-width: 75ch;
|
|
132
|
+
color: var(--hr-color-body);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.hr-text-block p,
|
|
136
|
+
.hr-text-block ul,
|
|
137
|
+
.hr-text-block ol {
|
|
138
|
+
margin: 0;
|
|
139
|
+
font-size: 16px;
|
|
140
|
+
line-height: 1.55;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.hr-text-block ul,
|
|
144
|
+
.hr-text-block ol {
|
|
145
|
+
padding-left: 1.25rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.hr-text-muted {
|
|
149
|
+
color: var(--hr-color-muted);
|
|
150
|
+
font-size: 14px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.hr-grid {
|
|
154
|
+
display: grid;
|
|
155
|
+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
156
|
+
gap: var(--hr-space-lg);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.hr-grid-2 {
|
|
160
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.hr-grid-3 {
|
|
164
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.hr-grid-4 {
|
|
168
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.hr-grid-feature {
|
|
172
|
+
grid-template-columns: 2fr 1fr 1fr;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.hr-grid-feature > :first-child {
|
|
176
|
+
grid-row: span 1;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.hr-grid-sidebar {
|
|
180
|
+
grid-template-columns: 2fr 1fr;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@media (max-width: 880px) {
|
|
184
|
+
.hr-grid-3,
|
|
185
|
+
.hr-grid-4,
|
|
186
|
+
.hr-grid-feature {
|
|
187
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
188
|
+
}
|
|
189
|
+
.hr-grid-feature > :first-child {
|
|
190
|
+
grid-column: 1 / -1;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@media (max-width: 600px) {
|
|
195
|
+
.hr-grid-2,
|
|
196
|
+
.hr-grid-3,
|
|
197
|
+
.hr-grid-4,
|
|
198
|
+
.hr-grid-feature,
|
|
199
|
+
.hr-grid-sidebar {
|
|
200
|
+
grid-template-columns: 1fr;
|
|
201
|
+
}
|
|
202
|
+
.hr-grid-feature > :first-child {
|
|
203
|
+
grid-column: auto;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.hr-card {
|
|
208
|
+
background: var(--hr-color-surface-card);
|
|
209
|
+
border: 1px solid var(--hr-color-hairline);
|
|
210
|
+
border-radius: var(--hr-radius-lg);
|
|
211
|
+
padding: var(--hr-space-xl);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.hr-card-featured {
|
|
215
|
+
background: var(--hr-color-surface-dark);
|
|
216
|
+
border-color: var(--hr-color-surface-dark-elevated);
|
|
217
|
+
color: var(--hr-color-on-dark);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.hr-card-title {
|
|
221
|
+
margin: 0 0 var(--hr-space-sm);
|
|
222
|
+
font-size: 1.125rem;
|
|
223
|
+
font-weight: 600;
|
|
224
|
+
color: inherit;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.hr-card-text {
|
|
228
|
+
margin: 0;
|
|
229
|
+
color: inherit;
|
|
230
|
+
opacity: 0.92;
|
|
231
|
+
line-height: 1.55;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.hr-badge {
|
|
235
|
+
display: inline-block;
|
|
236
|
+
margin-top: var(--hr-space-md);
|
|
237
|
+
border-radius: var(--hr-radius-pill);
|
|
238
|
+
background: var(--hr-color-primary);
|
|
239
|
+
color: var(--hr-color-on-primary);
|
|
240
|
+
font-size: 12px;
|
|
241
|
+
font-weight: 600;
|
|
242
|
+
letter-spacing: 0.1em;
|
|
243
|
+
text-transform: uppercase;
|
|
244
|
+
padding: 4px 10px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.hr-table-wrap {
|
|
248
|
+
overflow: auto;
|
|
249
|
+
border: 1px solid var(--hr-color-hairline);
|
|
250
|
+
border-radius: var(--hr-radius-lg);
|
|
251
|
+
background: var(--hr-color-canvas);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.hr-table {
|
|
255
|
+
width: 100%;
|
|
256
|
+
border-collapse: collapse;
|
|
257
|
+
min-width: 640px;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.hr-table th,
|
|
261
|
+
.hr-table td {
|
|
262
|
+
text-align: left;
|
|
263
|
+
padding: var(--hr-space-md);
|
|
264
|
+
border-bottom: 1px solid var(--hr-color-hairline-soft);
|
|
265
|
+
font-size: 14px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.hr-table th {
|
|
269
|
+
color: var(--hr-color-body-strong);
|
|
270
|
+
background: var(--hr-color-surface-soft);
|
|
271
|
+
font-weight: 600;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.hr-table tbody tr:last-child td {
|
|
275
|
+
border-bottom: 0;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.hr-diagram {
|
|
279
|
+
border-radius: var(--hr-radius-lg);
|
|
280
|
+
border: 1px solid var(--hr-color-hairline);
|
|
281
|
+
background: linear-gradient(
|
|
282
|
+
180deg,
|
|
283
|
+
var(--hr-color-surface-card) 0%,
|
|
284
|
+
var(--hr-color-canvas) 100%
|
|
285
|
+
);
|
|
286
|
+
padding: var(--hr-space-lg);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.hr-diagram pre {
|
|
290
|
+
margin: 0;
|
|
291
|
+
font-family: var(--hr-font-code);
|
|
292
|
+
font-size: 14px;
|
|
293
|
+
line-height: 1.6;
|
|
294
|
+
color: var(--hr-color-body-strong);
|
|
295
|
+
white-space: pre-wrap;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.hr-diagram .mermaid {
|
|
299
|
+
margin: 0;
|
|
300
|
+
display: flex;
|
|
301
|
+
justify-content: center;
|
|
302
|
+
font-family: var(--hr-font-code);
|
|
303
|
+
font-size: 14px;
|
|
304
|
+
line-height: 1.6;
|
|
305
|
+
color: var(--hr-color-body-strong);
|
|
306
|
+
white-space: pre;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.hr-diagram .mermaid svg {
|
|
310
|
+
max-width: 100%;
|
|
311
|
+
height: auto;
|
|
312
|
+
display: block;
|
|
313
|
+
margin: 0 auto;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.hr-quote {
|
|
317
|
+
margin: 0;
|
|
318
|
+
border-left: 4px solid var(--hr-color-primary);
|
|
319
|
+
padding: var(--hr-space-md) var(--hr-space-lg);
|
|
320
|
+
background: var(--hr-color-surface-soft);
|
|
321
|
+
border-radius: 0 var(--hr-radius-md) var(--hr-radius-md) 0;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.hr-quote p {
|
|
325
|
+
margin: 0;
|
|
326
|
+
font-family: var(--hr-font-display);
|
|
327
|
+
font-size: 1.5rem;
|
|
328
|
+
line-height: 1.3;
|
|
329
|
+
letter-spacing: -0.3px;
|
|
330
|
+
color: var(--hr-color-ink);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.hr-quote footer {
|
|
334
|
+
margin-top: var(--hr-space-sm);
|
|
335
|
+
color: var(--hr-color-muted);
|
|
336
|
+
font-size: 14px;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.hr-highlight {
|
|
340
|
+
border: 1px solid var(--hr-color-hairline);
|
|
341
|
+
border-left-width: 6px;
|
|
342
|
+
border-radius: var(--hr-radius-md);
|
|
343
|
+
background: var(--hr-color-surface-soft);
|
|
344
|
+
padding: var(--hr-space-md) var(--hr-space-lg);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.hr-highlight-title {
|
|
348
|
+
margin: 0 0 var(--hr-space-xs);
|
|
349
|
+
font-size: 13px;
|
|
350
|
+
font-weight: 700;
|
|
351
|
+
letter-spacing: 0.08em;
|
|
352
|
+
text-transform: uppercase;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.hr-highlight p {
|
|
356
|
+
margin: 0;
|
|
357
|
+
line-height: 1.55;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.hr-highlight-note {
|
|
361
|
+
border-left-color: var(--hr-color-accent-teal);
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.hr-highlight-note .hr-highlight-title {
|
|
365
|
+
color: #2d8071;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.hr-highlight-warning {
|
|
369
|
+
border-left-color: var(--hr-color-warning);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.hr-highlight-warning .hr-highlight-title {
|
|
373
|
+
color: #8a6a0e;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.hr-highlight-important {
|
|
377
|
+
border-left-color: var(--hr-color-primary);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.hr-highlight-important .hr-highlight-title {
|
|
381
|
+
color: var(--hr-color-primary-active);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.hr-hr {
|
|
385
|
+
border: 0;
|
|
386
|
+
border-top: 1px solid var(--hr-color-hairline);
|
|
387
|
+
margin: var(--hr-space-xl) 0;
|
|
388
|
+
}
|