just-the-docs 0.2.5 → 0.2.6

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 (25) hide show
  1. checksums.yaml +5 -5
  2. data/README.md +1 -1
  3. data/_includes/head.html +17 -11
  4. data/_includes/head_custom.html +0 -0
  5. data/_includes/js/custom.js +0 -0
  6. data/_includes/nav.html +30 -34
  7. data/_includes/title.html +1 -0
  8. data/_includes/vendor/anchor_headings.html +100 -0
  9. data/_layouts/default.html +57 -39
  10. data/_layouts/table_wrappers.html +7 -0
  11. data/_layouts/vendor/compress.html +10 -0
  12. data/_sass/buttons.scss +1 -1
  13. data/_sass/code.scss +4 -3
  14. data/_sass/color_schemes/dark.scss +3 -0
  15. data/_sass/content.scss +35 -0
  16. data/_sass/custom/custom.scss +129 -120
  17. data/_sass/layout.scss +71 -27
  18. data/_sass/navigation.scss +4 -32
  19. data/_sass/search.scss +98 -45
  20. data/_sass/support/_variables.scss +15 -16
  21. data/_sass/tables.scss +13 -33
  22. data/assets/js/just-the-docs.js +222 -104
  23. data/assets/js/search-data.json +1 -2
  24. data/assets/js/vendor/lunr.min.js +3 -3
  25. metadata +9 -4
data/_sass/content.scss CHANGED
@@ -6,6 +6,8 @@
6
6
  // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
7
7
 
8
8
  .page-content {
9
+ line-height: $content-line-height;
10
+
9
11
  a {
10
12
  overflow: hidden;
11
13
  text-overflow: ellipsis;
@@ -111,4 +113,37 @@
111
113
  margin-left: 1em;
112
114
  font-weight: 500;
113
115
  }
116
+
117
+ .anchor-heading {
118
+ position: absolute;
119
+ right: -$sp-3;
120
+ width: $sp-5;
121
+ height: 100%;
122
+ overflow: visible;
123
+ fill: $link-color;
124
+ visibility: hidden;
125
+
126
+ @include mq(md) {
127
+ right: auto;
128
+ left: -$sp-5;
129
+ }
130
+ }
131
+
132
+ h1:hover > .anchor-heading,
133
+ h2:hover > .anchor-heading,
134
+ h3:hover > .anchor-heading,
135
+ h4:hover > .anchor-heading,
136
+ h5:hover > .anchor-heading,
137
+ h6:hover > .anchor-heading {
138
+ visibility: visible;
139
+ }
140
+
141
+ h1,
142
+ h2,
143
+ h3,
144
+ h4,
145
+ h5,
146
+ h6 {
147
+ position: relative;
148
+ }
114
149
  }
data/_sass/custom/custom.scss CHANGED
@@ -1,120 +1,129 @@
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
- // $body-heading-line-height: 1.15;
10
- //
11
- // //
12
- // // Colors
13
- // //
14
- //
15
- // $white: #fff;
16
- //
17
- // $grey-dk-000: #959396;
18
- // $grey-dk-100: #5c5962;
19
- // $grey-dk-200: #44434d;
20
- // $grey-dk-250: #302d36 !default;
21
- // $grey-dk-300: #27262b;
22
- //
23
- // $grey-lt-000: #f5f6fa;
24
- // $grey-lt-100: #eeebee;
25
- // $grey-lt-200: #ecebed;
26
- // $grey-lt-300: #e6e1e8;
27
- //
28
- // $purple-000: #7253ed;
29
- // $purple-100: #5e41d0;
30
- // $purple-200: #4e26af;
31
- // $purple-300: #381885;
32
- //
33
- // $blue-000: #2c84fa;
34
- // $blue-100: #2869e6;
35
- // $blue-200: #264caf;
36
- // $blue-300: #183385;
37
- //
38
- // $green-000: #41d693;
39
- // $green-100: #11b584;
40
- // $green-200: #009c7b;
41
- // $green-300: #026e57;
42
- //
43
- // $body-background-color: $white !default;
44
- // $sidebar-color: $grey-lt-000 !default;
45
- // $code-background-color: $grey-lt-000 !default;
46
-
47
- // $body-text-color: $grey-dk-100 !default;
48
- // $body-heading-color: $grey-dk-300 !default;
49
- // $nav-child-link-color: $grey-dk-100 !default;
50
- // $link-color: $purple-000 !default;
51
- // $btn-primary-color: $purple-100 !default;
52
- // $base-button-color: #f7f7f7 !default;
53
- //
54
- // //
55
- // // Media queries in pixels
56
- // //
57
- //
58
- // $media-queries: (
59
- // xs: 320px,
60
- // sm: 500px,
61
- // md: 740px,
62
- // lg: 1120px,
63
- // xl: 1400px
64
- // );
65
- //
66
- // //
67
- // // Spacing
68
- // //
69
- //
70
- // $spacing-unit: 1rem; // 1rem == 16px
71
- //
72
- // $spacers: (
73
- // sp-0: 0,
74
- // sp-1: $spacing-unit * 0.25,
75
- // sp-2: $spacing-unit * 0.5,
76
- // sp-3: $spacing-unit * 0.75,
77
- // sp-4: $spacing-unit,
78
- // sp-5: $spacing-unit * 1.5,
79
- // sp-6: $spacing-unit * 2,
80
- // sp-7: $spacing-unit * 2.5,
81
- // sp-8: $spacing-unit * 3,
82
- // sp-9: $spacing-unit * 3.5,
83
- // sp-10: $spacing-unit * 4
84
- // );
85
- //
86
- // $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
87
- // $sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
88
- // $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
89
- // $sp-4: map-get($spacers, sp-4); // 1 rem == 16px
90
- // $sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
91
- // $sp-6: map-get($spacers, sp-6); // 2 rem == 32px
92
- // $sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
93
- // $sp-8: map-get($spacers, sp-8); // 3 rem == 48px
94
- // $sp-9: map-get($spacers, sp-9); // 4 rem == 48px
95
- // $sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
96
- //
97
- // //
98
- // // Borders
99
- // //
100
- //
101
- // $border: 1px solid;
102
- // $border-radius: 4px;
103
- // $border-color: $grey-lt-100;
104
- //
105
- // //
106
- // // Grid system
107
- // //
108
- //
109
- // $gutter-spacing: $sp-6;
110
- // $gutter-spacing-sm: $sp-4;
111
- // $nav-width: 232px;
112
- // $content-width: 800px;
113
- //
114
- // $media-queries: (
115
- // xs: 320px,
116
- // sm: 500px,
117
- // md: 740px,
118
- // lg: 800px,
119
- // xl: 1316px
120
- // );
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
+ //);
data/_sass/layout.scss CHANGED
@@ -19,17 +19,13 @@
19
19
  z-index: 100;
20
20
  display: flex;
21
21
  flex-wrap: wrap;
22
- padding-top: $gutter-spacing-sm;
23
- padding-bottom: $gutter-spacing-sm;
24
22
  background-color: $sidebar-color;
25
23
 
26
24
  @include mq(md) {
27
25
  flex-wrap: nowrap;
28
26
  position: absolute;
29
- width: $nav-width + 16px;
27
+ width: $nav-width-md;
30
28
  height: 100%;
31
- padding-top: $gutter-spacing * 2;
32
- padding-bottom: 0;
33
29
  flex-direction: column;
34
30
  border-right: $border $border-color;
35
31
  align-items: flex-end;
@@ -48,7 +44,6 @@
48
44
  left: 0;
49
45
  width: 100%;
50
46
  height: 100%;
51
- min-height: 600px;
52
47
  -webkit-overflow-scrolling: touch;
53
48
  overflow-x: hidden;
54
49
  overflow-y: scroll;
@@ -56,20 +51,13 @@
56
51
  }
57
52
 
58
53
  .main-content {
59
- padding-top: $gutter-spacing-sm;
60
- @include container;
61
-
62
54
  @include mq(md) {
63
55
  position: relative;
64
56
  max-width: $content-width;
65
- padding-top: $gutter-spacing;
66
- padding-bottom: $gutter-spacing;
67
- padding-left: $gutter-spacing * 1.5;
68
- margin-left: $nav-width;
57
+ margin-left: $nav-width-md;
69
58
  }
70
59
 
71
60
  @include mq(lg) {
72
- padding-left: $gutter-spacing;
73
61
  margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
74
62
  }
75
63
  }
@@ -78,48 +66,104 @@
78
66
  outline: none;
79
67
  }
80
68
 
69
+ .page {
70
+ @include container;
71
+ padding-top: $gutter-spacing-sm;
72
+ padding-bottom: $gutter-spacing-sm;
73
+
74
+ @include mq(md) {
75
+ padding-top: $gutter-spacing;
76
+ padding-bottom: $gutter-spacing;
77
+ }
78
+ }
79
+
81
80
  .page-header {
81
+ @include container;
82
+ display: none;
83
+ padding-top: $gutter-spacing-sm;
84
+ padding-bottom: $gutter-spacing-sm;
82
85
  background-color: $sidebar-color;
83
86
 
84
87
  @include mq(md) {
88
+ display: flex;
89
+ justify-content: flex-end;
90
+ height: $header-height;
85
91
  background-color: $body-background-color;
92
+ border-bottom: $border $border-color;
86
93
  }
87
94
 
88
- .main-content {
89
- padding-top: 0;
95
+ &.nav-open {
96
+ display: block;
90
97
 
91
98
  @include mq(md) {
92
99
  display: flex;
93
- justify-content: flex-end;
94
- height: 60px;
95
- padding-top: $sp-4;
96
- padding-bottom: $sp-4;
97
- border-bottom: $border $border-color;
98
100
  }
99
101
  }
100
102
  }
101
103
 
102
104
  .navigation,
103
- .site-title,
105
+ .site-header,
104
106
  .site-footer {
105
107
 
106
- @include container;
107
-
108
108
  width: 100%;
109
109
 
110
110
  @include mq(lg) {
111
- width: $nav-width + 32px;
111
+ width: $nav-width;
112
112
  }
113
113
  }
114
114
 
115
115
  .navigation {
116
+ @include container;
117
+
116
118
  @include mq(md) {
117
119
  padding-top: $sp-8;
120
+ padding-bottom: $gutter-spacing-sm;
118
121
  overflow-y: auto;
119
122
  flex: 1 1 auto;
120
123
  }
121
124
  }
122
125
 
126
+ .site-header {
127
+ display: flex;
128
+ align-items: center;
129
+
130
+ @include mq(md) {
131
+ z-index: 101;
132
+ height: $header-height;
133
+ min-height: $header-height;
134
+ max-height: $header-height;
135
+ border-bottom: $border $border-color;
136
+ }
137
+ }
138
+
139
+ .site-title {
140
+ @include container;
141
+ flex-grow: 1;
142
+ display: flex;
143
+ height: 100%;
144
+ align-items: center;
145
+ padding-top: $gutter-spacing-sm;
146
+ padding-bottom: $gutter-spacing-sm;
147
+ color: $body-heading-color;
148
+ @include fs-6;
149
+ }
150
+
151
+ .menu-button {
152
+ appearance: none;
153
+ display: flex;
154
+ height: 100%;
155
+ padding: $gutter-spacing-sm;
156
+ align-items: center;
157
+ color: $link-color;
158
+ text-transform: uppercase;
159
+ background: transparent;
160
+ border: 0;
161
+
162
+ @include mq(md) {
163
+ display: none;
164
+ }
165
+ }
166
+
123
167
  // stylelint-disable selector-max-type
124
168
 
125
169
  body {
@@ -135,15 +179,15 @@ body {
135
179
  // stylelint-enable selector-max-type
136
180
 
137
181
  .site-footer {
182
+ @include container;
138
183
  position: absolute;
139
184
  bottom: 0;
185
+ left: 0;
140
186
  padding-top: $sp-4;
141
187
  padding-bottom: $sp-4;
142
188
 
143
189
  @include mq(md) {
144
190
  position: static;
145
- align-self: flex-end;
146
191
  justify-self: end;
147
- background-color: $sidebar-color;
148
192
  }
149
193
  }