just-the-docs 0.2.5 → 0.2.6

Sign up to get free protection for your applications and to get access to all the features.
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
  }