jekyll-text-theme 1.4.0 → 1.4.1

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 (64) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -3
  3. data/_includes/blog/article-data.html +40 -38
  4. data/_includes/blog/footer.html +8 -12
  5. data/_includes/blog/header.html +49 -50
  6. data/_includes/blog/license.html +24 -23
  7. data/_includes/blog/tags.html +42 -38
  8. data/_includes/icon/mail.svg +4 -4
  9. data/_includes/icon/menu.svg +2 -2
  10. data/_includes/icon/next.svg +2 -2
  11. data/_includes/icon/previous.svg +2 -2
  12. data/_includes/icon/social/behance.svg +1 -1
  13. data/_includes/icon/social/douban.svg +3 -3
  14. data/_includes/icon/social/facebook.svg +1 -1
  15. data/_includes/icon/social/flicker.svg +3 -3
  16. data/_includes/icon/social/github.svg +1 -1
  17. data/_includes/icon/social/googleplus.svg +1 -1
  18. data/_includes/icon/social/linkedin.svg +1 -1
  19. data/_includes/icon/social/pinterest.svg +1 -1
  20. data/_includes/icon/social/qq.svg +1 -1
  21. data/_includes/icon/social/twitter.svg +1 -1
  22. data/_includes/icon/social/weixin.svg +1 -1
  23. data/_includes/icon/social/zhihu.svg +1 -1
  24. data/_includes/info/follow-me.html +75 -75
  25. data/_includes/snippets/get-lang.html +5 -1
  26. data/_includes/snippets/locale-to-string.html +5 -1
  27. data/_includes/snippets/page-title.html +2 -2
  28. data/_layouts/all.html +122 -106
  29. data/_layouts/blog-base.html +31 -33
  30. data/_layouts/blog-default.html +2 -4
  31. data/_layouts/error-404.html +3 -3
  32. data/_layouts/home.html +108 -94
  33. data/_layouts/page.html +8 -11
  34. data/_layouts/post.html +178 -188
  35. data/_sass/base/_animate.scss +14 -14
  36. data/_sass/base/_base.scss +62 -34
  37. data/_sass/base/_image&icon.scss +9 -6
  38. data/_sass/base/_links.scss +60 -67
  39. data/_sass/base/_text.scss +30 -24
  40. data/_sass/blog/_layout.default.scss +15 -14
  41. data/_sass/blog/_layout.post.scss +56 -55
  42. data/_sass/blog/_page.all.scss +31 -31
  43. data/_sass/blog/_page.error-404.scss +5 -5
  44. data/_sass/blog/_page.index.scss +47 -42
  45. data/_sass/colors/_colors.chocolate.scss +39 -0
  46. data/_sass/colors/_colors.orange.scss +39 -0
  47. data/_sass/components/_article.content.scss +133 -125
  48. data/_sass/components/_article.data.scss +34 -33
  49. data/_sass/components/_follow-me.scss +38 -65
  50. data/_sass/components/_footer.scss +20 -23
  51. data/_sass/components/_header.scss +35 -38
  52. data/_sass/components/_license.scss +23 -23
  53. data/_sass/components/_pagination.scss +5 -5
  54. data/_sass/components/_tags.scss +23 -29
  55. data/_sass/components/_toc.scss +58 -53
  56. data/_sass/components/_wrapper.scss +19 -17
  57. data/_sass/mixins/_link.scss +46 -39
  58. data/_sass/mixins/_media.scss +3 -3
  59. data/_sass/mixins/_prefix.scss +6 -6
  60. data/_sass/settings/_colors.scss +3 -1
  61. data/_sass/settings/_highlighting.scss +63 -64
  62. data/assets/css/blog.scss +0 -1
  63. metadata +4 -3
  64. data/_sass/blog/_layout.page.scss +0 -1
@@ -1,35 +1,36 @@
1
-
2
1
  .m-article-data {
3
- margin: $content-gap 0;
4
- .date-wrapper, .tag-wrapper, .view-wrapper {
5
- font-size: $small-font-size;
6
- }
7
- .tag-wrapper {
8
- float: left;
9
- margin: 0 $base-font-size / 4 0 0;
10
- @include media-query($on-palm) {
11
- float: none;
12
- }
13
- }
14
- .other-wrapper {
15
- float: right;
16
- @include flexbox;
17
- @include align-items(center);
18
- @include flex-wrap(wrap);
19
- color: $text-color-l;
20
- margin: 0 0 0 $base-font-size * .6;
21
- @include media-query($on-palm) {
22
- float: none;
23
- }
24
- }
25
- .view-wrapper {
26
- line-height: 1;
27
- padding: 0 $base-font-size / 4 0 0;
28
- border: 0 solid rgba($text-color-l, .6);
29
- border-right-width: 1px;
30
- margin: 0 $base-font-size / 4 0 0;
31
- }
32
- .date-wrapper {
33
- margin: 0 $base-font-size 0 0;
34
- }
2
+ margin: $content-gap 0;
3
+ .date-wrapper,
4
+ .tag-wrapper,
5
+ .view-wrapper {
6
+ font-size: $small-font-size;
7
+ }
8
+ .tag-wrapper {
9
+ float: left;
10
+ margin: 0 $base-font-size / 4 0 0;
11
+ @include media-query($on-palm) {
12
+ float: none;
13
+ }
14
+ }
15
+ .other-wrapper {
16
+ float: right;
17
+ @include flexbox;
18
+ @include align-items(center);
19
+ @include flex-wrap(wrap);
20
+ color: $text-color-l;
21
+ margin: 0 0 0 $base-font-size * .6;
22
+ @include media-query($on-palm) {
23
+ float: none;
24
+ }
25
+ }
26
+ .view-wrapper {
27
+ line-height: 1;
28
+ padding: 0 $base-font-size / 4 0 0;
29
+ border: 0 solid rgba($text-color-l, .6);
30
+ border-right-width: 1px;
31
+ margin: 0 $base-font-size / 4 0 0;
32
+ }
33
+ .date-wrapper {
34
+ margin: 0 $base-font-size 0 0;
35
+ }
35
36
  }
@@ -1,67 +1,40 @@
1
1
  .follow-me {
2
- text-align: center;
3
- & > ul{
4
- margin: 0;
5
- }
6
- .round-button {
7
- color: $text-color-1;
8
- .icon > svg path {
9
- fill: $text-color-1;
10
- }
11
- &:not(:last-child){
12
- margin-right: $spacing-unit / 6;
13
- }
14
- @include link-background-colors (
15
- $main-color-1,
16
- darken($main-color-1, 20%)
17
- )
18
- }
19
- .mail {
20
- @include link-background-colors (
21
- $mail-color,
22
- darken($mail-color, 20%)
23
- )
24
- }
25
- .weibo {
26
- @include link-background-colors (
27
- $weibo-color,
28
- darken($weibo-color, 20%)
29
- )
30
- }
31
- .facebook {
32
- @include link-background-colors (
33
- $facebook-color,
34
- darken($facebook-color, 20%)
35
- )
36
- }
37
- .twitter {
38
- @include link-background-colors (
39
- $twitter-color,
40
- darken($twitter-color, 20%)
41
- )
42
- }
43
- .googlepluse {
44
- @include link-background-colors (
45
- $google-plus-color,
46
- darken($google-plus-color, 20%)
47
- )
48
- }
49
- .github {
50
- @include link-background-colors (
51
- $github-color,
52
- lighten($github-color, 30%)
53
- )
54
- }
55
- .linkedin {
56
- @include link-background-colors (
57
- $linkedin-color,
58
- darken($linkedin-color, 20%)
59
- )
60
- }
61
- .douban {
62
- @include link-background-colors (
63
- $douban-color,
64
- darken($douban-color, 20%)
65
- )
66
- }
2
+ text-align: center;
3
+ &>ul {
4
+ margin: 0;
5
+ }
6
+ .round-button {
7
+ color: $text-color-1;
8
+ .icon>svg path {
9
+ fill: $text-color-1;
10
+ }
11
+ &:not(:last-child) {
12
+ margin-right: $spacing-unit / 6;
13
+ }
14
+ @include link-background-colors ( $main-color-1, darken($main-color-1, 20%))
15
+ }
16
+ .mail {
17
+ @include link-background-colors ( $mail-color, darken($mail-color, 20%))
18
+ }
19
+ .weibo {
20
+ @include link-background-colors ( $weibo-color, darken($weibo-color, 20%))
21
+ }
22
+ .facebook {
23
+ @include link-background-colors ( $facebook-color, darken($facebook-color, 20%))
24
+ }
25
+ .twitter {
26
+ @include link-background-colors ( $twitter-color, darken($twitter-color, 20%))
27
+ }
28
+ .googlepluse {
29
+ @include link-background-colors ( $google-plus-color, darken($google-plus-color, 20%))
30
+ }
31
+ .github {
32
+ @include link-background-colors ( $github-color, lighten($github-color, 30%))
33
+ }
34
+ .linkedin {
35
+ @include link-background-colors ( $linkedin-color, darken($linkedin-color, 20%))
36
+ }
37
+ .douban {
38
+ @include link-background-colors ( $douban-color, darken($douban-color, 20%))
39
+ }
67
40
  }
@@ -3,28 +3,25 @@
3
3
  */
4
4
 
5
5
  .m-page-footer {
6
- @include flexbox;
7
- @include align-items(center);
8
- height: $footer-height;
9
- margin-top: -$footer-height;
10
- background-color: $main-color-3;
11
- p {
12
- color: $text-color-3;
13
- }
14
- a {
15
- @include link-text-colors (
16
- $text-color-3,
17
- $main-color-1
18
- );
19
- }
20
- .follow-me {
21
- .round-button {
22
- box-shadow: $shadow-down;
23
- }
24
- }
25
- .site-info {
26
- text-align: center;
27
- font-size: $tiny-font-size;
28
- margin: 0 auto;
6
+ @include flexbox;
7
+ @include align-items(center);
8
+ height: $footer-height;
9
+ margin-top: -$footer-height;
10
+ background-color: $main-color-3;
11
+ p {
12
+ color: $text-color-3;
13
+ }
14
+ a {
15
+ @include link-text-colors ( $text-color-3, $main-color-1);
16
+ }
17
+ .follow-me {
18
+ .round-button {
19
+ box-shadow: $shadow-down;
29
20
  }
21
+ }
22
+ .site-info {
23
+ text-align: center;
24
+ font-size: $tiny-font-size;
25
+ margin: 0 auto;
26
+ }
30
27
  }
@@ -1,44 +1,41 @@
1
1
  .m-page-header {
2
- position: relative;
3
- a {
4
- font-weight: $base-font-weight;
5
- @include link-text-colors(
6
- $text-color,
7
- $main-color-1
8
- );
2
+ position: relative;
3
+ a {
4
+ font-weight: $base-font-weight;
5
+ @include link-text-colors( $text-color, $main-color-1);
6
+ }
7
+ .site-logo {
8
+ display: inline-block;
9
+ vertical-align: middle;
10
+ width: $h3-font-size * 1.2;
11
+ height: $h3-font-size * 1.2;
12
+ &>svg {
13
+ width: 100%;
14
+ height: 100%;
9
15
  }
10
- .site-logo {
11
- display: inline-block;
12
- vertical-align: middle;
13
- width: $h3-font-size * 1.2;
14
- height: $h3-font-size * 1.2;
15
- & > svg {
16
- width: 100%;
17
- height: 100%;
16
+ }
17
+ .site-title {
18
+ display: inline-block;
19
+ font-size: $h3-font-size;
20
+ }
21
+ &>nav {
22
+ display: block;
23
+ float: right;
24
+ font-size: $h5-font-size;
25
+ overflow-x: auto;
26
+ white-space: nowrap;
27
+ -webkit-overflow-scrolling: touch;
28
+ ul {
29
+ margin: 0;
30
+ &>li {
31
+ margin: 0;
32
+ &:not(:last-child) {
33
+ margin: 0 $base-font-size 0 0;
18
34
  }
35
+ }
19
36
  }
20
- .site-title {
21
- display: inline-block;
22
- font-size: $h3-font-size;
23
- }
24
- & > nav {
25
- display: block;
26
- float: right;
27
- font-size: $h5-font-size;
28
- overflow-x: auto;
29
- white-space: nowrap;
30
- -webkit-overflow-scrolling: touch;
31
- ul {
32
- margin: 0;
33
- & > li {
34
- margin: 0;
35
- &:not(:last-child) {
36
- margin: 0 $base-font-size 0 0;
37
- }
38
- }
39
- }
40
- @include media-query($on-palm) {
41
- float: none;
42
- }
37
+ @include media-query($on-palm) {
38
+ float: none;
43
39
  }
40
+ }
44
41
  }
@@ -1,27 +1,27 @@
1
1
  .m-license {
2
- border-radius: $spacing-unit / 2;
3
- background-color: $text-background-color;
4
- box-shadow: $shadow-down;
5
- padding: $base-font-size / 2 $base-font-size;
6
- font-weight: $bold-font-weight;
2
+ border-radius: $spacing-unit / 2;
3
+ background-color: $text-background-color;
4
+ box-shadow: $shadow-down;
5
+ padding: $base-font-size / 2 $base-font-size;
6
+ font-weight: $bold-font-weight;
7
+ img {
8
+ vertical-align: bottom;
9
+ }
10
+ .url {
11
+ word-wrap: break-word;
12
+ }
13
+ .octocat {
14
+ float: right;
7
15
  img {
8
- vertical-align: bottom;
9
- }
10
- .url {
11
- word-wrap: break-word;
12
- }
13
- .octocat {
14
- float: right;
15
- img {
16
- width: $spacing-unit * 2;
17
- height: auto;
18
- margin: 0 $spacing-unit / 3;
19
- border-width: 0;
20
- border-radius: $spacing-unit;
21
- }
22
- }
23
- .license {
24
- float: right;
25
- margin-left: $spacing-unit / 3;
16
+ width: $spacing-unit * 2;
17
+ height: auto;
18
+ margin: 0 $spacing-unit / 3;
19
+ border-width: 0;
20
+ border-radius: $spacing-unit;
26
21
  }
22
+ }
23
+ .license {
24
+ float: right;
25
+ margin-left: $spacing-unit / 3;
26
+ }
27
27
  }
@@ -1,7 +1,7 @@
1
1
  .m-pagination {
2
- .round-button.cur {
3
- background-color: $main-color-1;
4
- border-color: $main-color-1;
5
- color: $text-color-1;
6
- }
2
+ .round-button.cur {
3
+ background-color: $main-color-1;
4
+ border-color: $main-color-1;
5
+ color: $text-color-1;
6
+ }
7
7
  }
@@ -1,33 +1,27 @@
1
1
  .m-tags {
2
- & > ul > li > button {
3
- @include link-colors (
4
- $text-color-1, $main-color-1,
5
- $text-color-2, $main-color-2
6
- );
7
- &.all {
8
- @include link-colors (
9
- $text-color-3, $main-color-3,
10
- $text-color-2, $main-color-2
11
- );
12
- }
13
- & > .tag-count {
14
- font-size: $tiny-font-size;
15
- display: inline-block;
16
- line-height: 1;
17
- margin-left: $base-font-size * .2;
18
- vertical-align: top;
19
- }
2
+ &>ul>li>button {
3
+ @include link-colors ( $text-color-1, $main-color-1, $text-color-2, $main-color-2);
4
+ &.all {
5
+ @include link-colors ( $text-color-3, $main-color-3, $text-color-2, $main-color-2);
20
6
  }
21
- .tag-1 {
22
- background-color: rgba($main-color-1, .4);
23
- }
24
- .tag-2 {
25
- background-color: rgba($main-color-1, .55);
26
- }
27
- .tag-3 {
28
- background-color: rgba($main-color-1, .7);
29
- }
30
- .tag-4 {
31
- background-color: rgba($main-color-1, .9);
7
+ &>.tag-count {
8
+ font-size: $tiny-font-size;
9
+ display: inline-block;
10
+ line-height: 1;
11
+ margin-left: $base-font-size * .2;
12
+ vertical-align: top;
32
13
  }
14
+ }
15
+ .tag-1 {
16
+ background-color: rgba($main-color-1, .4);
17
+ }
18
+ .tag-2 {
19
+ background-color: rgba($main-color-1, .55);
20
+ }
21
+ .tag-3 {
22
+ background-color: rgba($main-color-1, .7);
23
+ }
24
+ .tag-4 {
25
+ background-color: rgba($main-color-1, .9);
26
+ }
33
27
  }
@@ -1,61 +1,66 @@
1
1
  .m-toc {
2
- ul {
3
- display: block;
4
- list-style-type: none;
5
- & > li {
6
- border: 0 solid rgba(0, 0, 0, 0);
7
- border-left-width: 4px;
8
- margin-left: -4px;
9
- &:not(:last-child) {
10
- margin-bottom: $content-gap / 4;
11
- }
12
- }
2
+ ul {
3
+ display: block;
4
+ list-style-type: none;
5
+ &>li {
6
+ border: 0 solid rgba(0, 0, 0, 0);
7
+ border-left-width: 4px;
8
+ margin-left: -4px;
9
+ &:not(:last-child) {
10
+ margin-bottom: $content-gap / 4;
11
+ }
13
12
  }
14
- a {
15
- display: block;
16
- margin: $small-font-size / 4;
17
- font-size: $small-font-size;
18
- text-decoration: none;
19
- line-height: $toc-line-height;
20
- font-weight: $base-font-weight;
21
- @include link-normal {
22
- color: $text-color;
23
- }
24
- @include link-emphasize-no-focus {
25
- color: $main-color-1;
26
- }
27
- }
28
- .toc-h1, .toc-h2 {
29
- padding: 0;
30
- a {
31
- font-weight: $bold-font-weight;
32
- }
33
- }
34
- .toc-h3, .toc-h4, .toc-h5, .toc-h6 {
35
- a {
36
- font-size: $tiny-font-size;
37
- }
38
- }
39
- .toc-h1, .toc-h2 {
40
- margin-top: $small-font-size / 2;
13
+ }
14
+ a {
15
+ display: block;
16
+ margin: $small-font-size / 4;
17
+ font-size: $small-font-size;
18
+ text-decoration: none;
19
+ line-height: $toc-line-height;
20
+ font-weight: $base-font-weight;
21
+ @include link-normal {
22
+ color: $text-color;
41
23
  }
42
- .toc-h3 {
43
- padding-left: $small-font-size;
24
+ @include link-emphasize-no-focus {
25
+ color: $main-color-1;
44
26
  }
45
- .toc-h4 {
46
- padding-left: $small-font-size * 2;
47
- }
48
- .toc-h5 {
49
- padding-left: $small-font-size * 3;
27
+ }
28
+ .toc-h1,
29
+ .toc-h2 {
30
+ padding: 0;
31
+ a {
32
+ font-weight: $bold-font-weight;
50
33
  }
51
- .toc-h6 {
52
- padding-left: $small-font-size * 3;
34
+ }
35
+ .toc-h3,
36
+ .toc-h4,
37
+ .toc-h5,
38
+ .toc-h6 {
39
+ a {
40
+ font-size: $tiny-font-size;
53
41
  }
54
- .toc-active {
55
- border-color: $main-color-1;
56
- @include transition(border-color ease .8s);
57
- a {
58
- color: $main-color-1;
59
- }
42
+ }
43
+ .toc-h1,
44
+ .toc-h2 {
45
+ margin-top: $small-font-size / 2;
46
+ }
47
+ .toc-h3 {
48
+ padding-left: $small-font-size;
49
+ }
50
+ .toc-h4 {
51
+ padding-left: $small-font-size * 2;
52
+ }
53
+ .toc-h5 {
54
+ padding-left: $small-font-size * 3;
55
+ }
56
+ .toc-h6 {
57
+ padding-left: $small-font-size * 3;
58
+ }
59
+ .toc-active {
60
+ border-color: $main-color-1;
61
+ @include transition(border-color ease .8s);
62
+ a {
63
+ color: $main-color-1;
60
64
  }
65
+ }
61
66
  }