docula 0.5.5 → 0.6.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.
@@ -0,0 +1,43 @@
1
+ <aside class="sidebar hidden" id="sidebar">
2
+ <div class="sidebar-logo">
3
+ <a class="header-link" href="/">
4
+ <img src="/logo.svg" alt="logo"/>
5
+ </a>
6
+ </div>
7
+
8
+ <section class="sidebar-container">
9
+ <button class="close-btn icon" id="close-sidebar">
10
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
11
+ <path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/>
12
+ </svg>
13
+ <span>Close</span>
14
+ </button>
15
+ <div class="sidebar-content">
16
+ <ul class="nav-list" role="list">
17
+ {{#forEach sidebarItems}}
18
+ {{#if children}}
19
+ <li>
20
+ <details>
21
+ <summary>{{name}}</summary>
22
+ <ul class="child-list" role="list">
23
+ {{#forEach children}}
24
+ <li>
25
+ <a href="{{ path }}">{{ name }}</a>
26
+ </li>
27
+ {{/forEach}}
28
+ </ul>
29
+ </details>
30
+ </li>
31
+ {{else}}
32
+ <li>
33
+ <a href="{{ path }}">{{ name }}</a>
34
+ </li>
35
+ {{/if}}
36
+ {{/forEach}}
37
+ </ul>
38
+
39
+ </div>
40
+ </section>
41
+
42
+ </aside>
43
+
@@ -4,13 +4,24 @@
4
4
  {{> header }}
5
5
  <title>{{ siteTitle }}</title>
6
6
  </head>
7
-
8
7
  <body>
9
- {{> landing/hero }}
10
8
  <a class="github-fork-ribbon" href="https://github.com/{{ githubPath }}" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
11
- {{> landing/content }}
12
- {{> footer}}
13
9
 
10
+ {{#if content}}
11
+ {{> singlepage/hero }}
12
+ {{> singlepage/content }}
13
+ {{else}}
14
+ <main class="home">
15
+ {{> multipage/hero }}
16
+ {{> multipage/home }}
17
+ </main>
18
+ {{/if}}
19
+
20
+ {{> footer}}
14
21
  {{> scripts }}
22
+
23
+ {{#unless content}}
24
+ {{> multipage/scripts }}
25
+ {{/unless}}
15
26
  </body>
16
27
  </html>
@@ -6,7 +6,7 @@
6
6
  </head>
7
7
 
8
8
  <body>
9
- {{> landing/hero }}
9
+ {{> singlepage/hero }}
10
10
  <a class="github-fork-ribbon" href="https://github.com/jaredwray/docula" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
11
11
  <main class="home-container">
12
12
  <div class="content-container versions-container">
@@ -1,307 +0,0 @@
1
- .header-logo {
2
- margin-right: 30px;
3
- }
4
-
5
- .home-header {
6
- position: sticky;
7
- background-color: var(--home-background);
8
- border-bottom: 1px solid var(--border);
9
- }
10
-
11
- .home-hero {
12
- display: flex;
13
- justify-content: center;
14
- height: 20vh;
15
- background-color: var(--home-background)
16
- }
17
-
18
- .home-container {
19
- max-width: 90%;
20
- margin: 0 auto;
21
- color: var(--color-text);
22
- }
23
-
24
- .home-container h1 {
25
- font-weight: 500;
26
- font-size: 28px;
27
- }
28
-
29
- .home-title {
30
- text-align: center;
31
- margin-bottom: 32px;
32
- font-size: 30px;
33
- background: linear-gradient(30deg, var(--color-primary) 40%, var(--color-secondary-dark) 70%);
34
- background-clip: text;
35
- -webkit-background-clip: text;
36
- color: transparent;
37
- }
38
-
39
- .home-docs-button {
40
- padding: 12px 24px;
41
- border: 2px solid var(--color-secondary-dark);
42
- border-radius: 8px;
43
- color: var(--color-secondary-dark);
44
- font-weight: 600;
45
- }
46
-
47
- .home-hero {
48
- text-align: center;
49
- }
50
-
51
- .home-hero img {
52
- width: 100%;
53
- max-width: 200px;
54
- }
55
-
56
- .github-fork-ribbon {
57
- position: fixed !important;
58
- }
59
-
60
- .github-fork-ribbon:before {
61
- background-color: var(--color-primary) !important;
62
- }
63
-
64
- .content-container {
65
- margin: 96px 0;
66
- }
67
-
68
- .facepile-container {
69
- display: flex;
70
- flex-wrap: wrap;
71
- justify-content: center;
72
- }
73
-
74
- .facepile {
75
- line-height: 2;
76
- padding: 0 0 0 25px;
77
- }
78
-
79
- .facepile > a {
80
- display: inline-block;
81
- margin-left: -25px;
82
- transition: opacity .3s;
83
- opacity: .9;
84
- color: var(--background);
85
- }
86
-
87
- .facepile img {
88
- border-radius: 50%;
89
- width: calc(30px + 5vw);
90
- height: calc(30px + 5vw);
91
- max-width: 60px;
92
- max-height: 60px;
93
- margin-bottom: 6px;
94
- background-color: #ffffff;
95
- border: 2px solid;
96
- transition: border .3s;
97
- object-fit: cover;
98
- vertical-align: middle;
99
- display: inline-block;
100
- }
101
-
102
-
103
- .facepile > a:hover {
104
- opacity: 1;
105
- position: relative;
106
- z-index: 1;
107
- }
108
-
109
- .release {
110
- overflow: hidden;
111
- width: 100%;
112
- line-break: anywhere;
113
- margin-top: 32px;
114
- color: var(--color-text);
115
- }
116
-
117
- .release-header {
118
- margin-bottom: 16px;
119
- }
120
-
121
- .release-title {
122
- font-size: 22px;
123
- color: var(--color-primary);
124
- font-weight: 700;
125
- transition: color .3s;
126
- display: block;
127
- }
128
-
129
- .release-title:hover {
130
- color: var(--color-secondary-dark);
131
- }
132
-
133
- .release-date {
134
- font-size: 12px;
135
- }
136
-
137
- .release-btn {
138
- padding: 12px;
139
- border-radius: 8px;
140
- border: 2px solid var(--color-secondary);
141
- color: var(--color-secondary);
142
- width: fit-content;
143
- margin-top: 32px;
144
- display: block;
145
- }
146
-
147
- .release-btn span {
148
- margin-left: 8px;
149
- font-size: 12px;
150
- transition: margin-left .3s;
151
- }
152
-
153
- .release-btn:hover span {
154
- margin-left: 16px;
155
- }
156
-
157
- .release-body p {
158
- margin: 8px 0;
159
- }
160
-
161
- .release-body pre {
162
- margin-bottom: 32px;
163
- }
164
-
165
- .release-body h1 {
166
- font-size: 22px;
167
- margin-bottom: 16px;
168
- }
169
-
170
- .release-body h2 {
171
- font-size: 18px;
172
- margin-top: 28px;
173
- margin-bottom: 16px;
174
- }
175
-
176
- .release-body ul {
177
- padding-left: 16px;
178
- }
179
-
180
- .release-body ul > li {
181
- margin-bottom: 12px;
182
- }
183
-
184
- .release-body ul > li a {
185
- text-decoration: underline;
186
- }
187
-
188
- footer {
189
- height: 64px;
190
- display: flex;
191
- justify-content: center;
192
- align-items: center;
193
- border-top: 1px solid var(--border);
194
- width: 100%;
195
- }
196
-
197
- footer img {
198
- margin-left: 8px;
199
- margin-top: 4px;
200
- }
201
-
202
- @media screen and (min-width: 640px) {
203
- .home-container {
204
- max-width: 82%;
205
- }
206
- }
207
-
208
-
209
- @media screen and (min-width: 768px) {
210
- .home-hero {
211
- height: 40vh;
212
- }
213
-
214
- .header-logo {
215
- margin-right: 56px;
216
- }
217
-
218
- .home-hero img {
219
- max-width: 340px;
220
- }
221
-
222
- .content-container {
223
- margin: 96px 0;
224
- }
225
-
226
- .versions-container {
227
- margin: 72px 0;
228
- }
229
-
230
- .release {
231
- margin-bottom: 64px;
232
- }
233
- }
234
-
235
-
236
- @media screen and (min-width: 992px) {
237
- .home-container {
238
- max-width: 70%;
239
- }
240
-
241
- .home-container h1 {
242
- font-size: 32px;
243
- }
244
-
245
- .home-docs-button {
246
- font-size: 24px;
247
- }
248
-
249
- .nav {
250
- padding-right: 56px;
251
- width: 100%;
252
- justify-content: space-between;
253
- }
254
-
255
- .header-content {
256
- height: 72px;
257
- }
258
-
259
- .home-hero img {
260
- max-width: 600px;
261
- }
262
-
263
- .home-title {
264
- margin-bottom: 64px;
265
- font-size: 48px;
266
- }
267
-
268
- .content-container {
269
- margin: 120px 0;
270
- }
271
-
272
- .release-btn {
273
- margin-top: 0;
274
- }
275
-
276
- footer {
277
- height: 76px;
278
- }
279
-
280
- footer img {
281
- height: 28px;
282
- width: auto;
283
- }
284
- }
285
-
286
- @media screen and (min-width: 1200px) {
287
- .home-container {
288
- max-width: 950px;
289
- }
290
-
291
- .content-container {
292
- margin: 160px 0;
293
- }
294
-
295
- .versions-container {
296
- margin: 120px 0;
297
- }
298
-
299
- .facepile > a {
300
- margin-left: -30px;
301
- }
302
-
303
- .facepile img {
304
- max-width: 70px;
305
- max-height: 70px;
306
- }
307
- }