@hackersheet/react-document-content-styles 0.1.0-alpha.5 → 0.1.0-alpha.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 (2) hide show
  1. package/dist/basic.module.css +147 -97
  2. package/package.json +1 -1
@@ -1,7 +1,10 @@
1
1
  @charset "UTF-8";
2
- .main :first-child {
2
+ .main > :first-child {
3
3
  margin-top: 0;
4
4
  }
5
+ .main > :last-child {
6
+ margin-bottom: 0;
7
+ }
5
8
  .main * {
6
9
  word-break: break-word;
7
10
  scroll-margin-top: var(--hsdc-scroll-margin-top);
@@ -17,15 +20,6 @@
17
20
  font-weight: 700;
18
21
  border-bottom: 1px solid hsl(var(--hsdc-border));
19
22
  }
20
- .main p {
21
- margin: 1.8rem 0;
22
- }
23
- .main strong {
24
- font-weight: 700;
25
- }
26
- .main hr {
27
- margin: 4rem 0;
28
- }
29
23
  .main h1 {
30
24
  font-size: 2rem;
31
25
  }
@@ -44,19 +38,28 @@
44
38
  .main h6 {
45
39
  font-size: 0.7rem;
46
40
  }
41
+ .main p {
42
+ margin: 1.8rem 0;
43
+ }
44
+ .main strong {
45
+ font-weight: 700;
46
+ }
47
+ .main hr {
48
+ margin: 4rem 0;
49
+ }
47
50
  .main p {
48
51
  line-height: 2.2;
49
52
  letter-spacing: 0.04em;
50
53
  }
51
54
  .main ol,
52
55
  .main ul {
53
- padding-left: 1.5em;
56
+ padding-left: 1.5rem;
54
57
  }
55
58
  .main ol ol,
56
59
  .main ol ul,
57
60
  .main ul ol,
58
61
  .main ul ul {
59
- padding-left: 1em;
62
+ padding-left: 1rem;
60
63
  }
61
64
  .main ol li,
62
65
  .main ul li {
@@ -82,10 +85,11 @@
82
85
  list-style-type: square;
83
86
  }
84
87
  .main table {
88
+ margin: 1.5rem 0;
85
89
  width: 100%;
86
90
  table-layout: fixed;
87
91
  border-collapse: separate;
88
- border-radius: 8px;
92
+ border-radius: 0.25rem;
89
93
  border-spacing: 0;
90
94
  border: 1px solid hsl(var(--hsdc-border));
91
95
  overflow: hidden;
@@ -101,7 +105,7 @@
101
105
  }
102
106
  .main table th,
103
107
  .main table td {
104
- padding: 8px;
108
+ padding: 0.5rem;
105
109
  font-size: 0.875rem;
106
110
  text-align: left;
107
111
  }
@@ -121,9 +125,9 @@
121
125
  text-decoration: line-through;
122
126
  }
123
127
  .main code:not(pre code) {
124
- border-radius: 4px;
128
+ border-radius: 0.25rem;
125
129
  box-sizing: border-box;
126
- padding: 0.12em 0.25em;
130
+ padding: 0.125rem 0.25rem;
127
131
  font-family: var(--hsdc-font-code);
128
132
  font-size: 0.875em;
129
133
  line-height: 1.5;
@@ -131,7 +135,7 @@
131
135
  background-color: hsl(var(--hsdc-muted));
132
136
  }
133
137
  .main blockquote {
134
- margin: 0 0 1.8rem 0;
138
+ margin: 1.8rem 0;
135
139
  padding: 0.5rem 1rem;
136
140
  border-left: 0.25em solid hsl(var(--hsdc-border));
137
141
  color: hsl(var(--hsdc-muted-foreground));
@@ -157,268 +161,314 @@
157
161
  .main summary:hover {
158
162
  background-color: hsl(var(--hsdc-muted)/0.5);
159
163
  }
160
- .main :global(.footnotes) {
161
- margin: 4rem 0 1.5rem 0;
164
+
165
+ .main :global .heading:has(a) {
166
+ padding: 0;
167
+ }
168
+ .main :global .heading a {
169
+ padding: 0.5rem 0;
170
+ display: flex;
171
+ align-items: center;
172
+ gap: 0.5rem;
173
+ color: inherit;
174
+ font-size: 0.9em;
175
+ }
176
+ .main :global .heading .heading-link-icon {
177
+ display: none;
178
+ }
179
+ .main :global .heading:hover .heading-link-icon {
180
+ display: inline;
181
+ }
182
+ .main :global .footnotes {
183
+ margin-top: 4rem;
184
+ padding-top: 2rem;
185
+ border-top: 1px solid hsl(var(--hsdc-border));
162
186
  color: hsl(var(--hsdc-muted-foreground));
163
187
  }
164
- .main :global(.footnotes) p {
188
+ .main :global .footnotes p {
165
189
  margin: 0;
166
190
  }
167
- .main :global(.contains-task-list) {
191
+ .main :global .footnotes .sr-only {
192
+ position: absolute;
193
+ width: 1px;
194
+ height: 1px;
195
+ padding: 0;
196
+ margin: -1px;
197
+ overflow: hidden;
198
+ clip: rect(0, 0, 0, 0);
199
+ white-space: nowrap;
200
+ border-width: 0;
201
+ }
202
+ .main :global .contains-task-list {
168
203
  list-style-type: none;
169
204
  padding-left: 0;
170
205
  }
171
- .main :global(.contains-task-list) input {
206
+ .main :global .contains-task-list input {
172
207
  margin-right: 0.5rem;
173
208
  }
174
-
175
- .main :global(.react-tweet-theme) {
209
+ .main :global .contains-task-list li:has(input:checked) {
210
+ text-decoration: line-through;
211
+ }
212
+ .main :global .react-tweet-theme {
176
213
  margin-left: auto;
177
214
  margin-right: auto;
178
215
  }
179
- .main :global(.react-tweet-theme) p {
216
+ .main :global .react-tweet-theme p {
180
217
  margin: 0;
181
218
  line-height: 1.5;
182
- font-size: 17px;
219
+ font-size: 1rem;
183
220
  }
184
- .main :global(.code-block) {
221
+ .main :global .code-block {
185
222
  margin: 1.5rem 0;
186
223
  border: 1px solid hsl(var(--hsdc-border));
187
- border-radius: 8px;
224
+ border-radius: 0.25rem;
188
225
  overflow: hidden;
189
226
  }
190
- .main :global(.code-block) pre {
227
+ .main :global .code-block pre {
191
228
  font-family: var(--hsdc-font-code);
192
- font-size: 14px;
193
- padding: 16px;
229
+ font-size: 0.875rem;
230
+ padding: 1rem;
194
231
  overflow: auto;
195
232
  background-color: hsl(var(--hsdc-code-block));
196
233
  }
197
- .main :global(.code-block) :global(.code-block-header) {
234
+ .main :global .code-block .code-block-header {
198
235
  display: flex;
199
236
  flex-direction: row;
200
237
  align-items: center;
201
- gap: 8px;
202
- font-size: 14px;
203
- padding: 8px 16px;
238
+ justify-items: center;
239
+ gap: 0.5rem;
240
+ font-size: 0.875rem;
241
+ padding: 0.5rem 1rem;
204
242
  background-color: hsl(var(--hsdc-muted));
205
243
  border-bottom: 1px solid hsl(var(--hsdc-border));
206
244
  }
207
- .main :global(.code-block) :global(.code-block-filename) {
245
+ .main :global .code-block .code-block-header > div {
246
+ display: flex;
247
+ align-items: center;
248
+ justify-items: center;
249
+ }
250
+ .main :global .code-block .code-block-filename {
208
251
  flex: 1 1 auto;
209
252
  }
210
- .main :global(.shiki) code {
253
+ .main :global .shiki code {
211
254
  min-width: max-content;
212
255
  display: flex;
213
256
  flex-direction: column;
214
- margin: 0 -16px;
257
+ margin: 0 -1rem;
215
258
  }
216
- .main :global(.shiki) :global(span.line) {
259
+ .main :global .shiki span.line {
217
260
  position: relative;
218
261
  width: 100%;
219
- padding: 0 16px;
262
+ padding: 0 1rem;
220
263
  }
221
- .main :global(.shiki) :global(span.line.highlighted) {
264
+ .main :global .shiki span.line.highlighted {
222
265
  background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.1) !important;
223
266
  }
224
- .main :global(.shiki) :global(span.line.diff.add) {
267
+ .main :global .shiki span.line.diff.add {
225
268
  background-color: hsl(var(--hsdc-shiki-diff-add)/0.1) !important;
226
269
  }
227
- .main :global(.shiki) :global(span.line.diff.add)::before {
270
+ .main :global .shiki span.line.diff.add::before {
228
271
  position: absolute;
229
272
  left: 2px;
230
273
  content: "+";
231
274
  color: hsl(var(--hsdc-shiki-diff-add));
232
275
  }
233
- .main :global(.shiki) :global(span.line.diff.remove) {
276
+ .main :global .shiki span.line.diff.remove {
234
277
  background-color: hsl(var(--hsdc-shiki-diff-remove)/0.1) !important;
235
278
  }
236
- .main :global(.shiki) :global(span.line.diff.remove)::before {
279
+ .main :global .shiki span.line.diff.remove::before {
237
280
  position: absolute;
238
281
  left: 2px;
239
282
  content: "-";
240
283
  color: hsl(var(--hsdc-shiki-diff-remove));
241
284
  }
242
- .main :global(.shiki) :global(.highlighted-word) {
285
+ .main :global .shiki .highlighted-word {
243
286
  background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.2);
244
- padding: 2px 0;
245
- margin: -2px 0;
287
+ padding: 0.125rem 0;
288
+ margin: -0.125rem 0;
246
289
  }
247
- .main :global(.shiki) :global(.tab),
248
- .main :global(.shiki) :global(.space) {
290
+ .main :global .shiki .tab,
291
+ .main :global .shiki .space {
249
292
  position: relative;
250
293
  }
251
- .main :global(.shiki) :global(.tab::before) {
294
+ .main :global .shiki .tab::before {
252
295
  content: "⇥";
253
296
  position: absolute;
254
297
  opacity: 0.3;
255
298
  }
256
- .main :global(.shiki) :global(.space::before) {
299
+ .main :global .shiki .space::before {
257
300
  content: "·";
258
301
  position: absolute;
259
302
  opacity: 0.3;
260
303
  }
261
- .main :global(.link-card) {
304
+ .main :global .link-card {
262
305
  display: flex;
263
306
  flex-direction: row;
264
307
  border: 1px solid hsl(var(--hsdc-border));
265
- border-radius: 8px;
308
+ border-radius: 0.5rem;
266
309
  overflow: hidden;
267
310
  color: inherit;
268
311
  width: 100%;
269
312
  max-height: 144px;
270
313
  margin: 1.8rem 0;
271
314
  }
272
- .main :global(.link-card):hover {
315
+ .main :global .link-card:hover {
273
316
  text-decoration: none;
274
317
  background-color: hsl(var(--hsdc-muted)/0.5);
275
318
  }
276
- .main :global(.link-card) :global(.link-card-main) {
319
+ .main :global .link-card .link-card-main {
277
320
  flex: 1;
278
321
  display: flex;
279
322
  flex-direction: column;
280
- padding: 12px 16px;
323
+ padding: 0.75rem 1rem;
281
324
  overflow: hidden;
282
- gap: 8px;
325
+ gap: 0.5rem;
283
326
  }
284
- .main :global(.link-card) :global(.link-card-main) > div {
327
+ .main :global .link-card .link-card-main .link-card-title,
328
+ .main :global .link-card .link-card-main .link-card-description,
329
+ .main :global .link-card .link-card-main .link-card-domain {
285
330
  overflow: hidden;
286
331
  display: -webkit-box;
287
332
  -webkit-box-orient: vertical;
288
333
  -webkit-line-clamp: 2;
289
334
  line-clamp: 2;
290
335
  }
291
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) {
336
+ .main :global .link-card .link-card-main .link-card-title-container {
292
337
  flex: 1 1 auto;
293
338
  }
294
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) :global(.link-card-title) {
339
+ .main :global .link-card .link-card-main .link-card-title-container .link-card-title {
295
340
  font-size: 0.875rem;
296
341
  -webkit-line-clamp: 4;
297
342
  line-clamp: 4;
298
343
  }
299
344
  @media (min-width: 640px) {
300
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) :global(.link-card-title) {
345
+ .main :global .link-card .link-card-main .link-card-title-container .link-card-title {
301
346
  font-size: 1rem;
302
347
  -webkit-line-clamp: 2;
303
348
  line-clamp: 2;
304
349
  }
305
350
  }
306
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
351
+ .main :global .link-card .link-card-main .link-card-description {
307
352
  font-size: 0.75rem;
308
353
  display: none;
309
354
  color: hsl(var(--hsdc-muted-foreground));
310
355
  }
311
356
  @media (min-width: 640px) {
312
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
357
+ .main :global .link-card .link-card-main .link-card-description {
313
358
  display: -webkit-box;
314
359
  }
315
360
  }
316
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) {
361
+ .main :global .link-card .link-card-main .link-card-domain {
317
362
  display: flex;
318
363
  flex-direction: row;
319
364
  align-items: center;
320
- gap: 8px;
365
+ gap: 0.5rem;
321
366
  font-size: 0.75rem;
322
367
  color: hsl(var(--hsdc-muted-foreground));
323
368
  }
324
- .main :global(.link-card) :global(.link-card-image) {
369
+ .main :global .link-card .link-card-main .link-card-domain > div {
370
+ text-wrap: nowrap;
371
+ text-overflow: ellipsis;
372
+ overflow: hidden;
373
+ }
374
+ .main :global .link-card .link-card-image {
325
375
  width: 35%;
326
376
  }
327
- .main :global(.link-card) :global(.link-card-image) img {
377
+ .main :global .link-card .link-card-image img {
328
378
  object-fit: contain;
329
379
  object-position: top;
330
- padding: 8px;
380
+ padding: 0.5rem;
331
381
  width: 100%;
332
382
  height: 100%;
333
383
  }
334
384
  @media (min-width: 640px) {
335
- .main :global(.link-card) :global(.link-card-image) img {
385
+ .main :global .link-card .link-card-image img {
336
386
  object-fit: cover;
337
387
  object-position: center;
338
388
  padding: 0;
339
389
  }
340
390
  }
341
- .main :global(.markdown-alert) {
391
+ .main :global .markdown-alert {
342
392
  padding: 0.5rem 1rem;
343
393
  margin-bottom: 1.8rem;
344
394
  border-left: 0.25em solid var(--github-alert-default-color);
345
395
  }
346
- .main :global(.markdown-alert) > :first-child {
396
+ .main :global .markdown-alert > :first-child {
347
397
  margin-top: 0;
348
398
  }
349
- .main :global(.markdown-alert) > :nth-child(2) {
350
- margin-top: 4px;
399
+ .main :global .markdown-alert > :nth-child(2) {
400
+ margin-top: 0.25rem;
351
401
  }
352
- .main :global(.markdown-alert) > :last-child {
402
+ .main :global .markdown-alert > :last-child {
353
403
  margin-bottom: 0;
354
404
  }
355
- .main :global(.markdown-alert) :global(.markdown-alert-title) {
405
+ .main :global .markdown-alert .markdown-alert-title {
356
406
  display: flex;
357
- margin-bottom: 4px;
407
+ margin-bottom: 0.25rem;
358
408
  align-items: center;
359
409
  }
360
- .main :global(.markdown-alert) :global(.markdown-alert-title) > svg {
361
- margin-right: 8px;
410
+ .main :global .markdown-alert .markdown-alert-title > svg {
411
+ margin-right: 0.5rem;
362
412
  }
363
- .main :global(.markdown-alert):global(.markdown-alert-note) {
413
+ .main :global .markdown-alert.markdown-alert-note {
364
414
  border-left-color: var(--github-alert-note-color);
365
415
  }
366
- .main :global(.markdown-alert):global(.markdown-alert-note) :global(.markdown-alert-title) {
416
+ .main :global .markdown-alert.markdown-alert-note .markdown-alert-title {
367
417
  color: var(--github-alert-note-color);
368
418
  }
369
- .main :global(.markdown-alert):global(.markdown-alert-tip) {
419
+ .main :global .markdown-alert.markdown-alert-tip {
370
420
  border-left-color: var(--github-alert-tip-color);
371
421
  }
372
- .main :global(.markdown-alert):global(.markdown-alert-tip) :global(.markdown-alert-title) {
422
+ .main :global .markdown-alert.markdown-alert-tip .markdown-alert-title {
373
423
  color: var(--github-alert-tip-color);
374
424
  }
375
- .main :global(.markdown-alert):global(.markdown-alert-important) {
425
+ .main :global .markdown-alert.markdown-alert-important {
376
426
  border-left-color: var(--github-alert-important-color);
377
427
  }
378
- .main :global(.markdown-alert):global(.markdown-alert-important) :global(.markdown-alert-title) {
428
+ .main :global .markdown-alert.markdown-alert-important .markdown-alert-title {
379
429
  color: var(--github-alert-important-color);
380
430
  }
381
- .main :global(.markdown-alert):global(.markdown-alert-warning) {
431
+ .main :global .markdown-alert.markdown-alert-warning {
382
432
  border-left-color: var(--github-alert-warning-color);
383
433
  }
384
- .main :global(.markdown-alert):global(.markdown-alert-warning) :global(.markdown-alert-title) {
434
+ .main :global .markdown-alert.markdown-alert-warning .markdown-alert-title {
385
435
  color: var(--github-alert-warning-color);
386
436
  }
387
- .main :global(.markdown-alert):global(.markdown-alert-caution) {
437
+ .main :global .markdown-alert.markdown-alert-caution {
388
438
  border-left-color: var(--github-alert-caution-color);
389
439
  }
390
- .main :global(.markdown-alert):global(.markdown-alert-caution) :global(.markdown-alert-title) {
440
+ .main :global .markdown-alert.markdown-alert-caution .markdown-alert-title {
391
441
  color: var(--github-alert-caution-color);
392
442
  }
393
- .main :global(.mermaid-block) {
443
+ .main :global .mermaid-block {
394
444
  margin: 1.5rem 0;
395
445
  }
396
- .main :global(.mermaid-block) svg {
446
+ .main :global .mermaid-block svg {
397
447
  margin-right: auto;
398
448
  margin-left: auto;
399
449
  }
400
- .main :global(.mermaid-block):global(.mermaid-loading) {
450
+ .main :global .mermaid-block.mermaid-loading {
401
451
  width: 100%;
402
452
  height: 8em;
403
453
  display: flex;
404
454
  justify-items: center;
405
455
  align-items: center;
406
456
  }
407
- .main :global(.mermaid-block):global(.mermaid-loading) > div {
457
+ .main :global .mermaid-block.mermaid-loading > div {
408
458
  margin-left: auto;
409
459
  margin-right: auto;
410
460
  }
411
- .main :global(.youtube-block) {
461
+ .main :global .youtube-block {
412
462
  margin: 1.5rem 0;
413
463
  }
414
- .main :global(.youtube-block) div > lite-youtube {
464
+ .main :global .youtube-block div > lite-youtube {
415
465
  margin-right: auto;
416
466
  margin-left: auto;
417
467
  }
418
- .main :global(.kifu-block) {
468
+ .main :global .kifu-block {
419
469
  margin: 1.5rem 0;
420
470
  }
421
- .main :global(.kifu-block) svg {
471
+ .main :global .kifu-block svg {
422
472
  margin-right: auto;
423
473
  margin-left: auto;
424
474
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hackersheet/react-document-content-styles",
3
- "version": "0.1.0-alpha.5",
3
+ "version": "0.1.0-alpha.6",
4
4
  "description": "Hacker Sheet document content styles.",
5
5
  "keywords": [],
6
6
  "repository": {