jekyll-text-theme 2.2.2 → 2.2.3

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 (59) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +10 -1
  3. data/README.md +11 -12
  4. data/_includes/article-footer/author-profile.html +1 -1
  5. data/_includes/article-list.html +3 -3
  6. data/_includes/extensions/codepen.html +4 -0
  7. data/_includes/extensions/youtube.html +1 -1
  8. data/_includes/scripts/article.js +1 -1
  9. data/_includes/scripts/{search-data.js → components/search/search-data.js} +0 -0
  10. data/_includes/scripts/{search.js → components/search/search.js} +0 -0
  11. data/_includes/scripts/lib/affix.js +83 -86
  12. data/_includes/scripts/lib/{scroll.js → scroll-to.js} +0 -0
  13. data/_includes/scripts/lib/swiper.js +150 -0
  14. data/_includes/scripts/lib/toc.js +83 -82
  15. data/_includes/scripts/variables.html +1 -1
  16. data/_includes/search.html +1 -1
  17. data/_includes/sharing-providers/addthis.html +9 -0
  18. data/_includes/sharing.html +3 -1
  19. data/_layouts/article.html +3 -1
  20. data/_layouts/landing.html +1 -1
  21. data/_layouts/page.html +19 -10
  22. data/_sass/additional/_alert.scss +4 -4
  23. data/_sass/common/_classes.scss +1 -1
  24. data/_sass/common/_function.scss +8 -0
  25. data/_sass/common/_print.scss +20 -0
  26. data/_sass/common/_reset.scss +5 -2
  27. data/_sass/common/_variables.scss +2 -4
  28. data/_sass/common/classes/_clickable.scss +21 -0
  29. data/_sass/common/classes/_display.scss +14 -3
  30. data/_sass/common/classes/_grid.scss +25 -76
  31. data/_sass/common/classes/_media.scss +2 -2
  32. data/_sass/common/classes/_pseudo.scss +8 -1
  33. data/_sass/common/classes/_shadow.scss +2 -2
  34. data/_sass/common/components/_button.scss +1 -7
  35. data/_sass/common/components/_card.scss +2 -2
  36. data/_sass/common/components/_hero.scss +1 -1
  37. data/_sass/common/components/_item.scss +14 -9
  38. data/_sass/common/components/_swiper.scss +45 -0
  39. data/_sass/common/components/_toc.scss +9 -9
  40. data/_sass/components/_article-content.scss +35 -17
  41. data/_sass/components/_article-header.scss +1 -1
  42. data/_sass/components/_article-info.scss +2 -2
  43. data/_sass/components/_article-list.scss +2 -2
  44. data/_sass/components/_author-profile.scss +7 -7
  45. data/_sass/components/_extensions.scss +8 -2
  46. data/_sass/components/_footer.scss +4 -4
  47. data/_sass/components/_header.scss +1 -1
  48. data/_sass/components/_search.scss +6 -6
  49. data/_sass/components/_tags.scss +1 -2
  50. data/_sass/custom.scss +0 -0
  51. data/_sass/layout/_404.scss +2 -2
  52. data/_sass/layout/_archive.scss +1 -1
  53. data/_sass/layout/_article.scss +5 -5
  54. data/_sass/layout/_articles.scss +1 -2
  55. data/_sass/layout/_home.scss +1 -1
  56. data/_sass/layout/_page.scss +12 -1
  57. data/assets/css/main.scss +5 -1
  58. data/assets/search.js +1 -1
  59. metadata +11 -5
@@ -3,6 +3,7 @@ $base: (
3
3
  font-family-code: (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
4
4
 
5
5
  font-size-root: 16px,
6
+ font-size-root-sm: 14px,
6
7
 
7
8
  font-size-xl: 1.5rem,
8
9
  font-size-lg: 1.25rem,
@@ -48,7 +49,7 @@ $base: (
48
49
  font-weight: 400,
49
50
  font-weight-bold: 700,
50
51
 
51
- line-height-xl: 2.1,
52
+ line-height-xl: 2,
52
53
  line-height-lg: 1.8,
53
54
  line-height: 1.6,
54
55
  line-height-sm: 1.4,
@@ -56,9 +57,6 @@ $base: (
56
57
 
57
58
  spacer: 1rem,
58
59
 
59
- vertical-space: .5rem,
60
- vertical-space-lg: 1.4rem,
61
-
62
60
  border-radius-lg: .8rem,
63
61
  border-radius: .4rem,
64
62
  border-radius-sm: .2rem
@@ -126,4 +126,25 @@
126
126
  }
127
127
  }
128
128
  }
129
+ @include disabled() {
130
+ @if $theme == "light" {
131
+ color: rgba($clr, .2) !important;
132
+ }
133
+ @if $theme == "dark" {
134
+ color: rgba($clr, .4) !important;
135
+ }
136
+ @if $bg-clr {
137
+ background-color: $bg-clr !important;
138
+ }
139
+ @if $ignore-path == false {
140
+ svg path {
141
+ @if $theme == "light" {
142
+ fill: rgba($clr, .2) !important;
143
+ }
144
+ @if $theme == "dark" {
145
+ fill: rgba($clr, .4) !important;
146
+ }
147
+ }
148
+ }
149
+ }
129
150
  }
@@ -1,3 +1,14 @@
1
- .d-none {
2
- display: none !important;
3
- }
1
+ @each $breakpoint in map-keys($responsive) {
2
+ @include media-breakpoint-up($breakpoint) {
3
+ .d-#{breakpoint-infix($breakpoint)}none {
4
+ display: none !important;
5
+ }
6
+ }
7
+ }
8
+
9
+ .d-print-none {
10
+ @media print {
11
+ display: none !important;
12
+ }
13
+ }
14
+
@@ -3,67 +3,29 @@ $grid-columns: 12;
3
3
  .grid-container {
4
4
  @include overflow(hidden);
5
5
  }
6
-
7
- @mixin make-cell($columns) {
8
- .cell--#{$columns} {
9
- @if $columns == "auto" {
10
- @include flex(1 1 0);
11
- width: auto;
12
- min-width: 0;
13
- } @else if $columns == "shrink" {
14
- @include flex(0 0 auto);
15
- width: auto;
16
- min-width: 0;
17
- } @else if $columns == "stretch" {
18
- @include flex(1);
19
- } @else {
20
- @include flex(none);
21
- width: percentage($columns / $grid-columns);
22
- min-width: 0;
23
- }
24
- }
6
+ .cell {
7
+ min-width: 0;
25
8
  }
26
9
 
27
- @mixin make-md-cell($columns) {
28
- @include media-breakpoint-down(lg) {
29
- .cell--md-#{$columns} {
30
- @if $columns == "auto" {
31
- @include flex(1 1 0);
32
- width: auto;
33
- min-width: 0;
34
- } @else if $columns == "shrink" {
35
- @include flex(0 0 auto);
36
- width: auto;
37
- min-width: 0;
38
- } @else if $columns == "stretch" {
39
- @include flex(1);
40
- } @else {
41
- @include flex(none);
42
- width: percentage($columns / $grid-columns);
43
- min-width: 0;
44
- }
45
- }
10
+ @mixin make-cell($columns) {
11
+ @if $columns == "auto" {
12
+ @include flex(1 1 0);
13
+ width: auto;
14
+ } @else if $columns == "shrink" {
15
+ @include flex(0 0 auto);
16
+ width: auto;
17
+ } @else if $columns == "stretch" {
18
+ @include flex(1);
19
+ } @else {
20
+ @include flex(none);
21
+ width: percentage($columns / $grid-columns);
46
22
  }
47
23
  }
48
24
 
49
- @mixin make-sm-cell($columns) {
50
- @include media-breakpoint-down(md) {
51
- .cell--sm-#{$columns} {
52
- @if $columns == "auto" {
53
- @include flex(1 1 0);
54
- width: auto;
55
- min-width: 0;
56
- } @else if $columns == "shrink" {
57
- @include flex(0 0 auto);
58
- width: auto;
59
- min-width: 0;
60
- } @else if $columns == "stretch" {
61
- @include flex(1);
62
- } @else {
63
- @include flex(none);
64
- width: percentage($columns / $grid-columns);
65
- min-width: 0;
66
- }
25
+ @mixin make-grid-cell($columns, $breakpoint) {
26
+ @include media-breakpoint-up($breakpoint) {
27
+ .cell--#{breakpoint-infix($breakpoint)}#{$columns} {
28
+ @include make-cell($columns);
67
29
  }
68
30
  }
69
31
  }
@@ -72,27 +34,14 @@ $grid-columns: 12;
72
34
  @include flexbox();
73
35
  @include flex-wrap(wrap);
74
36
  & > {
75
- @for $i from 1 through $grid-columns {
76
- @include make-cell($i);
77
- }
78
- @include make-cell("auto");
79
- @include make-cell("shrink");
80
- @include make-cell("stretch");
81
-
82
- @for $i from 1 through $grid-columns {
83
- @include make-md-cell($i);
84
- }
85
- @include make-md-cell("auto");
86
- @include make-md-cell("shrink");
87
- @include make-md-cell("stretch");
88
-
89
- @for $i from 1 through $grid-columns {
90
- @include make-sm-cell($i);
37
+ @each $breakpoint in map-keys($responsive) {
38
+ @for $i from 1 through $grid-columns {
39
+ @include make-grid-cell($i, $breakpoint);
40
+ }
41
+ @include make-grid-cell("auto", $breakpoint);
42
+ @include make-grid-cell("shrink", $breakpoint);
43
+ @include make-grid-cell("stretch", $breakpoint);
91
44
  }
92
-
93
- @include make-sm-cell("auto");
94
- @include make-sm-cell("shrink");
95
- @include make-sm-cell("stretch");
96
45
  }
97
46
  }
98
47
 
@@ -2,7 +2,7 @@
2
2
  @if $breakpoints == default {
3
3
  $breakpoints: $responsive;
4
4
  }
5
- @media screen and (max-width: map-get($breakpoints, $name) - 1) {
5
+ @media (max-width: map-get($breakpoints, $name) - 1) {
6
6
  @content;
7
7
  }
8
8
  }
@@ -11,7 +11,7 @@
11
11
  @if $breakpoints == default {
12
12
  $breakpoints: $responsive;
13
13
  }
14
- @media screen and (min-width: map-get($breakpoints, $name)) {
14
+ @media (min-width: map-get($breakpoints, $name)) {
15
15
  @content;
16
16
  }
17
17
  }
@@ -1,7 +1,7 @@
1
1
  @mixin plain() {
2
2
  &,
3
3
  &:link,
4
- &:visited{
4
+ &:visited {
5
5
  @content;
6
6
  }
7
7
  }
@@ -23,4 +23,11 @@
23
23
  .root[data-is-touch] &.focus {
24
24
  @content;
25
25
  }
26
+ }
27
+
28
+ @mixin disabled() {
29
+ &.disabled,
30
+ &:disabled {
31
+ @content;
32
+ }
26
33
  }
@@ -6,10 +6,10 @@
6
6
  box-shadow: none;
7
7
  }
8
8
  @if $level == 1 or $level == default {
9
- box-shadow: 0 4px 6px rgba($color, .11), 0 1px 3px rgba($color, .08);
9
+ box-shadow: 0 4px 8px rgba($color, .23), 0 1px 3px rgba($color, .08), 0 6px 12px rgba($color, .02);
10
10
  }
11
11
  @if $level == 2 {
12
- box-shadow: 0 7px 14px rgba($color, .1), 0 3px 6px rgba($color, .08);
12
+ box-shadow: 0 8px 16px rgba($color, .23), 0 2px 6px rgba($color, .08), 0 12px 24px rgba($color, .02);
13
13
  }
14
14
  }
15
15
 
@@ -15,14 +15,8 @@
15
15
  @include transition(map-get($button, transition));
16
16
  }
17
17
  }
18
- &.disabled,
19
- &:disabled {
20
- color: rgba($text-color-3, .2) !important;
18
+ @include disabled() {
21
19
  cursor: not-allowed;
22
- background-color: $main-color-3 !important;
23
- svg path {
24
- fill: rgba($text-color-3, .2) !important;
25
- }
26
20
  }
27
21
  }
28
22
 
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .card__content {
24
- padding: .5rem 1rem;
24
+ padding: map-get($spacers, 2) map-get($spacers, 3);
25
25
  }
26
26
 
27
27
  a.card__header, .card__header > a {
@@ -41,7 +41,7 @@ a.card__header, .card__header > a {
41
41
  position: absolute;
42
42
  width: 100%;
43
43
  max-height: 100%;
44
- padding: .5rem;
44
+ padding: map-get($spacers, 2);
45
45
  a {
46
46
  text-decoration: none !important;
47
47
  }
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  .heros {
61
- .hero {
61
+ & > .hero {
62
62
  margin: map-get($spacers, 5);
63
63
  @include media-breakpoint-down(lg) {
64
64
  margin: map-get($spacers, 3);
@@ -3,10 +3,6 @@
3
3
  @include media-breakpoint-down(md) {
4
4
  @include flex-direction(column);
5
5
  }
6
- &:not(:last-child) {
7
- margin-bottom: map-get($base, vertical-space);
8
- }
9
- list-style-type: none;
10
6
  }
11
7
 
12
8
  .item__image {
@@ -39,14 +35,14 @@ a.item__header, .item__header > a {
39
35
 
40
36
  .item__description {
41
37
  &, .article__content {
42
- font-size: map-get($base, font-size-sm);
38
+ font-size: map-get($base, font-size-xs);
43
39
  line-height: map-get($base, line-height);
44
40
  @include block-elements() {
45
- margin-top: map-get($base, vertical-space);
46
- margin-bottom: map-get($base, vertical-space);
41
+ margin-top: map-get($spacers, 2);
42
+ margin-bottom: map-get($spacers, 2);
47
43
  }
48
44
  @include heading-elements() {
49
- margin-top: map-get($base, vertical-space) * 1.5;
45
+ margin-top: map-get($spacers, 3);
50
46
  }
51
47
  h1, h2, h3 {
52
48
  color: $text-color;
@@ -82,8 +78,16 @@ a.item__header, .item__header > a {
82
78
  }
83
79
  }
84
80
 
81
+ .items {
82
+ & > .item {
83
+ &:not(:last-child) {
84
+ margin-bottom: map-get($spacers, 2);
85
+ }
86
+ }
87
+ }
88
+
85
89
  .items--divided {
86
- .item {
90
+ & > .item {
87
91
  &:not(:first-child) {
88
92
  padding-top: map-get($spacers, 4);
89
93
  }
@@ -91,5 +95,6 @@ a.item__header, .item__header > a {
91
95
  padding-bottom: map-get($spacers, 4);
92
96
  @include split-line(bottom);
93
97
  }
98
+ list-style-type: none;
94
99
  }
95
100
  }
@@ -0,0 +1,45 @@
1
+ .swiper {
2
+ position: relative;
3
+ overflow: hidden;
4
+ }
5
+
6
+ .swiper__wrapper, .swiper__slide {
7
+ width: 100%;
8
+ height: 100%;
9
+ }
10
+
11
+ .swiper__wrapper {
12
+ @include flexbox();
13
+ }
14
+
15
+ .swiper__wrapper--animation {
16
+ @include transition(transform map-get($animation, duration) map-get($animation, timing-function));
17
+ }
18
+
19
+ .swiper__slide {
20
+ @include flex-shrink(0);
21
+ }
22
+
23
+ .swiper__button {
24
+ position: absolute;
25
+ top: 50%;
26
+ @extend .button, .button--circle;
27
+ @include transform(translate(0, -50%));
28
+ @include clickable($text-color-d, rgba($main-color-3, .5));
29
+ }
30
+
31
+ .swiper--light .swiper__button {
32
+ @include clickable($text-color-theme-light, rgba(#fff, .15));
33
+ }
34
+
35
+ .swiper--dark .swiper__button {
36
+ @include clickable($text-color-theme-dark, rgba(#000, .15));
37
+ }
38
+
39
+ .swiper__button--prev {
40
+ left: 10px;
41
+ }
42
+
43
+ .swiper__button--next {
44
+ right: 10px;
45
+ }
@@ -3,7 +3,7 @@ ul.toc {
3
3
  margin: 0;
4
4
  list-style-type: none;
5
5
  & > li {
6
- margin: .2rem 0;
6
+ margin: map-get($spacers, 1) 0;
7
7
  &.active {
8
8
  a {
9
9
  color: $text-color-3;
@@ -15,7 +15,7 @@ ul.toc {
15
15
 
16
16
  a {
17
17
  display: inline-block;
18
- padding: .2rem .8rem .2rem .8rem;
18
+ padding: map-get($spacers, 1) map-get($spacers, 2) map-get($spacers, 1) map-get($spacers, 2);
19
19
  text-decoration: none !important;
20
20
  border-radius: map-get($base, border-radius);
21
21
  @include clickable($text-color, null, $text-color-3, $main-color-3);
@@ -23,8 +23,8 @@ ul.toc {
23
23
 
24
24
  .toc-h1 {
25
25
  @include split-line(bottom);
26
- padding: .8rem 0 .3rem 0;
27
- margin-bottom: .6rem;
26
+ padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
27
+ margin-bottom: map-get($spacers, 2);
28
28
  a {
29
29
  @include link-colors($text-color-d);
30
30
  }
@@ -50,13 +50,13 @@ ul.toc {
50
50
  }
51
51
  }
52
52
  .toc-h3 {
53
- margin-left: 1rem;
53
+ margin-left: map-get($spacers, 3);
54
54
  }
55
55
  .toc-h4 {
56
- margin-left: 2rem;
56
+ margin-left: map-get($spacers, 3) * 2;
57
57
  }
58
58
  .toc-h5, .toc-h6 {
59
- margin-left: 3rem;
59
+ margin-left: map-get($spacers, 3) * 3;
60
60
  }
61
61
 
62
62
  .toc-h1 {
@@ -109,8 +109,8 @@ ul.toc--navigator {
109
109
  }
110
110
 
111
111
  a {
112
- padding: 0 0 0 .5rem;
113
- margin: .2rem 0;
112
+ padding: 0 0 0 map-get($spacers, 2);
113
+ margin: map-get($spacers, 1) 0;
114
114
  border-radius: 0;
115
115
  @include hover() {
116
116
  background-color: transparent;
@@ -1,15 +1,24 @@
1
1
  .article__content {
2
2
  line-height: map-get($base, line-height-lg);
3
3
  word-wrap: break-word;
4
+ @media print {
5
+ line-height: map-get($base, line-height);
6
+ }
4
7
  @include block-elements() {
5
- margin: map-get($base, vertical-space-lg) 0;
8
+ margin: map-get($spacers, 3) 0;
9
+ @media print {
10
+ margin: map-get($spacers, 2) 0;
11
+ }
6
12
  }
7
13
  @include heading-elements() {
8
14
  position: relative;
9
- margin-top: map-get($base, vertical-space-lg) * 1.5;
15
+ margin-top: map-get($spacers, 4);
16
+ @media print {
17
+ margin-top: map-get($spacers, 3);
18
+ }
10
19
  & > .anchor {
11
20
  @include link-colors($border-color, $main-color-1);
12
- margin-left: .2rem;
21
+ margin-left: map-get($spacers, 1);
13
22
  text-decoration: none;
14
23
  visibility: hidden;
15
24
  opacity: 0;
@@ -34,12 +43,12 @@
34
43
  @include horizontal-rules();
35
44
  }
36
45
  blockquote {
37
- padding-left: 1rem;
46
+ padding-left: map-get($spacers, 3);
38
47
  font-size: map-get($base, font-size-sm);
39
48
  color: $text-color-l;
40
49
  @include split-line(left, 4px, $border-color);
41
50
  p {
42
- margin: map-get($base, vertical-space) 0;
51
+ margin: map-get($spacers, 2) 0;
43
52
  }
44
53
  & > :last-child {
45
54
  margin-bottom: 0;
@@ -57,10 +66,13 @@
57
66
  }
58
67
  .footnotes {
59
68
  @include split-line();
60
- margin-top: map-get($base, vertical-space-lg) * 2;
69
+ margin-top: map-get($spacers, 5);
70
+ @media print {
71
+ margin-top: map-get($spacers, 2) * 2;
72
+ }
61
73
  }
62
74
  code {
63
- padding: .2rem .5rem;
75
+ padding: map-get($spacers, 1) map-get($spacers, 2);
64
76
  background-color: $text-background-color;
65
77
  border-radius: map-get($base, border-radius);
66
78
  span {
@@ -87,7 +99,7 @@
87
99
  }
88
100
  .highlighter-rouge > .highlight, figure.highlight {
89
101
  & > pre {
90
- padding: 1rem 0 1rem 1rem;
102
+ padding: map-get($spacers, 3) 0 map-get($spacers, 3) map-get($spacers, 3);
91
103
  margin: 0;
92
104
  background-color: $text-background-color;
93
105
  border-radius: map-get($base, border-radius);
@@ -99,7 +111,7 @@
99
111
  figure.highlight {
100
112
  &::before {
101
113
  display: block;
102
- padding: .5rem 1rem .5rem 0;
114
+ padding: map-get($spacers, 2) map-get($spacers, 3) map-get($spacers, 2) 0;
103
115
  font-weight: map-get($base, font-weight-bold);
104
116
  color: $decorate-color;
105
117
  text-align: right;
@@ -116,7 +128,7 @@
116
128
  & > code {
117
129
  & > .rouge-table {
118
130
  width: auto;
119
- margin: 0 0 -1rem -1rem;
131
+ margin: 0 0 - map-get($spacers, 3) - map-get($spacers, 3);
120
132
  tbody, tr, td {
121
133
  padding-top: 0;
122
134
  padding-bottom: 0;
@@ -128,14 +140,14 @@
128
140
  width: 100%;
129
141
  @include flexbox;
130
142
  & > .code {
131
- padding: 0 0 1rem .5rem;
143
+ padding: 0 0 map-get($spacers, 3) map-get($spacers, 2);
132
144
  @include overflow(auto);
133
145
  }
134
146
  }
135
147
  }
136
148
  tbody td {
137
149
  &.gl {
138
- padding-left: 1rem;
150
+ padding-left: map-get($spacers, 3);
139
151
  }
140
152
  & > pre {
141
153
  display: block;
@@ -153,21 +165,27 @@
153
165
  }
154
166
  }
155
167
  ul, ol {
156
- margin-left: 1.5rem;
168
+ margin-left: map-get($spacers, 4);
157
169
  ul, ol {
158
170
  margin-top: 0;
159
171
  margin-bottom: 0;
160
172
  }
161
173
  li {
162
174
  p {
163
- margin: map-get($base, vertical-space);
175
+ margin: map-get($spacers, 2);
176
+ @media print {
177
+ margin: map-get($spacers, 1);
178
+ }
164
179
  }
165
180
  }
166
181
  }
167
182
  dl {
168
183
  dt, dd {
169
184
  p {
170
- margin: map-get($base, vertical-space);
185
+ margin: map-get($spacers, 2);
186
+ @media print {
187
+ margin: map-get($spacers, 1);
188
+ }
171
189
  }
172
190
  }
173
191
  dt {
@@ -181,7 +199,7 @@
181
199
  margin-left: 0;
182
200
  list-style-type: none;
183
201
  ul, ol {
184
- margin-left: 1.5rem;
202
+ margin-left: map-get($spacers, 4);
185
203
  }
186
204
  }
187
205
  table {
@@ -193,7 +211,7 @@
193
211
  background-color: $text-background-color;
194
212
  }
195
213
  th, td {
196
- padding: .5rem;
214
+ padding: map-get($spacers, 2);
197
215
  border: 1px solid $border-color-l;
198
216
  }
199
217
  th {