@t8/docsgen 0.1.95 → 0.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/dist/bin.js CHANGED
@@ -418,7 +418,7 @@ async function getNav(ctx, navItems) {
418
418
  </ul>
419
419
  </section>
420
420
  `;
421
- return `<nav>
421
+ return `<nav class="b1">
422
422
  ${s}${refContent}
423
423
  ${navContent}
424
424
  </nav>`;
@@ -753,7 +753,6 @@ ${getInjectedContent(ctx, "redirect", "body")}
753
753
  return;
754
754
  }
755
755
  let {
756
- badges,
757
756
  description,
758
757
  descriptionNote,
759
758
  intro,
@@ -801,7 +800,7 @@ ${getInjectedContent(ctx, "redirect", "body")}
801
800
  <h1>${getTitle(ctx, { withPackageURL: true })}</h1>
802
801
  ${content}
803
802
 
804
- <p class="pagenav">
803
+ <p class="b1 pagenav">
805
804
  <span class="prev">
806
805
  <span class="icon">\u2190</span>
807
806
  ${nav[i - 1]?.id ? `<a href="${root}${contentDir}/${nav[i - 1]?.id}">${nav[i - 1]?.title}</a>` : `<a href="${root}">Intro</a>`}
@@ -848,25 +847,21 @@ ${getInjectedContent(ctx, "section", "body")}
848
847
  <body>
849
848
  <div class="layout">
850
849
  <main>
851
- <section class="intro-title">
850
+ <section class="b1 intro-title">
852
851
  <div class="section-content">
853
- <div class="badges">
854
- ${badges}
855
- </div>
856
852
  <h1>${getTitle(ctx, { cover: true })}</h1>
857
853
  <div class="description">
858
854
  ${description || (escapedPackageDescription ? `<p><em>${escapedPackageDescription}</em><p>` : "")}
859
855
  ${descriptionNote}
860
856
  </div>
861
857
  <p class="actions">
862
- <a href="${root}start" class="primary button">Docs</a>
858
+ <a href="${root}start" class="primary">Docs</a>
863
859
  <span class="sep"> \u2022 </span>
864
- ${getRepoLink(ctx, "button")}
860
+ ${getRepoLink(ctx)}
865
861
  </p>
866
862
  ${backstory ? `<p class="ref"><a href="${backstory}">Backstory</a></p>` : ""}
867
863
  <p class="installation"><code>${installation}</code></p>
868
864
  </div>
869
- <script>document.querySelectorAll(".badges img").forEach(img=>{let c=img.closest(".badge");if(c){if(img.complete)c.classList.add("loaded");else{img.onload=()=>{c.classList.add("loaded");};img.onerror=()=>{c.classList.add("failed");};}}});</script>
870
865
  </section>
871
866
  ${intro || features || note ? `
872
867
  <section class="intro">
package/dist/css/base.css CHANGED
@@ -2,38 +2,41 @@
2
2
  color-scheme: light dark;
3
3
 
4
4
  --default-base-color: light-dark(#ddd, #555);
5
+ --default-link-color: light-dark(royalblue, deepskyblue);
6
+
7
+ /* backgrounds */
5
8
  --b0: light-dark(white, #1a1a1a);
6
9
  --b1: var(--base-color, var(--default-base-color));
7
- --link-color: light-dark(royalblue, deepskyblue);
8
10
  --button-color: light-dark(royalblue, royalblue);
9
11
 
10
- --overlay-background-color: hsl(from var(--b1) h 50% 50% / 0.2);
11
- --overlay-border-color: hsl(from var(--b1) h 60% 60% / 0.7);
12
-
12
+ /* text colors */
13
13
  --c0: oklch(from var(--b0) calc(100 * (0.78 - l)) 0 0 / 0.82);
14
14
  --c1: oklch(from var(--b1) calc(100 * (0.78 - l)) 0 0 / 0.82);
15
15
  --c2: oklch(from var(--button-color) calc(100 * (0.75 - l)) 0 0 / 0.82);
16
16
 
17
- /*
18
- --link-color: color(
19
- from var(--c0) srgb calc(r + 0.2) calc(g + 0.4) calc(b + 0.8)
20
- );
21
- */
22
- --link-decoration: underline;
17
+ /* link colors */
18
+ --a0: var(--default-link-color);
19
+ --a1-fallback: hsl(from var(--default-link-color) calc(h - 50) s l);
20
+ --a1: var(--link-color, var(--a1-fallback));
21
+
22
+ --a0-light: hsl(from var(--a1) calc(h + 50) s 55%);
23
+ --a0-dark: hsl(from var(--a1) calc(h + 50) s 65%);
23
24
 
25
+ /* spacing */
24
26
  --max-content-width: 64em;
25
27
  --content-padding-x: 1.75rem;
26
28
  --content-padding-y: 1.75rem;
27
29
  --space-x: var(--content-padding-x);
28
30
  --block-margin-y: 1em;
31
+
32
+ /* borders */
29
33
  --hr-border: 0.3rem solid var(--overlay-background-color);
34
+ --link-border: 0.05em solid;
35
+
36
+ --overlay-background-color: hsl(from var(--b1) h 50% 50% / 0.2);
37
+ --overlay-border-color: hsl(from var(--b1) h 60% 60% / 0.7);
30
38
 
31
- font-size: 100%;
32
- font-family: sans-serif;
33
- /*
34
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
35
- */
36
- line-height: 1.45;
39
+ font: normal 100% / 1.45 sans-serif;
37
40
  }
38
41
  html {
39
42
  color: var(--c0);
@@ -75,8 +78,9 @@ a:link,
75
78
  a:visited,
76
79
  a:hover,
77
80
  a:active {
78
- color: var(--link-color);
79
- text-decoration: var(--link-decoration);
81
+ color: var(--a0);
82
+ text-decoration: none;
83
+ border-bottom: var(--link-border);
80
84
  }
81
85
 
82
86
  a.button {
@@ -124,17 +128,6 @@ h1 {
124
128
  line-height: 1;
125
129
  margin: 0;
126
130
  }
127
- h1 a,
128
- h1 a:link,
129
- h1 a:visited,
130
- h1 a:active {
131
- color: inherit;
132
- text-decoration: none;
133
- }
134
- h1 a:hover {
135
- color: inherit;
136
- text-decoration: underline;
137
- }
138
131
  h2,
139
132
  h3,
140
133
  h4 {
@@ -151,19 +144,6 @@ h4 {
151
144
  font-size: 1.15em;
152
145
  }
153
146
 
154
- header,
155
- .body,
156
- footer {
157
- max-width: var(--max-content-width);
158
- margin: 0 auto;
159
- box-sizing: border-box;
160
- }
161
-
162
- header,
163
- footer {
164
- padding: 0 var(--content-padding-x);
165
- }
166
-
167
147
  main {
168
148
  box-sizing: border-box;
169
149
  }
@@ -180,6 +160,18 @@ main li {
180
160
  margin-bottom: 0.5em;
181
161
  }
182
162
 
163
+ .b1 {
164
+ color: color(from var(--c1) srgb r g b / 0.5);
165
+ background: var(--b1);
166
+ }
167
+ .b1 a,
168
+ .b1 a:link,
169
+ .b1 a:hover,
170
+ .b1 a:visited,
171
+ .b1 a:active {
172
+ color: var(--a1);
173
+ }
174
+
183
175
  .highlight {
184
176
  border-radius: 1em;
185
177
  margin: 0;
@@ -216,31 +208,3 @@ html.blank .layout {
216
208
  justify-content: center;
217
209
  overflow: hidden;
218
210
  }
219
-
220
- .badges .badge {
221
- display: inline-block;
222
- min-width: 80px;
223
- min-height: 20px;
224
- font-size: 11px;
225
- font-family: Verdana, sans-serif;
226
- line-height: 20px;
227
- text-align: center;
228
- white-space: nowrap;
229
- vertical-align: top;
230
- color: #fff;
231
- background: #345;
232
- box-sizing: border-box;
233
- }
234
- .badges .badge.loaded,
235
- .badges .badge.failed {
236
- min-width: auto;
237
- }
238
- .badges .badge.failed {
239
- padding: 0 6px;
240
- }
241
- .badges img {
242
- vertical-align: top;
243
- }
244
- .badges a {
245
- text-decoration: none;
246
- }
@@ -40,47 +40,26 @@ main {
40
40
  h1 {
41
41
  font-size: 2.5em;
42
42
  font-weight: 900;
43
- margin: 1.5rem 0;
43
+ margin: 1rem 0;
44
44
  }
45
45
  @media (max-width: 840px) {
46
46
  h1 {
47
- font-size: 2.35em;
47
+ font-size: 2em;
48
48
  }
49
49
  }
50
- h1 a {
51
- display: inline-block;
52
- position: relative;
53
- }
54
- h1 a::before {
55
- content: "";
56
- background-color: color(from var(--link-color) srgb r g b / 0.3);
57
- position: absolute;
58
- inset: 0.25em -0.15em 0.15em;
59
- transform: skew(-15deg, -1deg);
60
- transition:
61
- inset 0.3s,
62
- transform 0.3s;
63
- }
64
- h1 a:hover {
65
- text-decoration: none;
66
- }
67
- h1 a:hover::before {
68
- inset: 0.15em -0.15em 0.05em;
69
- transform: skew(-5deg, -1deg);
50
+ h1 a,
51
+ h1 a:link,
52
+ h1 a:hover,
53
+ h1 a:visited,
54
+ h1 a:active {
55
+ border-bottom: none;
70
56
  }
71
57
  header {
72
58
  display: block;
73
59
  text-align: center;
74
60
  padding: 0 var(--content-padding-x);
75
61
  }
76
- @media (max-width: 840px) {
77
- .badges {
78
- margin: 0 2em;
79
- }
80
- }
81
62
  .description {
82
- font-size: 1.1em;
83
- padding: 0.2rem 0;
84
63
  margin: 0;
85
64
  }
86
65
  .description p {
@@ -93,7 +72,10 @@ header {
93
72
  --r: 1em;
94
73
 
95
74
  font-size: 1.25em;
96
- margin: 1.5rem 0;
75
+ margin: 1rem 0;
76
+ }
77
+ .actions a.primary {
78
+ font-weight: bold;
97
79
  }
98
80
  .actions a.button {
99
81
  min-width: 6.5em;
@@ -104,7 +86,11 @@ header {
104
86
  }
105
87
  }
106
88
  .actions .sep {
107
- display: none;
89
+ display: block;
90
+ height: 0.01em;
91
+ font-size: 0;
92
+ overflow: hidden;
93
+ margin: 0.25rem 0;
108
94
  }
109
95
  .ref {
110
96
  font-size: 0.9em;
@@ -124,26 +110,31 @@ section .section-content {
124
110
  }
125
111
  section.intro-title {
126
112
  display: flex;
113
+ width: 40%;
127
114
  flex-direction: column;
128
- align-items: center;
129
- text-align: center;
130
- background: var(--overlay-background-color);
131
- }
132
- section.intro-title:last-of-type {
133
- width: 100%;
134
- min-height: 100vh;
135
- justify-content: center;
115
+ align-items: flex-end;
116
+ text-align: right;
136
117
  }
137
118
  section.intro-title .section-content {
138
119
  display: flex;
139
120
  flex-direction: column;
140
121
  justify-content: center;
122
+ max-width: 24em;
141
123
  min-height: 95vh;
142
- padding-top: 4em;
143
- padding-bottom: 4em;
124
+ }
125
+ section.intro-title:last-of-type {
126
+ width: 100%;
127
+ min-height: 100vh;
128
+ justify-content: center;
129
+ align-items: center;
130
+ text-align: center;
131
+ }
132
+ section.intro-title:last-of-type .section-content {
133
+ max-width: 36em;
144
134
  }
145
135
  section.intro {
146
136
  display: flex;
137
+ width: 60%;
147
138
  flex-direction: column;
148
139
  justify-content: center;
149
140
  }
@@ -157,18 +148,25 @@ section.intro .section-content {
157
148
  min-height: auto;
158
149
  }
159
150
  section .section-content {
160
- max-width: auto;
151
+ max-width: 100%;
161
152
  padding: 1rem 1.35rem;
162
153
  }
154
+ section.intro-title {
155
+ width: auto;
156
+ align-items: center;
157
+ text-align: center;
158
+ }
163
159
  section.intro-title .section-content {
164
160
  min-height: 60vh;
165
- padding-top: 2rem;
161
+ padding-top: 1rem;
166
162
  padding-bottom: 1.5rem;
167
163
  }
168
164
  section.intro-title:last-child .section-content {
165
+ max-width: 100%;
169
166
  padding-bottom: 2.5rem;
170
167
  }
171
168
  section.intro {
169
+ width: auto;
172
170
  flex: auto;
173
171
  justify-content: flex-start;
174
172
  align-items: center;
@@ -178,7 +176,7 @@ section.intro .section-content {
178
176
  }
179
177
  }
180
178
  .features {
181
- --link-color: color(from var(--c0) srgb r g b / 0.55);
179
+ --ca: color(from var(--c0) srgb r g b / 0.55);
182
180
  --link-decoration: underline;
183
181
  --list-padding-x: 1.25rem;
184
182
  --list-item-padding-x: 0.35rem;
@@ -226,8 +224,6 @@ section.intro .section-content {
226
224
  }
227
225
  }
228
226
  p.installation {
229
- font-size: 1.25em;
230
- text-align: center;
231
227
  margin: 0;
232
228
  }
233
229
  .installation code {
@@ -1,7 +1,20 @@
1
+ header,
2
+ .body,
3
+ footer {
4
+ box-sizing: border-box;
5
+ }
6
+ header,
7
+ footer {
8
+ padding: 0 var(--content-padding-x);
9
+ }
10
+
1
11
  .body {
12
+ min-height: 100vh;
2
13
  display: flex;
3
- align-items: stretch;
4
- padding: var(--content-padding-y) var(--content-padding-x);
14
+ flex-direction: row-reverse;
15
+ justify-content: flex-end;
16
+ align-items: flex-start;
17
+ padding: 0;
5
18
  }
6
19
  .body > hr {
7
20
  display: none;
@@ -13,26 +26,22 @@
13
26
  }
14
27
  }
15
28
  .body > nav {
16
- width: 30%;
29
+ width: 25%;
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: flex-end;
17
33
  flex: none;
18
- align-self: flex-start;
34
+ align-self: stretch;
19
35
  font-size: 0.9em;
20
- background: var(--overlay-background-color);
21
- padding: 0.5rem var(--content-padding-x) 0.65rem;
22
- margin: 0 0 0 var(--space-x);
36
+ padding: 0.75rem var(--content-padding-x);
37
+ margin: 0;
23
38
  box-sizing: border-box;
24
39
  }
25
- @media (max-width: 840px) {
26
- .body > nav {
27
- width: 100%;
28
- font-size: inherit;
29
- border-top: 0.35em solid var(--overlay-border-color);
30
- padding: 0.25rem var(--content-padding-x) 0.35rem;
31
- margin: 0;
32
- }
33
- }
34
40
  .body > nav section {
41
+ width: 100%;
42
+ max-width: 16em;
35
43
  padding: 1rem 0;
44
+ box-sizing: border-box;
36
45
  }
37
46
  .body > nav section + section {
38
47
  border-top: 0.05rem solid var(--overlay-border-color);
@@ -54,10 +63,11 @@
54
63
  margin-top: 0;
55
64
  }
56
65
  .body > nav ul {
66
+ list-style: none;
57
67
  line-height: 1.2;
58
68
  padding: 0;
59
- padding-inline-start: 1em;
60
69
  margin: 0;
70
+ box-sizing: border-box;
61
71
  }
62
72
  .body > nav > ul + ul {
63
73
  border-top: 0.05rem solid var(--overlay-border-color);
@@ -68,13 +78,42 @@
68
78
  margin: 0.65em 0 0.5em;
69
79
  }
70
80
  .body > nav li {
81
+ text-align: end;
82
+ padding-inline-end: 1em;
71
83
  margin-top: 0;
72
84
  margin-bottom: 0;
85
+ position: relative;
86
+ }
87
+ .body > nav li::before {
88
+ content: "•";
89
+ position: absolute;
90
+ right: 0;
91
+ top: 0;
73
92
  }
74
93
  .body > nav li + li {
75
- margin-top: 0.5em;
94
+ margin-top: 0.65em;
76
95
  }
77
96
  @media (max-width: 840px) {
97
+ .body > nav {
98
+ width: 100%;
99
+ display: block;
100
+ font-size: inherit;
101
+ border-top: 0.35em solid var(--overlay-border-color);
102
+ padding: 0.25rem var(--content-padding-x) 0.35rem;
103
+ margin: 0;
104
+ }
105
+ .body > nav section {
106
+ max-width: 100%;
107
+ }
108
+ .body > nav li {
109
+ text-align: start;
110
+ padding-inline-start: 1em;
111
+ padding-inline-end: 0;
112
+ }
113
+ .body > nav li::before {
114
+ left: 0;
115
+ right: auto;
116
+ }
78
117
  .body > nav li + li {
79
118
  margin-top: 0.65em;
80
119
  }
@@ -94,7 +133,9 @@
94
133
  }
95
134
 
96
135
  main {
97
- width: calc(70% - var(--space-x));
136
+ width: 75%;
137
+ max-width: 45em;
138
+ padding: var(--content-padding-y) var(--content-padding-x);
98
139
  box-sizing: border-box;
99
140
  }
100
141
  @media (max-width: 840px) {
@@ -108,6 +149,7 @@ main {
108
149
  }
109
150
  .body.no-nav > main {
110
151
  width: auto;
152
+ margin: 0 auto;
111
153
  }
112
154
  main p.sep {
113
155
  font-size: 1.5em;
@@ -130,6 +172,14 @@ main h1 {
130
172
  h1 .sep {
131
173
  margin: 0 0.1em;
132
174
  }
175
+ h1 a,
176
+ h1 a:link,
177
+ h1 a:hover,
178
+ h1 a:visited,
179
+ h1 a:active {
180
+ color: inherit;
181
+ text-decoration: none;
182
+ }
133
183
  @media (max-width: 840px) {
134
184
  main h1 {
135
185
  margin-top: 0;
@@ -152,7 +202,6 @@ main h2:first-child {
152
202
  display: flex;
153
203
  justify-content: space-between;
154
204
  gap: 1em;
155
- background: var(--overlay-background-color);
156
205
  border-top: 0.15rem solid var(--overlay-border-color);
157
206
  padding: 0.6em 0.75em 0.75em;
158
207
  margin: 1.5em 0 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t8/docsgen",
3
- "version": "0.1.95",
3
+ "version": "0.2.0",
4
4
  "description": "",
5
5
  "main": "dist/bin.js",
6
6
  "bin": {
package/src/bin/getNav.ts CHANGED
@@ -79,5 +79,5 @@ export async function getNav(ctx: Context, navItems: NavItem[]) {
79
79
  </section>
80
80
  `;
81
81
 
82
- return `<nav>\n${s}${refContent}\n${navContent}\n</nav>`;
82
+ return `<nav class="b1">\n${s}${refContent}\n${navContent}\n</nav>`;
83
83
  }
@@ -111,7 +111,6 @@ ${getInjectedContent(ctx, "redirect", "body")}
111
111
  }
112
112
 
113
113
  let {
114
- badges,
115
114
  description,
116
115
  descriptionNote,
117
116
  intro,
@@ -163,7 +162,7 @@ ${getInjectedContent(ctx, "redirect", "body")}
163
162
  <h1>${getTitle(ctx, { withPackageURL: true })}</h1>
164
163
  ${content}
165
164
 
166
- <p class="pagenav">
165
+ <p class="b1 pagenav">
167
166
  <span class="prev">
168
167
  <span class="icon">←</span>
169
168
  ${nav[i - 1]?.id ? `<a href="${root}${contentDir}/${nav[i - 1]?.id}">${nav[i - 1]?.title}</a>` : `<a href="${root}">Intro</a>`}
@@ -215,25 +214,21 @@ ${getInjectedContent(ctx, "section", "body")}
215
214
  <body>
216
215
  <div class="layout">
217
216
  <main>
218
- <section class="intro-title">
217
+ <section class="b1 intro-title">
219
218
  <div class="section-content">
220
- <div class="badges">
221
- ${badges}
222
- </div>
223
219
  <h1>${getTitle(ctx, { cover: true })}</h1>
224
220
  <div class="description">
225
221
  ${description || (escapedPackageDescription ? `<p><em>${escapedPackageDescription}</em><p>` : "")}
226
222
  ${descriptionNote}
227
223
  </div>
228
224
  <p class="actions">
229
- <a href="${root}start" class="primary button">Docs</a>
225
+ <a href="${root}start" class="primary">Docs</a>
230
226
  <span class="sep"> • </span>
231
- ${getRepoLink(ctx, "button")}
227
+ ${getRepoLink(ctx)}
232
228
  </p>
233
229
  ${backstory ? `<p class="ref"><a href="${backstory}">Backstory</a></p>` : ""}
234
230
  <p class="installation"><code>${installation}</code></p>
235
231
  </div>
236
- <script>document.querySelectorAll(".badges img").forEach(img=>{let c=img.closest(".badge");if(c){if(img.complete)c.classList.add("loaded");else{img.onload=()=>{c.classList.add("loaded");};img.onerror=()=>{c.classList.add("failed");};}}});</script>
237
232
  </section>
238
233
  ${
239
234
  intro || features || note
package/src/css/base.css CHANGED
@@ -2,38 +2,41 @@
2
2
  color-scheme: light dark;
3
3
 
4
4
  --default-base-color: light-dark(#ddd, #555);
5
+ --default-link-color: light-dark(royalblue, deepskyblue);
6
+
7
+ /* backgrounds */
5
8
  --b0: light-dark(white, #1a1a1a);
6
9
  --b1: var(--base-color, var(--default-base-color));
7
- --link-color: light-dark(royalblue, deepskyblue);
8
10
  --button-color: light-dark(royalblue, royalblue);
9
11
 
10
- --overlay-background-color: hsl(from var(--b1) h 50% 50% / 0.2);
11
- --overlay-border-color: hsl(from var(--b1) h 60% 60% / 0.7);
12
-
12
+ /* text colors */
13
13
  --c0: oklch(from var(--b0) calc(100 * (0.78 - l)) 0 0 / 0.82);
14
14
  --c1: oklch(from var(--b1) calc(100 * (0.78 - l)) 0 0 / 0.82);
15
15
  --c2: oklch(from var(--button-color) calc(100 * (0.75 - l)) 0 0 / 0.82);
16
16
 
17
- /*
18
- --link-color: color(
19
- from var(--c0) srgb calc(r + 0.2) calc(g + 0.4) calc(b + 0.8)
20
- );
21
- */
22
- --link-decoration: underline;
17
+ /* link colors */
18
+ --a0: var(--default-link-color);
19
+ --a1-fallback: hsl(from var(--default-link-color) calc(h - 50) s l);
20
+ --a1: var(--link-color, var(--a1-fallback));
21
+
22
+ --a0-light: hsl(from var(--a1) calc(h + 50) s 55%);
23
+ --a0-dark: hsl(from var(--a1) calc(h + 50) s 65%);
23
24
 
25
+ /* spacing */
24
26
  --max-content-width: 64em;
25
27
  --content-padding-x: 1.75rem;
26
28
  --content-padding-y: 1.75rem;
27
29
  --space-x: var(--content-padding-x);
28
30
  --block-margin-y: 1em;
31
+
32
+ /* borders */
29
33
  --hr-border: 0.3rem solid var(--overlay-background-color);
34
+ --link-border: 0.05em solid;
35
+
36
+ --overlay-background-color: hsl(from var(--b1) h 50% 50% / 0.2);
37
+ --overlay-border-color: hsl(from var(--b1) h 60% 60% / 0.7);
30
38
 
31
- font-size: 100%;
32
- font-family: sans-serif;
33
- /*
34
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
35
- */
36
- line-height: 1.45;
39
+ font: normal 100% / 1.45 sans-serif;
37
40
  }
38
41
  html {
39
42
  color: var(--c0);
@@ -75,8 +78,9 @@ a:link,
75
78
  a:visited,
76
79
  a:hover,
77
80
  a:active {
78
- color: var(--link-color);
79
- text-decoration: var(--link-decoration);
81
+ color: var(--a0);
82
+ text-decoration: none;
83
+ border-bottom: var(--link-border);
80
84
  }
81
85
 
82
86
  a.button {
@@ -124,17 +128,6 @@ h1 {
124
128
  line-height: 1;
125
129
  margin: 0;
126
130
  }
127
- h1 a,
128
- h1 a:link,
129
- h1 a:visited,
130
- h1 a:active {
131
- color: inherit;
132
- text-decoration: none;
133
- }
134
- h1 a:hover {
135
- color: inherit;
136
- text-decoration: underline;
137
- }
138
131
  h2,
139
132
  h3,
140
133
  h4 {
@@ -151,19 +144,6 @@ h4 {
151
144
  font-size: 1.15em;
152
145
  }
153
146
 
154
- header,
155
- .body,
156
- footer {
157
- max-width: var(--max-content-width);
158
- margin: 0 auto;
159
- box-sizing: border-box;
160
- }
161
-
162
- header,
163
- footer {
164
- padding: 0 var(--content-padding-x);
165
- }
166
-
167
147
  main {
168
148
  box-sizing: border-box;
169
149
  }
@@ -180,6 +160,18 @@ main li {
180
160
  margin-bottom: 0.5em;
181
161
  }
182
162
 
163
+ .b1 {
164
+ color: color(from var(--c1) srgb r g b / 0.5);
165
+ background: var(--b1);
166
+ }
167
+ .b1 a,
168
+ .b1 a:link,
169
+ .b1 a:hover,
170
+ .b1 a:visited,
171
+ .b1 a:active {
172
+ color: var(--a1);
173
+ }
174
+
183
175
  .highlight {
184
176
  border-radius: 1em;
185
177
  margin: 0;
@@ -216,31 +208,3 @@ html.blank .layout {
216
208
  justify-content: center;
217
209
  overflow: hidden;
218
210
  }
219
-
220
- .badges .badge {
221
- display: inline-block;
222
- min-width: 80px;
223
- min-height: 20px;
224
- font-size: 11px;
225
- font-family: Verdana, sans-serif;
226
- line-height: 20px;
227
- text-align: center;
228
- white-space: nowrap;
229
- vertical-align: top;
230
- color: #fff;
231
- background: #345;
232
- box-sizing: border-box;
233
- }
234
- .badges .badge.loaded,
235
- .badges .badge.failed {
236
- min-width: auto;
237
- }
238
- .badges .badge.failed {
239
- padding: 0 6px;
240
- }
241
- .badges img {
242
- vertical-align: top;
243
- }
244
- .badges a {
245
- text-decoration: none;
246
- }
package/src/css/index.css CHANGED
@@ -40,47 +40,26 @@ main {
40
40
  h1 {
41
41
  font-size: 2.5em;
42
42
  font-weight: 900;
43
- margin: 1.5rem 0;
43
+ margin: 1rem 0;
44
44
  }
45
45
  @media (max-width: 840px) {
46
46
  h1 {
47
- font-size: 2.35em;
47
+ font-size: 2em;
48
48
  }
49
49
  }
50
- h1 a {
51
- display: inline-block;
52
- position: relative;
53
- }
54
- h1 a::before {
55
- content: "";
56
- background-color: color(from var(--link-color) srgb r g b / 0.3);
57
- position: absolute;
58
- inset: 0.25em -0.15em 0.15em;
59
- transform: skew(-15deg, -1deg);
60
- transition:
61
- inset 0.3s,
62
- transform 0.3s;
63
- }
64
- h1 a:hover {
65
- text-decoration: none;
66
- }
67
- h1 a:hover::before {
68
- inset: 0.15em -0.15em 0.05em;
69
- transform: skew(-5deg, -1deg);
50
+ h1 a,
51
+ h1 a:link,
52
+ h1 a:hover,
53
+ h1 a:visited,
54
+ h1 a:active {
55
+ border-bottom: none;
70
56
  }
71
57
  header {
72
58
  display: block;
73
59
  text-align: center;
74
60
  padding: 0 var(--content-padding-x);
75
61
  }
76
- @media (max-width: 840px) {
77
- .badges {
78
- margin: 0 2em;
79
- }
80
- }
81
62
  .description {
82
- font-size: 1.1em;
83
- padding: 0.2rem 0;
84
63
  margin: 0;
85
64
  }
86
65
  .description p {
@@ -93,7 +72,10 @@ header {
93
72
  --r: 1em;
94
73
 
95
74
  font-size: 1.25em;
96
- margin: 1.5rem 0;
75
+ margin: 1rem 0;
76
+ }
77
+ .actions a.primary {
78
+ font-weight: bold;
97
79
  }
98
80
  .actions a.button {
99
81
  min-width: 6.5em;
@@ -104,7 +86,11 @@ header {
104
86
  }
105
87
  }
106
88
  .actions .sep {
107
- display: none;
89
+ display: block;
90
+ height: 0.01em;
91
+ font-size: 0;
92
+ overflow: hidden;
93
+ margin: 0.25rem 0;
108
94
  }
109
95
  .ref {
110
96
  font-size: 0.9em;
@@ -124,26 +110,31 @@ section .section-content {
124
110
  }
125
111
  section.intro-title {
126
112
  display: flex;
113
+ width: 40%;
127
114
  flex-direction: column;
128
- align-items: center;
129
- text-align: center;
130
- background: var(--overlay-background-color);
131
- }
132
- section.intro-title:last-of-type {
133
- width: 100%;
134
- min-height: 100vh;
135
- justify-content: center;
115
+ align-items: flex-end;
116
+ text-align: right;
136
117
  }
137
118
  section.intro-title .section-content {
138
119
  display: flex;
139
120
  flex-direction: column;
140
121
  justify-content: center;
122
+ max-width: 24em;
141
123
  min-height: 95vh;
142
- padding-top: 4em;
143
- padding-bottom: 4em;
124
+ }
125
+ section.intro-title:last-of-type {
126
+ width: 100%;
127
+ min-height: 100vh;
128
+ justify-content: center;
129
+ align-items: center;
130
+ text-align: center;
131
+ }
132
+ section.intro-title:last-of-type .section-content {
133
+ max-width: 36em;
144
134
  }
145
135
  section.intro {
146
136
  display: flex;
137
+ width: 60%;
147
138
  flex-direction: column;
148
139
  justify-content: center;
149
140
  }
@@ -157,18 +148,25 @@ section.intro .section-content {
157
148
  min-height: auto;
158
149
  }
159
150
  section .section-content {
160
- max-width: auto;
151
+ max-width: 100%;
161
152
  padding: 1rem 1.35rem;
162
153
  }
154
+ section.intro-title {
155
+ width: auto;
156
+ align-items: center;
157
+ text-align: center;
158
+ }
163
159
  section.intro-title .section-content {
164
160
  min-height: 60vh;
165
- padding-top: 2rem;
161
+ padding-top: 1rem;
166
162
  padding-bottom: 1.5rem;
167
163
  }
168
164
  section.intro-title:last-child .section-content {
165
+ max-width: 100%;
169
166
  padding-bottom: 2.5rem;
170
167
  }
171
168
  section.intro {
169
+ width: auto;
172
170
  flex: auto;
173
171
  justify-content: flex-start;
174
172
  align-items: center;
@@ -178,7 +176,7 @@ section.intro .section-content {
178
176
  }
179
177
  }
180
178
  .features {
181
- --link-color: color(from var(--c0) srgb r g b / 0.55);
179
+ --ca: color(from var(--c0) srgb r g b / 0.55);
182
180
  --link-decoration: underline;
183
181
  --list-padding-x: 1.25rem;
184
182
  --list-item-padding-x: 0.35rem;
@@ -226,8 +224,6 @@ section.intro .section-content {
226
224
  }
227
225
  }
228
226
  p.installation {
229
- font-size: 1.25em;
230
- text-align: center;
231
227
  margin: 0;
232
228
  }
233
229
  .installation code {
@@ -1,7 +1,20 @@
1
+ header,
2
+ .body,
3
+ footer {
4
+ box-sizing: border-box;
5
+ }
6
+ header,
7
+ footer {
8
+ padding: 0 var(--content-padding-x);
9
+ }
10
+
1
11
  .body {
12
+ min-height: 100vh;
2
13
  display: flex;
3
- align-items: stretch;
4
- padding: var(--content-padding-y) var(--content-padding-x);
14
+ flex-direction: row-reverse;
15
+ justify-content: flex-end;
16
+ align-items: flex-start;
17
+ padding: 0;
5
18
  }
6
19
  .body > hr {
7
20
  display: none;
@@ -13,26 +26,22 @@
13
26
  }
14
27
  }
15
28
  .body > nav {
16
- width: 30%;
29
+ width: 25%;
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: flex-end;
17
33
  flex: none;
18
- align-self: flex-start;
34
+ align-self: stretch;
19
35
  font-size: 0.9em;
20
- background: var(--overlay-background-color);
21
- padding: 0.5rem var(--content-padding-x) 0.65rem;
22
- margin: 0 0 0 var(--space-x);
36
+ padding: 0.75rem var(--content-padding-x);
37
+ margin: 0;
23
38
  box-sizing: border-box;
24
39
  }
25
- @media (max-width: 840px) {
26
- .body > nav {
27
- width: 100%;
28
- font-size: inherit;
29
- border-top: 0.35em solid var(--overlay-border-color);
30
- padding: 0.25rem var(--content-padding-x) 0.35rem;
31
- margin: 0;
32
- }
33
- }
34
40
  .body > nav section {
41
+ width: 100%;
42
+ max-width: 16em;
35
43
  padding: 1rem 0;
44
+ box-sizing: border-box;
36
45
  }
37
46
  .body > nav section + section {
38
47
  border-top: 0.05rem solid var(--overlay-border-color);
@@ -54,10 +63,11 @@
54
63
  margin-top: 0;
55
64
  }
56
65
  .body > nav ul {
66
+ list-style: none;
57
67
  line-height: 1.2;
58
68
  padding: 0;
59
- padding-inline-start: 1em;
60
69
  margin: 0;
70
+ box-sizing: border-box;
61
71
  }
62
72
  .body > nav > ul + ul {
63
73
  border-top: 0.05rem solid var(--overlay-border-color);
@@ -68,13 +78,42 @@
68
78
  margin: 0.65em 0 0.5em;
69
79
  }
70
80
  .body > nav li {
81
+ text-align: end;
82
+ padding-inline-end: 1em;
71
83
  margin-top: 0;
72
84
  margin-bottom: 0;
85
+ position: relative;
86
+ }
87
+ .body > nav li::before {
88
+ content: "•";
89
+ position: absolute;
90
+ right: 0;
91
+ top: 0;
73
92
  }
74
93
  .body > nav li + li {
75
- margin-top: 0.5em;
94
+ margin-top: 0.65em;
76
95
  }
77
96
  @media (max-width: 840px) {
97
+ .body > nav {
98
+ width: 100%;
99
+ display: block;
100
+ font-size: inherit;
101
+ border-top: 0.35em solid var(--overlay-border-color);
102
+ padding: 0.25rem var(--content-padding-x) 0.35rem;
103
+ margin: 0;
104
+ }
105
+ .body > nav section {
106
+ max-width: 100%;
107
+ }
108
+ .body > nav li {
109
+ text-align: start;
110
+ padding-inline-start: 1em;
111
+ padding-inline-end: 0;
112
+ }
113
+ .body > nav li::before {
114
+ left: 0;
115
+ right: auto;
116
+ }
78
117
  .body > nav li + li {
79
118
  margin-top: 0.65em;
80
119
  }
@@ -94,7 +133,9 @@
94
133
  }
95
134
 
96
135
  main {
97
- width: calc(70% - var(--space-x));
136
+ width: 75%;
137
+ max-width: 45em;
138
+ padding: var(--content-padding-y) var(--content-padding-x);
98
139
  box-sizing: border-box;
99
140
  }
100
141
  @media (max-width: 840px) {
@@ -108,6 +149,7 @@ main {
108
149
  }
109
150
  .body.no-nav > main {
110
151
  width: auto;
152
+ margin: 0 auto;
111
153
  }
112
154
  main p.sep {
113
155
  font-size: 1.5em;
@@ -130,6 +172,14 @@ main h1 {
130
172
  h1 .sep {
131
173
  margin: 0 0.1em;
132
174
  }
175
+ h1 a,
176
+ h1 a:link,
177
+ h1 a:hover,
178
+ h1 a:visited,
179
+ h1 a:active {
180
+ color: inherit;
181
+ text-decoration: none;
182
+ }
133
183
  @media (max-width: 840px) {
134
184
  main h1 {
135
185
  margin-top: 0;
@@ -152,7 +202,6 @@ main h2:first-child {
152
202
  display: flex;
153
203
  justify-content: space-between;
154
204
  gap: 1em;
155
- background: var(--overlay-background-color);
156
205
  border-top: 0.15rem solid var(--overlay-border-color);
157
206
  padding: 0.6em 0.75em 0.75em;
158
207
  margin: 1.5em 0 0;