jekyll-theme-yat 1.5.5 → 1.6.0
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.
- checksums.yaml +4 -4
- data/README.md +9 -0
- data/_includes/extensions/hashlocate.html +1 -1
- data/_includes/extensions/theme-toggle.html +90 -0
- data/_includes/sidebar/article-menu.html +5 -1
- data/_layouts/404.html +0 -1
- data/_layouts/default.html +2 -0
- data/_sass/misc/common-list.scss +1 -1
- data/_sass/misc/google-translate.scss +1 -1
- data/_sass/misc/theme-toggle.scss +79 -0
- data/_sass/yat.scss +2 -1
- data/_sass/yat/_base.scss +2 -1
- data/_sass/yat/_dark.scss +184 -0
- data/_sass/yat/_layout.scss +4 -7
- data/assets/js/main.js +9 -3
- metadata +5 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b89d81bb145293e81ec3ce978f1edd21f7fc3d6f415582cfa96162f9f56db586
|
4
|
+
data.tar.gz: 99a004e736ff24d67ea6e89f54b8cc166c6551517892d44660fdcaeec48152be
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c75c4559995c0fe4766848031f1bc8d02335674e474e54fe1ffacaa6c7dafca04db93c8d277eae42169d3bea9f8c9cf7fecd6f10d7c5c13d7a172e4b62c0c034
|
7
|
+
data.tar.gz: 82379c7e536507ac69df959573ff951cae42e36a023b7a9833a067736275500879bceb98507704f08f231cbd5d15c0690b28126e4dcc694a10364e86d89bb4c6
|
data/README.md
CHANGED
@@ -18,8 +18,17 @@ Hey, nice to meet you, you found this Jekyll theme. Here the yet another theme i
|
|
18
18
|
|
19
19
|
</p>
|
20
20
|
|
21
|
+
<h3 align="center">Night Mode</h3>
|
22
|
+
|
23
|
+
<p align="center">
|
24
|
+
|
25
|
+
<img src="https://user-images.githubusercontent.com/9413601/94983351-760f6e00-0574-11eb-9494-5303ad6228dc.gif" alt="demo-screenshot" width="780px"/>
|
26
|
+
|
27
|
+
</p>
|
28
|
+
|
21
29
|
## Features
|
22
30
|
|
31
|
+
- Support beautiful __Night Mode__.
|
23
32
|
- Full layouts `home`, `post`, `tags`, `archive` and `about`.
|
24
33
|
- Uses font awesome 5 for icons.
|
25
34
|
- Beautiful Syntax Highlight using [hilight.js][hilight-js].
|
@@ -0,0 +1,90 @@
|
|
1
|
+
<div class="theme-toggle">
|
2
|
+
<input type="checkbox" id="theme-switch">
|
3
|
+
<label for="theme-switch">
|
4
|
+
<div class="toggle"></div>
|
5
|
+
<div class="names">
|
6
|
+
<p class="light">Light</p>
|
7
|
+
<p class="dark">Dark</p>
|
8
|
+
</div>
|
9
|
+
</label>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<script>
|
13
|
+
(function() {
|
14
|
+
var sw = document.getElementById('theme-switch');
|
15
|
+
var html = document.getElementsByTagName('html')[0];
|
16
|
+
var themeData = loadThemeData();
|
17
|
+
|
18
|
+
function saveThemeData(data) {
|
19
|
+
localStorage.setItem('theme', JSON.stringify(data));
|
20
|
+
}
|
21
|
+
|
22
|
+
function loadThemeData() {
|
23
|
+
var data = localStorage.getItem('theme');
|
24
|
+
try {
|
25
|
+
data = JSON.parse(data ? data : '');
|
26
|
+
} catch(e) {
|
27
|
+
data = { nightShift: null, autoToggleAt: 0 };
|
28
|
+
saveThemeData(data);
|
29
|
+
}
|
30
|
+
return data;
|
31
|
+
}
|
32
|
+
|
33
|
+
function handleThemeToggle(nightShift) {
|
34
|
+
themeData.nightShift = nightShift;
|
35
|
+
saveThemeData(themeData);
|
36
|
+
html.dataset.theme = nightShift ? 'dark' : 'light';
|
37
|
+
setTimeout(function() {
|
38
|
+
sw.checked = nightShift ? true : false;
|
39
|
+
}, 50);
|
40
|
+
}
|
41
|
+
|
42
|
+
function autoThemeToggle() {
|
43
|
+
// Next time point of theme toggle
|
44
|
+
var now = new Date();
|
45
|
+
var toggleAt = new Date();
|
46
|
+
var hours = now.getHours();
|
47
|
+
var nightShift = hours >= 19 || hours <=7;
|
48
|
+
|
49
|
+
if (nightShift) {
|
50
|
+
if (hours > 7) {
|
51
|
+
toggleAt.setDate(toggleAt.getDate() + 1);
|
52
|
+
}
|
53
|
+
toggleAt.setHours(7);
|
54
|
+
} else {
|
55
|
+
toggleAt.setHours(19);
|
56
|
+
}
|
57
|
+
|
58
|
+
toggleAt.setMinutes(0);
|
59
|
+
toggleAt.setSeconds(0);
|
60
|
+
toggleAt.setMilliseconds(0)
|
61
|
+
|
62
|
+
var delay = toggleAt.getTime() - now.getTime();
|
63
|
+
|
64
|
+
// auto toggle theme mode
|
65
|
+
setTimeout(function() {
|
66
|
+
handleThemeToggle(!nightShift);
|
67
|
+
}, delay);
|
68
|
+
|
69
|
+
return {
|
70
|
+
nightShift: nightShift,
|
71
|
+
toggleAt: toggleAt.getTime()
|
72
|
+
};
|
73
|
+
}
|
74
|
+
|
75
|
+
var data = autoThemeToggle();
|
76
|
+
|
77
|
+
// Listen the theme toggle event
|
78
|
+
sw.addEventListener('change', function(event) {
|
79
|
+
handleThemeToggle(event.target.checked);
|
80
|
+
});
|
81
|
+
|
82
|
+
// Toggle theme by local setting
|
83
|
+
if (data.toggleAt > themeData.autoToggleAt) {
|
84
|
+
themeData.autoToggleAt = data.toggleAt;
|
85
|
+
handleThemeToggle(data.nightShift);
|
86
|
+
} else {
|
87
|
+
handleThemeToggle(themeData.nightShift);
|
88
|
+
}
|
89
|
+
})();
|
90
|
+
</script>
|
@@ -36,9 +36,13 @@
|
|
36
36
|
// The header element
|
37
37
|
var header = document.querySelector('header.site-header');
|
38
38
|
|
39
|
-
function doMenuCollapse(index, over_items
|
39
|
+
function doMenuCollapse(index, over_items) {
|
40
40
|
var items = menuContent.firstChild.children;
|
41
41
|
|
42
|
+
if (over_items == undefined) {
|
43
|
+
over_items = 20;
|
44
|
+
}
|
45
|
+
|
42
46
|
if (items.length < over_items) {
|
43
47
|
return;
|
44
48
|
}
|
data/_layouts/404.html
CHANGED
data/_layouts/default.html
CHANGED
data/_sass/misc/common-list.scss
CHANGED
@@ -0,0 +1,79 @@
|
|
1
|
+
.theme-toggle {
|
2
|
+
position: relative;
|
3
|
+
width: 102px;
|
4
|
+
margin-top: 10px;
|
5
|
+
margin-right: 60px;
|
6
|
+
margin-left: auto;
|
7
|
+
transition: 0.1s all ease-in-out;
|
8
|
+
|
9
|
+
label, .toggle {
|
10
|
+
border-radius: 100px;
|
11
|
+
}
|
12
|
+
|
13
|
+
label {
|
14
|
+
display: block;
|
15
|
+
background-color: rgba(120,120,120,.15);
|
16
|
+
cursor: pointer;
|
17
|
+
}
|
18
|
+
|
19
|
+
.toggle {
|
20
|
+
position: absolute;
|
21
|
+
width: 50%;
|
22
|
+
height: 100%;
|
23
|
+
background-color: #fff;
|
24
|
+
box-shadow: 0 2px 15px rgba(0,0,0,.15);
|
25
|
+
transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
26
|
+
}
|
27
|
+
|
28
|
+
.names {
|
29
|
+
font-size: 1em;
|
30
|
+
font-weight: bolder;
|
31
|
+
width: 76%;
|
32
|
+
margin-left: 12%;
|
33
|
+
position: relative;
|
34
|
+
display: flex;
|
35
|
+
justify-content: space-between;
|
36
|
+
user-select: none;
|
37
|
+
}
|
38
|
+
|
39
|
+
.dark {
|
40
|
+
opacity: .5;
|
41
|
+
}
|
42
|
+
|
43
|
+
p {
|
44
|
+
color: #acacac;
|
45
|
+
margin-bottom: 0;
|
46
|
+
line-height: 24px;
|
47
|
+
}
|
48
|
+
|
49
|
+
[type="checkbox"] {
|
50
|
+
display: none;
|
51
|
+
}
|
52
|
+
|
53
|
+
/* Toggle */
|
54
|
+
[type="checkbox"]:checked ~ label .toggle {
|
55
|
+
transform: translateX(100%);
|
56
|
+
background-color: #34323D;
|
57
|
+
}
|
58
|
+
|
59
|
+
[type="checkbox"]:checked ~ label .dark{
|
60
|
+
opacity: 1;
|
61
|
+
}
|
62
|
+
|
63
|
+
[type="checkbox"]:checked ~ label .light{
|
64
|
+
opacity: .5;
|
65
|
+
}
|
66
|
+
|
67
|
+
@include media-query(1024px) {
|
68
|
+
margin-right: 35px;
|
69
|
+
}
|
70
|
+
|
71
|
+
@include media-query($on-palm) {
|
72
|
+
width: 94px;
|
73
|
+
margin-right: 20px;
|
74
|
+
|
75
|
+
.names {
|
76
|
+
font-size: .85em;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}
|
data/_sass/yat.scss
CHANGED
data/_sass/yat/_base.scss
CHANGED
@@ -0,0 +1,184 @@
|
|
1
|
+
$dark-background-color: #0e0e0e !default;
|
2
|
+
|
3
|
+
html[data-theme="dark"] {
|
4
|
+
|
5
|
+
&[data-scroll-status='top'] {
|
6
|
+
.site-footer-inner {
|
7
|
+
border-top: solid 1px #2f2f2f !important;
|
8
|
+
transition: 0s;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
body {
|
13
|
+
color: #bbb;
|
14
|
+
background-color: $dark-background-color;
|
15
|
+
}
|
16
|
+
|
17
|
+
*:not(pre) > code {
|
18
|
+
background-color: #545454;
|
19
|
+
}
|
20
|
+
|
21
|
+
table {
|
22
|
+
color: #9d9d9d;
|
23
|
+
|
24
|
+
th {
|
25
|
+
background-color: #000;
|
26
|
+
}
|
27
|
+
|
28
|
+
tr:nth-child(even) {
|
29
|
+
background-color: #111;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
.site-header {
|
34
|
+
background-color: #090909;
|
35
|
+
|
36
|
+
.site-brand {
|
37
|
+
.site-brand-inner {
|
38
|
+
&, &:visited {
|
39
|
+
color: #f8f8f8;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
.site-nav .page-link {
|
45
|
+
color: #f8f8f8;
|
46
|
+
}
|
47
|
+
|
48
|
+
.ct-language-dropdown {
|
49
|
+
color: #f8f8f8;
|
50
|
+
background-color: $dark-background-color;
|
51
|
+
}
|
52
|
+
|
53
|
+
.ct-language-selected, .ct-language-dropdown li:hover {
|
54
|
+
background-color: #222 !important;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
.site-footer {
|
59
|
+
color: #fff;
|
60
|
+
background-color: #000;
|
61
|
+
}
|
62
|
+
|
63
|
+
.left-vsplit:before {
|
64
|
+
background-color: #9a9a9a;
|
65
|
+
}
|
66
|
+
|
67
|
+
.page-banner {
|
68
|
+
.page-banner-img {
|
69
|
+
& > *:first-child {
|
70
|
+
opacity: 0.8;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
.pagination {
|
76
|
+
.post-link {
|
77
|
+
color: #bbb;
|
78
|
+
}
|
79
|
+
|
80
|
+
.post-title {
|
81
|
+
a:visited:after {
|
82
|
+
background-color: $dark-background-color;
|
83
|
+
}
|
84
|
+
|
85
|
+
a:after {
|
86
|
+
color: $dark-background-color;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
|
90
|
+
.post-list {
|
91
|
+
& > li:not(:last-child) {
|
92
|
+
border-bottom: 1px solid #545454;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
.post-tags .post-tag:hover {
|
97
|
+
color: #d7d7d7;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
.page-segments {
|
102
|
+
li {
|
103
|
+
a {
|
104
|
+
color: #ddd;
|
105
|
+
}
|
106
|
+
|
107
|
+
a:visited:after {
|
108
|
+
background-color: $dark-background-color;
|
109
|
+
}
|
110
|
+
|
111
|
+
a:after {
|
112
|
+
color: $dark-background-color;
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
|
117
|
+
.post .post-content {
|
118
|
+
img:not([raw]) {
|
119
|
+
background-color: #ffffff33;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
.post-related {
|
124
|
+
& > *:first-child {
|
125
|
+
color: #d7d7d7;
|
126
|
+
}
|
127
|
+
|
128
|
+
a:visited:after {
|
129
|
+
background-color: $dark-background-color;
|
130
|
+
}
|
131
|
+
|
132
|
+
a:after {
|
133
|
+
color: $dark-background-color;
|
134
|
+
}
|
135
|
+
|
136
|
+
a:hover {
|
137
|
+
color: #aaa;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
|
141
|
+
.common-list {
|
142
|
+
li {
|
143
|
+
border-bottom: solid 1px #40404088;
|
144
|
+
|
145
|
+
a {
|
146
|
+
color: #aaa;
|
147
|
+
}
|
148
|
+
|
149
|
+
a:hover {
|
150
|
+
background-color: #272727;
|
151
|
+
}
|
152
|
+
|
153
|
+
span {
|
154
|
+
background-color: #333;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
.post-menu {
|
160
|
+
.post-menu-title {
|
161
|
+
color: #ddd;
|
162
|
+
}
|
163
|
+
|
164
|
+
.post-menu-content {
|
165
|
+
ul {
|
166
|
+
border-left: 1px solid #787878;
|
167
|
+
|
168
|
+
.active {
|
169
|
+
background-color: #2d2d2d;
|
170
|
+
border-left: 2px solid #aaa;
|
171
|
+
}
|
172
|
+
|
173
|
+
a {
|
174
|
+
color: #bbb;
|
175
|
+
}
|
176
|
+
|
177
|
+
a:hover {
|
178
|
+
color: #fff !important;
|
179
|
+
}
|
180
|
+
}
|
181
|
+
}
|
182
|
+
}
|
183
|
+
}
|
184
|
+
|
data/_sass/yat/_layout.scss
CHANGED
@@ -11,7 +11,7 @@ html {
|
|
11
11
|
&[data-scroll-status='top'] {
|
12
12
|
header.site-header-transparent {
|
13
13
|
height: 0;
|
14
|
-
margin-top:
|
14
|
+
margin-top: 12px;
|
15
15
|
background-color: transparent;
|
16
16
|
transition: 0.1s height,background-color,box-shadow;
|
17
17
|
|
@@ -244,6 +244,7 @@ html {
|
|
244
244
|
@extend %flex-1; /* <-- Keep footer on the bottom */
|
245
245
|
-ms-flex: none; /* <-- Fix IE footer issue */
|
246
246
|
padding: $spacing-unit * 2 0;
|
247
|
+
padding-top: 72px;
|
247
248
|
}
|
248
249
|
|
249
250
|
.page-heading {
|
@@ -326,7 +327,7 @@ html {
|
|
326
327
|
}
|
327
328
|
|
328
329
|
&:hover {
|
329
|
-
color: #
|
330
|
+
color: #787878;
|
330
331
|
}
|
331
332
|
}
|
332
333
|
|
@@ -359,10 +360,6 @@ html {
|
|
359
360
|
color: #b3b3b3;
|
360
361
|
}
|
361
362
|
|
362
|
-
a:hover {
|
363
|
-
color: #000;
|
364
|
-
}
|
365
|
-
|
366
363
|
.indicator {
|
367
364
|
padding: 0 15px;
|
368
365
|
}
|
@@ -560,7 +557,6 @@ html {
|
|
560
557
|
height: $banner-height;
|
561
558
|
background-color: $banner-background;
|
562
559
|
transition: height 0.2s;
|
563
|
-
margin-bottom: 32px;
|
564
560
|
|
565
561
|
.page-banner-img {
|
566
562
|
position: absolute;
|
@@ -570,6 +566,7 @@ html {
|
|
570
566
|
|
571
567
|
& > *:first-child {
|
572
568
|
@include center-image;
|
569
|
+
transition: 0.1s all ease-in-out;
|
573
570
|
}
|
574
571
|
}
|
575
572
|
|
data/assets/js/main.js
CHANGED
@@ -58,10 +58,12 @@ function smoothScrollTo(y, time) {
|
|
58
58
|
|
59
59
|
// Init highlight js
|
60
60
|
document.addEventListener('DOMContentLoaded', function(event) {
|
61
|
-
document.querySelectorAll('pre code')
|
61
|
+
var els = document.querySelectorAll('pre code')
|
62
|
+
function handle(block) {
|
62
63
|
var outer = block.parentElement.parentElement.parentElement;
|
63
64
|
var lang = block.getAttribute('data-lang');
|
64
|
-
for (var
|
65
|
+
for (var i = 0; i < outer.classList.length; i++) {
|
66
|
+
var cls = outer.classList[i];
|
65
67
|
if (cls.startsWith('language-')) {
|
66
68
|
lang = cls;
|
67
69
|
break;
|
@@ -77,5 +79,9 @@ document.addEventListener('DOMContentLoaded', function(event) {
|
|
77
79
|
block.setAttribute('class', 'hljs ' + lang);
|
78
80
|
block.parentNode.setAttribute('data-lang', lang);
|
79
81
|
hljs.highlightBlock(block);
|
80
|
-
}
|
82
|
+
}
|
83
|
+
for (var i = 0; i < els.length; i++) {
|
84
|
+
var el = els[i];
|
85
|
+
handle(el);
|
86
|
+
}
|
81
87
|
});
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jekyll-theme-yat
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.6.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- jeffreytse
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-
|
11
|
+
date: 2020-10-03 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -158,6 +158,7 @@ files:
|
|
158
158
|
- _includes/extensions/google-translate.html
|
159
159
|
- _includes/extensions/hashlocate.html
|
160
160
|
- _includes/extensions/mathjax.html
|
161
|
+
- _includes/extensions/theme-toggle.html
|
161
162
|
- _includes/extensions/trianglify.html
|
162
163
|
- _includes/functions.html
|
163
164
|
- _includes/functions/get_categories.html
|
@@ -196,8 +197,10 @@ files:
|
|
196
197
|
- _sass/misc/article-menu.scss
|
197
198
|
- _sass/misc/common-list.scss
|
198
199
|
- _sass/misc/google-translate.scss
|
200
|
+
- _sass/misc/theme-toggle.scss
|
199
201
|
- _sass/yat.scss
|
200
202
|
- _sass/yat/_base.scss
|
203
|
+
- _sass/yat/_dark.scss
|
201
204
|
- _sass/yat/_layout.scss
|
202
205
|
- assets/css/main.scss
|
203
206
|
- assets/images/banners/home.jpeg
|