svelte-readme 4.0.1 → 4.2.0
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/README.md +31 -1
- package/dist/highlight/shared.d.ts +1 -0
- package/dist/index.js +176 -32
- package/dist/layout.css +183 -9
- package/dist/shared.css +21 -0
- package/dist/style.css +371 -191
- package/dist/styles/index.d.ts +1 -2
- package/dist/svelte.css +14 -0
- package/dist/typescript.css +13 -0
- package/dist/utils/purgeCss.d.ts +1 -1
- package/dist/yaml.css +4 -0
- package/package.json +1 -1
- package/dist/button.css +0 -28
package/dist/layout.css
CHANGED
|
@@ -1,18 +1,192 @@
|
|
|
1
1
|
.code-fence {
|
|
2
|
-
padding:
|
|
3
|
-
|
|
2
|
+
padding: 1.5rem var(--sr-box-padding);
|
|
3
|
+
margin-right: calc(var(--sr-box-padding) * -1);
|
|
4
|
+
margin-left: calc(var(--sr-box-padding) * -1);
|
|
5
|
+
border: 1px solid var(--sr-color-border-muted);
|
|
4
6
|
border-bottom: 0;
|
|
7
|
+
overflow-x: auto;
|
|
5
8
|
}
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
.sr-layout {
|
|
11
|
+
display: grid;
|
|
12
|
+
grid-template-columns: 11.25rem minmax(0, 60rem) 11.25rem;
|
|
13
|
+
column-gap: 3.125rem;
|
|
14
|
+
max-width: 87.5rem;
|
|
10
15
|
margin: 0 auto;
|
|
11
|
-
padding:
|
|
16
|
+
padding: 2.8125rem;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
main.markdown-body {
|
|
21
|
+
grid-column: 2;
|
|
22
|
+
min-width: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Shared between the sticky sidebar TOC (desktop) and the inline TOC rendered at
|
|
26
|
+
the `<!-- TOC -->` marker, or trailing the content when there's no marker
|
|
27
|
+
(mobile) — only one of the two is ever visible at a given viewport width. */
|
|
28
|
+
.sr-toc {
|
|
29
|
+
font-family: var(--sr-font-sans);
|
|
30
|
+
font-size: var(--sr-text-xs);
|
|
31
|
+
color: var(--sr-color-fg-muted);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.sr-toc p {
|
|
35
|
+
margin-bottom: 0.5rem;
|
|
36
|
+
min-height: auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.sr-toc ul {
|
|
40
|
+
margin: 0;
|
|
41
|
+
padding-left: 1em;
|
|
42
|
+
list-style: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.sr-toc > ul {
|
|
46
|
+
padding-left: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.sr-toc > ul > li {
|
|
50
|
+
margin-bottom: 0.25rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.sr-toc > ul > ul {
|
|
54
|
+
margin-bottom: 0.875rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.sr-toc a.sr-toc-active {
|
|
58
|
+
color: var(--sr-color-link);
|
|
59
|
+
text-decoration: underline;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Rendered as the first child of both `.sr-toc` variants (sidebar and inline),
|
|
63
|
+
so it always sits directly above whichever TOC copy is visible at the current
|
|
64
|
+
viewport width. */
|
|
65
|
+
.sr-theme-toggle {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
width: 1.75rem;
|
|
70
|
+
height: 1.75rem;
|
|
71
|
+
margin-bottom: 0.75rem;
|
|
72
|
+
padding: 0;
|
|
73
|
+
color: var(--sr-color-fg-muted);
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
appearance: none;
|
|
76
|
+
background-color: var(--sr-color-canvas);
|
|
77
|
+
border: 1px solid var(--sr-color-border);
|
|
78
|
+
border-radius: 0.375rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.sr-theme-toggle:hover {
|
|
82
|
+
color: var(--sr-color-fg);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Same specificity trick as `.sr-copy-icon`/`.sr-copy-check` in `style.css`: one
|
|
86
|
+
class each, so source order (not selector specificity) decides which icon shows
|
|
87
|
+
before `data-sr-theme` flips it. */
|
|
88
|
+
.sr-theme-icon-moon {
|
|
89
|
+
display: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:root[data-sr-theme="dark"] .sr-theme-icon-sun {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:root[data-sr-theme="dark"] .sr-theme-icon-moon {
|
|
97
|
+
display: block;
|
|
12
98
|
}
|
|
13
99
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
100
|
+
.sr-toc-sidebar {
|
|
101
|
+
grid-column: 3;
|
|
102
|
+
min-width: 0;
|
|
103
|
+
box-sizing: border-box;
|
|
104
|
+
position: sticky;
|
|
105
|
+
top: 0;
|
|
106
|
+
align-self: stretch;
|
|
107
|
+
max-height: 100vh;
|
|
108
|
+
padding: 1.5rem 0 2rem;
|
|
109
|
+
overflow-y: auto;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.sr-toc-inline {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
main.markdown-body p {
|
|
117
|
+
max-width: 52ch;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
main.markdown-body blockquote p {
|
|
121
|
+
max-width: none;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Between the mobile breakpoint and the full desktop width, the fixed-width empty
|
|
125
|
+
spacer column wastes space and pushes content off-center for no reason — drop it
|
|
126
|
+
and let content use the freed-up width, keeping only the sticky TOC column.
|
|
127
|
+
Breakpoints stay in `px` (not `rem`) — media queries measure against the
|
|
128
|
+
viewport, and using a font-relative unit there interacts poorly with browser
|
|
129
|
+
zoom in some browsers, so `px` is the safer, more predictable choice here. */
|
|
130
|
+
@media (max-width: 1300px) {
|
|
131
|
+
.sr-layout {
|
|
132
|
+
grid-template-columns: minmax(0, 1fr) 11.25rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
main.markdown-body {
|
|
136
|
+
grid-column: 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.sr-toc-sidebar {
|
|
140
|
+
grid-column: 2;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@media (max-width: 900px) {
|
|
145
|
+
/* The desktop scale's upper steps (tuned for a wide text column) read as
|
|
146
|
+
oversized against a narrow mobile viewport — h1 in particular dwarfs the
|
|
147
|
+
content below it — so the top of the scale is compressed here. */
|
|
148
|
+
:root {
|
|
149
|
+
--sr-text-xl: 1.25rem;
|
|
150
|
+
--sr-text-2xl: 1.5rem;
|
|
151
|
+
--sr-text-3xl: 1.875rem;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.sr-layout {
|
|
155
|
+
grid-template-columns: 1fr;
|
|
156
|
+
padding: 0.9375rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
main.markdown-body {
|
|
160
|
+
grid-column: 1;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.sr-toc-sidebar {
|
|
164
|
+
display: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.sr-toc-inline {
|
|
168
|
+
display: block;
|
|
169
|
+
margin-bottom: var(--sr-spacing-lg);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* The desktop bleed (negative margin equal to the box's own padding) assumes
|
|
173
|
+
room in the gutter outside the text column to bleed into. On mobile there's
|
|
174
|
+
no gutter — the layout padding above is already tight — so bleeding here would
|
|
175
|
+
just push these boxes past the viewport edge instead of aligning them. */
|
|
176
|
+
main.markdown-body table,
|
|
177
|
+
main.markdown-body pre,
|
|
178
|
+
main.markdown-body .sr-code-block,
|
|
179
|
+
main.markdown-body .code-fence,
|
|
180
|
+
main.markdown-body details {
|
|
181
|
+
margin-right: 0;
|
|
182
|
+
margin-left: 0;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* `table`'s desktop `width: fit-content` can still exceed the viewport here if a
|
|
186
|
+
cell's content can't wrap below some minimum width (e.g. a long unbroken
|
|
187
|
+
string) — cap it so the table's own horizontal scrollbar handles the overflow
|
|
188
|
+
instead of the page growing wider than the viewport. */
|
|
189
|
+
main.markdown-body table {
|
|
190
|
+
max-width: 100%;
|
|
17
191
|
}
|
|
18
192
|
}
|
package/dist/shared.css
CHANGED
|
@@ -22,3 +22,24 @@
|
|
|
22
22
|
.token.boolean {
|
|
23
23
|
color: #005cc5;
|
|
24
24
|
}
|
|
25
|
+
|
|
26
|
+
:root[data-sr-theme="dark"] .token.keyword,
|
|
27
|
+
:root[data-sr-theme="dark"] .token.operator {
|
|
28
|
+
color: #ff7b72;
|
|
29
|
+
}
|
|
30
|
+
:root[data-sr-theme="dark"] .token.punctuation {
|
|
31
|
+
color: #c9d1d9;
|
|
32
|
+
}
|
|
33
|
+
:root[data-sr-theme="dark"] .token.comment {
|
|
34
|
+
color: #8b949e;
|
|
35
|
+
}
|
|
36
|
+
:root[data-sr-theme="dark"] .token.function {
|
|
37
|
+
color: #d2a8ff;
|
|
38
|
+
}
|
|
39
|
+
:root[data-sr-theme="dark"] .token.string {
|
|
40
|
+
color: #a5d6ff;
|
|
41
|
+
}
|
|
42
|
+
:root[data-sr-theme="dark"] .token.number,
|
|
43
|
+
:root[data-sr-theme="dark"] .token.boolean {
|
|
44
|
+
color: #79c0ff;
|
|
45
|
+
}
|