jekyll-theme-yat 1.1.0 → 1.4.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 +20 -9
- data/_data/translate_langs.yml +0 -4
- data/_includes/extensions/comments/gitment.html +2 -2
- data/_includes/extensions/hashlocate.html +20 -16
- data/_includes/extensions/trianglify.html +8 -5
- data/_includes/functions/get_reading_time.html +41 -0
- data/_includes/head.html +10 -2
- data/_includes/sidebar/article-menu.html +50 -39
- data/_includes/views/article.html +0 -2
- data/_includes/views/banner.html +9 -39
- data/_includes/views/header.html +89 -39
- data/_includes/views/pagination.html +16 -3
- data/_includes/views/paginator.html +10 -6
- data/_includes/views/post-header.html +16 -2
- data/_layouts/articles.html +1 -1
- data/_layouts/framework.html +1 -1
- data/_layouts/post.html +40 -33
- data/_sass/misc/article-menu.scss +28 -14
- data/_sass/misc/common-list.scss +5 -9
- data/_sass/misc/google-translate.scss +22 -16
- data/_sass/yat.scss +11 -12
- data/_sass/yat/_base.scss +49 -16
- data/_sass/yat/_layout.scss +401 -42
- data/assets/{main.scss → css/main.scss} +4 -8
- data/assets/js/main.js +71 -0
- metadata +25 -10
- data/_sass/yat/_syntax-highlighting.scss +0 -105
|
@@ -11,16 +11,29 @@
|
|
|
11
11
|
{%- for post in paginator.posts -%}
|
|
12
12
|
<li>
|
|
13
13
|
{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
|
|
15
|
+
{% assign article = post.content %}
|
|
16
|
+
{%- include functions.html func='get_reading_time' -%}
|
|
17
|
+
{% assign reading_time = return %}
|
|
18
|
+
|
|
19
|
+
<h2 class="post-title">
|
|
16
20
|
{%- assign post_url = post.url | relative_url -%}
|
|
17
21
|
<a class="post-link" href="{{ post_url }}">
|
|
18
22
|
{{ post.title | escape }}
|
|
19
23
|
</a>
|
|
20
|
-
</
|
|
24
|
+
</h2>
|
|
25
|
+
<div class="post-meta">
|
|
26
|
+
<span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
|
|
27
|
+
<span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
|
|
28
|
+
</div>
|
|
21
29
|
<p class="post-excerpt">
|
|
22
30
|
{{ post.content | strip_html | truncatewords: 50 }}
|
|
23
31
|
</p>
|
|
32
|
+
<div class="post-tags">
|
|
33
|
+
{%- for tag in post.tags -%}
|
|
34
|
+
<a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
|
|
35
|
+
{%- endfor -%}
|
|
36
|
+
</div>
|
|
24
37
|
</li>
|
|
25
38
|
{%- endfor -%}
|
|
26
39
|
</ul>
|
|
@@ -3,19 +3,23 @@
|
|
|
3
3
|
{% endif %}
|
|
4
4
|
|
|
5
5
|
{% if paginator.posts.size > 0 %}
|
|
6
|
-
<div class="
|
|
6
|
+
<div class="paginator">
|
|
7
|
+
<span class="previous">
|
|
7
8
|
{% if paginator.previous_page %}
|
|
8
|
-
<a href="{{ paginator.previous_page_path }}"
|
|
9
|
+
<a href="{{ paginator.previous_page_path }}">Prev</a>
|
|
9
10
|
{% else %}
|
|
10
|
-
<span
|
|
11
|
+
<span>Prev</span>
|
|
11
12
|
{% endif %}
|
|
13
|
+
</span>
|
|
12
14
|
|
|
13
|
-
<span> {{ paginator.page }}/{{ paginator.total_pages }}</span>
|
|
15
|
+
<span class="indicator"> {{ paginator.page }}/{{ paginator.total_pages }}</span>
|
|
14
16
|
|
|
17
|
+
<span class="next">
|
|
15
18
|
{% if paginator.next_page %}
|
|
16
|
-
<a href="{{ paginator.next_page_path }}">Next
|
|
19
|
+
<a href="{{ paginator.next_page_path }}">Next</a>
|
|
17
20
|
{% else %}
|
|
18
|
-
<span>Next
|
|
21
|
+
<span>Next</span>
|
|
19
22
|
{% endif %}
|
|
23
|
+
</span>
|
|
20
24
|
</div>
|
|
21
25
|
{% endif %}
|
|
@@ -1,11 +1,25 @@
|
|
|
1
1
|
<header class="post-header">
|
|
2
2
|
<h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
|
|
3
|
-
<h3>{{ subheading | default: page.subtitle | escape }}</h3>
|
|
3
|
+
<h3 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h3>
|
|
4
4
|
|
|
5
5
|
<p class="post-meta">
|
|
6
6
|
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
|
7
7
|
{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
|
|
8
|
-
{{ page.date | date: date_format }}
|
|
8
|
+
<i class="fa fa-calendar"></i> {{ page.date | date: date_format }}
|
|
9
9
|
</time>
|
|
10
|
+
|
|
11
|
+
{% assign article = page.content %}
|
|
12
|
+
{%- include functions.html func='get_reading_time' -%}
|
|
13
|
+
{% assign reading_time = return %}
|
|
14
|
+
<span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
|
|
10
15
|
</p>
|
|
16
|
+
|
|
17
|
+
{%- if page.tags.size > 0 -%}
|
|
18
|
+
<div class="post-tags">
|
|
19
|
+
{%- for tag in page.tags -%}
|
|
20
|
+
<a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
|
|
21
|
+
{%- endfor -%}
|
|
22
|
+
</div>
|
|
23
|
+
{%- endif -%}
|
|
24
|
+
|
|
11
25
|
</header>
|
data/_layouts/articles.html
CHANGED
data/_layouts/framework.html
CHANGED
data/_layouts/post.html
CHANGED
|
@@ -1,53 +1,60 @@
|
|
|
1
1
|
---
|
|
2
2
|
layout: framework
|
|
3
|
-
banner:
|
|
3
|
+
banner:
|
|
4
4
|
banner_html: post-header.html
|
|
5
5
|
sidebar:
|
|
6
6
|
- article-menu
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
<div class="post">
|
|
10
|
-
|
|
10
|
+
<section>
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
{%- assign name = 'banner' -%}
|
|
13
|
+
{%- include functions.html func='get_value' -%}
|
|
14
|
+
{%- assign banner = return -%}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
{%- if banner == nil -%}
|
|
17
|
+
{%- include views/post-header.html -%}
|
|
18
|
+
{%- endif -%}
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
{%- include views/article.html -%}
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
<div class="post-nav">
|
|
23
|
+
{%- if page.previous -%}
|
|
24
|
+
<a class="previous" href="{{ page.previous.url }}" title="{{
|
|
25
|
+
page.previous.title | escape }}">{{ page.previous.title | escape | truncatewords: 6 }}</a>
|
|
26
|
+
{%- else -%}
|
|
27
|
+
<span></span>
|
|
28
|
+
{%- endif -%}
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
{%- if page.next -%}
|
|
31
|
+
<a class="next" href="{{ page.next.url }}" title="{{ page.next.title | escape }}">{{ page.next.title | escape | truncatewords: 6 }}</a>
|
|
32
|
+
{%- else -%}
|
|
33
|
+
<span></span>
|
|
34
|
+
{%- endif -%}
|
|
35
|
+
</div>
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
<div class="post-related">
|
|
38
|
+
<div>Related Articles</div>
|
|
39
|
+
<ul>
|
|
40
|
+
{% assign posts = site[page.collection] | sample:4 %}
|
|
41
|
+
{%- for post in posts -%}
|
|
42
|
+
<li><a class="post-link" href="{{post.url}}" title="{{ page.next.title | escape }}">{{ post.title | escape | truncatewords: 12 }}</a></li>
|
|
43
|
+
{%- endfor -%}
|
|
44
|
+
</ul>
|
|
45
|
+
</div>
|
|
37
46
|
|
|
38
|
-
|
|
39
|
-
{%- include extensions/comments/disqus.html -%}
|
|
40
|
-
{%- endif -%}
|
|
47
|
+
{%- if page.comments != false -%}
|
|
41
48
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
49
|
+
{%- if site.disqus.shortname -%}
|
|
50
|
+
{%- include extensions/comments/disqus.html -%}
|
|
51
|
+
{%- endif -%}
|
|
45
52
|
|
|
46
|
-
|
|
53
|
+
{%- if site.gitment.username -%}
|
|
54
|
+
{%- include extensions/comments/gitment.html -%}
|
|
55
|
+
{%- endif -%}
|
|
47
56
|
|
|
48
|
-
|
|
57
|
+
{%- endif -%}
|
|
49
58
|
|
|
50
|
-
|
|
59
|
+
</section>
|
|
51
60
|
</div>
|
|
52
|
-
|
|
53
|
-
|
|
@@ -7,40 +7,54 @@
|
|
|
7
7
|
max-width: 250px;
|
|
8
8
|
|
|
9
9
|
.post-menu-title {
|
|
10
|
-
font-size: $base-font-size * 1.
|
|
11
|
-
margin-bottom:
|
|
10
|
+
font-size: $base-font-size * 1.5;
|
|
11
|
+
margin-bottom: 14px;
|
|
12
12
|
font-weight: 600;
|
|
13
|
-
color: #
|
|
14
|
-
|
|
15
|
-
&:before {
|
|
16
|
-
content: '\f02e';
|
|
17
|
-
margin-right: 5px;
|
|
18
|
-
font-size: $base-font-size * 1.15;
|
|
19
|
-
}
|
|
13
|
+
color: #222;
|
|
20
14
|
}
|
|
21
15
|
|
|
22
16
|
.post-menu-content {
|
|
23
17
|
ul {
|
|
18
|
+
border-left: 1px solid #e9ecef;
|
|
19
|
+
$indent: $base-font-size / 4;
|
|
20
|
+
$active-bgcolor: #ecebec;
|
|
21
|
+
|
|
24
22
|
@for $i from 2 to 7 {
|
|
25
23
|
.h-h#{$i} {
|
|
26
|
-
padding-
|
|
27
|
-
font-size:
|
|
24
|
+
padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
|
|
25
|
+
font-size: $base-font-size * 1.2;
|
|
26
|
+
line-height: 1.4;
|
|
28
27
|
}
|
|
29
28
|
}
|
|
30
29
|
|
|
31
30
|
a {
|
|
32
31
|
display: flex;
|
|
33
|
-
padding:
|
|
32
|
+
padding: 2px 8px;
|
|
33
|
+
color: darken($text-color, 10%);
|
|
34
34
|
|
|
35
35
|
* {
|
|
36
36
|
pointer-events: none;
|
|
37
37
|
}
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
text-decoration: none;
|
|
41
|
+
color: lighten($text-color, 20%)!important;
|
|
42
|
+
}
|
|
38
43
|
}
|
|
39
44
|
|
|
40
45
|
.active {
|
|
41
|
-
color:
|
|
42
|
-
background: mix(invert($theme-color), darkorange);
|
|
46
|
+
background-color: $active-bgcolor;
|
|
43
47
|
transition: background 0.5s;
|
|
48
|
+
border-left: 2px solid #202020;
|
|
49
|
+
margin-left: -2px;
|
|
50
|
+
|
|
51
|
+
&:hover {
|
|
52
|
+
background-color: lighten($active-bgcolor, 2%);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
a {
|
|
56
|
+
color: #121416;
|
|
57
|
+
}
|
|
44
58
|
}
|
|
45
59
|
}
|
|
46
60
|
}
|
data/_sass/misc/common-list.scss
CHANGED
|
@@ -3,10 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
.common-list {
|
|
5
5
|
@include relative-font-size(1.0);
|
|
6
|
-
|
|
7
|
-
background: #eaeaea;
|
|
8
|
-
box-shadow: 0px 0px 3px 0px #a9a9a9;
|
|
9
|
-
border-radius: 3px;
|
|
10
6
|
min-width: 200px;
|
|
11
7
|
|
|
12
8
|
ul {
|
|
@@ -15,7 +11,7 @@
|
|
|
15
11
|
}
|
|
16
12
|
|
|
17
13
|
li {
|
|
18
|
-
border-bottom: 1px
|
|
14
|
+
border-bottom: solid 1px #00000018;
|
|
19
15
|
|
|
20
16
|
&:last-child {
|
|
21
17
|
border-bottom: none;
|
|
@@ -26,12 +22,12 @@
|
|
|
26
22
|
justify-content: space-between;
|
|
27
23
|
padding: 8px 12px;
|
|
28
24
|
text-decoration: none;
|
|
29
|
-
font-weight:
|
|
30
|
-
color:
|
|
25
|
+
font-weight: normal;
|
|
26
|
+
color: $text-color;
|
|
31
27
|
transition: background 0.2s;
|
|
32
28
|
|
|
33
29
|
&:hover {
|
|
34
|
-
background: mix($theme-color, #
|
|
30
|
+
background: mix($theme-color, #eaeaea, 20%);
|
|
35
31
|
}
|
|
36
32
|
}
|
|
37
33
|
|
|
@@ -40,7 +36,7 @@
|
|
|
40
36
|
display: inline-block;
|
|
41
37
|
border-radius: 10px;
|
|
42
38
|
align-self: center;
|
|
43
|
-
background:
|
|
39
|
+
background: #000000bd;
|
|
44
40
|
padding: 0px 8px;
|
|
45
41
|
margin-left: 20px;
|
|
46
42
|
color: $white-color;
|
|
@@ -113,7 +113,7 @@ body {
|
|
|
113
113
|
// Main look
|
|
114
114
|
|
|
115
115
|
.ct-language-selected {
|
|
116
|
-
background:
|
|
116
|
+
background: darken($theme-color, 5%) !important;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.ct-language-dropdown {
|
|
@@ -122,17 +122,31 @@ body {
|
|
|
122
122
|
position: absolute;
|
|
123
123
|
top: 110%;
|
|
124
124
|
right: -10px;
|
|
125
|
+
background-color: lighten($theme-color, 5%);
|
|
125
126
|
-webkit-transition: all 0.25s ease-in-out;
|
|
126
127
|
transition: all 0.25s ease-in-out;
|
|
127
128
|
width: 100px;
|
|
128
129
|
text-align: center;
|
|
129
|
-
|
|
130
|
+
margin-top: 0;
|
|
130
131
|
z-index: 200;
|
|
132
|
+
border-radius: 3px;
|
|
133
|
+
visibility: hidden;
|
|
131
134
|
|
|
132
135
|
li {
|
|
133
|
-
background: lighten($theme-color, 5%);
|
|
134
136
|
padding: 5px;
|
|
135
137
|
|
|
138
|
+
&:first-child {
|
|
139
|
+
padding-top: 12px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&:last-child {
|
|
143
|
+
padding-bottom: 12px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&:not(:last-child) {
|
|
147
|
+
border-bottom: 1px solid rgba(0, 0, 0, .04);
|
|
148
|
+
}
|
|
149
|
+
|
|
136
150
|
a {
|
|
137
151
|
display: block;
|
|
138
152
|
color: invert($theme-color);
|
|
@@ -140,24 +154,14 @@ body {
|
|
|
140
154
|
img {
|
|
141
155
|
width: 24px;
|
|
142
156
|
max-height: 24px;
|
|
157
|
+
border: none;
|
|
143
158
|
}
|
|
144
159
|
}
|
|
145
160
|
|
|
146
|
-
&:first-child {
|
|
147
|
-
padding-top: 10px;
|
|
148
|
-
border-radius: 3px 3px 0 0;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
&:last-child {
|
|
152
|
-
padding-bottom: 10px;
|
|
153
|
-
border-radius: 0 0 3px 3px;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
161
|
&:hover {
|
|
157
162
|
@extend .ct-language-selected;
|
|
158
163
|
}
|
|
159
164
|
}
|
|
160
|
-
|
|
161
165
|
}
|
|
162
166
|
|
|
163
167
|
.list-unstyled {
|
|
@@ -169,7 +173,7 @@ body {
|
|
|
169
173
|
.ct-language {
|
|
170
174
|
display: inline-block;
|
|
171
175
|
position: relative;
|
|
172
|
-
background: #fefefe2b;
|
|
176
|
+
background-color: #fefefe2b;
|
|
173
177
|
padding: 3px 10px;
|
|
174
178
|
border-radius: 3px;
|
|
175
179
|
|
|
@@ -177,8 +181,10 @@ body {
|
|
|
177
181
|
cursor: pointer;
|
|
178
182
|
|
|
179
183
|
.ct-language-dropdown {
|
|
180
|
-
|
|
184
|
+
margin-top: 8px;
|
|
181
185
|
max-height: 10000px;
|
|
186
|
+
visibility: visible;
|
|
187
|
+
box-shadow: 0 0 9px 3px rgba(0, 0, 0, .06);
|
|
182
188
|
}
|
|
183
189
|
}
|
|
184
190
|
|
data/_sass/yat.scss
CHANGED
|
@@ -2,18 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
// Define defaults for each variable.
|
|
4
4
|
|
|
5
|
-
$base-font-family: "
|
|
6
|
-
|
|
7
|
-
$base-font-size: 14px !default;
|
|
5
|
+
$base-font-family: "Noto Sans Light", AppleSDGothicNeo-Regular, "Malgun Gothic", "Apple Color Emoji", Helvetica, Arial, Oswald, sans-serif, !default;
|
|
6
|
+
$base-font-size: 14px !default;
|
|
8
7
|
$base-font-weight: 400 !default;
|
|
9
8
|
$small-font-size: $base-font-size * 0.875 !default;
|
|
10
|
-
$base-line-height: 1.
|
|
9
|
+
$base-line-height: 1.6 !default;
|
|
11
10
|
|
|
12
11
|
$spacing-unit: 30px !default;
|
|
13
12
|
|
|
14
|
-
$text-color: #
|
|
15
|
-
$background-color: #
|
|
16
|
-
$brand-color: #
|
|
13
|
+
$text-color: #313b3f !default;
|
|
14
|
+
$background-color: #fff !default;
|
|
15
|
+
$brand-color: #ff5100 !default;
|
|
17
16
|
|
|
18
17
|
$grey-color: #828282 !default;
|
|
19
18
|
$grey-color-light: lighten($grey-color, 40%) !default;
|
|
@@ -24,16 +23,16 @@ $white-color: #fdfdfd !default;
|
|
|
24
23
|
$table-text-align: left !default;
|
|
25
24
|
|
|
26
25
|
$header-height: $base-line-height * $base-font-size * 2.85 !default;
|
|
27
|
-
$header-text-color:
|
|
26
|
+
$header-text-color: invert($theme-color) !default;
|
|
28
27
|
$header-background-color: $theme-color !default;
|
|
29
28
|
|
|
30
29
|
$footer-height: $header-height * 1.05 !default;
|
|
31
|
-
$footer-text-color:
|
|
30
|
+
$footer-text-color: lighten(invert($theme-color), 25%) !default;
|
|
32
31
|
$footer-background-color: darken($theme-color, 5%) !default;
|
|
33
32
|
|
|
34
|
-
$banner-height:
|
|
33
|
+
$banner-height: 640px !default;
|
|
35
34
|
$banner-text-color: lighten($white-color, 0%) !default;
|
|
36
|
-
$banner-background:
|
|
35
|
+
$banner-background: rgba(0,0,0,0.8) !default;
|
|
37
36
|
|
|
38
37
|
// Width of the content area
|
|
39
38
|
$content-width: 920px !default;
|
|
@@ -62,7 +61,7 @@ $on-laptop: 800px !default;
|
|
|
62
61
|
@import
|
|
63
62
|
"yat/base",
|
|
64
63
|
"yat/layout",
|
|
65
|
-
"yat/syntax-highlighting",
|
|
64
|
+
// "yat/syntax-highlighting",
|
|
66
65
|
"misc/article-menu",
|
|
67
66
|
"misc/common-list",
|
|
68
67
|
"misc/google-translate"
|