asciibook 0.0.2.beta1 → 0.0.4

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.
data/theme/html/html.css CHANGED
@@ -1,16 +1,97 @@
1
- .toolbar {
2
- position: fixed;
1
+ html,
2
+ body {
3
+ height: 100%;
4
+ }
5
+
6
+ .preload * {
7
+ -webkit-transition: none !important;
8
+ -moz-transition: none !important;
9
+ -ms-transition: none !important;
10
+ -o-transition: none !important;
11
+ }
12
+
13
+ .drawer .drawer-content {
14
+ width: 240px;
15
+ position: absolute;
3
16
  top: 0;
17
+ left: -240px;
18
+ bottom: 0;
19
+ overflow-y: auto;
20
+ transition: left 0.15s;
21
+ background: #fafafa;
22
+ border-right: 1px solid #eee;
23
+ box-sizing: border-box;
24
+ }
25
+
26
+ .drawer.open .drawer-content {
4
27
  left: 0;
28
+ }
29
+
30
+ .drawer-menu ol {
31
+ list-style: none;
32
+ padding: 0;
33
+ margin: 0;
34
+ }
35
+
36
+ .drawer-menu-item {
37
+ padding: 10px 16px;
38
+ display: block;
39
+ text-decoration: none;
40
+ color: #555;
41
+ font-size: 14px;
42
+ line-height: 20px;
43
+ }
44
+
45
+ .drawer-menu-item:hover {
46
+ background: rgba(0, 0, 0, 0.05);
47
+ color: #333;
48
+ }
49
+
50
+ .drawer-menu-item.active {
51
+ background: rgba(0, 0, 0, 0.05);
52
+ color: #3f51b5;
53
+ }
54
+
55
+ .drawer-menu ol ol .drawer-menu-item {
56
+ padding-left: 32px;
57
+ }
58
+
59
+ .main {
60
+ position: absolute;
61
+ top: 0;
5
62
  right: 0;
6
- padding: 0.25em 1.25em;
63
+ left: 0;
64
+ bottom: 0;
65
+ transition: left 0.15s;
66
+ }
67
+
68
+ .drawer.open + .main {
69
+ left: 240px;
70
+ }
71
+
72
+ .main-content {
73
+ position: absolute;
74
+ top: 56px;
75
+ left: 0;
76
+ right: 0;
77
+ bottom: 0;
78
+ overflow-y: auto;
79
+ padding: 32px;
80
+ outline: 0;
81
+ }
82
+
83
+ .container {
84
+ max-width: 768px;
85
+ margin: 0 auto;
86
+ }
87
+
88
+ .toolbar {
89
+ padding: 4px;
7
90
  display: flex;
8
- background: white;
9
- z-index: 100;
10
91
  }
11
92
 
12
93
  .toolbar-title {
13
- padding: 0.75em;
94
+ padding: 12px;
14
95
  flex-grow: 1;
15
96
  font-weight: bold;
16
97
  }
@@ -25,7 +106,7 @@
25
106
  }
26
107
 
27
108
  .toolbar-action {
28
- padding: 0.25em;
109
+ padding: 4px;
29
110
  }
30
111
 
31
112
  .button {
@@ -41,20 +122,47 @@
41
122
  line-height: 1;
42
123
  border: none;
43
124
  padding: 0;
125
+ color: #999;
126
+ }
127
+
128
+ .button:hover {
129
+ color: #555;
130
+ }
131
+
132
+ .button:active,
133
+ .button.active {
134
+ color: #333;
135
+ }
136
+
137
+ .button:disabled,
138
+ .button.disabled {
139
+ pointer-events: none;
140
+ opacity: 0.5;
141
+ }
142
+
143
+ .button-text {
144
+ padding: 8px 16px;
44
145
  }
45
146
 
46
147
  .button-icon {
47
- padding: 0.5em;
148
+ padding: 8px;
149
+ border-radius: 50%;
48
150
  }
49
151
 
50
- .button-icon svg {
152
+ .button-icon {
51
153
  fill: #999;
52
154
  }
53
155
 
54
- .button-icon:hover svg {
156
+ .button-icon:hover {
55
157
  fill: #555;
56
158
  }
57
159
 
160
+ .button-icon {
161
+ width: 40px;
162
+ height: 40px;
163
+ text-align: center;
164
+ }
165
+
58
166
  .dropdown {
59
167
  position: relative;
60
168
  }
@@ -62,7 +170,7 @@
62
170
  .dropdown-menu {
63
171
  display: none;
64
172
  position: absolute;
65
- min-width: 320px;
173
+ min-width: 240px;
66
174
  max-width: 90%;
67
175
  max-height: 480px;
68
176
  top: 100%;
@@ -72,6 +180,7 @@
72
180
  z-index: 10;
73
181
  overflow-y: auto;
74
182
  background: white;
183
+ font-size: 14px;
75
184
  }
76
185
 
77
186
  .dropdown.open .dropdown-menu {
@@ -86,9 +195,10 @@
86
195
 
87
196
  .dropdown-menu-item {
88
197
  display: block;
89
- padding: 12px;
198
+ padding: 10px 12px;
90
199
  text-decoration: none;
91
200
  color: #555;
201
+ line-height: 20px;
92
202
  }
93
203
 
94
204
  .dropdown-menu-item:hover {
@@ -104,10 +214,54 @@
104
214
  padding-left: 24px;
105
215
  }
106
216
 
107
- .content {
108
- padding: 2em;
109
- max-width: 768px;
110
- margin: 0 auto;
217
+ .dropdown-group {
218
+ margin: 16px;
219
+ }
220
+
221
+ .dropdown-group label {
222
+ display: block;
223
+ margin-bottom: 8px;
224
+ font-weight: bold;
225
+ color: #777;
226
+ }
227
+
228
+ .dropdown-options {
229
+ display: flex;
230
+ justify-content: space-between;
231
+ align-items: center;
232
+ }
233
+
234
+ .font-family-options .button {
235
+ justify-content: center;
236
+ flex-grow: 1;
237
+ }
238
+
239
+ .background-options .button {
240
+ border: 1px solid #ccc;
241
+ }
242
+
243
+ .background-options .button svg {
244
+ display: none;
245
+ }
246
+
247
+ .background-options .button.active svg {
248
+ display: block;
249
+ }
250
+
251
+ .background-options .button[data-value="white"] {
252
+ background: white;
253
+ }
254
+
255
+ .background-options .button[data-value="warm"] {
256
+ background: #fff8e1;
257
+ }
258
+
259
+ .background-options .button[data-value="dim"] {
260
+ background: #424242;
261
+ }
262
+
263
+ .background-options .button[data-value="black"] {
264
+ background: black;
111
265
  }
112
266
 
113
267
  .paginator {
@@ -115,16 +269,15 @@
115
269
 
116
270
  .paginator a {
117
271
  padding: 32px;
272
+ fill: #999;
273
+ text-decoration: none;
118
274
  }
119
275
 
120
276
  .paginator a svg {
121
- fill: #ccc;
122
- width: 48px;
123
- height: 48px;
124
277
  }
125
278
 
126
- .paginator a:hover svg {
127
- fill: #999;
279
+ .paginator a:hover {
280
+ fill: #555;
128
281
  }
129
282
 
130
283
  .paginator a.disabled {
@@ -133,33 +286,201 @@
133
286
 
134
287
  .paginator-prev {
135
288
  display: flex;
289
+ flex-direction: column;
290
+ justify-content: center;
136
291
  align-items: center;
137
- position: fixed;
138
- top: 48px;
292
+ position: absolute;
293
+ top: 56px;
139
294
  bottom: 0;
140
295
  left: 0;
141
296
  }
142
297
 
143
298
  .paginator-next {
144
299
  display: flex;
300
+ flex-direction: column;
301
+ justify-content: center;
145
302
  align-items: center;
146
- position: fixed;
147
- top: 48px;
303
+ position: absolute;
304
+ top: 56px;
148
305
  bottom: 0;
149
306
  right: 0;
150
307
  }
151
308
 
152
- .main {
153
- margin-top: 56px;
309
+ /* Theme */
310
+
311
+ body[data-font-size="50"] .main-content {
312
+ font-size: 50%;
313
+ }
314
+
315
+ body[data-font-size="67"] .main-content {
316
+ font-size: 67%;
317
+ }
318
+
319
+ body[data-font-size="75"] .main-content {
320
+ font-size: 75%;
321
+ }
322
+
323
+ body[data-font-size="80"] .main-content {
324
+ font-size: 80%;
325
+ }
326
+
327
+ body[data-font-size="90"] .main-content {
328
+ font-size: 90%;
329
+ }
330
+
331
+ body[data-font-size="100"] .main-content {
332
+ font-size: 100%;
333
+ }
334
+
335
+ body[data-font-size="110"] .main-content {
336
+ font-size: 110%;
337
+ }
338
+
339
+ body[data-font-size="125"] .main-content {
340
+ font-size: 125%;
341
+ }
342
+
343
+ body[data-font-size="150"] .main-content {
344
+ font-size: 150%;
345
+ }
346
+
347
+ body[data-font-size="175"] .main-content {
348
+ font-size: 175%;
349
+ }
350
+
351
+ body[data-font-size="200"] .main-content {
352
+ font-size: 200%;
353
+ }
354
+
355
+ body[data-font-family="serif"] .main-content {
356
+ font-family: serif;
357
+ }
358
+
359
+ body[data-font-family="sans-serif"] .main-content {
360
+ font-family: sans-serif;
361
+ }
362
+
363
+ body[data-background="white"] {
364
+ background: white;
365
+ }
366
+
367
+ body[data-background="warm"] {
368
+ background: #fff8e1;
369
+ }
370
+
371
+ body[data-background="dim"] {
372
+ background: #424242;
373
+ }
374
+
375
+ body[data-background="dim"] .main-content,
376
+ body[data-background="dim"] .main-content h1,
377
+ body[data-background="dim"] .main-content h2,
378
+ body[data-background="dim"] .main-content h3,
379
+ body[data-background="dim"] .main-content h4,
380
+ body[data-background="dim"] .main-content h5,
381
+ body[data-background="dim"] .main-content h6 {
382
+ color: #ddd;
383
+ }
384
+
385
+ body[data-background="dim"] .main-content pre,
386
+ body[data-background="dim"] .main-content *:not(pre) code,
387
+ body[data-background="dim"] .main-content .example,
388
+ body[data-background="dim"] .main-content .sidebar,
389
+ body[data-background="dim"] .main-content blockquote {
390
+ background: transparent;
391
+ }
392
+
393
+ body[data-background="dim"] .main-content pre span {
394
+ color: #ddd;
395
+ }
396
+
397
+ body[data-background="dim"] .main-content a {
398
+ color: #81d4fa;
399
+ }
400
+
401
+ body[data-background="dim"] .main-content a.callout {
402
+ color: #ddd;
403
+ }
404
+
405
+ body[data-background="black"] {
406
+ background: black;
407
+ }
408
+
409
+ body[data-background="black"] .main-content,
410
+ body[data-background="black"] .main-content h1,
411
+ body[data-background="black"] .main-content h2,
412
+ body[data-background="black"] .main-content h3,
413
+ body[data-background="black"] .main-content h4,
414
+ body[data-background="black"] .main-content h5,
415
+ body[data-background="black"] .main-content h6 {
416
+ color: #ddd;
417
+ }
418
+
419
+ body[data-background="black"] .main-content pre,
420
+ body[data-background="black"] .main-content *:not(pre) code,
421
+ body[data-background="black"] .main-content .example,
422
+ body[data-background="black"] .main-content .sidebar,
423
+ body[data-background="black"] .main-content blockquote {
424
+ background: transparent;
154
425
  }
155
426
 
156
- @media (max-width: 992px) {
427
+ body[data-background="black"] .main-content pre span {
428
+ color: #ddd;
429
+ }
430
+
431
+ body[data-background="black"] .main-content a {
432
+ color: #81d4fa;
433
+ }
434
+
435
+ body[data-background="black"] .main-content a.callout {
436
+ color: #ddd;
437
+ }
438
+ /* responsive */
439
+
440
+ @media (max-width: 1280px) {
441
+ .drawer.open .drawer-content {
442
+ z-index: 20;
443
+ background: white;
444
+ }
445
+
446
+ .drawer .drawer-backdrop {
447
+ display: none;
448
+ }
449
+
450
+ .drawer.open .drawer-backdrop {
451
+ display: block;
452
+ position: absolute;
453
+ top: 0;
454
+ left: 0;
455
+ right: 0;
456
+ bottom: 0;
457
+ z-index: 10;
458
+ background: rgba(0, 0, 0, 0.15);
459
+ }
460
+
461
+ .drawer.open + .main {
462
+ left: 0;
463
+ }
464
+
465
+ .drawer.open .drawer-content {
466
+ border: none;
467
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
468
+ }
469
+
470
+ .main-content {
471
+ bottom: 56px;
472
+ }
473
+
157
474
  .paginator {
158
475
  display: flex;
476
+ position: absolute;
477
+ bottom: 0;
478
+ left: 0;
479
+ right: 0;
159
480
  }
160
481
 
161
482
  .paginator a {
162
- padding: 1em;
483
+ padding: 16px;
163
484
  }
164
485
 
165
486
  .paginator-prev {
@@ -176,15 +497,7 @@
176
497
  }
177
498
 
178
499
  @media (max-width: 480px) {
179
- .toolbar {
180
- padding: 0.25em;
181
- }
182
-
183
- .content {
184
- padding: 1em;
185
- }
186
-
187
- .paginator a {
188
- padding: 0.25em;
500
+ .main-content {
501
+ padding: 16px;
189
502
  }
190
503
  }
data/theme/html/html.js CHANGED
@@ -1,9 +1,45 @@
1
- (function() {
1
+ function isDesktop() {
2
+ return window.innerWidth > 1280;
3
+ }
4
+
5
+ document.addEventListener('DOMContentLoaded', function() {
6
+ // Drawer
7
+ var drawer = document.querySelector('#drawer');
8
+ var drawerToggle = document.querySelector('#drawer-toggle');
9
+ var drawerBackdrop = drawer.querySelector('.drawer-backdrop');
10
+
11
+ drawerToggle.addEventListener('click', function() {
12
+ drawer.classList.toggle('open');
13
+ if (isDesktop()) {
14
+ localStorage.setItem('drawerOpened', drawer.classList.contains('open'));
15
+ }
16
+ })
17
+
18
+ drawerBackdrop.addEventListener('click', function() {
19
+ drawer.classList.remove('open');
20
+ })
21
+
22
+ // restore drawer state
23
+ if (isDesktop() && localStorage.getItem('drawerOpened') == 'true') {
24
+ drawer.classList.add('open');
25
+ }
26
+
27
+ // store drawer offset
28
+ window.addEventListener('beforeunload', function() {
29
+ localStorage.setItem('drawerScrollTop', drawer.querySelector('.drawer-content').scrollTop);
30
+ });
31
+
32
+ // restore drawer offset
33
+ if (localStorage.getItem('drawerScrollTop')) {
34
+ drawer.querySelector('.drawer-content').scrollTop = parseInt(localStorage.getItem('drawerScrollTop'));
35
+ }
36
+
37
+ // Dropdown
2
38
  document.querySelectorAll('.dropdown-toggle').forEach(function(element){
3
- var dropdown = element.closest('.dropdown')
39
+ var dropdown = element.closest('.dropdown');
4
40
 
5
41
  function openMenu() {
6
- dropdown.classList.add('open')
42
+ dropdown.classList.add('open');
7
43
  document.addEventListener('click', closeMenuOutside);
8
44
  }
9
45
 
@@ -26,4 +62,98 @@
26
62
  }
27
63
  });
28
64
  })
29
- })();
65
+
66
+ // Hot keys
67
+ document.addEventListener('keyup', function(event) {
68
+ switch (event.which) {
69
+ case 37:
70
+ document.querySelector('.paginator-prev').click();
71
+ break;
72
+ case 39:
73
+ document.querySelector('.paginator-next').click();
74
+ break;
75
+ }
76
+ })
77
+
78
+ // Custom style
79
+ document.body.dataset.fontSize = localStorage.getItem('fontSize') || '100';
80
+ document.body.dataset.fontFamily = localStorage.getItem('fontFamily') || 'sans-serif';
81
+ document.body.dataset.background = localStorage.getItem('background') || 'white';
82
+
83
+ function updataFonsSizeText() {
84
+ document.querySelector('#font-size-text').textContent = document.body.dataset.fontSize + '%';
85
+ }
86
+ updataFonsSizeText();
87
+
88
+ function updateFontFamilyButton() {
89
+ document.querySelectorAll('.font-family-options .button').forEach(function(button){
90
+ if (button.dataset.value == document.body.dataset.fontFamily) {
91
+ button.classList.add('active')
92
+ } else {
93
+ button.classList.remove('active')
94
+ }
95
+ });
96
+ }
97
+ updateFontFamilyButton();
98
+
99
+ function updateBackgroundButton() {
100
+ document.querySelectorAll('.background-options .button').forEach(function(button){
101
+ if (button.dataset.value == document.body.dataset.background) {
102
+ button.classList.add('active')
103
+ } else {
104
+ button.classList.remove('active')
105
+ }
106
+ });
107
+ }
108
+ updateBackgroundButton();
109
+
110
+ function updateStyle(key, value) {
111
+ localStorage.setItem(key, value);
112
+ document.body.dataset[key] = value;
113
+ }
114
+
115
+ var fontSizeList = [50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200];
116
+ document.querySelectorAll('.font-size-options .button').forEach(function(element){
117
+ element.addEventListener('click', function() {
118
+ var index = fontSizeList.indexOf(parseInt(document.body.dataset.fontSize));
119
+
120
+ if (index == -1) {
121
+ index = 5;
122
+ }
123
+
124
+ switch (this.dataset.action) {
125
+ case 'add':
126
+ index += 1
127
+ break;
128
+ case 'reduce':
129
+ index -= 1
130
+ break;
131
+ default:
132
+ }
133
+
134
+ if (value = fontSizeList[index]) {
135
+ updateStyle('fontSize', value);
136
+ updataFonsSizeText();
137
+ }
138
+ });
139
+ });
140
+
141
+ document.querySelectorAll('.font-family-options .button').forEach(function(element) {
142
+ element.addEventListener('click', function() {
143
+ updateStyle('fontFamily', this.dataset.value);
144
+ updateFontFamilyButton();
145
+ });
146
+ });
147
+
148
+ document.querySelectorAll('.background-options .button').forEach(function(element) {
149
+ element.addEventListener('click', function() {
150
+ updateStyle('background', this.dataset.value);
151
+ updateBackgroundButton();
152
+ });
153
+ });
154
+
155
+ // set default scroll element
156
+ document.querySelector('.main-content').focus();
157
+
158
+ document.body.classList.remove('preload');
159
+ });
Binary file