just-the-docs 0.2.7 → 0.3.2

Sign up to get free protection for your applications and to get access to all the features.
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,10 +1,9 @@
1
- @function rem($size, $unit:"") {
1
+ @function rem($size, $unit: "") {
2
2
  $remSize: $size / $root-font-size;
3
3
 
4
4
  @if ($unit == false) {
5
5
  @return #{$remSize};
6
- }
7
- @else {
6
+ } @else {
8
7
  @return #{$remSize}rem;
9
8
  }
10
9
  }
@@ -2,12 +2,31 @@
2
2
  // Typography
3
3
  //
4
4
 
5
- $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
5
+ $body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
6
+ Roboto, "Helvetica Neue", Arial, sans-serif !default;
6
7
  $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
7
- $root-font-size: 16px !default; // Base font-size for rems
8
+ $root-font-size: 16px !default; // Base font-size for rems
8
9
  $body-line-height: 1.4 !default;
9
- $content-line-height: 1.5 !default;
10
- $body-heading-line-height: 1.15 !default !default;
10
+ $content-line-height: 1.6 !default;
11
+ $body-heading-line-height: 1.25 !default;
12
+
13
+ //
14
+ // Font size
15
+ // `-sm` suffix is the size at the small (and above) media query
16
+ //
17
+
18
+ $font-size-1: 9px !default;
19
+ $font-size-1-sm: 10px !default;
20
+ $font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small
21
+ $font-size-3: 12px !default; //h5
22
+ $font-size-4: 14px !default;
23
+ $font-size-5: 16px !default; //h3
24
+ $font-size-6: 18px !default; //h2
25
+ $font-size-7: 24px !default;
26
+ $font-size-8: 32px !default; //h1
27
+ $font-size-9: 36px !default;
28
+ $font-size-10: 42px !default;
29
+ $font-size-10-sm: 48px !default;
11
30
 
12
31
  //
13
32
  // Colors
@@ -56,6 +75,7 @@ $sidebar-color: $grey-lt-000 !default;
56
75
  $search-background-color: $white !default;
57
76
  $table-background-color: $white !default;
58
77
  $code-background-color: $grey-lt-000 !default;
78
+ $feedback-color: darken($sidebar-color, 3%) !default;
59
79
 
60
80
  $body-text-color: $grey-dk-100 !default;
61
81
  $body-heading-color: $grey-dk-300 !default;
@@ -82,7 +102,7 @@ $spacers: (
82
102
  sp-7: $spacing-unit * 2.5,
83
103
  sp-8: $spacing-unit * 3,
84
104
  sp-9: $spacing-unit * 3.5,
85
- sp-10: $spacing-unit * 4
105
+ sp-10: $spacing-unit * 4,
86
106
  ) !default;
87
107
 
88
108
  $sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
@@ -93,8 +113,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
93
113
  $sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
94
114
  $sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
95
115
  $sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
96
- $sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
97
- $sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
116
+ $sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
117
+ $sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
98
118
 
99
119
  //
100
120
  // Borders
@@ -112,9 +132,13 @@ $gutter-spacing: $sp-6 !default;
112
132
  $gutter-spacing-sm: $sp-4 !default;
113
133
  $nav-width: 264px !default;
114
134
  $nav-width-md: 248px !default;
135
+ $nav-list-item-height: $sp-6 !default;
136
+ $nav-list-item-height-sm: $sp-8 !default;
137
+ $nav-list-expander-right: true;
115
138
  $content-width: 800px !default;
116
139
  $header-height: 60px !default;
117
- $search-results-width: 500px !default;
140
+ $search-results-width: $content-width - $nav-width !default;
141
+ $transition-duration: 400ms;
118
142
 
119
143
  //
120
144
  // Media queries in pixels
@@ -125,5 +149,5 @@ $media-queries: (
125
149
  sm: 500px,
126
150
  md: $content-width,
127
151
  lg: $content-width + $nav-width,
128
- xl: 1400px
152
+ xl: 1400px,
129
153
  ) !default;
@@ -15,9 +15,7 @@
15
15
  @media (min-width: rem($value)) {
16
16
  @content;
17
17
  }
18
- }
19
-
20
- @else {
18
+ } @else {
21
19
  @warn "No value could be retrieved from `#{$media-query}`. "
22
20
  + "Please make sure it is defined in `$media-queries` map.";
23
21
  }
@@ -1,81 +1,84 @@
1
- // Font size
2
-
3
1
  @mixin fs-1 {
4
- font-size: 9px !important;
2
+ font-size: $font-size-1 !important;
5
3
 
6
4
  @include mq(sm) {
7
- font-size: 10px !important;
5
+ font-size: $font-size-1-sm !important;
8
6
  }
9
7
  }
10
8
 
11
9
  @mixin fs-2 {
12
- font-size: 11px !important;
10
+ font-size: $font-size-2 !important;
13
11
 
14
12
  @include mq(sm) {
15
- font-size: 12px !important;
13
+ font-size: $font-size-3 !important;
16
14
  }
17
15
  }
18
16
 
19
17
  @mixin fs-3 {
20
- font-size: 12px !important;
18
+ font-size: $font-size-3 !important;
21
19
 
22
20
  @include mq(sm) {
23
- font-size: 14px !important;
21
+ font-size: $font-size-4 !important;
24
22
  }
25
23
  }
26
24
 
27
25
  @mixin fs-4 {
28
- font-size: 14px !important;
26
+ font-size: $font-size-4 !important;
29
27
 
30
28
  @include mq(sm) {
31
- font-size: 16px !important;
29
+ font-size: $font-size-5 !important;
32
30
  }
33
31
  }
34
32
 
35
33
  @mixin fs-5 {
36
- font-size: 16px !important;
34
+ font-size: $font-size-5 !important;
37
35
 
38
36
  @include mq(sm) {
39
- font-size: 18px !important;
37
+ font-size: $font-size-6 !important;
40
38
  }
41
39
  }
42
40
 
43
41
  @mixin fs-6 {
44
- font-size: 18px !important;
42
+ font-size: $font-size-6 !important;
45
43
 
46
44
  @include mq(sm) {
47
- font-size: 24px !important;
45
+ font-size: $font-size-7 !important;
46
+ line-height: $body-heading-line-height;
48
47
  }
49
48
  }
50
49
 
51
50
  @mixin fs-7 {
52
- font-size: 24px !important;
51
+ font-size: $font-size-7 !important;
52
+ line-height: $body-heading-line-height;
53
53
 
54
54
  @include mq(sm) {
55
- font-size: 32px !important;
55
+ font-size: $font-size-8 !important;
56
56
  }
57
57
  }
58
58
 
59
59
  @mixin fs-8 {
60
- font-size: 32px !important;
60
+ font-size: $font-size-8 !important;
61
+ line-height: $body-heading-line-height;
61
62
 
62
63
  @include mq(sm) {
63
- font-size: 36px !important;
64
+ font-size: $font-size-9 !important;
64
65
  }
65
66
  }
66
67
 
67
68
  @mixin fs-9 {
68
- font-size: 36px !important;
69
+ font-size: $font-size-9 !important;
70
+ line-height: $body-heading-line-height;
69
71
 
70
72
  @include mq(sm) {
71
- font-size: 42px !important;
73
+ font-size: $font-size-10 !important;
72
74
  }
73
75
  }
74
76
 
75
77
  @mixin fs-10 {
76
- font-size: 42px !important;
78
+ font-size: $font-size-10 !important;
79
+ line-height: $body-heading-line-height;
77
80
 
78
81
  @include mq(sm) {
79
- font-size: 48px !important;
82
+ font-size: $font-size-10-sm !important;
80
83
  }
81
84
  }
@@ -22,11 +22,15 @@ h3,
22
22
  h4,
23
23
  .text-delta {
24
24
  @include fs-2;
25
- font-weight: 300;
25
+ font-weight: 400;
26
26
  text-transform: uppercase;
27
27
  letter-spacing: 0.1em;
28
28
  }
29
29
 
30
+ h4 code {
31
+ text-transform: none;
32
+ }
33
+
30
34
  h5,
31
35
  .text-epsilon {
32
36
  @include fs-3;
@@ -39,12 +43,6 @@ h6,
39
43
  color: $grey-dk-200;
40
44
  }
41
45
 
42
- li {
43
- .highlight {
44
- margin-top: $sp-2;
45
- }
46
- }
47
-
48
46
  .text-small {
49
47
  @include fs-2;
50
48
  }
@@ -53,6 +51,14 @@ li {
53
51
  font-family: $mono-font-family !important;
54
52
  }
55
53
 
54
+ .text-left {
55
+ text-align: left !important;
56
+ }
57
+
56
58
  .text-center {
57
59
  text-align: center !important;
58
60
  }
61
+
62
+ .text-right {
63
+ text-align: right !important;
64
+ }
@@ -5,11 +5,21 @@
5
5
 
6
6
  // Display
7
7
 
8
- .d-block { display: block !important; }
9
- .d-flex { display: flex !important; }
10
- .d-inline { display: inline !important; }
11
- .d-inline-block { display: inline-block !important; }
12
- .d-none { display: none !important; }
8
+ .d-block {
9
+ display: block !important;
10
+ }
11
+ .d-flex {
12
+ display: flex !important;
13
+ }
14
+ .d-inline {
15
+ display: inline !important;
16
+ }
17
+ .d-inline-block {
18
+ display: inline-block !important;
19
+ }
20
+ .d-none {
21
+ display: none !important;
22
+ }
13
23
 
14
24
  @each $media-query in map-keys($media-queries) {
15
25
  @for $i from 1 through length($spacers) {
@@ -18,21 +28,68 @@
18
28
  $scale: #{$i - 1};
19
29
 
20
30
  // .d-sm-block, .d-md-none, .d-lg-inline
21
- .d-#{$media-query}-block { display: block !important; }
22
- .d-#{$media-query}-flex { display: flex !important; }
23
- .d-#{$media-query}-inline { display: inline !important; }
24
- .d-#{$media-query}-inline-block { display: inline-block !important; }
25
- .d-#{$media-query}-none { display: none !important; }
26
-
31
+ .d-#{$media-query}-block {
32
+ display: block !important;
33
+ }
34
+ .d-#{$media-query}-flex {
35
+ display: flex !important;
36
+ }
37
+ .d-#{$media-query}-inline {
38
+ display: inline !important;
39
+ }
40
+ .d-#{$media-query}-inline-block {
41
+ display: inline-block !important;
42
+ }
43
+ .d-#{$media-query}-none {
44
+ display: none !important;
45
+ }
27
46
  }
28
47
  }
29
48
  }
30
49
 
50
+ // Horizontal alignment
51
+
52
+ .float-left {
53
+ float: left !important;
54
+ }
55
+
56
+ .float-right {
57
+ float: right !important;
58
+ }
59
+
60
+ .flex-justify-start {
61
+ justify-content: flex-start !important;
62
+ }
63
+
64
+ .flex-justify-end {
65
+ justify-content: flex-end !important;
66
+ }
67
+
68
+ .flex-justify-between {
69
+ justify-content: space-between !important;
70
+ }
71
+
72
+ .flex-justify-around {
73
+ justify-content: space-around !important;
74
+ }
75
+
31
76
  // Vertical alignment
32
77
 
33
- .v-align-baseline { vertical-align: baseline !important; }
34
- .v-align-bottom { vertical-align: bottom !important; }
35
- .v-align-middle { vertical-align: middle !important; }
36
- .v-align-text-bottom { vertical-align: text-bottom !important; }
37
- .v-align-text-top { vertical-align: text-top !important; }
38
- .v-align-top { vertical-align: top !important; }
78
+ .v-align-baseline {
79
+ vertical-align: baseline !important;
80
+ }
81
+ .v-align-bottom {
82
+ vertical-align: bottom !important;
83
+ }
84
+ .v-align-middle {
85
+ vertical-align: middle !important;
86
+ }
87
+ .v-align-text-bottom {
88
+ vertical-align: text-bottom !important;
89
+ }
90
+ .v-align-text-top {
91
+ vertical-align: text-top !important;
92
+ }
93
+ .v-align-top {
94
+ vertical-align: top !important;
95
+ }
@@ -7,16 +7,31 @@
7
7
 
8
8
  // Margin spacer utilities
9
9
 
10
+ .mx-auto {
11
+ margin-right: auto !important;
12
+ margin-left: auto !important;
13
+ }
14
+
10
15
  @for $i from 1 through length($spacers) {
11
16
  $size: #{map-get($spacers, sp-#{$i - 1})};
12
17
  $scale: #{$i - 1};
13
18
 
14
19
  // .m-0, .m-1, .m-2...
15
- .m-#{$scale} { margin: #{$size} !important; }
16
- .mt-#{$scale} { margin-top: #{$size} !important; }
17
- .mr-#{$scale} { margin-right: #{$size} !important; }
18
- .mb-#{$scale} { margin-bottom: #{$size} !important; }
19
- .ml-#{$scale} { margin-left: #{$size} !important; }
20
+ .m-#{$scale} {
21
+ margin: #{$size} !important;
22
+ }
23
+ .mt-#{$scale} {
24
+ margin-top: #{$size} !important;
25
+ }
26
+ .mr-#{$scale} {
27
+ margin-right: #{$size} !important;
28
+ }
29
+ .mb-#{$scale} {
30
+ margin-bottom: #{$size} !important;
31
+ }
32
+ .ml-#{$scale} {
33
+ margin-left: #{$size} !important;
34
+ }
20
35
 
21
36
  .mx-#{$scale} {
22
37
  margin-right: #{$size} !important;
@@ -32,11 +47,10 @@
32
47
  margin-right: -#{$size} !important;
33
48
  margin-left: -#{$size} !important;
34
49
  }
35
- }
36
-
37
- .mx-auto {
38
- margin-right: auto !important;
39
- margin-left: auto !important;
50
+ .mx-#{$scale}-auto {
51
+ margin-right: auto !important;
52
+ margin-left: auto !important;
53
+ }
40
54
  }
41
55
 
42
56
  @each $media-query in map-keys($media-queries) {
@@ -46,11 +60,21 @@
46
60
  $scale: #{$i - 1};
47
61
 
48
62
  // .m-sm-0, .m-md-1, .m-lg-2...
49
- .m-#{$media-query}-#{$scale} { margin: #{$size} !important; }
50
- .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
51
- .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
52
- .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
53
- .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
63
+ .m-#{$media-query}-#{$scale} {
64
+ margin: #{$size} !important;
65
+ }
66
+ .mt-#{$media-query}-#{$scale} {
67
+ margin-top: #{$size} !important;
68
+ }
69
+ .mr-#{$media-query}-#{$scale} {
70
+ margin-right: #{$size} !important;
71
+ }
72
+ .mb-#{$media-query}-#{$scale} {
73
+ margin-bottom: #{$size} !important;
74
+ }
75
+ .ml-#{$media-query}-#{$scale} {
76
+ margin-left: #{$size} !important;
77
+ }
54
78
 
55
79
  .mx-#{$media-query}-#{$scale} {
56
80
  margin-right: #{$size} !important;
@@ -77,11 +101,21 @@
77
101
  $scale: #{$i - 1};
78
102
 
79
103
  // .p-0, .p-1, .p-2...
80
- .p-#{$scale} { padding: #{$size} !important; }
81
- .pt-#{$scale} { padding-top: #{$size} !important; }
82
- .pr-#{$scale} { padding-right: #{$size} !important; }
83
- .pb-#{$scale} { padding-bottom: #{$size} !important; }
84
- .pl-#{$scale} { padding-left: #{$size} !important; }
104
+ .p-#{$scale} {
105
+ padding: #{$size} !important;
106
+ }
107
+ .pt-#{$scale} {
108
+ padding-top: #{$size} !important;
109
+ }
110
+ .pr-#{$scale} {
111
+ padding-right: #{$size} !important;
112
+ }
113
+ .pb-#{$scale} {
114
+ padding-bottom: #{$size} !important;
115
+ }
116
+ .pl-#{$scale} {
117
+ padding-left: #{$size} !important;
118
+ }
85
119
 
86
120
  .px-#{$scale} {
87
121
  padding-right: #{$size} !important;
@@ -101,11 +135,21 @@
101
135
  $scale: #{$i - 1};
102
136
 
103
137
  // .p-sm-0, .p-md-1, .p-lg-2...
104
- .p-#{$media-query}-#{$scale} { padding: #{$size} !important; }
105
- .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
106
- .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
107
- .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
108
- .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
138
+ .p-#{$media-query}-#{$scale} {
139
+ padding: #{$size} !important;
140
+ }
141
+ .pt-#{$media-query}-#{$scale} {
142
+ padding-top: #{$size} !important;
143
+ }
144
+ .pr-#{$media-query}-#{$scale} {
145
+ padding-right: #{$size} !important;
146
+ }
147
+ .pb-#{$media-query}-#{$scale} {
148
+ padding-bottom: #{$size} !important;
149
+ }
150
+ .pl-#{$media-query}-#{$scale} {
151
+ padding-left: #{$size} !important;
152
+ }
109
153
 
110
154
  .px-#{$media-query}-#{$scale} {
111
155
  padding-right: #{$size} !important;