just-the-docs 0.2.7 → 0.3.2

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.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -1
  3. data/_includes/css/custom.scss.liquid +1 -0
  4. data/_includes/css/just-the-docs.scss.liquid +7 -0
  5. data/_includes/fix_linenos.html +65 -0
  6. data/_includes/head.html +7 -7
  7. data/_includes/nav.html +97 -37
  8. data/_includes/vendor/anchor_headings.html +53 -9
  9. data/_layouts/default.html +157 -75
  10. data/_layouts/table_wrappers.html +1 -1
  11. data/_sass/base.scss +14 -17
  12. data/_sass/code.scss +285 -74
  13. data/_sass/color_schemes/dark.scss +1 -1
  14. data/_sass/color_schemes/light.scss +0 -0
  15. data/_sass/content.scss +44 -5
  16. data/_sass/custom/custom.scss +0 -129
  17. data/_sass/labels.scss +5 -4
  18. data/_sass/layout.scss +48 -52
  19. data/_sass/modules.scss +20 -0
  20. data/_sass/navigation.scss +149 -50
  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 +33 -9
  25. data/_sass/support/mixins/_layout.scss +1 -3
  26. data/_sass/support/mixins/_typography.scss +25 -22
  27. data/_sass/typography.scss +13 -7
  28. data/_sass/utilities/_layout.scss +74 -17
  29. data/_sass/utilities/_spacing.scss +69 -25
  30. data/assets/css/just-the-docs-dark.scss +3 -0
  31. data/assets/css/just-the-docs-default.scss +8 -0
  32. data/assets/css/just-the-docs-light.scss +3 -0
  33. data/assets/js/just-the-docs.js +374 -202
  34. data/assets/js/zzzz-search-data.json +72 -0
  35. data/lib/tasks/search.rake +69 -10
  36. metadata +35 -24
  37. data/_sass/overrides.scss +0 -3
  38. data/assets/css/dark-mode-preview.scss +0 -45
  39. data/assets/css/just-the-docs.scss +0 -49
  40. data/assets/js/dark-mode-preview.js +0 -23
  41. data/assets/js/search-data.json +0 -12
@@ -0,0 +1,20 @@
1
+ //
2
+ // Import external dependencies
3
+ //
4
+ @import "./vendor/normalize.scss/normalize.scss";
5
+
6
+ //
7
+ // Modules
8
+ //
9
+ @import "./base";
10
+ @import "./layout";
11
+ @import "./content";
12
+ @import "./navigation";
13
+ @import "./typography";
14
+ @import "./labels";
15
+ @import "./buttons";
16
+ @import "./search";
17
+ @import "./tables";
18
+ @import "./code";
19
+ @import "./utilities/utilities";
20
+ @import "./print";
@@ -1,89 +1,188 @@
1
1
  //
2
2
  // Main nav, breadcrumb, etc...
3
3
  //
4
- .navigation-list {
4
+ // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
5
+
6
+ .nav-list {
5
7
  padding: 0;
6
8
  margin-top: 0;
7
9
  margin-bottom: 0;
8
10
  list-style: none;
9
- }
10
11
 
11
- .navigation-list-child-list {
12
- padding-left: $sp-3;
13
- list-style: none;
12
+ .nav-list-item {
13
+ @include fs-4;
14
+ position: relative;
15
+ margin: 0;
14
16
 
15
- .navigation-list-link {
16
- color: $nav-child-link-color;
17
- }
17
+ @include mq(md) {
18
+ @include fs-3;
19
+ }
18
20
 
19
- .navigation-list-item {
20
- position: relative;
21
+ .nav-list-link {
22
+ display: block;
23
+ min-height: $nav-list-item-height-sm;
24
+ padding-top: $sp-1;
25
+ padding-bottom: $sp-1;
26
+ line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
27
+ @if $nav-list-expander-right {
28
+ padding-right: $nav-list-item-height-sm;
29
+ padding-left: $gutter-spacing-sm;
30
+ } @else {
31
+ padding-right: $gutter-spacing-sm;
32
+ padding-left: $nav-list-item-height-sm;
33
+ }
34
+
35
+ @include mq(md) {
36
+ min-height: $nav-list-item-height;
37
+ line-height: #{$nav-list-item-height - 2 * $sp-1};
38
+ @if $nav-list-expander-right {
39
+ padding-right: $nav-list-item-height;
40
+ padding-left: $gutter-spacing;
41
+ } @else {
42
+ padding-right: $gutter-spacing;
43
+ padding-left: $nav-list-item-height;
44
+ }
45
+ }
46
+
47
+ &.active {
48
+ font-weight: 600;
49
+ text-decoration: none;
50
+ }
51
+
52
+ &:hover,
53
+ &.active {
54
+ background-image: linear-gradient(
55
+ -90deg,
56
+ rgba($feedback-color, 1) 0%,
57
+ rgba($feedback-color, 0.8) 80%,
58
+ rgba($feedback-color, 0) 100%
59
+ );
60
+ }
61
+ }
21
62
 
22
- &::before {
63
+ .nav-list-expander {
23
64
  position: absolute;
24
- margin-top: 0.3em;
25
- margin-left: -0.8em;
26
- color: rgba($body-text-color, 0.3);
27
- content: "- ";
65
+ @if $nav-list-expander-right {
66
+ right: 0;
67
+ }
68
+ width: $nav-list-item-height-sm;
69
+ height: $nav-list-item-height-sm;
70
+ padding-top: #{$nav-list-item-height-sm / 4};
71
+ padding-right: #{$nav-list-item-height-sm / 4};
72
+ padding-bottom: #{$nav-list-item-height-sm / 4};
73
+ padding-left: #{$nav-list-item-height-sm / 4};
74
+ color: $link-color;
75
+
76
+ @include mq(md) {
77
+ width: $nav-list-item-height;
78
+ height: $nav-list-item-height;
79
+ padding-top: #{$nav-list-item-height / 4};
80
+ padding-right: #{$nav-list-item-height / 4};
81
+ padding-bottom: #{$nav-list-item-height / 4};
82
+ padding-left: #{$nav-list-item-height / 4};
83
+ }
84
+
85
+ &:hover {
86
+ background-image: linear-gradient(
87
+ -90deg,
88
+ rgba($feedback-color, 1) 0%,
89
+ rgba($feedback-color, 0.8) 100%
90
+ );
91
+ }
92
+
93
+ @if $nav-list-expander-right {
94
+ svg {
95
+ transform: rotate(90deg);
96
+ }
97
+ }
98
+ }
99
+
100
+ > .nav-list {
101
+ display: none;
102
+ padding-left: $sp-3;
103
+ list-style: none;
104
+
105
+ .nav-list-item {
106
+ position: relative;
107
+
108
+ .nav-list-link {
109
+ color: $nav-child-link-color;
110
+ }
111
+
112
+ .nav-list-expander {
113
+ color: $nav-child-link-color;
114
+ }
115
+ }
28
116
  }
29
117
 
30
118
  &.active {
31
- &::before {
32
- color: $body-text-color;
119
+ > .nav-list-expander svg {
120
+ @if $nav-list-expander-right {
121
+ transform: rotate(-90deg);
122
+ } @else {
123
+ transform: rotate(90deg);
124
+ }
125
+ }
126
+
127
+ > .nav-list {
128
+ display: block;
33
129
  }
34
130
  }
35
131
  }
36
132
  }
37
133
 
38
- .navigation-list-item {
39
- @include fs-4;
40
- margin: 0;
134
+ .nav-category {
135
+ padding-top: $sp-2;
136
+ padding-right: $gutter-spacing-sm;
137
+ padding-bottom: $sp-2;
138
+ padding-left: $gutter-spacing-sm;
139
+ font-weight: 600;
140
+ text-align: end;
141
+ text-transform: uppercase;
142
+ border-bottom: $border $border-color;
143
+ @include fs-2;
41
144
 
42
145
  @include mq(md) {
43
- @include fs-3;
44
- }
45
-
46
- .navigation-list-child-list {
47
- display: none;
48
- }
146
+ padding-right: $gutter-spacing;
147
+ padding-left: $gutter-spacing;
148
+ margin-top: $gutter-spacing-sm;
149
+ text-align: start;
49
150
 
50
- &.active {
51
- .navigation-list-child-list {
52
- display: block;
151
+ &:first-child {
152
+ margin-top: 0;
53
153
  }
54
154
  }
55
155
  }
56
156
 
57
- .navigation-list-link {
58
- display: block;
59
- padding-top: $sp-1;
60
- padding-bottom: $sp-1;
157
+ // Aux nav
61
158
 
62
- &.active {
63
- font-weight: 600;
64
- color: $body-heading-color;
65
- text-decoration: none;
66
- }
67
- }
68
-
69
- // Small screen nav
159
+ .aux-nav {
160
+ height: 100%;
161
+ overflow-x: auto;
162
+ @include fs-2;
70
163
 
71
- .main-nav {
72
- display: none;
164
+ .aux-nav-list {
165
+ display: flex;
166
+ height: 100%;
167
+ padding: 0;
168
+ margin: 0;
169
+ list-style: none;
170
+ }
73
171
 
74
- &.nav-open {
75
- display: block;
172
+ .aux-nav-list-item {
173
+ display: inline-block;
174
+ height: 100%;
175
+ padding: 0;
176
+ margin: 0;
76
177
  }
178
+
77
179
  @include mq(md) {
78
- display: block;
180
+ padding-right: $gutter-spacing-sm;
79
181
  }
80
182
  }
81
183
 
82
- .aux-nav {
83
- align-self: center;
84
- }
85
-
86
184
  // Breadcrumb nav
185
+
87
186
  .breadcrumb-nav {
88
187
  @include mq(md) {
89
188
  margin-top: -$sp-4;
@@ -0,0 +1,40 @@
1
+ // stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
2
+
3
+ @media print {
4
+ .site-footer,
5
+ .site-button,
6
+ #edit-this-page,
7
+ #back-to-top,
8
+ .site-nav,
9
+ .main-header {
10
+ display: none !important;
11
+ }
12
+
13
+ .side-bar {
14
+ width: 100%;
15
+ height: auto;
16
+ border-right: 0 !important;
17
+ }
18
+
19
+ .site-header {
20
+ border-bottom: 1px solid $border-color;
21
+ }
22
+
23
+ .site-title {
24
+ font-size: $root-font-size !important;
25
+ font-weight: 700 !important;
26
+ }
27
+
28
+ .text-small {
29
+ font-size: 8pt !important;
30
+ }
31
+
32
+ pre.highlight {
33
+ border: 1px solid $border-color;
34
+ }
35
+
36
+ .main {
37
+ max-width: none;
38
+ margin-left: 0;
39
+ }
40
+ }
@@ -4,91 +4,115 @@
4
4
 
5
5
  .search {
6
6
  position: relative;
7
- z-index: 99;
7
+ z-index: 2;
8
8
  flex-grow: 1;
9
- height: 100%;
10
- margin-bottom: $sp-3;
9
+ height: $sp-10;
10
+ padding: $sp-2;
11
+ transition: padding linear #{$transition-duration / 2};
11
12
 
12
13
  @include mq(md) {
13
- margin-bottom: 0;
14
+ position: relative !important;
15
+ width: auto !important;
16
+ height: 100% !important;
17
+ padding: 0;
18
+ transition: none;
14
19
  }
15
20
  }
16
21
 
17
22
  .search-input-wrap {
18
- display: flex;
19
- height: 100%;
20
- padding: $sp-2;
21
- background-color: $search-background-color;
23
+ position: relative;
24
+ z-index: 1;
25
+ height: $sp-8;
26
+ overflow: hidden;
22
27
  border-radius: $border-radius;
23
28
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
29
+ transition: height linear #{$transition-duration / 2};
24
30
 
25
31
  @include mq(md) {
26
- padding-top: 0;
27
- padding-right: 0;
28
- padding-bottom: 0;
29
- padding-left: 0;
30
- background-color: $body-background-color;
32
+ position: absolute;
33
+ width: 100%;
34
+ max-width: $search-results-width;
35
+ height: 100% !important;
31
36
  border-radius: 0;
32
37
  box-shadow: none;
38
+ transition: width ease $transition-duration;
33
39
  }
34
40
  }
35
41
 
36
42
  .search-input {
37
- align-self: center;
43
+ position: absolute;
38
44
  width: 100%;
39
- padding-top: $sp-1;
40
- padding-bottom: $sp-1;
45
+ height: 100%;
46
+ padding-top: $sp-2;
47
+ padding-right: $gutter-spacing-sm;
48
+ padding-bottom: $sp-2;
49
+ padding-left: #{$gutter-spacing-sm + $sp-5};
50
+ font-size: 16px;
41
51
  background-color: $search-background-color;
42
52
  border-top: 0;
43
53
  border-right: 0;
44
54
  border-bottom: 0;
45
55
  border-left: 0;
46
- order: 2;
47
- @include fs-4;
56
+ border-radius: 0;
57
+
58
+ @include mq(md) {
59
+ padding-top: $gutter-spacing-sm;
60
+ padding-bottom: $gutter-spacing-sm;
61
+ padding-left: #{$gutter-spacing + $sp-5};
62
+ font-size: 14px;
63
+ background-color: $body-background-color;
64
+ transition: padding-left linear #{$transition-duration / 2};
65
+ }
48
66
 
49
67
  &:focus {
50
68
  outline: 0;
51
- box-shadow: none;
52
69
 
53
- + .search-icon {
54
- fill: $link-color;
70
+ + .search-label .search-icon {
71
+ color: $link-color;
55
72
  }
56
73
  }
74
+ }
75
+
76
+ .search-label {
77
+ position: absolute;
78
+ display: flex;
79
+ height: 100%;
80
+ padding-left: $gutter-spacing-sm;
57
81
 
58
82
  @include mq(md) {
59
- background-color: $body-background-color;
60
- @include fs-3;
83
+ padding-left: $gutter-spacing;
84
+ transition: padding-left linear #{$transition-duration / 2};
61
85
  }
62
- }
63
86
 
64
- .search-icon {
65
- align-self: center;
66
- margin-right: $sp-2;
67
- fill: $grey-dk-000;
68
- order: 1;
87
+ .search-icon {
88
+ width: #{$sp-4 * 1.2};
89
+ height: #{$sp-4 * 1.2};
90
+ align-self: center;
91
+ color: $grey-dk-000;
92
+ }
69
93
  }
70
94
 
71
- .search-results-wrap {
95
+ .search-results {
72
96
  position: absolute;
73
- z-index: 100;
97
+ left: 0;
74
98
  display: none;
75
99
  width: 100%;
76
- background: $search-background-color;
77
- border-radius: $border-radius;
100
+ max-height: calc(100% - #{$sp-10});
101
+ overflow-y: auto;
102
+ background-color: $search-background-color;
103
+ border-bottom-right-radius: $border-radius;
104
+ border-bottom-left-radius: $border-radius;
78
105
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
79
106
 
80
- &.active {
81
- display: block;
82
- }
83
-
84
107
  @include mq(md) {
108
+ top: 100%;
85
109
  width: $search-results-width;
110
+ max-height: calc(100vh - 200%) !important;
86
111
  }
87
112
  }
88
113
 
89
114
  .search-results-list {
90
115
  padding-left: 0;
91
- margin-top: $sp-1;
92
116
  margin-bottom: $sp-1;
93
117
  list-style: none;
94
118
  @include fs-4;
@@ -112,31 +136,58 @@
112
136
 
113
137
  &:hover,
114
138
  &.active {
115
- background-color: $sidebar-color;
116
- }
117
-
118
- @include mq(md) {
119
- padding-right: $sp-4;
120
- padding-left: $sp-4;
139
+ background-color: $feedback-color;
121
140
  }
122
141
  }
123
142
 
124
143
  .search-result-title {
125
144
  display: block;
126
145
  padding-top: $sp-2;
127
- padding-right: $sp-4;
128
146
  padding-bottom: $sp-2;
129
147
 
130
148
  @include mq(sm) {
131
149
  display: inline-block;
132
150
  width: 40%;
133
- word-wrap: break-word;
151
+ padding-right: $sp-2;
134
152
  vertical-align: top;
135
153
  }
136
154
  }
137
155
 
156
+ .search-result-doc {
157
+ display: flex;
158
+ align-items: center;
159
+ word-wrap: break-word;
160
+
161
+ &.search-result-doc-parent {
162
+ opacity: 0.5;
163
+ @include fs-3;
164
+
165
+ @include mq(md) {
166
+ @include fs-2;
167
+ }
168
+ }
169
+
170
+ .search-result-icon {
171
+ width: $sp-4;
172
+ height: $sp-4;
173
+ margin-right: $sp-2;
174
+ color: $link-color;
175
+ flex-shrink: 0;
176
+ }
177
+
178
+ .search-result-doc-title {
179
+ overflow: auto;
180
+ }
181
+ }
182
+
183
+ .search-result-section {
184
+ margin-left: #{$sp-4 + $sp-2};
185
+ word-wrap: break-word;
186
+ }
187
+
138
188
  .search-result-rel-url {
139
189
  display: block;
190
+ margin-left: #{$sp-4 + $sp-2};
140
191
  overflow: hidden;
141
192
  color: $search-result-preview-color;
142
193
  text-overflow: ellipsis;
@@ -144,12 +195,14 @@
144
195
  @include fs-1;
145
196
  }
146
197
 
147
- .search-result-preview {
198
+ .search-result-previews {
148
199
  display: block;
149
200
  padding-top: $sp-2;
150
201
  padding-bottom: $sp-2;
151
202
  padding-left: $sp-4;
203
+ margin-left: $sp-2;
152
204
  color: $search-result-preview-color;
205
+ word-wrap: break-word;
153
206
  border-left: $border;
154
207
  border-left-color: $border-color;
155
208
  @include fs-2;
@@ -157,11 +210,114 @@
157
210
  @include mq(sm) {
158
211
  display: inline-block;
159
212
  width: 60%;
213
+ padding-left: $sp-2;
214
+ margin-left: 0;
160
215
  vertical-align: top;
161
216
  }
162
217
  }
163
218
 
219
+ .search-result-preview + .search-result-preview {
220
+ margin-top: $sp-1;
221
+ }
222
+
164
223
  .search-result-highlight {
165
224
  font-weight: bold;
166
- color: $link-color;
225
+ }
226
+
227
+ .search-no-result {
228
+ padding-top: $sp-2;
229
+ padding-right: $sp-3;
230
+ padding-bottom: $sp-2;
231
+ padding-left: $sp-3;
232
+ @include fs-3;
233
+ }
234
+
235
+ .search-button {
236
+ position: fixed;
237
+ right: $sp-4;
238
+ bottom: $sp-4;
239
+ display: flex;
240
+ width: $sp-9;
241
+ height: $sp-9;
242
+ background-color: $search-background-color;
243
+ border: 1px solid rgba($link-color, 0.3);
244
+ border-radius: #{$sp-9 / 2};
245
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
246
+ align-items: center;
247
+ justify-content: center;
248
+ }
249
+
250
+ .search-overlay {
251
+ position: fixed;
252
+ top: 0;
253
+ left: 0;
254
+ z-index: 1;
255
+ width: 0;
256
+ height: 0;
257
+ background-color: rgba(0, 0, 0, 0.3);
258
+ opacity: 0;
259
+ transition: opacity ease $transition-duration, width 0s $transition-duration,
260
+ height 0s $transition-duration;
261
+ }
262
+
263
+ .search-active {
264
+ .search {
265
+ position: fixed;
266
+ top: 0;
267
+ left: 0;
268
+ width: 100%;
269
+ height: 100%;
270
+ padding: 0;
271
+ }
272
+
273
+ .search-input-wrap {
274
+ height: $sp-10;
275
+ border-radius: 0;
276
+
277
+ @include mq(md) {
278
+ width: $search-results-width;
279
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
280
+ }
281
+ }
282
+
283
+ .search-input {
284
+ background-color: $search-background-color;
285
+
286
+ @include mq(md) {
287
+ padding-left: 2.3rem;
288
+ }
289
+ }
290
+
291
+ .search-label {
292
+ @include mq(md) {
293
+ padding-left: 0.6rem;
294
+ }
295
+ }
296
+
297
+ .search-results {
298
+ display: block;
299
+ }
300
+
301
+ .search-overlay {
302
+ width: 100%;
303
+ height: 100%;
304
+ opacity: 1;
305
+ transition: opacity ease $transition-duration, width 0s, height 0s;
306
+ }
307
+
308
+ @include mq(md) {
309
+ .main {
310
+ position: fixed;
311
+ right: 0;
312
+ left: 0;
313
+ }
314
+ }
315
+
316
+ .main-header {
317
+ padding-top: $sp-10;
318
+
319
+ @include mq(md) {
320
+ padding-top: 0;
321
+ }
322
+ }
167
323
  }