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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e23cabb5b85f960c0149610259b2b257e7ce06077a54e8834c4f70e689988e07
4
- data.tar.gz: 5f41d7b6faad0be804c262daedce63a020794acd16aa106a9ea1690aa4185db1
3
+ metadata.gz: b89d81bb145293e81ec3ce978f1edd21f7fc3d6f415582cfa96162f9f56db586
4
+ data.tar.gz: 99a004e736ff24d67ea6e89f54b8cc166c6551517892d44660fdcaeec48152be
5
5
  SHA512:
6
- metadata.gz: 5fea0fdae1d42740ce4d633cdc399bceeba79620257ed282d9ddd5d24b6e3c7c927a28baab5707e5f76f0a6a5d91a98cf5513929901aa5171a8c8d032c26d4f6
7
- data.tar.gz: 0dd397bdaf68249b75f6c206e48b1fd4a12e1ebbe47f674ca1cc9bf9b0c68cf28f632ba340315a124ee07c04b495fb85583764dcfad57bcb6a2558438635a38c
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].
@@ -36,7 +36,7 @@
36
36
 
37
37
  // The first event occurred
38
38
  window.addEventListener('click', function(event) {
39
- if (event.target.matches('a')) {
39
+ if (event.target.tagName.toLowerCase() == 'a') {
40
40
  hashLocate(event.target.getAttribute('href'));
41
41
  }
42
42
  });
@@ -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=20) {
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
  }
@@ -7,7 +7,6 @@ layout: default
7
7
  margin: 10px auto;
8
8
  max-width: 600px;
9
9
  text-align: center;
10
- color: #3c3c3c;
11
10
  }
12
11
  h1 {
13
12
  margin: 30px 0;
@@ -11,6 +11,8 @@
11
11
 
12
12
  {%- include extensions/hashlocate.html -%}
13
13
 
14
+ {%- include extensions/theme-toggle.html -%}
15
+
14
16
  <main class="page-content" aria-label="Content">
15
17
  <div class="wrapper">
16
18
  {{ content }}
@@ -27,7 +27,7 @@
27
27
  transition: background 0.2s;
28
28
 
29
29
  &:hover {
30
- background: mix($theme-color, #eaeaea, 20%);
30
+ background-color: mix($theme-color, #eaeaea, 20%);
31
31
  }
32
32
  }
33
33
 
@@ -113,7 +113,7 @@ body {
113
113
  // Main look
114
114
 
115
115
  .ct-language-selected {
116
- background: darken($theme-color, 5%) !important;
116
+ background-color: darken($theme-color, 5%) !important;
117
117
  }
118
118
 
119
119
  .ct-language-dropdown {
@@ -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
+ }
@@ -61,7 +61,8 @@ $on-laptop: 800px !default;
61
61
  @import
62
62
  "yat/base",
63
63
  "yat/layout",
64
- // "yat/syntax-highlighting",
64
+ "yat/dark",
65
+ "misc/theme-toggle",
65
66
  "misc/article-menu",
66
67
  "misc/common-list",
67
68
  "misc/google-translate"
@@ -151,7 +151,8 @@ code {
151
151
  padding: 1px 5px;
152
152
  border-radius: 3px;
153
153
  color: #fff;
154
- background-color: #545454;
154
+ background-color: #787878;
155
+ margin: 0 5px;
155
156
  }
156
157
 
157
158
  pre {
@@ -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
+
@@ -11,7 +11,7 @@ html {
11
11
  &[data-scroll-status='top'] {
12
12
  header.site-header-transparent {
13
13
  height: 0;
14
- margin-top: 20px;
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: #777;
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
 
@@ -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').forEach((block) => {
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 cls of outer.classList) {
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.5.5
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-09-29 00:00:00.000000000 Z
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