jekyll-theme-chirpy 5.3.0 → 5.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/_data/assets/cross_origin.yml +2 -2
  4. data/_data/assets/self_host.yml +1 -1
  5. data/_data/locales/en.yml +10 -0
  6. data/_data/locales/hu-HU.yml +2 -2
  7. data/_data/locales/ko-KR.yml +7 -0
  8. data/_data/locales/pt-BR.yml +1 -1
  9. data/_data/locales/zh-CN.yml +8 -1
  10. data/_includes/comments/giscus.html +1 -1
  11. data/_includes/datetime.html +2 -8
  12. data/_includes/footer.html +26 -26
  13. data/_includes/head.html +0 -5
  14. data/_includes/js-selector.html +1 -5
  15. data/_includes/post-nav.html +4 -4
  16. data/_includes/post-sharing.html +3 -3
  17. data/_includes/read-time.html +3 -3
  18. data/_includes/refactor-content.html +9 -5
  19. data/_includes/related-posts.html +1 -1
  20. data/_includes/search-loader.html +1 -1
  21. data/_includes/sidebar.html +3 -3
  22. data/_includes/toc.html +1 -1
  23. data/_includes/topbar.html +9 -9
  24. data/_includes/trending-tags.html +1 -1
  25. data/_includes/update-list.html +1 -1
  26. data/_layouts/archives.html +2 -9
  27. data/_layouts/categories.html +12 -14
  28. data/_layouts/category.html +0 -2
  29. data/_layouts/default.html +6 -9
  30. data/_layouts/home.html +1 -3
  31. data/_layouts/page.html +4 -6
  32. data/_layouts/post.html +8 -10
  33. data/_layouts/tag.html +0 -2
  34. data/_sass/addon/commons.scss +131 -136
  35. data/_sass/addon/module.scss +5 -2
  36. data/_sass/addon/syntax.scss +14 -20
  37. data/_sass/addon/variables.scss +0 -4
  38. data/_sass/colors/dark-syntax.scss +17 -18
  39. data/_sass/colors/dark-typography.scss +22 -22
  40. data/_sass/colors/light-syntax.scss +2 -3
  41. data/_sass/colors/light-typography.scss +13 -14
  42. data/_sass/jekyll-theme-chirpy.scss +1 -1
  43. data/_sass/layout/archives.scss +4 -12
  44. data/_sass/layout/categories.scss +12 -13
  45. data/_sass/layout/category-tag.scss +4 -4
  46. data/_sass/layout/home.scss +19 -25
  47. data/_sass/layout/post.scss +132 -136
  48. data/_sass/layout/tags.scss +1 -1
  49. data/assets/404.html +1 -3
  50. data/assets/js/data/search.json +1 -1
  51. data/assets/js/data/swcache.js +35 -36
  52. data/assets/js/dist/categories.min.js +2 -2
  53. data/assets/js/dist/commons.min.js +2 -2
  54. data/assets/js/dist/home.min.js +2 -2
  55. data/assets/js/dist/misc.min.js +2 -2
  56. data/assets/js/dist/page.min.js +2 -2
  57. data/assets/js/dist/post.min.js +2 -2
  58. data/assets/js/dist/pvreport.min.js +2 -2
  59. data/assets/js/pwa/app.js +33 -33
  60. data/assets/js/pwa/sw.js +54 -53
  61. data/assets/js/pwa/unregister.js +5 -5
  62. metadata +2 -10
  63. data/_config.yml +0 -201
  64. data/_includes/lang.html +0 -8
  65. data/_plugins/posts-lastmod-hook.rb +0 -14
  66. data/_tabs/about.md +0 -8
  67. data/_tabs/archives.md +0 -6
  68. data/_tabs/categories.md +0 -5
  69. data/_tabs/tags.md +0 -5
  70. data/index.html +0 -4
@@ -7,7 +7,7 @@
7
7
  %heading {
8
8
  color: var(--heading-color);
9
9
  font-weight: 400;
10
- font-family: 'Lato', 'Microsoft Yahei', sans-serif;
10
+ font-family: Lato, "Microsoft Yahei", sans-serif;
11
11
  }
12
12
 
13
13
  %section {
@@ -73,6 +73,8 @@
73
73
  }
74
74
 
75
75
  %no-cursor {
76
+ -webkit-user-select: none;
77
+ -moz-user-select: none;
76
78
  user-select: none;
77
79
  }
78
80
 
@@ -101,6 +103,8 @@
101
103
 
102
104
  %sidebar-links {
103
105
  color: rgba(117, 117, 117, 0.9);
106
+ -webkit-user-select: none;
107
+ -moz-user-select: none;
104
108
  user-select: none;
105
109
  }
106
110
 
@@ -134,7 +138,6 @@
134
138
  position: relative;
135
139
  left: 50%;
136
140
  -webkit-transform: translateX(-50%);
137
- -ms-transform: translateX(-50%);
138
141
  transform: translateX(-50%);
139
142
  }
140
143
 
@@ -8,22 +8,22 @@
8
8
  html {
9
9
  @media (prefers-color-scheme: light) {
10
10
  &:not([data-mode]),
11
- &[data-mode=light] {
11
+ &[data-mode="light"] {
12
12
  @include light-syntax;
13
13
  }
14
14
 
15
- &[data-mode=dark] {
15
+ &[data-mode="dark"] {
16
16
  @include dark-syntax;
17
17
  }
18
18
  }
19
19
 
20
20
  @media (prefers-color-scheme: dark) {
21
21
  &:not([data-mode]),
22
- &[data-mode=dark] {
22
+ &[data-mode="dark"] {
23
23
  @include dark-syntax;
24
24
  }
25
25
 
26
- &[data-mode=light] {
26
+ &[data-mode="light"] {
27
27
  @include light-syntax;
28
28
  }
29
29
  }
@@ -87,24 +87,21 @@ $code-radius: 6px;
87
87
  text-align: right;
88
88
  color: var(--highlight-lineno-color);
89
89
  -webkit-user-select: none;
90
- -khtml-user-select: none;
91
90
  -moz-user-select: none;
92
- -ms-user-select: none;
93
91
  -o-user-select: none;
94
92
  user-select: none;
95
93
  }
96
94
 
97
95
  /* set the dollar sign to non-selectable */
98
96
  .gp {
97
+ -webkit-user-select: none;
98
+ -moz-user-select: none;
99
99
  user-select: none;
100
100
  }
101
-
102
101
  } /* .highlight */
103
102
 
104
103
  code {
105
104
  -webkit-hyphens: none;
106
- -ms-hyphens: none;
107
- -moz-hyphens: none;
108
105
  hyphens: none;
109
106
 
110
107
  &.highlighter-rouge {
@@ -152,16 +149,15 @@ td.rouge-code {
152
149
  border-bottom: none !important;
153
150
  pointer-events: none;
154
151
  }
155
-
156
152
  }
157
153
 
158
154
  /* Hide line numbers for default, console, and terminal code snippets */
159
155
  div {
160
- &[class^='highlighter-rouge'],
156
+ &[class^="highlighter-rouge"],
157
+ &.nolineno,
161
158
  &.language-plaintext.highlighter-rouge,
162
159
  &.language-console.highlighter-rouge,
163
- &.language-terminal.highlighter-rouge,
164
- &.nolineno {
160
+ &.language-terminal.highlighter-rouge {
165
161
  pre.lineno {
166
162
  display: none;
167
163
  }
@@ -252,6 +248,10 @@ div {
252
248
  }
253
249
  }
254
250
 
251
+ &:focus {
252
+ outline: none;
253
+ }
254
+
255
255
  &:not([timeout]):hover {
256
256
  background-color: rgba(128, 128, 128, 0.37);
257
257
 
@@ -259,18 +259,12 @@ div {
259
259
  color: white;
260
260
  }
261
261
  }
262
-
263
- &:focus {
264
- outline: none;
265
- }
266
-
267
262
  }
268
-
269
263
  }
270
264
 
271
265
  @media all and (max-width: 576px) {
272
266
  .post-content {
273
- > div[class^='language-'] {
267
+ > div[class^="language-"] {
274
268
  @include ml-mr(-1.25rem);
275
269
 
276
270
  border-radius: 0;
@@ -13,20 +13,16 @@ $sidebar-width-large: 350px !default; /* screen width: >= 1650px */
13
13
  $tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
14
14
  $tab-height: 3rem !default;
15
15
  $tab-cursor-height: 1.6rem !default;
16
-
17
16
  $cursor-width: 2px !default; /* the cursor width of the selected tab */
18
17
 
19
18
  /* other framework sizes */
20
19
 
21
20
  $topbar-height: 3rem !default;
22
-
23
21
  $search-max-width: 210px !default;
24
-
25
22
  $footer-height: 5rem !default;
26
23
  $footer-height-mobile: 6rem !default; /* screen width: <= 576px */
27
24
 
28
25
  $main-content-max-width: 1250px !default;
29
-
30
26
  $bottom-min-height: 35rem !default;
31
27
 
32
28
  /* syntax highlight */
@@ -3,7 +3,24 @@
3
3
  */
4
4
 
5
5
  @mixin dark-syntax {
6
+ --highlight-bg-color: #252525;
7
+ --highlighter-rouge-color: #de6b18;
8
+ --highlight-lineno-color: #6c6c6d;
9
+ --inline-code-bg: #272822;
10
+ --code-header-text-color: #6a6a6a;
11
+ --code-header-muted-color: rgb(60, 60, 60);
12
+ --code-header-icon-color: rgb(86, 86, 86);
13
+ --clipboard-checked-color: #2bcc2b;
14
+ --filepath-text-color: #bdbdbd;
15
+
16
+ pre { color: #bfbfbf; } /* override Bootstrap */
17
+
18
+ .highlight {
19
+ .gp { color: #818c96; }
20
+ }
21
+
6
22
  /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
23
+
7
24
  .highlight pre { background-color: var(--highlight-bg-color); }
8
25
  .highlight .hll { background-color: var(--highlight-bg-color); }
9
26
  .highlight .c { color: #75715e; } /* Comment */
@@ -67,22 +84,4 @@
67
84
  .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
68
85
  .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
69
86
  .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
70
-
71
- /* ----- custom styles ------ */
72
-
73
- --highlight-bg-color: #252525;
74
- --highlighter-rouge-color: #de6b18;
75
- --highlight-lineno-color: #6c6c6d;
76
- --inline-code-bg: #272822;
77
- --code-header-text-color: #6a6a6a;
78
- --code-header-muted-color: rgb(60 60 60);
79
- --code-header-icon-color: rgb(86 86 86);
80
- --clipboard-checked-color: #2bcc2b;
81
- --filepath-text-color: #bdbdbd;
82
-
83
- .highlight {
84
- .gp { color: #818c96; }
85
- }
86
-
87
- pre { color: #bfbfbf; } /* override Bootstrap */
88
87
  }
@@ -4,9 +4,9 @@
4
4
 
5
5
  @mixin dark-scheme {
6
6
  /* Framework color */
7
- --body-bg: var(--main-wrapper-bg);
7
+ --body-bg: var(--main-bg);
8
8
  --mask-bg: rgb(68, 69, 70);
9
- --main-wrapper-bg: rgb(27, 27, 30);
9
+ --main-bg: rgb(27, 27, 30);
10
10
  --main-border-color: rgb(44, 45, 45);
11
11
 
12
12
  /* Common color */
@@ -21,18 +21,18 @@
21
21
  --btn-border-color: rgb(63, 65, 68);
22
22
  --btn-backtotop-color: var(--text-color);
23
23
  --btn-backtotop-border-color: var(--btn-border-color);
24
- --btn-box-shadow: var(--main-wrapper-bg);
24
+ --btn-box-shadow: var(--main-bg);
25
25
  --card-header-bg: rgb(51, 50, 50);
26
26
  --label-color: rgb(108, 117, 125);
27
- --checkbox-color: rgb(118 120 121);
27
+ --checkbox-color: rgb(118, 120, 121);
28
28
  --checkbox-checked-color: var(--link-color);
29
29
 
30
30
  /* Sidebar */
31
31
  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
32
32
  --sidebar-muted-color: #6d6c6b;
33
- --sidebar-active-color: rgb(255 255 255 / 80%);
33
+ --sidebar-active-color: rgb(255, 255, 255, 0.8);
34
34
  --nav-cursor-color: rgb(183, 182, 182);
35
- --sidebar-btn-bg: rgb(117 116 116 / 20%);
35
+ --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
36
36
 
37
37
  /* Topbar */
38
38
  --topbar-text-color: var(--text-color);
@@ -48,7 +48,7 @@
48
48
  --btn-paginator-hover-color: rgb(64, 65, 66);
49
49
  --btn-paginator-border-color: var(--btn-border-color);
50
50
  --btn-text-color: var(--text-color);
51
- --pin-bg: rgb(34 35 37);
51
+ --pin-bg: rgb(34, 35, 37);
52
52
  --pin-color: inherit;
53
53
 
54
54
  /* Posts */
@@ -64,19 +64,19 @@
64
64
  --relate-post-date: var(--text-muted-color);
65
65
  --card-bg: rgb(39, 40, 43);
66
66
  --card-border-color: rgb(53, 53, 60);
67
- --card-box-shadow: var(--main-wrapper-bg);
68
- --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
67
+ --card-box-shadow: var(--main-bg);
68
+ --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
69
69
  --kbd-wrap-color: #6a6a6a;
70
70
  --kbd-text-color: #d3d3d3;
71
71
  --kbd-bg-color: #242424;
72
- --prompt-text-color: rgb(216 212 212 / 75%);
72
+ --prompt-text-color: rgb(216, 212, 212, 0.75);
73
73
  --prompt-tip-bg: rgba(77, 187, 95, 0.2);
74
- --prompt-tip-icon-color: rgb(5 223 5 / 68%);
75
- --prompt-info-bg: rgb(7 59 104 / 80%);
74
+ --prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
75
+ --prompt-info-bg: rgb(7, 59, 104, 0.8);
76
76
  --prompt-info-icon-color: #0075d1;
77
- --prompt-warning-bg: rgb(90 69 3 / 95%);
78
- --prompt-warning-icon-color: rgb(255 165 0 / 80%);
79
- --prompt-danger-bg: rgb(86 28 8 / 80%);
77
+ --prompt-warning-bg: rgb(90, 69, 3, 0.95);
78
+ --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
79
+ --prompt-danger-bg: rgb(86, 28, 8, 0.8);
80
80
  --prompt-danger-icon-color: #cd0202;
81
81
 
82
82
  /* tags */
@@ -96,6 +96,7 @@
96
96
  --timeline-year-dot-color: var(--timeline-color);
97
97
 
98
98
  .post img[data-src] {
99
+ -webkit-filter: brightness(95%);
99
100
  filter: brightness(95%);
100
101
  }
101
102
 
@@ -104,11 +105,11 @@
104
105
  }
105
106
 
106
107
  /* posts' toc, override BS */
107
- nav[data-toggle=toc] .nav-link.active,
108
- nav[data-toggle=toc] .nav-link.active:focus,
109
- nav[data-toggle=toc] .nav-link.active:hover,
110
- nav[data-toggle=toc] .nav > li > a:focus,
111
- nav[data-toggle=toc] .nav > li > a:hover {
108
+ nav[data-toggle="toc"] .nav-link.active,
109
+ nav[data-toggle="toc"] .nav-link.active:focus,
110
+ nav[data-toggle="toc"] .nav-link.active:hover,
111
+ nav[data-toggle="toc"] .nav > li > a:focus,
112
+ nav[data-toggle="toc"] .nav > li > a:hover {
112
113
  color: var(--toc-highlight) !important;
113
114
  border-left-color: var(--toc-highlight) !important;
114
115
  }
@@ -150,8 +151,7 @@
150
151
 
151
152
  color-scheme: dark;
152
153
 
153
- #disqus_thread {
154
+ #disqus_thread { /* stylelint-disable-line selector-id-pattern */
154
155
  color-scheme: none;
155
156
  }
156
-
157
157
  } /* dark-scheme */
@@ -76,9 +76,8 @@
76
76
  --code-header-icon-color: #d1d1d1;
77
77
  --clipboard-checked-color: #43c743;
78
78
 
79
- [class^=prompt-] {
79
+ [class^="prompt-"] {
80
80
  --inline-code-bg: #fbfafa;
81
- --highlighter-rouge-color: rgb(82 82 82);
81
+ --highlighter-rouge-color: rgb(82, 82, 82);
82
82
  }
83
-
84
83
  } /* light-syntax */
@@ -6,18 +6,18 @@
6
6
  /* Framework color */
7
7
  --body-bg: #fafafa;
8
8
  --mask-bg: #c1c3c5;
9
- --main-wrapper-bg: white;
9
+ --main-bg: white;
10
10
  --main-border-color: #f3f3f3;
11
11
 
12
12
  /* Common color */
13
13
  --text-color: #34343c;
14
14
  --text-muted-color: gray;
15
15
  --heading-color: black;
16
- --blockquote-border-color: #eee;
16
+ --blockquote-border-color: #eeeeee;
17
17
  --blockquote-text-color: #9a9a9a;
18
18
  --link-color: #2a408e;
19
19
  --link-underline-color: #dee2e6;
20
- --button-bg: #fff;
20
+ --button-bg: #ffffff;
21
21
  --btn-border-color: #e9ecef;
22
22
  --btn-backtotop-color: #686868;
23
23
  --btn-backtotop-border-color: #f1f1f1;
@@ -35,8 +35,8 @@
35
35
  /* Topbar */
36
36
  --topbar-text-color: rgb(78, 78, 78);
37
37
  --topbar-wrapper-bg: white;
38
- --search-wrapper-bg: rgb(245 245 245 / 50%);
39
- --search-wrapper-border-color: rgb(245 245 245);
38
+ --search-wrapper-bg: rgb(245, 245, 245, 0.5);
39
+ --search-wrapper-border-color: rgb(245, 245, 245);
40
40
  --search-tag-bg: #f8f9fa;
41
41
  --search-icon-color: #c2c6cc;
42
42
  --input-focus-border-color: var(--btn-border-color);
@@ -53,7 +53,7 @@
53
53
  /* Posts */
54
54
  --btn-share-hover-color: var(--link-color);
55
55
  --card-border-color: #f1f1f1;
56
- --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
56
+ --card-box-shadow: rgba(234, 234, 234, 0.76);
57
57
  --label-color: #616161;
58
58
  --relate-post-date: rgba(30, 55, 70, 0.4);
59
59
  --footnote-target-bg: lightcyan;
@@ -64,22 +64,22 @@
64
64
  --tb-odd-bg: #fbfcfd;
65
65
  --tb-border-color: #eaeaea;
66
66
  --dash-color: silver;
67
- --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
67
+ --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
68
68
  --kbd-wrap-color: #bdbdbd;
69
69
  --kbd-text-color: var(--text-color);
70
70
  --kbd-bg-color: white;
71
- --prompt-text-color: rgb(46 46 46 / 77%);
72
- --prompt-tip-bg: rgb(123 247 144 / 20%);
71
+ --prompt-text-color: rgb(46, 46, 46, 0.77);
72
+ --prompt-tip-bg: rgb(123, 247, 144, 0.2);
73
73
  --prompt-tip-icon-color: #03b303;
74
74
  --prompt-info-bg: #e1f5fe;
75
75
  --prompt-info-icon-color: #0070cb;
76
- --prompt-warning-bg: rgb(255 243 205);
76
+ --prompt-warning-bg: rgb(255, 243, 205);
77
77
  --prompt-warning-icon-color: #ef9c03;
78
- --prompt-danger-bg: rgb(248 215 218 / 56%);
78
+ --prompt-danger-bg: rgb(248, 215, 218, 0.56);
79
79
  --prompt-danger-icon-color: #df3c30;
80
80
 
81
- [class^=prompt-] {
82
- --link-underline-color: rgb(219 216 216);
81
+ [class^="prompt-"] {
82
+ --link-underline-color: rgb(219, 216, 216);
83
83
  }
84
84
 
85
85
  /* Categories */
@@ -90,5 +90,4 @@
90
90
  --timeline-color: rgba(0, 0, 0, 0.075);
91
91
  --timeline-node-bg: #c2c6cc;
92
92
  --timeline-year-dot-color: #ffffff;
93
-
94
93
  } /* light-scheme */
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * The styles for Jekyll theme Chirpy
3
3
  *
4
- * Chirpy v5.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
4
+ * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
5
5
  * © 2019 Cotes Chung
6
6
  * MIT Licensed
7
7
  */
@@ -41,8 +41,6 @@
41
41
  content: "";
42
42
  display: inline-block;
43
43
  position: relative;
44
- -webkit-border-radius: 50%;
45
- -moz-border-radius: 50%;
46
44
  border-radius: 50%;
47
45
  width: 12px;
48
46
  height: 12px;
@@ -53,7 +51,6 @@
53
51
  box-shadow: 0 0 2px 0 #c2c6cc;
54
52
  z-index: 1;
55
53
  }
56
-
57
54
  }
58
55
 
59
56
  ul {
@@ -65,8 +62,8 @@
65
62
  text-overflow: ellipsis;
66
63
 
67
64
  &:nth-child(odd) {
68
- background-color: var(--main-wrapper-bg, #fff);
69
- background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
65
+ background-color: var(--main-bg, #ffffff);
66
+ background-image: linear-gradient(to left, #ffffff, #fbfbfb, #fbfbfb, #fbfbfb, #ffffff);
70
67
  }
71
68
 
72
69
  &::before {
@@ -81,7 +78,6 @@
81
78
  &:last-child li:last-child::before {
82
79
  height: 1.5rem;
83
80
  }
84
-
85
81
  } /* #archives ul */
86
82
 
87
83
  .date {
@@ -97,8 +93,7 @@
97
93
 
98
94
  &.day {
99
95
  font-size: 85%;
100
- font-family: 'Lato', sans-serif;
101
-
96
+ font-family: Lato, sans-serif;
102
97
  }
103
98
  }
104
99
 
@@ -117,8 +112,6 @@
117
112
  content: "";
118
113
  display: inline-block;
119
114
  position: relative;
120
- -webkit-border-radius: 50%;
121
- -moz-border-radius: 50%;
122
115
  border-radius: 50%;
123
116
  width: 8px;
124
117
  height: 8px;
@@ -130,8 +123,7 @@
130
123
  z-index: 1;
131
124
  }
132
125
  }
133
-
134
- } // #archives
126
+ } /* #archives */
135
127
 
136
128
  @media all and (max-width: 576px) {
137
129
  #archives {
@@ -16,7 +16,7 @@
16
16
  i {
17
17
  @extend %category-icon-color;
18
18
 
19
- font-size: 86%; // fontawesome icons
19
+ font-size: 86%; /* fontawesome icons */
20
20
  }
21
21
 
22
22
  .list-group-item {
@@ -28,10 +28,8 @@
28
28
  border-top-left-radius: 0;
29
29
  border-top-right-radius: 0;
30
30
  }
31
-
32
31
  }
33
-
34
- } // .categories
32
+ } /* .categories */
35
33
 
36
34
  .category-trigger {
37
35
  width: 1.7rem;
@@ -40,28 +38,29 @@
40
38
  text-align: center;
41
39
  color: #6c757d !important;
42
40
 
43
- &:hover {
44
- i {
45
- color: var(--categories-icon-hover-color);
46
- }
47
- }
48
-
49
41
  i {
50
42
  position: relative;
51
43
  height: 0.7rem;
52
44
  width: 1rem;
45
+ transition: -webkit-transform 300ms ease;
53
46
  transition: transform 300ms ease;
47
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
48
+ }
49
+
50
+ &:hover {
51
+ i {
52
+ color: var(--categories-icon-hover-color);
53
+ }
54
54
  }
55
55
  }
56
56
 
57
- @media (hover: hover) { // only works on desktop
57
+ @media (hover: hover) { /* only works on desktop */
58
58
  .category-trigger:hover {
59
59
  background-color: var(--categories-hover-bg);
60
60
  }
61
61
  }
62
62
 
63
63
  .rotate {
64
- -ms-transform: rotate(-90deg); /* IE 9 */
65
- -webkit-transform: rotate(-90deg); /* Safari 3-8 */
64
+ -webkit-transform: rotate(-90deg);
66
65
  transform: rotate(-90deg);
67
66
  }
@@ -13,8 +13,8 @@
13
13
  line-height: 1.5rem;
14
14
  padding: 0.6rem 0;
15
15
 
16
- &::before { // dot
17
- background: #999;
16
+ &::before { /* dot */
17
+ background: #999999;
18
18
  width: 5px;
19
19
  height: 5px;
20
20
  border-radius: 50%;
@@ -37,7 +37,7 @@
37
37
  }
38
38
  }
39
39
 
40
- #page-tag h1 > i { // tag icon
40
+ #page-tag h1 > i { /* tag icon */
41
41
  font-size: 1.2rem;
42
42
  }
43
43
 
@@ -51,7 +51,7 @@
51
51
  a:hover {
52
52
  @extend %link-hover;
53
53
 
54
- margin-bottom: -1px; // Avoid jumping
54
+ margin-bottom: -1px; /* Avoid jumping */
55
55
  }
56
56
  }
57
57
 
@@ -4,7 +4,7 @@
4
4
 
5
5
  .pagination {
6
6
  color: var(--btn-patinator-text-color);
7
- font-family: 'Lato', sans-serif;
7
+ font-family: Lato, sans-serif;
8
8
 
9
9
  a:hover {
10
10
  text-decoration: none;
@@ -49,9 +49,8 @@
49
49
  &:last-child .page-link {
50
50
  border-radius: 50%;
51
51
  }
52
- } // .page-item
53
-
54
- } // .pagination
52
+ } /* .page-item */
53
+ } /* .pagination */
55
54
 
56
55
  #post-list {
57
56
  margin-top: 1rem;
@@ -83,6 +82,19 @@
83
82
  em {
84
83
  @extend %normal-font-style;
85
84
  }
85
+
86
+ .pin {
87
+ i {
88
+ -webkit-transform: rotate(45deg);
89
+ transform: rotate(45deg);
90
+ padding-left: 3px;
91
+ color: var(--pin-color);
92
+ }
93
+
94
+ span {
95
+ display: none;
96
+ }
97
+ }
86
98
  }
87
99
 
88
100
  .post-content {
@@ -100,21 +112,8 @@
100
112
  -webkit-box-orient: vertical;
101
113
  }
102
114
  }
103
-
104
- .pin {
105
- > i {
106
- transform: rotate(45deg);
107
- padding-left: 3px;
108
- color: var(--pin-color);
109
- }
110
-
111
- > span {
112
- display: none;
113
- }
114
- }
115
-
116
- } // .post-preview
117
- } // #post-list
115
+ } /* .post-preview */
116
+ } /* #post-list */
118
117
 
119
118
  /* Hide SideBar and TOC */
120
119
  @media all and (max-width: 830px) {
@@ -125,9 +124,7 @@
125
124
  &:not(:first-child):not(:last-child) {
126
125
  display: none;
127
126
  }
128
-
129
127
  }
130
-
131
128
  }
132
129
  }
133
130
 
@@ -165,15 +162,12 @@
165
162
  width: 2rem;
166
163
  height: 2rem;
167
164
  }
168
-
169
165
  }
170
166
 
171
167
  .page-index {
172
168
  display: none;
173
169
  }
174
-
175
- } // .pagination
176
-
170
+ } /* .pagination */
177
171
  }
178
172
 
179
173
  /* Panel hidden */