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
@@ -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%);
File without changes
@@ -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;
@@ -93,7 +109,7 @@
93
109
 
94
110
  dl {
95
111
  display: grid;
96
- grid-template-columns: max-content 1fr;
112
+ grid-template: auto / 10em 1fr;
97
113
  }
98
114
 
99
115
  dt,
@@ -102,16 +118,18 @@
102
118
  }
103
119
 
104
120
  dt {
121
+ grid-column: 1;
122
+ font-weight: 500;
105
123
  text-align: right;
106
-
107
124
  &::after {
108
125
  content: ":";
109
126
  }
110
127
  }
111
128
 
112
129
  dd {
130
+ grid-column: 2;
131
+ margin-bottom: 0;
113
132
  margin-left: 1em;
114
- font-weight: 500;
115
133
  }
116
134
 
117
135
  .anchor-heading {
@@ -132,7 +150,7 @@
132
150
  display: inline-block;
133
151
  width: 100%;
134
152
  height: 100%;
135
- fill: $link-color;
153
+ color: $link-color;
136
154
  visibility: hidden;
137
155
  }
138
156
  }
@@ -149,6 +167,10 @@
149
167
  }
150
168
  }
151
169
 
170
+ summary {
171
+ cursor: pointer;
172
+ }
173
+
152
174
  h1,
153
175
  h2,
154
176
  h3,
@@ -156,5 +178,22 @@
156
178
  h5,
157
179
  h6 {
158
180
  position: relative;
181
+ margin-top: 1.5em;
182
+ margin-bottom: 0.25em;
183
+
184
+ &:first-child {
185
+ margin-top: $sp-2;
186
+ }
187
+
188
+ + table,
189
+ + .table-wrapper,
190
+ + .code-example,
191
+ + .highlighter-rouge {
192
+ margin-top: 1em;
193
+ }
194
+
195
+ + p {
196
+ margin-top: 0;
197
+ }
159
198
  }
160
199
  }
@@ -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
- //);
@@ -6,16 +6,17 @@
6
6
  .label-blue {
7
7
  display: inline-block;
8
8
  padding-top: 0.16em;
9
- padding-right: 0.42em;
9
+ padding-right: 0.56em;
10
10
  padding-bottom: 0.16em;
11
- padding-left: 0.42em;
12
- margin-right: $sp-1;
13
- margin-left: $sp-1;
11
+ padding-left: 0.56em;
12
+ margin-right: $sp-2;
13
+ margin-left: $sp-2;
14
14
  color: $white;
15
15
  text-transform: uppercase;
16
16
  vertical-align: middle;
17
17
  background-color: $blue-100;
18
18
  @include fs-2;
19
+ border-radius: 12px;
19
20
  }
20
21
 
21
22
  .label-green {
@@ -2,28 +2,15 @@
2
2
  // The basic two column layout
3
3
  //
4
4
 
5
- .page-wrap {
6
- @include mq(md) {
7
- position: absolute;
8
- top: 0;
9
- left: 0;
10
- display: flex;
11
- width: 100%;
12
- height: 100%;
13
- overflow-x: hidden;
14
- overflow-y: hidden;
15
- }
16
- }
17
-
18
5
  .side-bar {
19
- z-index: 100;
6
+ z-index: 0;
20
7
  display: flex;
21
8
  flex-wrap: wrap;
22
9
  background-color: $sidebar-color;
23
10
 
24
11
  @include mq(md) {
25
12
  flex-wrap: nowrap;
26
- position: absolute;
13
+ position: fixed;
27
14
  width: $nav-width-md;
28
15
  height: 100%;
29
16
  flex-direction: column;
@@ -37,20 +24,7 @@
37
24
  }
38
25
  }
39
26
 
40
- .main-content-wrap {
41
- @include mq(md) {
42
- position: absolute;
43
- top: 0;
44
- left: 0;
45
- width: 100%;
46
- height: 100%;
47
- -webkit-overflow-scrolling: touch;
48
- overflow-x: hidden;
49
- overflow-y: scroll;
50
- }
51
- }
52
-
53
- .main-content {
27
+ .main {
54
28
  @include mq(md) {
55
29
  position: relative;
56
30
  max-width: $content-width;
@@ -58,15 +32,13 @@
58
32
  }
59
33
 
60
34
  @include mq(lg) {
61
- margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
35
+ margin-left: calc(
36
+ (100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}
37
+ );
62
38
  }
63
39
  }
64
40
 
65
- .js-main-content:focus {
66
- outline: none;
67
- }
68
-
69
- .page {
41
+ .main-content-wrap {
70
42
  @include container;
71
43
  padding-top: $gutter-spacing-sm;
72
44
  padding-bottom: $gutter-spacing-sm;
@@ -77,16 +49,14 @@
77
49
  }
78
50
  }
79
51
 
80
- .page-header {
81
- @include container;
52
+ .main-header {
53
+ z-index: 0;
82
54
  display: none;
83
- padding-top: $gutter-spacing-sm;
84
- padding-bottom: $gutter-spacing-sm;
85
55
  background-color: $sidebar-color;
86
56
 
87
57
  @include mq(md) {
88
58
  display: flex;
89
- justify-content: flex-end;
59
+ justify-content: space-between;
90
60
  height: $header-height;
91
61
  background-color: $body-background-color;
92
62
  border-bottom: $border $border-color;
@@ -101,10 +71,9 @@
101
71
  }
102
72
  }
103
73
 
104
- .navigation,
74
+ .site-nav,
105
75
  .site-header,
106
76
  .site-footer {
107
-
108
77
  width: 100%;
109
78
 
110
79
  @include mq(lg) {
@@ -112,10 +81,15 @@
112
81
  }
113
82
  }
114
83
 
115
- .navigation {
116
- @include container;
84
+ .site-nav {
85
+ display: none;
86
+
87
+ &.nav-open {
88
+ display: block;
89
+ }
117
90
 
118
91
  @include mq(md) {
92
+ display: block;
119
93
  padding-top: $sp-8;
120
94
  padding-bottom: $gutter-spacing-sm;
121
95
  overflow-y: auto;
@@ -129,7 +103,6 @@
129
103
  align-items: center;
130
104
 
131
105
  @include mq(md) {
132
- z-index: 101;
133
106
  height: $header-height;
134
107
  max-height: $header-height;
135
108
  border-bottom: $border $border-color;
@@ -164,27 +137,42 @@
164
137
  }
165
138
  }
166
139
 
167
- .menu-button {
168
- appearance: none;
140
+ .site-button {
169
141
  display: flex;
170
142
  height: 100%;
171
143
  padding: $gutter-spacing-sm;
172
144
  align-items: center;
173
- color: $link-color;
174
- text-transform: uppercase;
175
- background: transparent;
176
- border: 0;
145
+ }
177
146
 
178
- @include mq(md) {
147
+ @include mq(md) {
148
+ .site-header .site-button {
179
149
  display: none;
180
150
  }
181
151
  }
182
152
 
153
+ .site-title:hover {
154
+ background-image: linear-gradient(
155
+ -90deg,
156
+ rgba($feedback-color, 1) 0%,
157
+ rgba($feedback-color, 0.8) 80%,
158
+ rgba($feedback-color, 0) 100%
159
+ );
160
+ }
161
+
162
+ .site-button:hover {
163
+ background-image: linear-gradient(
164
+ -90deg,
165
+ rgba($feedback-color, 1) 0%,
166
+ rgba($feedback-color, 0.8) 100%
167
+ );
168
+ }
169
+
183
170
  // stylelint-disable selector-max-type
184
171
 
185
172
  body {
186
173
  position: relative;
187
174
  padding-bottom: $sp-10;
175
+ overflow-y: scroll;
188
176
 
189
177
  @include mq(md) {
190
178
  position: static;
@@ -201,9 +189,17 @@ body {
201
189
  left: 0;
202
190
  padding-top: $sp-4;
203
191
  padding-bottom: $sp-4;
192
+ color: $grey-dk-000;
193
+ @include fs-2;
204
194
 
205
195
  @include mq(md) {
206
196
  position: static;
207
197
  justify-self: end;
208
198
  }
209
199
  }
200
+
201
+ .icon {
202
+ width: $sp-5;
203
+ height: $sp-5;
204
+ color: $link-color;
205
+ }