web-documentation 1.0.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,492 @@
1
+ /* !/usr/bin/env css
2
+ -*- coding: utf-8 -*- */
3
+ /* region header
4
+ Copyright Torben Sickert (info["~at~"]torben.website) 16.12.2012
5
+
6
+ License
7
+ -------
8
+
9
+ This library written by Torben Sickert stand under a creative commons naming
10
+ 3.0 unported license. See https://creativecommons.org/licenses/by/3.0/deed.de
11
+ endregion */
12
+ @import "highlight.js/styles/github.css";
13
+ @import "website-utilities/fonts.compiled.css";
14
+ @import "website-utilities/index.compiled.css";
15
+
16
+ :root {
17
+ /* region extra small dimension */
18
+ @custom-media --w-extra-extra-small (min-width: 360px);
19
+ @custom-media --w-extra-small (min-width: 500px);
20
+ /* endregion */
21
+ /* region default media query dimensions */
22
+ @custom-media --w-small (min-width: 768px);
23
+ @custom-media --w-medium (min-width: 992px);
24
+ @custom-media --w-large (min-width: 1200px);
25
+ /* endregion */
26
+ }
27
+
28
+ body {
29
+ /* region constants */
30
+ /** region color */
31
+ --color1: #fff;
32
+ --color2: #fbfbfc;
33
+ --color3: #f7f7f9;
34
+ --color4: #ddd;
35
+ --color5: #cbcbcd;
36
+ --color6: #797979;
37
+ --color7: #333;
38
+ --color8: #212121;
39
+ --color9: black;
40
+ --color10: #0090ff;
41
+ --color11: #0069ba;
42
+ /** endregion */
43
+ /* endregion */
44
+ /* region custom properties */
45
+ /* stylelint-disable at-rule-no-unknown */
46
+ @define-mixin icon {
47
+ background-position: 0 0;
48
+ background-repeat: no-repeat;
49
+ display: inline-block;
50
+ height: 30px;
51
+ overflow: hidden;
52
+ width: 30px;
53
+ vertical-align: text-top;
54
+ }
55
+ /*
56
+ NOTE: We explicit inherit form ".icon" to prepare this class to be
57
+ super classes as well.
58
+ */
59
+ @define-mixin icon-blacktocat {
60
+ @mixin icon;
61
+
62
+ background-image: url("image/blacktocat.png");
63
+ background-position: 0 0;
64
+ height: 30px;
65
+ width: 30px;
66
+ }
67
+ @define-mixin icon-archiv {
68
+ @mixin icon;
69
+
70
+ background-position: 0 0;
71
+ height: 64px;
72
+ width: 82px;
73
+ }
74
+ @define-mixin icon-archiv-gray {
75
+ @mixin icon-archiv;
76
+
77
+ background-image: url("image/folderGray.png");
78
+ }
79
+ @define-mixin icon-archiv-blue {
80
+ @mixin icon-archiv;
81
+
82
+ background-image: url("image/folderBlue.png");
83
+ }
84
+ @define-mixin icon-download {
85
+ @mixin icon;
86
+
87
+ background-image: url("image/arrowDown.png");
88
+ background-position: 0 0;
89
+ height: var(--w-default-space);
90
+ width: 20px;
91
+ }
92
+ /* stylelint-enable at-rule-no-unknown */
93
+ /* endregion */
94
+ /* region global */
95
+ /*
96
+ NOTE: If we swap these lines to order alphabetical bodies background
97
+ color does not get overwritten.
98
+ */
99
+ background-color: var(--color8);
100
+ color: var(--color7);
101
+
102
+ margin: 0;
103
+ line-height: 1.5;
104
+
105
+ *,
106
+ ::after,
107
+ ::before {
108
+ box-sizing: border-box;
109
+ }
110
+ /** region grid */
111
+ .header__inner,
112
+ .section__inner,
113
+ .footer__inner {
114
+ position: relative;
115
+
116
+ margin: 0 auto;
117
+ padding: var(--w-default-space) calc(var(--w-default-space) / 2);
118
+ }
119
+ /** endregion */
120
+ /** region symbol */
121
+ .section__inner__arrow-left-home,
122
+ .header__inner__links__left-arrow {
123
+ float: left;
124
+ height: 14px;
125
+ width: 14px !important;
126
+ margin-top: 10px;
127
+ overflow: visible;
128
+ vertical-align: baseline;
129
+ }
130
+
131
+ .header__inner__links__left-arrow {
132
+ display: none;
133
+
134
+ margin-left: 10px;
135
+ margin-top: 38px;
136
+ }
137
+ /** endregion */
138
+ /** region headline */
139
+ h1,
140
+ h2,
141
+ h3,
142
+ h4,
143
+ h5,
144
+ h6 {
145
+ color: var(--color8);
146
+
147
+ font-family: var(--w-typography-font-family-headline);
148
+ font-size: 2em;
149
+
150
+ letter-spacing: -1px;
151
+ margin: 10px 0;
152
+ }
153
+ h1 { font-size: 4em; }
154
+ h2 { font-size: 3em; }
155
+ /** endregion */
156
+ /** region link */
157
+ a {
158
+ color: var(--color10);
159
+ outline: none !important;
160
+ text-shadow: none;
161
+ transition: color 0.5s ease, background-color 0.5s ease;
162
+ }
163
+ /* Badge links */
164
+ p a {
165
+ &[href^="https://coveralls.io/github/"],
166
+ &[href^="https://github.com/"],
167
+ &[href^="https://torben.website/"],
168
+ &[href^="https://www.npmjs.com/package/"] {
169
+ margin: 5px;
170
+ }
171
+ }
172
+
173
+ a:hover { color: var(--color11); }
174
+
175
+ .wu-scroll-to-top {
176
+ right: 45px;
177
+ z-index: 4;
178
+ }
179
+
180
+ a.wu-scroll-to-top.wu-scroll-up {
181
+ bottom: calc(2 * 34px);
182
+ }
183
+
184
+ a.wu-scroll-to-top.wu-scroll-down {
185
+ bottom: 34px;
186
+ }
187
+ /** endregion */
188
+ /** region image */
189
+ /*** region generic */
190
+ /* stylelint-disable at-rule-no-unknown */
191
+ [class^="icon-"],
192
+ [class*=" icon-"],
193
+ .icon { @mixin icon; }
194
+ /* stylelint-disable selector-class-pattern */
195
+ .icon- {
196
+ &blacktocat { @mixin icon-blacktocat; }
197
+ &blue-archiv { @mixin icon-archiv-blue; }
198
+ &download { @mixin icon-download; }
199
+ &gray-archiv { @mixin icon-archiv-gray; }
200
+ }
201
+ /* stylelint-enable selector-class-pattern */
202
+ /* stylelint-enable at-rule-no-unknown */
203
+ /*** endregion */
204
+ /** endregion */
205
+ /* endregion */
206
+ /* region header */
207
+ .header {
208
+ background-image:
209
+ linear-gradient(
210
+ to bottom,
211
+ var(--color7),
212
+ var(--color8)
213
+ );
214
+ width: 100%;
215
+ }
216
+
217
+ .header__inner {
218
+ padding: 50px 10px 30px;
219
+
220
+ .header__inner__forkme-banner {
221
+ background-color: var(--color10);
222
+ border-radius: 0 0 2px 2px;
223
+ box-shadow: 0 0 10px var(--color9);
224
+ color: var(--color1);
225
+ display: block;
226
+ font-weight: 700;
227
+ padding: 10px;
228
+ position: absolute;
229
+ right: 10px;
230
+ top: 0;
231
+ z-index: 10;
232
+
233
+ &:hover {
234
+ background-color: var(--color11);
235
+ color: var(--color1);
236
+ }
237
+ }
238
+
239
+ .header__inner__forkme-banner__icon-github {
240
+ /* stylelint-disable at-rule-no-unknown */
241
+ @mixin icon-blacktocat;
242
+ /* stylelint-enable at-rule-no-unknown */
243
+
244
+ margin-bottom: -2px;
245
+ margin-left: 8px;
246
+ margin-top: -6px;
247
+ }
248
+
249
+ .header__inner__title,
250
+ .header__inner__tagline {
251
+ border: none;
252
+ color: var(--color1);
253
+ text-shadow: var(--color9) 0 0 10px;
254
+
255
+ a {
256
+ color: var(--color1);
257
+ text-shadow: var(--color9) 0 0 10px;
258
+ }
259
+ }
260
+
261
+ .header__inner__tagline {
262
+ background: none;
263
+ font-size: 2em;
264
+ font-weight: 300;
265
+ }
266
+
267
+ .header__inner__links {
268
+ bottom: -40px;
269
+ height: 70px;
270
+ padding: 0;
271
+ position: absolute;
272
+ right: 0;
273
+ width: 100%;
274
+ z-index: 10;
275
+ }
276
+
277
+ .header__inner__links__api-link {
278
+ float: left;
279
+
280
+ margin-left: 10px;
281
+ padding-top: 36px;
282
+
283
+ span {
284
+ display: none;
285
+ }
286
+ }
287
+
288
+ .header__inner__links__lang {
289
+ color: var(--color6);
290
+
291
+ float: right;
292
+
293
+ padding-right: 10px;
294
+ padding-top: 35px;
295
+
296
+ &.current {
297
+ color: var(--color7);
298
+ }
299
+
300
+ &:hover {
301
+ color: var(--color8);
302
+ }
303
+ }
304
+
305
+ .header__inner__links__download-arrow {
306
+ /* stylelint-disable at-rule-no-unknown */
307
+ @mixin icon-download;
308
+ /* stylelint-enable at-rule-no-unknown */
309
+
310
+ display: none;
311
+ float: right;
312
+ margin-left: var(--w-default-space);
313
+ margin-top: 39px;
314
+ }
315
+ /* region download buttons */
316
+
317
+ .header__inner__links__download {
318
+ /* stylelint-disable at-rule-no-unknown */
319
+ @mixin icon-archiv-gray;
320
+ /* stylelint-enable at-rule-no-unknown */
321
+
322
+ color: var(--color1);
323
+ display: block;
324
+ float: right;
325
+ font-size: 1.2em;
326
+ font-weight: bolder;
327
+ height: 66px;
328
+ margin-right: calc(var(--w-default-space) / 2);
329
+ overflow: hidden;
330
+ padding-top: 29px;
331
+ text-align: center;
332
+ width: 80px;
333
+ }
334
+
335
+ .header__inner__links__download:hover {
336
+ /* stylelint-disable at-rule-no-unknown */
337
+ @mixin icon-archiv-blue;
338
+ /* stylelint-enable at-rule-no-unknown */
339
+
340
+ color: var(--color1);
341
+ height: 66px;
342
+ width: 80px;
343
+ }
344
+ /* endregion */
345
+ }
346
+ /* endregion */
347
+ /* region footer */
348
+ .footer__inner {
349
+ padding-left: 0;
350
+ padding-right: 0;
351
+ text-align: center;
352
+ width: 100%;
353
+
354
+ p { color: var(--color3); }
355
+ a:hover { color: var(--color11); }
356
+ }
357
+ /* endregion */
358
+ /* region section */
359
+ .section {
360
+ background-color: var(--color1);
361
+ overflow: auto;
362
+ overflow-wrap: break-word;
363
+
364
+ .section__about-this-website {
365
+ a[href="#home"] {
366
+ display: inline-block;
367
+ float: left;
368
+
369
+ margin-top: 8px;
370
+ margin-left: 10px;
371
+ }
372
+
373
+ p {
374
+ margin-bottom: 45px;
375
+ }
376
+ }
377
+
378
+ .section__inner {
379
+ padding-top: 40px;
380
+ }
381
+
382
+ .section__home {
383
+ p {
384
+ margin: var(--w-default-space) 0 0 0;
385
+ }
386
+
387
+ code {
388
+ display: block;
389
+ padding: 9.5px;
390
+
391
+ font-size: 0.7em;
392
+ line-height: 1.4286;
393
+
394
+ color: #333;
395
+ overflow: auto;
396
+
397
+ background-color: var(--color2);
398
+
399
+ border: 1px solid var(--color4);
400
+
401
+ margin: var(--w-default-space) 0 0 0;
402
+ }
403
+
404
+ .show-example-wrapper {
405
+ background-color: var(--color2);
406
+
407
+ border: 1px solid var(--color4);
408
+ border-top: 0;
409
+
410
+ margin-top: -14px;
411
+ padding: calc(var(--w-default-space) / 2);
412
+
413
+ h3 {
414
+ color: var(--color5);
415
+ font-family: var(--w-typography-font-family);
416
+ font-size: 0.9em;
417
+ font-weight: bold;
418
+ letter-spacing: 1px;
419
+ margin-bottom: calc(var(--w-default-space) / 2);
420
+ margin-top: 0;
421
+ }
422
+
423
+ p {
424
+ margin: 0;
425
+ }
426
+ }
427
+ }
428
+ }
429
+ /* endregion */
430
+ /* region responsive */
431
+ /** region extra extra small */
432
+ @media (--w-extra-extra-small) {
433
+ .header__inner__links__left-arrow,
434
+ .header__inner__links__download-arrow { display: initial; }
435
+ /** region extra small */
436
+ @media (--w-extra-small) {
437
+ .header__inner__links__api-link span {
438
+ display: initial;
439
+ }
440
+
441
+ @media (--w-small) {
442
+ /* region small */
443
+ /** region headline */
444
+ h2 {
445
+ border-bottom: 1px dashed var(--color4);
446
+ padding-bottom: 10px;
447
+ }
448
+ /** endregion */
449
+
450
+ .header__inner,
451
+ .section__inner,
452
+ .footer__inner { width: 715px; }
453
+
454
+ .header__inner__links {
455
+ width: 706px;
456
+ }
457
+
458
+ .header__inner__links__left-arrow { margin-left: 0; }
459
+
460
+ .section__home {
461
+ code {
462
+ font-size: 0.8em;
463
+ width: 695px;
464
+ }
465
+
466
+ .show-example-wrapper { width: 100%; }
467
+ }
468
+
469
+ .top-link {
470
+ bottom: 34px;
471
+ position: fixed;
472
+ right: 5px;
473
+ visibility: visible;
474
+ z-index: 4;
475
+ }
476
+ /* endregion */
477
+ /* region medium */
478
+ @media (--w-medium) {
479
+ .top-link { right: 45px; }
480
+
481
+ .section__home code {
482
+ font-size: 0.9em;
483
+ }
484
+ }
485
+ /* endregion */
486
+ }
487
+ }
488
+ /** endregion */
489
+ }
490
+ /** endregion */
491
+ /* endregion */
492
+ }