@scribe-atp/styles 1.1.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/package.json +32 -0
- package/src/index.css +230 -0
package/package.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@scribe-atp/styles",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Base CSS for rendering Scribe CMS content in consumer sites.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./src/index.css"
|
|
9
|
+
},
|
|
10
|
+
"style": "./src/index.css",
|
|
11
|
+
"files": [
|
|
12
|
+
"src"
|
|
13
|
+
],
|
|
14
|
+
"keywords": [
|
|
15
|
+
"at-protocol",
|
|
16
|
+
"atproto",
|
|
17
|
+
"bluesky",
|
|
18
|
+
"scribe",
|
|
19
|
+
"scribe-cms",
|
|
20
|
+
"blog",
|
|
21
|
+
"cms",
|
|
22
|
+
"css",
|
|
23
|
+
"styles"
|
|
24
|
+
],
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "https://github.com/ACregan/scribe-atp-sdk.git"
|
|
28
|
+
},
|
|
29
|
+
"publishConfig": {
|
|
30
|
+
"access": "public"
|
|
31
|
+
}
|
|
32
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
/* @scribe-atp/styles
|
|
2
|
+
* Base styles for rendering Scribe CMS article content.
|
|
3
|
+
* All rules are scoped to .scribe-content — wrap your article HTML in an element
|
|
4
|
+
* with that class. Override any --scribe-* custom property to theme.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ── Custom properties ──────────────────────────────────────────────────────── */
|
|
8
|
+
|
|
9
|
+
.scribe-content {
|
|
10
|
+
/* Code blocks & inline code */
|
|
11
|
+
--scribe-code-bg: #f5f5f5;
|
|
12
|
+
--scribe-code-border: #e0e0e0;
|
|
13
|
+
--scribe-code-font: "Courier New", Courier, monospace;
|
|
14
|
+
--scribe-code-font-size: 0.875em;
|
|
15
|
+
--scribe-inline-code-bg: rgba(0, 0, 0, 0.06);
|
|
16
|
+
|
|
17
|
+
/* Blockquotes */
|
|
18
|
+
--scribe-blockquote-border: #ccc;
|
|
19
|
+
--scribe-blockquote-color: #666;
|
|
20
|
+
|
|
21
|
+
/* Checklists */
|
|
22
|
+
--scribe-checkbox-size: 1em;
|
|
23
|
+
--scribe-checkbox-border: #aaa;
|
|
24
|
+
--scribe-checkbox-checked-bg: #333;
|
|
25
|
+
--scribe-checkbox-checked-border: #333;
|
|
26
|
+
|
|
27
|
+
/* Token colors (Prism-light palette — match what Scribe CMS emits) */
|
|
28
|
+
--scribe-token-comment: #708090;
|
|
29
|
+
--scribe-token-punctuation: #555;
|
|
30
|
+
--scribe-token-property: #905;
|
|
31
|
+
--scribe-token-string: #690;
|
|
32
|
+
--scribe-token-operator: #9a6e3a;
|
|
33
|
+
--scribe-token-keyword: #07a;
|
|
34
|
+
--scribe-token-function: #dd4a68;
|
|
35
|
+
--scribe-token-variable: #e90;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ── Code blocks ────────────────────────────────────────────────────────────── */
|
|
39
|
+
|
|
40
|
+
.scribe-content pre {
|
|
41
|
+
font-family: var(--scribe-code-font);
|
|
42
|
+
font-size: var(--scribe-code-font-size);
|
|
43
|
+
background: var(--scribe-code-bg);
|
|
44
|
+
border: 1px solid var(--scribe-code-border);
|
|
45
|
+
border-radius: 4px;
|
|
46
|
+
padding: 1em 1.2em;
|
|
47
|
+
margin: 0.75em 0;
|
|
48
|
+
overflow-x: auto;
|
|
49
|
+
tab-size: 2;
|
|
50
|
+
white-space: pre;
|
|
51
|
+
line-height: 1.6;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.scribe-content pre code {
|
|
55
|
+
font-family: inherit;
|
|
56
|
+
font-size: inherit;
|
|
57
|
+
background: none;
|
|
58
|
+
padding: 0;
|
|
59
|
+
border: none;
|
|
60
|
+
border-radius: 0;
|
|
61
|
+
white-space: inherit;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ── Inline code ────────────────────────────────────────────────────────────── */
|
|
65
|
+
|
|
66
|
+
.scribe-content :not(pre) > code {
|
|
67
|
+
font-family: var(--scribe-code-font);
|
|
68
|
+
font-size: var(--scribe-code-font-size);
|
|
69
|
+
background: var(--scribe-inline-code-bg);
|
|
70
|
+
padding: 0.15em 0.4em;
|
|
71
|
+
border-radius: 3px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* ── Syntax highlighting (token classes emitted by Scribe CMS) ──────────────── */
|
|
75
|
+
|
|
76
|
+
.scribe-content .token.comment,
|
|
77
|
+
.scribe-content .token.prolog,
|
|
78
|
+
.scribe-content .token.doctype,
|
|
79
|
+
.scribe-content .token.cdata {
|
|
80
|
+
color: var(--scribe-token-comment);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.scribe-content .token.punctuation {
|
|
84
|
+
color: var(--scribe-token-punctuation);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.scribe-content .token.namespace {
|
|
88
|
+
opacity: 0.7;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.scribe-content .token.property,
|
|
92
|
+
.scribe-content .token.tag,
|
|
93
|
+
.scribe-content .token.boolean,
|
|
94
|
+
.scribe-content .token.number,
|
|
95
|
+
.scribe-content .token.constant,
|
|
96
|
+
.scribe-content .token.symbol,
|
|
97
|
+
.scribe-content .token.deleted {
|
|
98
|
+
color: var(--scribe-token-property);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.scribe-content .token.selector,
|
|
102
|
+
.scribe-content .token.attr,
|
|
103
|
+
.scribe-content .token.string,
|
|
104
|
+
.scribe-content .token.char,
|
|
105
|
+
.scribe-content .token.builtin,
|
|
106
|
+
.scribe-content .token.inserted {
|
|
107
|
+
color: var(--scribe-token-string);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.scribe-content .token.operator,
|
|
111
|
+
.scribe-content .token.entity,
|
|
112
|
+
.scribe-content .token.url {
|
|
113
|
+
color: var(--scribe-token-operator);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.scribe-content .token.entity {
|
|
117
|
+
cursor: help;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.scribe-content .token.atrule,
|
|
121
|
+
.scribe-content .token.keyword {
|
|
122
|
+
color: var(--scribe-token-keyword);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.scribe-content .token.function,
|
|
126
|
+
.scribe-content .token.class-name,
|
|
127
|
+
.scribe-content .token.class {
|
|
128
|
+
color: var(--scribe-token-function);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.scribe-content .token.variable,
|
|
132
|
+
.scribe-content .token.regex,
|
|
133
|
+
.scribe-content .token.important {
|
|
134
|
+
color: var(--scribe-token-variable);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.scribe-content .token.important {
|
|
138
|
+
font-weight: bold;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* ── Images ─────────────────────────────────────────────────────────────────── */
|
|
142
|
+
|
|
143
|
+
.scribe-content img {
|
|
144
|
+
max-width: 100%;
|
|
145
|
+
height: auto;
|
|
146
|
+
display: block;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* ── Blockquotes ────────────────────────────────────────────────────────────── */
|
|
150
|
+
|
|
151
|
+
.scribe-content blockquote {
|
|
152
|
+
border-left: 4px solid var(--scribe-blockquote-border);
|
|
153
|
+
margin: 0.75em 0;
|
|
154
|
+
padding: 0.5em 1.2em;
|
|
155
|
+
color: var(--scribe-blockquote-color);
|
|
156
|
+
font-style: italic;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* ── Lists ──────────────────────────────────────────────────────────────────── */
|
|
160
|
+
|
|
161
|
+
.scribe-content ul {
|
|
162
|
+
list-style-type: disc;
|
|
163
|
+
padding-left: 2em;
|
|
164
|
+
margin: 0.5em 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.scribe-content ol {
|
|
168
|
+
list-style-type: decimal;
|
|
169
|
+
padding-left: 2em;
|
|
170
|
+
margin: 0.5em 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.scribe-content li {
|
|
174
|
+
margin: 0.25em 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.scribe-content ul ul,
|
|
178
|
+
.scribe-content ul ol,
|
|
179
|
+
.scribe-content ol ul,
|
|
180
|
+
.scribe-content ol ol {
|
|
181
|
+
margin: 0;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* ── Checklists ─────────────────────────────────────────────────────────────── */
|
|
185
|
+
/* Lexical exports checklist items with role="checkbox" and aria-checked */
|
|
186
|
+
|
|
187
|
+
.scribe-content li[role="checkbox"] {
|
|
188
|
+
list-style: none;
|
|
189
|
+
padding-left: 2em;
|
|
190
|
+
position: relative;
|
|
191
|
+
cursor: default;
|
|
192
|
+
margin-left: -2em;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.scribe-content li[role="checkbox"]::before {
|
|
196
|
+
content: "";
|
|
197
|
+
position: absolute;
|
|
198
|
+
left: 0;
|
|
199
|
+
top: 0.2em;
|
|
200
|
+
width: var(--scribe-checkbox-size);
|
|
201
|
+
height: var(--scribe-checkbox-size);
|
|
202
|
+
border: 2px solid var(--scribe-checkbox-border);
|
|
203
|
+
border-radius: 2px;
|
|
204
|
+
background: transparent;
|
|
205
|
+
box-sizing: border-box;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.scribe-content li[aria-checked="true"]::before {
|
|
209
|
+
background: var(--scribe-checkbox-checked-bg);
|
|
210
|
+
border-color: var(--scribe-checkbox-checked-border);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.scribe-content li[aria-checked="true"]::after {
|
|
214
|
+
content: "";
|
|
215
|
+
position: absolute;
|
|
216
|
+
left: 0.33em;
|
|
217
|
+
top: 0.38em;
|
|
218
|
+
width: 0.33em;
|
|
219
|
+
height: 0.55em;
|
|
220
|
+
border: 2px solid #fff;
|
|
221
|
+
border-top: none;
|
|
222
|
+
border-left: none;
|
|
223
|
+
transform: rotate(45deg);
|
|
224
|
+
box-sizing: border-box;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.scribe-content li[aria-checked="true"] > span {
|
|
228
|
+
text-decoration: line-through;
|
|
229
|
+
opacity: 0.6;
|
|
230
|
+
}
|