jekyll-theme-yat 1.1.0 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- 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"
|