hyperbook 0.76.2 → 0.77.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.
Files changed (28) hide show
  1. package/dist/assets/content.css +23 -8
  2. package/dist/assets/dark.css +13 -0
  3. package/dist/assets/directive-alert/style.css +14 -11
  4. package/dist/assets/directive-archive/style.css +0 -1
  5. package/dist/assets/directive-audio/style.css +0 -4
  6. package/dist/assets/directive-collapsible/style.css +3 -3
  7. package/dist/assets/directive-download/style.css +0 -1
  8. package/dist/assets/directive-embed/style.css +0 -1
  9. package/dist/assets/directive-excalidraw/style.css +0 -1
  10. package/dist/assets/directive-h5p/style.css +0 -4
  11. package/dist/assets/directive-jsxgraph/style.css +1 -2
  12. package/dist/assets/directive-onlineide/style.css +0 -1
  13. package/dist/assets/directive-p5/style.css +0 -1
  14. package/dist/assets/directive-pyide/style.css +0 -1
  15. package/dist/assets/directive-qr/style.css +0 -1
  16. package/dist/assets/directive-slideshow/style.css +0 -1
  17. package/dist/assets/directive-sqlide/style.css +0 -1
  18. package/dist/assets/directive-struktog/style.css +0 -2
  19. package/dist/assets/directive-tabs/style.css +1 -1
  20. package/dist/assets/directive-tiles/style.css +2 -0
  21. package/dist/assets/directive-typst/style.css +0 -1
  22. package/dist/assets/directive-video/style.css +0 -4
  23. package/dist/assets/directive-webide/style.css +0 -1
  24. package/dist/assets/shell.css +50 -6
  25. package/dist/index.js +250 -1928
  26. package/dist/locales/de.json +2 -0
  27. package/dist/locales/en.json +2 -0
  28. package/package.json +5 -5
package/dist/assets/content.css CHANGED
@@ -100,8 +100,8 @@ figure {
100
100
  clear: both;
101
101
  justify-items: center;
102
102
  align-content: center;
103
- margin-top: 10px;
104
- margin-bottom: 10px;
103
+ margin-top: 0;
104
+ margin-bottom: var(--element-gap);
105
105
  }
106
106
 
107
107
  .hyperbook-markdown figure.normal img {
@@ -177,7 +177,7 @@ figure {
177
177
  }
178
178
 
179
179
  .hyperbook-markdown li>p {
180
- margin-top: 16px;
180
+ margin: 0;
181
181
  }
182
182
 
183
183
  .hyperbook-markdown p,
@@ -188,12 +188,23 @@ figure {
188
188
  .hyperbook-markdown pre,
189
189
  .hyperbook-markdown details {
190
190
  margin-top: 0;
191
- margin-bottom: 10px;
191
+ margin-bottom: var(--element-gap);
192
+ }
193
+
194
+ .hyperbook-markdown figure[data-rehype-pretty-code-figure] {
195
+ margin-top: 0;
196
+ margin-bottom: var(--element-gap);
197
+ }
198
+
199
+ .hyperbook-markdown [class^="directive-"],
200
+ .hyperbook-markdown [class*=" directive-"] {
201
+ margin-top: 0;
202
+ margin-bottom: var(--element-gap);
192
203
  }
193
204
 
194
205
  .hyperbook-markdown blockquote {
195
206
  width: 90%;
196
- margin: 20px auto;
207
+ margin: 0 auto var(--element-gap) auto;
197
208
  font-style: italic;
198
209
  padding: 1.2em 30px 1.2em 75px;
199
210
  border-left: 8px solid var(--color-brand);
@@ -215,6 +226,10 @@ figure {
215
226
  content: "";
216
227
  }
217
228
 
229
+ .hyperbook-markdown blockquote p:last-child {
230
+ margin-bottom: 0;
231
+ }
232
+
218
233
  .hyperbook-markdown table {
219
234
  display: block;
220
235
  border-collapse: collapse;
@@ -252,8 +267,8 @@ figure {
252
267
  .hyperbook-markdown h6 {
253
268
  clear: both;
254
269
  font-family: hyperbook-heading, sans-serif;
255
- margin-top: 24px;
256
- margin-bottom: 16px;
270
+ margin-top: 0;
271
+ margin-bottom: var(--element-gap);
257
272
  font-weight: 600;
258
273
  line-height: 1.25;
259
274
  }
@@ -293,7 +308,7 @@ figure {
293
308
 
294
309
  .hyperbook-markdown p {
295
310
  margin-top: 0;
296
- margin-bottom: 10px;
311
+ margin-bottom: var(--element-gap);
297
312
  }
298
313
 
299
314
  .hyperbook-markdown h1,
package/dist/assets/dark.css CHANGED
@@ -24,6 +24,18 @@ header {
24
24
  background-color: var(--color-brand) !important;
25
25
  }
26
26
 
27
+ nav.breadcrumb {
28
+ color: color-mix(in srgb, var(--color-text), black 35%) !important;
29
+ }
30
+
31
+ nav.breadcrumb a {
32
+ color: color-mix(in srgb, var(--color-text), black 35%) !important;
33
+ }
34
+
35
+ nav.breadcrumb a:hover {
36
+ color: var(--color-brand) !important;
37
+ }
38
+
27
39
  figure[data-rehype-pretty-code-figure] pre,
28
40
  code[data-theme*=" "],
29
41
  code[data-theme*=" "] span {
@@ -63,3 +75,4 @@ color: rgb(253, 224, 71) !important;
63
75
  background-color: #6b21a880 !important;
64
76
  color: rgb(233, 213, 255) !important;
65
77
  }
78
+
package/dist/assets/directive-alert/style.css CHANGED
@@ -4,7 +4,11 @@
4
4
  }
5
5
 
6
6
  .directive-alert>p {
7
- margin-bottom: 10px;
7
+ margin-bottom: 0;
8
+ }
9
+
10
+ .directive-alert>p:last-child {
11
+ margin-bottom: 0;
8
12
  }
9
13
 
10
14
  .directive-alert {
@@ -14,17 +18,16 @@
14
18
  font-size: inherit;
15
19
  line-height: 1.6rem;
16
20
  word-spacing: 0.05rem;
17
- border-bottom-right-radius: 2px;
18
- border-top-right-radius: 2px;
19
- padding: 8px 12px 8px 20px;
20
- margin-bottom: 16px;
21
+ border-bottom-right-radius: 0.16rem;
22
+ border-top-right-radius: 0.16rem;
23
+ padding: 0.5rem 0.7rem 0.5rem 1.2rem;
21
24
  position: relative;
22
- border-left-width: 4px;
25
+ border-left-width: 0.25rem;
23
26
  border-left-style: solid;
24
27
  background-color: var(--color-nav);
25
28
  border-left-color: var(--alert-color);
26
29
  border-left-style: solid;
27
- border-left-width: 4px;
30
+ border-left-width: 0.25rem;
28
31
 
29
32
  a,
30
33
  strong {
@@ -44,14 +47,14 @@
44
47
  border-radius: 100%;
45
48
  font-size: 0.875rem;
46
49
  font-weight: 700;
47
- left: -14px;
50
+ left: -0.9rem;
48
51
  display: flex;
49
52
  align-items: center;
50
53
  justify-content: center;
51
54
  position: absolute;
52
- height: 24px;
53
- width: 24px;
54
- top: 8px;
55
+ height: 1.5rem;
56
+ width: 1.5rem;
57
+ top: 0.5rem;
55
58
  color: #fff;
56
59
  content: var(--alert-content);
57
60
  background-color: var(--alert-color);
package/dist/assets/directive-archive/style.css CHANGED
@@ -6,7 +6,6 @@
6
6
  border-radius: 4px;
7
7
  border-style: solid;
8
8
  border-width: 1px;
9
- margin-bottom: 10px;
10
9
  }
11
10
 
12
11
  .directive-archive:hover {
package/dist/assets/directive-audio/style.css CHANGED
@@ -1,7 +1,3 @@
1
- .directive-audio {
2
- margin-bottom: 16px;
3
- }
4
-
5
1
  .directive-audio .information {
6
2
  margin-top: 4px;
7
3
  text-align: center;
package/dist/assets/directive-collapsible/style.css CHANGED
@@ -12,7 +12,7 @@
12
12
  font-size: 100%;
13
13
  padding: 8px 16px;
14
14
  border-radius: 4px;
15
- margin-bottom: 10px;
15
+ margin-bottom: 0;
16
16
  list-style: none;
17
17
  color: var(--color-text);
18
18
  border-color: var(--color-spacer);
@@ -49,7 +49,7 @@
49
49
 
50
50
  .directive-collapsible .content {
51
51
  border-top: none;
52
- margin-bottom: 10px;
52
+ margin-bottom: 0;
53
53
  }
54
54
 
55
55
  .directive-collapsible[open] .content {
@@ -59,7 +59,7 @@
59
59
  border-top: none;
60
60
  padding: 6px 12px;
61
61
  padding-top: 12px;
62
- margin-bottom: 10px;
62
+ margin-bottom: 0;
63
63
  border-bottom-left-radius: 4px;
64
64
  border-bottom-right-radius: 4px;
65
65
  border-color: var(--color-spacer);
package/dist/assets/directive-download/style.css CHANGED
@@ -6,7 +6,6 @@
6
6
  border-radius: 4px;
7
7
  border-style: solid;
8
8
  border-width: 1px;
9
- margin-bottom: 10px;
10
9
  }
11
10
 
12
11
  .directive-download:hover {
package/dist/assets/directive-embed/style.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .directive-embed {
2
- margin-bottom: 8px;
3
2
  width: 100%;
4
3
  position: relative;
5
4
  overflow: hidden;
package/dist/assets/directive-excalidraw/style.css CHANGED
@@ -5,6 +5,5 @@
5
5
  border-color: var(--color-spacer);
6
6
  width: 100%;
7
7
  position: relative;
8
- margin-bottom: 10px;
9
8
  overflow: hidden;
10
9
  }
package/dist/assets/directive-h5p/style.css CHANGED
@@ -5,7 +5,3 @@
5
5
  padding: 8px;
6
6
  background-color: #fefefe;
7
7
  }
8
-
9
- .directive-h5p {
10
- margin-bottom: 8px;
11
- }
package/dist/assets/directive-jsxgraph/style.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .directive-jsxgraph {
2
2
  background: white;
3
- margin-bottom: 16px;
4
3
  border-radius: 8px;
5
4
  justify-content: center;
6
- margin: 12px auto;
5
+ margin: 0 auto;
7
6
  }
package/dist/assets/directive-onlineide/style.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .directive-onlineide {
2
- margin-bottom: 10px;
3
2
  border: 1px solid var(--color-spacer);
4
3
  border-radius: 8px;
5
4
  background: #1e1e1e;
package/dist/assets/directive-p5/style.css CHANGED
@@ -3,7 +3,6 @@
3
3
  justify-content: center;
4
4
  align-items: center;
5
5
  flex-direction: column;
6
- margin-bottom: 16px;
7
6
  overflow: hidden;
8
7
  gap: 8px;
9
8
  }
package/dist/assets/directive-pyide/style.css CHANGED
@@ -3,7 +3,6 @@
3
3
  justify-content: center;
4
4
  align-items: center;
5
5
  flex-direction: column;
6
- margin-bottom: 16px;
7
6
  overflow: hidden;
8
7
  gap: 8px;
9
8
  }
package/dist/assets/directive-qr/style.css CHANGED
@@ -4,7 +4,6 @@
4
4
  border-radius: 8px;
5
5
  width: fit-content;
6
6
  text-align: center;
7
- margin-bottom: 10px;
8
7
  }
9
8
 
10
9
  .directive-qr .code {
package/dist/assets/directive-slideshow/style.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .directive-slideshow {
2
- margin-bottom: 8px;
3
2
  position: relative;
4
3
  }
5
4
 
package/dist/assets/directive-sqlide/style.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .directive-sqlide {
2
- margin-bottom: 10px;
3
2
  border: 1px solid var(--color-spacer);
4
3
  border-radius: 8px;
5
4
  background: #1e1e1e;
package/dist/assets/directive-struktog/style.css CHANGED
@@ -1,6 +1,4 @@
1
1
  .directive-struktog {
2
- margin-top: 8px;
3
- margin-bottom: 8px;
4
2
  overflow: hidden;
5
3
  }
6
4
 
package/dist/assets/directive-tabs/style.css CHANGED
@@ -41,7 +41,7 @@
41
41
  border-style: solid;
42
42
  border-width: 1px;
43
43
  border-top: none;
44
- margin-bottom: 12px;
44
+ margin-bottom: 0;
45
45
  border-bottom-right-radius: 4px;
46
46
  border-bottom-left-radius: 4px;
47
47
  border-color: var(--color-spacer);
package/dist/assets/directive-tiles/style.css CHANGED
@@ -89,6 +89,8 @@
89
89
  bottom: 0.5rem;
90
90
  right: 0.5rem;
91
91
  font-size: 2rem;
92
+ line-height: normal;
93
+ text-align: center;
92
94
  pointer-events: none;
93
95
  }
94
96
 
package/dist/assets/directive-typst/style.css CHANGED
@@ -3,7 +3,6 @@
3
3
  justify-content: center;
4
4
  align-items: center;
5
5
  flex-direction: column;
6
- margin-bottom: 16px;
7
6
  overflow: hidden;
8
7
  gap: 8px;
9
8
  height: calc(100dvh - 128px);
package/dist/assets/directive-video/style.css CHANGED
@@ -1,7 +1,3 @@
1
- .directive-video {
2
- margin-bottom: 16px;
3
- }
4
-
5
1
  .directive-video .information {
6
2
  margin-top: 4px;
7
3
  text-align: center;
package/dist/assets/directive-webide/style.css CHANGED
@@ -3,7 +3,6 @@
3
3
  justify-content: center;
4
4
  align-items: center;
5
5
  flex-direction: column;
6
- margin-bottom: 16px;
7
6
  overflow: hidden;
8
7
  gap: 8px;
9
8
  }
package/dist/assets/shell.css CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  .main-grid * {
6
6
  box-sizing: border-box;
7
- line-height: 1.5;
7
+ line-height: 1.5rem;
8
8
  }
9
9
 
10
10
  .main-grid {
@@ -356,11 +356,51 @@ main {
356
356
  overflow-y: auto;
357
357
  }
358
358
 
359
+ /* Breadcrumb Navigation */
360
+ nav.breadcrumb {
361
+ max-width: var(--main-width);
362
+ color: color-mix(in srgb, var(--color-text), white 35%);
363
+ margin: 0 auto;
364
+ margin-bottom: var(--element-gap);
365
+ display: flex;
366
+ flex-wrap: wrap;
367
+ align-items: center;
368
+ gap: 0.25rem;
369
+ font-size: 0.9rem;
370
+ }
371
+
372
+ nav.breadcrumb a {
373
+ color: color-mix(in srgb, var(--color-text), white 35%);
374
+ text-decoration: none;
375
+ }
376
+
377
+ nav.breadcrumb a:hover {
378
+ color: var(--color-brand);
379
+ text-decoration: underline;
380
+ }
381
+
382
+ nav.breadcrumb .breadcrumb-separator {
383
+ margin: 0 4px;
384
+ }
385
+
386
+ nav.breadcrumb .breadcrumb-empty {
387
+ font-style: italic;
388
+ }
389
+
390
+ nav.breadcrumb .breadcrumb-current {
391
+ font-weight: 500;
392
+ }
393
+
394
+ nav.breadcrumb .breadcrumb-home,
395
+ nav.breadcrumb .breadcrumb-current {
396
+ text-decoration: none;
397
+ }
398
+
359
399
  article {
360
400
  max-width: var(--main-width);
361
401
  margin: 0 auto;
362
402
  grid-area: article;
363
- line-height: 1.5;
403
+ line-height: 1.5rem;
364
404
  }
365
405
 
366
406
  header {
@@ -544,10 +584,10 @@ header {
544
584
  display: flex;
545
585
  align-items: center;
546
586
  justify-content: center;
547
- margin-right: 10px;
548
- height: 40px;
587
+ margin-right: 0.625rem;
588
+ height: 2.5rem;
549
589
  width: auto;
550
- min-width: 40px;
590
+ min-width: 2.5rem;
551
591
  }
552
592
 
553
593
  .branding .logo img {
@@ -565,7 +605,7 @@ header {
565
605
  display: flex;
566
606
  max-width: var(--main-width);
567
607
  margin: 0 auto;
568
- margin-top: 40px;
608
+ margin-top: 2.5rem;
569
609
  clear: both;
570
610
  }
571
611
 
@@ -899,3 +939,7 @@ nav.toc li.level-3 {
899
939
  .main-grid.layout-standalone #custom-links-footer {
900
940
  display: none;
901
941
  }
942
+
943
+ .main-grid.layout-standalone .breadcrumb {
944
+ display: none;
945
+ }