just-the-docs 0.2.6 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/_includes/css/custom.scss.liquid +1 -0
  4. data/_includes/css/just-the-docs.scss.liquid +7 -0
  5. data/_includes/head.html +4 -4
  6. data/_includes/nav.html +55 -40
  7. data/_includes/title.html +5 -1
  8. data/_includes/vendor/anchor_headings.html +2 -2
  9. data/_layouts/default.html +146 -73
  10. data/_layouts/table_wrappers.html +1 -1
  11. data/_sass/base.scss +16 -18
  12. data/_sass/code.scss +209 -71
  13. data/_sass/color_schemes/dark.scss +1 -1
  14. data/_sass/color_schemes/light.scss +0 -0
  15. data/_sass/content.scss +53 -5
  16. data/_sass/custom/custom.scss +0 -129
  17. data/_sass/labels.scss +5 -4
  18. data/_sass/layout.scss +67 -55
  19. data/_sass/modules.scss +20 -0
  20. data/_sass/navigation.scss +129 -53
  21. data/_sass/print.scss +40 -0
  22. data/_sass/search.scss +204 -48
  23. data/_sass/support/_functions.scss +2 -3
  24. data/_sass/support/_variables.scss +15 -9
  25. data/_sass/support/mixins/_layout.scss +1 -3
  26. data/_sass/support/mixins/_typography.scss +6 -1
  27. data/_sass/typography.scss +9 -7
  28. data/_sass/utilities/_layout.scss +74 -17
  29. data/_sass/utilities/_lists.scss +7 -1
  30. data/_sass/utilities/_spacing.scss +69 -25
  31. data/assets/css/just-the-docs-dark.scss +3 -0
  32. data/assets/css/just-the-docs-default.scss +8 -0
  33. data/assets/css/just-the-docs-light.scss +3 -0
  34. data/assets/js/just-the-docs.js +374 -197
  35. data/assets/js/zzzz-search-data.json +58 -0
  36. data/lib/tasks/search.rake +54 -9
  37. metadata +36 -24
  38. data/assets/css/dark-mode-preview.scss +0 -41
  39. data/assets/css/just-the-docs.scss +0 -44
  40. data/assets/js/search-data.json +0 -11
data/_sass/code.scss CHANGED
@@ -14,9 +14,11 @@ code {
14
14
  pre.highlight,
15
15
  figure.highlight {
16
16
  padding: $sp-3;
17
+ margin-top: 0;
17
18
  margin-bottom: 0;
18
- -webkit-overflow-scrolling: touch;
19
19
  background-color: $code-background-color;
20
+ border-radius: $border-radius;
21
+ -webkit-overflow-scrolling: touch;
20
22
 
21
23
  code {
22
24
  padding: 0;
@@ -26,78 +28,214 @@ figure.highlight {
26
28
 
27
29
  .highlighter-rouge {
28
30
  margin-bottom: $sp-3;
29
- overflow: hidden;
30
- border-radius: $border-radius;
31
31
  }
32
32
 
33
- .highlight .c { color: #586e75; } // comment //
34
- .highlight .err { color: #93a1a1; } // error //
35
- .highlight .g { color: #93a1a1; } // generic //
36
- .highlight .k { color: #859900; } // keyword //
37
- .highlight .l { color: #93a1a1; } // literal //
38
- .highlight .n { color: #93a1a1; } // name //
39
- .highlight .o { color: #859900; } // operator //
40
- .highlight .x { color: #cb4b16; } // other //
41
- .highlight .p { color: #93a1a1; } // punctuation //
42
- .highlight .cm { color: #586e75; } // comment.multiline //
43
- .highlight .cp { color: #859900; } // comment.preproc //
44
- .highlight .c1 { color: #586e75; } // comment.single //
45
- .highlight .cs { color: #859900; } // comment.special //
46
- .highlight .gd { color: #2aa198; } // generic.deleted //
47
- .highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph //
48
- .highlight .gr { color: #dc322f; } // generic.error //
49
- .highlight .gh { color: #cb4b16; } // generic.heading //
50
- .highlight .gi { color: #859900; } // generic.inserted //
51
- .highlight .go { color: #93a1a1; } // generic.output //
52
- .highlight .gp { color: #93a1a1; } // generic.prompt //
53
- .highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong //
54
- .highlight .gu { color: #cb4b16; } // generic.subheading //
55
- .highlight .gt { color: #93a1a1; } // generic.traceback //
56
- .highlight .kc { color: #cb4b16; } // keyword.constant //
57
- .highlight .kd { color: #268bd2; } // keyword.declaration //
58
- .highlight .kn { color: #859900; } // keyword.namespace //
59
- .highlight .kp { color: #859900; } // keyword.pseudo //
60
- .highlight .kr { color: #268bd2; } // keyword.reserved //
61
- .highlight .kt { color: #dc322f; } // keyword.type //
62
- .highlight .ld { color: #93a1a1; } // literal.date //
63
- .highlight .m { color: #2aa198; } // literal.number //
64
- .highlight .s { color: #2aa198; } // literal.string //
65
- .highlight .na { color: #555; } // name.attribute //
66
- .highlight .nb { color: #b58900; } // name.builtin //
67
- .highlight .nc { color: #268bd2; } // name.class //
68
- .highlight .no { color: #cb4b16; } // name.constant //
69
- .highlight .nd { color: #268bd2; } // name.decorator //
70
- .highlight .ni { color: #cb4b16; } // name.entity //
71
- .highlight .ne { color: #cb4b16; } // name.exception //
72
- .highlight .nf { color: #268bd2; } // name.function //
73
- .highlight .nl { color: #555; } // name.label //
74
- .highlight .nn { color: #93a1a1; } // name.namespace //
75
- .highlight .nx { color: #555; } // name.other //
76
- .highlight .py { color: #93a1a1; } // name.property //
77
- .highlight .nt { color: #268bd2; } // name.tag //
78
- .highlight .nv { color: #268bd2; } // name.variable //
79
- .highlight .ow { color: #859900; } // operator.word //
80
- .highlight .w { color: #93a1a1; } // text.whitespace //
81
- .highlight .mf { color: #2aa198; } // literal.number.float //
82
- .highlight .mh { color: #2aa198; } // literal.number.hex //
83
- .highlight .mi { color: #2aa198; } // literal.number.integer //
84
- .highlight .mo { color: #2aa198; } // literal.number.oct //
85
- .highlight .sb { color: #586e75; } // literal.string.backtick //
86
- .highlight .sc { color: #2aa198; } // literal.string.char //
87
- .highlight .sd { color: #93a1a1; } // literal.string.doc //
88
- .highlight .s2 { color: #2aa198; } // literal.string.double //
89
- .highlight .se { color: #cb4b16; } // literal.string.escape //
90
- .highlight .sh { color: #93a1a1; } // literal.string.heredoc //
91
- .highlight .si { color: #2aa198; } // literal.string.interpol //
92
- .highlight .sx { color: #2aa198; } // literal.string.other //
93
- .highlight .sr { color: #dc322f; } // literal.string.regex //
94
- .highlight .s1 { color: #2aa198; } // literal.string.single //
95
- .highlight .ss { color: #2aa198; } // literal.string.symbol //
96
- .highlight .bp { color: #268bd2; } // name.builtin.pseudo //
97
- .highlight .vc { color: #268bd2; } // name.variable.class //
98
- .highlight .vg { color: #268bd2; } // name.variable.global //
99
- .highlight .vi { color: #268bd2; } // name.variable.instance //
100
- .highlight .il { color: #2aa198; } // literal.number.integer.long //
33
+ .highlight .c {
34
+ color: #586e75;
35
+ } // comment //
36
+ .highlight .err {
37
+ color: #93a1a1;
38
+ } // error //
39
+ .highlight .g {
40
+ color: #93a1a1;
41
+ } // generic //
42
+ .highlight .k {
43
+ color: #859900;
44
+ } // keyword //
45
+ .highlight .l {
46
+ color: #93a1a1;
47
+ } // literal //
48
+ .highlight .n {
49
+ color: #93a1a1;
50
+ } // name //
51
+ .highlight .o {
52
+ color: #859900;
53
+ } // operator //
54
+ .highlight .x {
55
+ color: #cb4b16;
56
+ } // other //
57
+ .highlight .p {
58
+ color: #93a1a1;
59
+ } // punctuation //
60
+ .highlight .cm {
61
+ color: #586e75;
62
+ } // comment.multiline //
63
+ .highlight .cp {
64
+ color: #859900;
65
+ } // comment.preproc //
66
+ .highlight .c1 {
67
+ color: #586e75;
68
+ } // comment.single //
69
+ .highlight .cs {
70
+ color: #859900;
71
+ } // comment.special //
72
+ .highlight .gd {
73
+ color: #2aa198;
74
+ } // generic.deleted //
75
+ .highlight .ge {
76
+ font-style: italic;
77
+ color: #93a1a1;
78
+ } // generic.emph //
79
+ .highlight .gr {
80
+ color: #dc322f;
81
+ } // generic.error //
82
+ .highlight .gh {
83
+ color: #cb4b16;
84
+ } // generic.heading //
85
+ .highlight .gi {
86
+ color: #859900;
87
+ } // generic.inserted //
88
+ .highlight .go {
89
+ color: #93a1a1;
90
+ } // generic.output //
91
+ .highlight .gp {
92
+ color: #93a1a1;
93
+ } // generic.prompt //
94
+ .highlight .gs {
95
+ font-weight: bold;
96
+ color: #93a1a1;
97
+ } // generic.strong //
98
+ .highlight .gu {
99
+ color: #cb4b16;
100
+ } // generic.subheading //
101
+ .highlight .gt {
102
+ color: #93a1a1;
103
+ } // generic.traceback //
104
+ .highlight .kc {
105
+ color: #cb4b16;
106
+ } // keyword.constant //
107
+ .highlight .kd {
108
+ color: #268bd2;
109
+ } // keyword.declaration //
110
+ .highlight .kn {
111
+ color: #859900;
112
+ } // keyword.namespace //
113
+ .highlight .kp {
114
+ color: #859900;
115
+ } // keyword.pseudo //
116
+ .highlight .kr {
117
+ color: #268bd2;
118
+ } // keyword.reserved //
119
+ .highlight .kt {
120
+ color: #dc322f;
121
+ } // keyword.type //
122
+ .highlight .ld {
123
+ color: #93a1a1;
124
+ } // literal.date //
125
+ .highlight .m {
126
+ color: #2aa198;
127
+ } // literal.number //
128
+ .highlight .s {
129
+ color: #2aa198;
130
+ } // literal.string //
131
+ .highlight .na {
132
+ color: #555;
133
+ } // name.attribute //
134
+ .highlight .nb {
135
+ color: #b58900;
136
+ } // name.builtin //
137
+ .highlight .nc {
138
+ color: #268bd2;
139
+ } // name.class //
140
+ .highlight .no {
141
+ color: #cb4b16;
142
+ } // name.constant //
143
+ .highlight .nd {
144
+ color: #268bd2;
145
+ } // name.decorator //
146
+ .highlight .ni {
147
+ color: #cb4b16;
148
+ } // name.entity //
149
+ .highlight .ne {
150
+ color: #cb4b16;
151
+ } // name.exception //
152
+ .highlight .nf {
153
+ color: #268bd2;
154
+ } // name.function //
155
+ .highlight .nl {
156
+ color: #555;
157
+ } // name.label //
158
+ .highlight .nn {
159
+ color: #93a1a1;
160
+ } // name.namespace //
161
+ .highlight .nx {
162
+ color: #555;
163
+ } // name.other //
164
+ .highlight .py {
165
+ color: #93a1a1;
166
+ } // name.property //
167
+ .highlight .nt {
168
+ color: #268bd2;
169
+ } // name.tag //
170
+ .highlight .nv {
171
+ color: #268bd2;
172
+ } // name.variable //
173
+ .highlight .ow {
174
+ color: #859900;
175
+ } // operator.word //
176
+ .highlight .w {
177
+ color: #93a1a1;
178
+ } // text.whitespace //
179
+ .highlight .mf {
180
+ color: #2aa198;
181
+ } // literal.number.float //
182
+ .highlight .mh {
183
+ color: #2aa198;
184
+ } // literal.number.hex //
185
+ .highlight .mi {
186
+ color: #2aa198;
187
+ } // literal.number.integer //
188
+ .highlight .mo {
189
+ color: #2aa198;
190
+ } // literal.number.oct //
191
+ .highlight .sb {
192
+ color: #586e75;
193
+ } // literal.string.backtick //
194
+ .highlight .sc {
195
+ color: #2aa198;
196
+ } // literal.string.char //
197
+ .highlight .sd {
198
+ color: #93a1a1;
199
+ } // literal.string.doc //
200
+ .highlight .s2 {
201
+ color: #2aa198;
202
+ } // literal.string.double //
203
+ .highlight .se {
204
+ color: #cb4b16;
205
+ } // literal.string.escape //
206
+ .highlight .sh {
207
+ color: #93a1a1;
208
+ } // literal.string.heredoc //
209
+ .highlight .si {
210
+ color: #2aa198;
211
+ } // literal.string.interpol //
212
+ .highlight .sx {
213
+ color: #2aa198;
214
+ } // literal.string.other //
215
+ .highlight .sr {
216
+ color: #dc322f;
217
+ } // literal.string.regex //
218
+ .highlight .s1 {
219
+ color: #2aa198;
220
+ } // literal.string.single //
221
+ .highlight .ss {
222
+ color: #2aa198;
223
+ } // literal.string.symbol //
224
+ .highlight .bp {
225
+ color: #268bd2;
226
+ } // name.builtin.pseudo //
227
+ .highlight .vc {
228
+ color: #268bd2;
229
+ } // name.variable.class //
230
+ .highlight .vg {
231
+ color: #268bd2;
232
+ } // name.variable.global //
233
+ .highlight .vi {
234
+ color: #268bd2;
235
+ } // name.variable.instance //
236
+ .highlight .il {
237
+ color: #2aa198;
238
+ } // literal.number.integer.long //
101
239
 
102
240
  //
103
241
  // Code examples (rendered)
data/_sass/color_schemes/dark.scss CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  $body-background-color: $grey-dk-300;
3
2
  $sidebar-color: $grey-dk-300;
4
3
  $border-color: $grey-dk-200;
@@ -15,3 +14,4 @@ $base-button-color: $grey-dk-250;
15
14
  $code-background-color: $grey-dk-250;
16
15
  $search-background-color: $grey-dk-250;
17
16
  $table-background-color: $grey-dk-250;
17
+ $feedback-color: darken($sidebar-color, 3%);
data/_sass/color_schemes/light.scss ADDED
File without changes
data/_sass/content.scss CHANGED
@@ -5,9 +5,19 @@
5
5
  //
6
6
  // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
7
7
 
8
- .page-content {
8
+ .main-content {
9
9
  line-height: $content-line-height;
10
10
 
11
+ ol,
12
+ ul,
13
+ dl,
14
+ pre,
15
+ address,
16
+ blockquote,
17
+ .table-wrapper {
18
+ margin-top: 0.5em;
19
+ }
20
+
11
21
  a {
12
22
  overflow: hidden;
13
23
  text-overflow: ellipsis;
@@ -19,6 +29,12 @@
19
29
  padding-left: 1.5em;
20
30
  }
21
31
 
32
+ li {
33
+ .highlight {
34
+ margin-top: $sp-1;
35
+ }
36
+ }
37
+
22
38
  ol {
23
39
  list-style-type: none;
24
40
  counter-reset: step-counter;
@@ -116,26 +132,41 @@
116
132
 
117
133
  .anchor-heading {
118
134
  position: absolute;
119
- right: -$sp-3;
135
+ right: -$sp-4;
120
136
  width: $sp-5;
121
137
  height: 100%;
138
+ padding-right: $sp-1;
139
+ padding-left: $sp-1;
122
140
  overflow: visible;
123
- fill: $link-color;
124
- visibility: hidden;
125
141
 
126
142
  @include mq(md) {
127
143
  right: auto;
128
144
  left: -$sp-5;
129
145
  }
146
+
147
+ svg {
148
+ display: inline-block;
149
+ width: 100%;
150
+ height: 100%;
151
+ color: $link-color;
152
+ visibility: hidden;
153
+ }
130
154
  }
131
155
 
156
+ .anchor-heading:hover,
132
157
  h1:hover > .anchor-heading,
133
158
  h2:hover > .anchor-heading,
134
159
  h3:hover > .anchor-heading,
135
160
  h4:hover > .anchor-heading,
136
161
  h5:hover > .anchor-heading,
137
162
  h6:hover > .anchor-heading {
138
- visibility: visible;
163
+ svg {
164
+ visibility: visible;
165
+ }
166
+ }
167
+
168
+ summary {
169
+ cursor: pointer;
139
170
  }
140
171
 
141
172
  h1,
@@ -145,5 +176,22 @@
145
176
  h5,
146
177
  h6 {
147
178
  position: relative;
179
+ margin-top: 1.5em;
180
+ margin-bottom: 0.25em;
181
+
182
+ &:first-child {
183
+ margin-top: $sp-2;
184
+ }
185
+
186
+ + table,
187
+ + .table-wrapper,
188
+ + .code-example,
189
+ + .highlighter-rouge {
190
+ margin-top: 1em;
191
+ }
192
+
193
+ + p {
194
+ margin-top: 0;
195
+ }
148
196
  }
149
197
  }
data/_sass/custom/custom.scss CHANGED
@@ -1,129 +0,0 @@
1
- ////
2
- //// Typography
3
- ////
4
-
5
- //$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
6
- //$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
7
- //$root-font-size: 16px; // Base font-size for rems
8
- //$body-line-height: 1.4;
9
- //$content-line-height: 1.5;
10
- //$body-heading-line-height: 1.15;
11
-
12
- ////
13
- //// Colors
14
- ////
15
-
16
- //$white: #fff;
17
-
18
- //$grey-dk-000: #959396;
19
- //$grey-dk-100: #5c5962;
20
- //$grey-dk-200: #44434d;
21
- //$grey-dk-250: #302d36;
22
- //$grey-dk-300: #27262b;
23
-
24
- //$grey-lt-000: #f5f6fa;
25
- //$grey-lt-100: #eeebee;
26
- //$grey-lt-200: #ecebed;
27
- //$grey-lt-300: #e6e1e8;
28
-
29
- //$purple-000: #7253ed;
30
- //$purple-100: #5e41d0;
31
- //$purple-200: #4e26af;
32
- //$purple-300: #381885;
33
-
34
- //$blue-000: #2c84fa;
35
- //$blue-100: #2869e6;
36
- //$blue-200: #264caf;
37
- //$blue-300: #183385;
38
-
39
- //$green-000: #41d693;
40
- //$green-100: #11b584;
41
- //$green-200: #009c7b;
42
- //$green-300: #026e57;
43
-
44
- //$yellow-000: #ffeb82;
45
- //$yellow-100: #fadf50;
46
- //$yellow-200: #f7d12e;
47
- //$yellow-300: #e7af06;
48
-
49
- //$red-000: #f77e7e;
50
- //$red-100: #f96e65;
51
- //$red-200: #e94c4c;
52
- //$red-300: #dd2e2e;
53
-
54
- //$body-background-color: $white;
55
- //$sidebar-color: $grey-lt-000;
56
- //$search-background-color: $white;
57
- //$table-background-color: $white;
58
- //$code-background-color: $grey-lt-000;
59
-
60
- //$body-text-color: $grey-dk-100;
61
- //$body-heading-color: $grey-dk-300;
62
- //$search-result-preview-color: $grey-dk-000;
63
- //$nav-child-link-color: $grey-dk-100;
64
- //$link-color: $purple-000;
65
- //$btn-primary-color: $purple-100;
66
- //$base-button-color: #f7f7f7;
67
-
68
- ////
69
- //// Spacing
70
- ////
71
-
72
- //$spacing-unit: 1rem; // 1rem == 16px
73
-
74
- //$spacers: (
75
- //sp-0: 0,
76
- //sp-1: $spacing-unit * 0.25,
77
- //sp-2: $spacing-unit * 0.5,
78
- //sp-3: $spacing-unit * 0.75,
79
- //sp-4: $spacing-unit,
80
- //sp-5: $spacing-unit * 1.5,
81
- //sp-6: $spacing-unit * 2,
82
- //sp-7: $spacing-unit * 2.5,
83
- //sp-8: $spacing-unit * 3,
84
- //sp-9: $spacing-unit * 3.5,
85
- //sp-10: $spacing-unit * 4
86
- //);
87
-
88
- //$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
89
- //$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
90
- //$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
91
- //$sp-4: map-get($spacers, sp-4); // 1 rem == 16px
92
- //$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
93
- //$sp-6: map-get($spacers, sp-6); // 2 rem == 32px
94
- //$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
95
- //$sp-8: map-get($spacers, sp-8); // 3 rem == 48px
96
- //$sp-9: map-get($spacers, sp-9); // 4 rem == 48px
97
- //$sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
98
-
99
- ////
100
- //// Borders
101
- ////
102
-
103
- //$border: 1px solid;
104
- //$border-radius: 4px;
105
- //$border-color: $grey-lt-100;
106
-
107
- ////
108
- //// Grid system
109
- ////
110
-
111
- //$gutter-spacing: $sp-6;
112
- //$gutter-spacing-sm: $sp-4;
113
- //$nav-width: 264px;
114
- //$nav-width-md: 248px;
115
- //$content-width: 800px;
116
- //$header-height: 60px;
117
- //$search-results-width: 500px;
118
-
119
- ////
120
- //// Media queries in pixels
121
- ////
122
-
123
- //$media-queries: (
124
- //xs: 320px,
125
- //sm: 500px,
126
- //md: $content-width,
127
- //lg: $content-width + $nav-width,
128
- //xl: 1400px
129
- //);