just-the-docs 0.2.5 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +5 -5
  2. data/README.md +2 -2
  3. data/_includes/css/custom.scss.liquid +1 -0
  4. data/_includes/css/just-the-docs.scss.liquid +7 -0
  5. data/_includes/head.html +19 -13
  6. data/_includes/head_custom.html +0 -0
  7. data/_includes/js/custom.js +0 -0
  8. data/_includes/nav.html +55 -44
  9. data/_includes/title.html +5 -0
  10. data/_includes/vendor/anchor_headings.html +100 -0
  11. data/_layouts/default.html +146 -55
  12. data/_layouts/table_wrappers.html +7 -0
  13. data/_layouts/vendor/compress.html +10 -0
  14. data/_sass/base.scss +16 -18
  15. data/_sass/buttons.scss +1 -1
  16. data/_sass/code.scss +211 -72
  17. data/_sass/color_schemes/dark.scss +4 -1
  18. data/_sass/color_schemes/light.scss +0 -0
  19. data/_sass/content.scss +80 -1
  20. data/_sass/custom/custom.scss +0 -120
  21. data/_sass/labels.scss +5 -4
  22. data/_sass/layout.scss +118 -62
  23. data/_sass/modules.scss +20 -0
  24. data/_sass/navigation.scss +125 -77
  25. data/_sass/print.scss +40 -0
  26. data/_sass/search.scss +263 -56
  27. data/_sass/support/_functions.scss +2 -3
  28. data/_sass/support/_variables.scss +27 -22
  29. data/_sass/support/mixins/_layout.scss +1 -3
  30. data/_sass/support/mixins/_typography.scss +6 -1
  31. data/_sass/tables.scss +13 -33
  32. data/_sass/typography.scss +9 -7
  33. data/_sass/utilities/_layout.scss +74 -17
  34. data/_sass/utilities/_lists.scss +7 -1
  35. data/_sass/utilities/_spacing.scss +69 -25
  36. data/assets/css/just-the-docs-dark.scss +3 -0
  37. data/assets/css/just-the-docs-default.scss +8 -0
  38. data/assets/css/just-the-docs-light.scss +3 -0
  39. data/assets/js/just-the-docs.js +425 -130
  40. data/assets/js/vendor/lunr.min.js +3 -3
  41. data/assets/js/zzzz-search-data.json +58 -0
  42. data/lib/tasks/search.rake +54 -9
  43. metadata +43 -26
  44. data/assets/css/dark-mode-preview.scss +0 -41
  45. data/assets/css/just-the-docs.scss +0 -44
  46. data/assets/js/search-data.json +0 -12
@@ -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
  }
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  @mixin fs-4 {
28
- font-size: 14px !important;
28
+ font-size: 15px !important;
29
29
 
30
30
  @include mq(sm) {
31
31
  font-size: 16px !important;
@@ -45,11 +45,13 @@
45
45
 
46
46
  @include mq(sm) {
47
47
  font-size: 24px !important;
48
+ line-height: $body-heading-line-height;
48
49
  }
49
50
  }
50
51
 
51
52
  @mixin fs-7 {
52
53
  font-size: 24px !important;
54
+ line-height: $body-heading-line-height;
53
55
 
54
56
  @include mq(sm) {
55
57
  font-size: 32px !important;
@@ -58,6 +60,7 @@
58
60
 
59
61
  @mixin fs-8 {
60
62
  font-size: 32px !important;
63
+ line-height: $body-heading-line-height;
61
64
 
62
65
  @include mq(sm) {
63
66
  font-size: 36px !important;
@@ -66,6 +69,7 @@
66
69
 
67
70
  @mixin fs-9 {
68
71
  font-size: 36px !important;
72
+ line-height: $body-heading-line-height;
69
73
 
70
74
  @include mq(sm) {
71
75
  font-size: 42px !important;
@@ -74,6 +78,7 @@
74
78
 
75
79
  @mixin fs-10 {
76
80
  font-size: 42px !important;
81
+ line-height: $body-heading-line-height;
77
82
 
78
83
  @include mq(sm) {
79
84
  font-size: 48px !important;
@@ -3,18 +3,20 @@
3
3
  //
4
4
  // stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
5
5
 
6
- table {
6
+ .table-wrapper {
7
7
  display: block;
8
8
  width: 100%;
9
9
  max-width: 100%;
10
10
  margin-bottom: $sp-5;
11
11
  overflow-x: auto;
12
- border-collapse: separate;
13
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
12
+ border-radius: $border-radius;
13
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
14
+ }
14
15
 
15
- @include mq(sm) {
16
- display: table;
17
- }
16
+ table {
17
+ display: table;
18
+ min-width: 100%;
19
+ border-collapse: separate;
18
20
  }
19
21
 
20
22
  th,
@@ -25,7 +27,7 @@ td {
25
27
  padding-right: $sp-3;
26
28
  padding-bottom: $sp-2;
27
29
  padding-left: $sp-3;
28
- background-color: lighten($body-background-color, 2%);
30
+ background-color: $table-background-color;
29
31
  border-bottom: $border rgba($border-color, 0.5);
30
32
  border-left: $border $border-color;
31
33
 
@@ -34,38 +36,16 @@ td {
34
36
  }
35
37
  }
36
38
 
37
- thead,
38
- tbody:first-child {
39
- tr {
40
- &:first-of-type {
41
- th,
42
- td {
43
- &:first-of-type {
44
- border-top-left-radius: $border-radius;
45
- }
46
-
47
- &:last-of-type {
48
- border-top-right-radius: $border-radius;
49
- }
50
- }
51
- }
52
- }
53
- }
54
-
55
39
  tbody {
56
40
  tr {
57
41
  &:last-of-type {
58
42
  th,
59
43
  td {
60
44
  border-bottom: 0;
45
+ }
61
46
 
62
- &:first-of-type {
63
- border-bottom-left-radius: $border-radius;
64
- }
65
-
66
- &:last-of-type {
67
- border-bottom-right-radius: $border-radius;
68
- }
47
+ td {
48
+ padding-bottom: $sp-3;
69
49
  }
70
50
  }
71
51
  }
@@ -73,6 +53,6 @@ tbody {
73
53
 
74
54
  thead {
75
55
  th {
76
- border-bottom: 1px solid $border-color;
56
+ border-bottom: $border $border-color;
77
57
  }
78
58
  }
@@ -22,7 +22,7 @@ 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
  }
@@ -39,12 +39,6 @@ h6,
39
39
  color: $grey-dk-200;
40
40
  }
41
41
 
42
- li {
43
- .highlight {
44
- margin-top: $sp-2;
45
- }
46
- }
47
-
48
42
  .text-small {
49
43
  @include fs-2;
50
44
  }
@@ -53,6 +47,14 @@ li {
53
47
  font-family: $mono-font-family !important;
54
48
  }
55
49
 
50
+ .text-left {
51
+ text-align: left !important;
52
+ }
53
+
56
54
  .text-center {
57
55
  text-align: center !important;
58
56
  }
57
+
58
+ .text-right {
59
+ text-align: right !important;
60
+ }
@@ -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
+ }
@@ -2,10 +2,16 @@
2
2
  // Utility classes for lists
3
3
  //
4
4
 
5
- // stylelint-disable primer/selector-no-utility, primer/no-override
5
+ // stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type
6
6
 
7
7
  .list-style-none {
8
8
  padding: 0 !important;
9
9
  margin: 0 !important;
10
10
  list-style: none !important;
11
+
12
+ li {
13
+ &::before {
14
+ display: none !important;
15
+ }
16
+ }
11
17
  }
@@ -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;
@@ -0,0 +1,3 @@
1
+ ---
2
+ ---
3
+ {% include css/just-the-docs.scss.liquid color_scheme="dark" %}
@@ -0,0 +1,8 @@
1
+ ---
2
+ ---
3
+ {% if site.color_scheme and site.color_scheme != "nil" %}
4
+ {% assign color_scheme = site.color_scheme %}
5
+ {% else %}
6
+ {% assign color_scheme = "light" %}
7
+ {% endif %}
8
+ {% include css/just-the-docs.scss.liquid color_scheme=color_scheme %}