jekyll-theme-yat 1.1.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/extensions/hashlocate.html +16 -15
- data/_includes/extensions/trianglify.html +8 -5
- data/_includes/head.html +2 -1
- data/_includes/sidebar/article-menu.html +39 -38
- data/_includes/views/banner.html +9 -6
- data/_includes/views/header.html +91 -39
- data/_layouts/framework.html +1 -1
- data/_sass/misc/common-list.scss +0 -2
- data/_sass/misc/google-translate.scss +10 -15
- data/_sass/yat/_base.scss +1 -1
- data/_sass/yat/_layout.scss +87 -25
- data/_sass/yat.scss +1 -1
- data/assets/{main.scss → css/main.scss} +0 -0
- data/assets/js/main.js +57 -0
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 199b703930a9c7789ba8aa41c785b78c60297f4deb8ecae19a0931279a041a43
|
4
|
+
data.tar.gz: 5bb14cf3155134a0adb196352f8fdf50b40e0867644979bd11423cb79f2c7eba
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '08e63a1440c99e39c40acede34c082b69c30fbf1aead084ed7054ec8359aa01bb0bd4e798242594c544872ac4febde68d5c3ca237f0dc618ef1fb7bfa0c5cece'
|
7
|
+
data.tar.gz: 141aa0359967926e9dc208297e31cf1799ddb6dd2e676f46d8e2833758886722f54f33f820b53d8d652a8192ac7c3513c8608eeda78c9d1428e8c86d1eeae663
|
@@ -7,30 +7,31 @@
|
|
7
7
|
return;
|
8
8
|
}
|
9
9
|
|
10
|
-
var headerHeight = 0;
|
11
10
|
var header = document.querySelector('header');
|
12
|
-
|
13
|
-
|
14
|
-
}
|
15
|
-
var supportPageOffset = window.pageXOffset !== undefined;
|
16
|
-
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
|
17
|
-
|
18
|
-
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
|
19
|
-
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
|
11
|
+
var scrollPos = getScrollPos();
|
12
|
+
var offsetY = element.offsetTop - (header.offsetTop + header.offsetHeight + 20);
|
20
13
|
|
21
|
-
|
22
|
-
if (y === offsetY) {
|
14
|
+
if (offsetY == scrollPos.y) {
|
23
15
|
return;
|
24
16
|
}
|
25
17
|
|
26
|
-
|
18
|
+
if (header.offsetTop == 0 && offsetY > scrollPos.y) {
|
19
|
+
offsetY += header.offsetHeight;
|
20
|
+
} else if (header.offsetTop < 0 && offsetY < scrollPos.y) {
|
21
|
+
offsetY -= header.offsetHeight;
|
22
|
+
}
|
23
|
+
|
24
|
+
smoothScrollTo(offsetY);
|
27
25
|
}
|
28
26
|
|
29
27
|
// The first event occurred
|
30
|
-
|
31
|
-
|
32
|
-
|
28
|
+
window.addEventListener('load', function(event) {
|
29
|
+
if (window.location.hash) {
|
30
|
+
hashLocate(window.location.hash);
|
31
|
+
}
|
32
|
+
});
|
33
33
|
|
34
|
+
// The first event occurred
|
34
35
|
window.addEventListener('click', function(event) {
|
35
36
|
if (event.target.matches('a')) {
|
36
37
|
hashLocate(event.target.getAttribute('href'));
|
@@ -8,16 +8,19 @@
|
|
8
8
|
|
9
9
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
|
10
10
|
<script>
|
11
|
-
function setRandomBgImage(selector, seed) {
|
11
|
+
function setRandomBgImage(selector, seed, zoom) {
|
12
12
|
var element = document.querySelector(selector);
|
13
13
|
if (!element) return;
|
14
14
|
var pattern = Trianglify({
|
15
|
-
width: screen.width,
|
16
|
-
height: element.offsetHeight,
|
15
|
+
width: screen.width * zoom,
|
16
|
+
height: element.offsetHeight * zoom,
|
17
17
|
seed: seed
|
18
18
|
});
|
19
|
-
|
19
|
+
|
20
|
+
var image = document.createElement("div");
|
21
|
+
image.style.backgroundImage = "url(" + pattern.png() + ")";
|
22
|
+
element.appendChild(image);
|
20
23
|
}
|
21
24
|
|
22
|
-
setRandomBgImage('{{ selector }}', '{{ seed }}');
|
25
|
+
setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
|
23
26
|
</script>
|
data/_includes/head.html
CHANGED
@@ -6,7 +6,8 @@
|
|
6
6
|
{%- seo -%}
|
7
7
|
<link rel="shortcut icon" href="{{ site.favicon }}">
|
8
8
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
9
|
-
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
|
9
|
+
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
|
10
|
+
<script src="{{ "/assets/js/main.js" | relative_url }}"></script>
|
10
11
|
{%- feed_meta -%}
|
11
12
|
{%- if jekyll.environment == 'production' and site.google_analytics -%}
|
12
13
|
{%- include extensions/google-analytics.html -%}
|
@@ -12,48 +12,49 @@
|
|
12
12
|
</div>
|
13
13
|
|
14
14
|
<script>
|
15
|
-
|
16
|
-
|
15
|
+
function generateContent() {
|
16
|
+
var menu = document.querySelector(".post-menu .post-menu-content");
|
17
|
+
var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
|
17
18
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
19
|
+
// Generate post menu
|
20
|
+
var menuHTML = '';
|
21
|
+
for (var i = 0; i < headings.length; i++) {
|
22
|
+
var h = headings[i];
|
23
|
+
menuHTML += (
|
24
|
+
'<li class="h-' + h.tagName.toLowerCase() + '">'
|
25
|
+
+ '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
|
26
|
+
}
|
25
27
|
|
26
|
-
|
28
|
+
menu.innerHTML = '<ul>' + menuHTML + '</ul>';
|
27
29
|
|
28
|
-
|
29
|
-
|
30
|
-
var header = document.querySelector('header');
|
31
|
-
if (header) {
|
32
|
-
offsetHeight = header.offsetHeight + 12;
|
33
|
-
}
|
30
|
+
// The header element
|
31
|
+
var header = document.querySelector('header.site-header');
|
34
32
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
curActive
|
47
|
-
|
48
|
-
|
49
|
-
|
33
|
+
// Active the menu item
|
34
|
+
window.addEventListener('scroll', function (event) {
|
35
|
+
var lastActive = menu.querySelector('.active');
|
36
|
+
var changed = true;
|
37
|
+
for (var i = headings.length - 1; i >= 0; i--) {
|
38
|
+
var h = headings[i];
|
39
|
+
var clientRect = h.getBoundingClientRect();
|
40
|
+
var headerHeight = header.offsetTop + header.offsetHeight + 20;
|
41
|
+
if (clientRect.top <= headerHeight) {
|
42
|
+
var id = 'h-' + h.getAttribute('id');
|
43
|
+
var curActive = menu.querySelector('a[href="#' + id + '"]');
|
44
|
+
if (curActive) {
|
45
|
+
curActive.classList.add('active');
|
46
|
+
}
|
47
|
+
if (lastActive == curActive) {
|
48
|
+
changed = false;
|
49
|
+
}
|
50
|
+
break;
|
50
51
|
}
|
51
|
-
break;
|
52
52
|
}
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
}
|
53
|
+
if (lastActive && changed) {
|
54
|
+
lastActive.classList.remove('active');
|
55
|
+
}
|
56
|
+
event.preventDefault();
|
57
|
+
});
|
58
|
+
}
|
59
|
+
generateContent();
|
59
60
|
</script>
|
data/_includes/views/banner.html
CHANGED
@@ -44,12 +44,14 @@
|
|
44
44
|
|
45
45
|
{%- else -%}
|
46
46
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
47
|
+
<div class="page-banner-default">
|
48
|
+
<h1 class="page-banner-heading">
|
49
|
+
{{ heading | default: page.title | escape }}
|
50
|
+
</h1>
|
51
|
+
<h3 class="page-banner-subheading">
|
52
|
+
{{ subheading | default: page.subtitle | escape }}
|
53
|
+
</h3>
|
54
|
+
</div>
|
53
55
|
|
54
56
|
{%- endif -%}
|
55
57
|
</div>
|
@@ -72,6 +74,7 @@
|
|
72
74
|
|
73
75
|
{%- endif -%}
|
74
76
|
|
77
|
+
{%- assign zoom = 1.5 -%}
|
75
78
|
{%- include extensions/trianglify.html -%}
|
76
79
|
|
77
80
|
{%- endif -%}
|
data/_includes/views/header.html
CHANGED
@@ -1,44 +1,96 @@
|
|
1
|
-
|
1
|
+
|
2
|
+
{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
|
3
|
+
{% assign name = 'banner' %}
|
4
|
+
{%- include functions.html func='get_value' -%}
|
5
|
+
{% assign banner = return %}
|
6
|
+
|
7
|
+
{%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
|
8
|
+
{% assign name = 'header_transparent' %}
|
9
|
+
{%- include functions.html func='get_value' -%}
|
10
|
+
{% assign header_transparent = return %}
|
11
|
+
|
12
|
+
{%- if banner and header_transparent -%}
|
13
|
+
{%- assign header_transparent_class = "site-header-transparent" -%}
|
14
|
+
{%- endif -%}
|
15
|
+
|
16
|
+
<header class="site-header {{ header_transparent_class }}" role="banner">
|
2
17
|
|
3
18
|
<div class="wrapper">
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
<
|
14
|
-
|
15
|
-
<
|
16
|
-
<
|
17
|
-
<
|
18
|
-
|
19
|
-
|
20
|
-
</label>
|
21
|
-
|
22
|
-
<div class="trigger">
|
23
|
-
{%- for path in page_paths -%}
|
24
|
-
{%- assign my_page = site.pages | where: "path", path | first -%}
|
25
|
-
{%- if my_page.title -%}
|
26
|
-
<a class="page-link" href="{{ my_page.url | relative_url }}">
|
27
|
-
{{ my_page.title | upcase | escape }}
|
28
|
-
</a>
|
29
|
-
{%- endif -%}
|
30
|
-
{%- endfor -%}
|
31
|
-
|
32
|
-
{%- assign name = 'translate_langs' -%}
|
33
|
-
{%- include functions.html func='get_value' -%}
|
34
|
-
{%- assign translate_langs = return -%}
|
35
|
-
{%- if translate_langs.size > 0 -%}
|
36
|
-
<span class="page-link">
|
37
|
-
{%- include extensions/google-translate.html -%}
|
19
|
+
<div class="site-header-inner">
|
20
|
+
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
|
21
|
+
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
22
|
+
|
23
|
+
<span class="site-brand">
|
24
|
+
{%- include views/site-brand.html -%}
|
25
|
+
</span>
|
26
|
+
|
27
|
+
{%- if page_paths -%}
|
28
|
+
<nav class="site-nav">
|
29
|
+
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
30
|
+
<label for="nav-trigger">
|
31
|
+
<span class="menu-icon">
|
32
|
+
<svg viewBox="0 0 18 15" width="18px" height="15px">
|
33
|
+
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
|
34
|
+
</svg>
|
38
35
|
</span>
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
36
|
+
</label>
|
37
|
+
|
38
|
+
<div class="trigger">
|
39
|
+
{%- for path in page_paths -%}
|
40
|
+
{%- assign my_page = site.pages | where: "path", path | first -%}
|
41
|
+
{%- if my_page.title -%}
|
42
|
+
<a class="page-link" href="{{ my_page.url | relative_url }}">
|
43
|
+
{{ my_page.title | upcase | escape }}
|
44
|
+
</a>
|
45
|
+
{%- endif -%}
|
46
|
+
{%- endfor -%}
|
47
|
+
|
48
|
+
{%- assign name = 'translate_langs' -%}
|
49
|
+
{%- include functions.html func='get_value' -%}
|
50
|
+
{%- assign translate_langs = return -%}
|
51
|
+
{%- if translate_langs.size > 0 -%}
|
52
|
+
<span class="page-link">
|
53
|
+
{%- include extensions/google-translate.html -%}
|
54
|
+
</span>
|
55
|
+
{%- endif -%}
|
56
|
+
</div>
|
57
|
+
</nav>
|
58
|
+
{%- endif -%}
|
59
|
+
</div>
|
43
60
|
</div>
|
44
61
|
</header>
|
62
|
+
|
63
|
+
<script>
|
64
|
+
(function() {
|
65
|
+
var lastScrollY = getScrollPos().y;
|
66
|
+
var documentElement = document.documentElement;
|
67
|
+
|
68
|
+
function storeScrollData() {
|
69
|
+
var y = getScrollPos().y;
|
70
|
+
|
71
|
+
{%- if banner and header_transparent -%}
|
72
|
+
documentElement.setAttribute("data-header-transparent", "");
|
73
|
+
{%- endif -%}
|
74
|
+
|
75
|
+
var scrollStatus = "";
|
76
|
+
|
77
|
+
if (y <= 0) {
|
78
|
+
scrollStatus = "top";
|
79
|
+
} else if ((window.innerHeight + y) >= document.body.offsetHeight) {
|
80
|
+
scrollStatus = "bottom";
|
81
|
+
} else {
|
82
|
+
var isScrollDown = (y - lastScrollY > 0) ? true : false;
|
83
|
+
scrollStatus = isScrollDown ? "down" : "up";
|
84
|
+
}
|
85
|
+
|
86
|
+
lastScrollY = y;
|
87
|
+
documentElement.setAttribute("data-scroll-status", scrollStatus);
|
88
|
+
}
|
89
|
+
|
90
|
+
window.addEventListener('scroll', function(e) {
|
91
|
+
storeScrollData();
|
92
|
+
});
|
93
|
+
|
94
|
+
storeScrollData();
|
95
|
+
})();
|
96
|
+
</script>
|
data/_layouts/framework.html
CHANGED
data/_sass/misc/common-list.scss
CHANGED
@@ -122,15 +122,19 @@ 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
|
+
padding-top: 8px;
|
134
|
+
padding-bottom: 8px;
|
135
|
+
visibility: hidden;
|
131
136
|
|
132
137
|
li {
|
133
|
-
background: lighten($theme-color, 5%);
|
134
138
|
padding: 5px;
|
135
139
|
|
136
140
|
a {
|
@@ -140,24 +144,14 @@ body {
|
|
140
144
|
img {
|
141
145
|
width: 24px;
|
142
146
|
max-height: 24px;
|
147
|
+
border: none;
|
143
148
|
}
|
144
149
|
}
|
145
150
|
|
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
151
|
&:hover {
|
157
152
|
@extend .ct-language-selected;
|
158
153
|
}
|
159
154
|
}
|
160
|
-
|
161
155
|
}
|
162
156
|
|
163
157
|
.list-unstyled {
|
@@ -169,7 +163,7 @@ body {
|
|
169
163
|
.ct-language {
|
170
164
|
display: inline-block;
|
171
165
|
position: relative;
|
172
|
-
background: #fefefe2b;
|
166
|
+
background-color: #fefefe2b;
|
173
167
|
padding: 3px 10px;
|
174
168
|
border-radius: 3px;
|
175
169
|
|
@@ -177,8 +171,9 @@ body {
|
|
177
171
|
cursor: pointer;
|
178
172
|
|
179
173
|
.ct-language-dropdown {
|
180
|
-
|
174
|
+
margin-top: 8px;
|
181
175
|
max-height: 10000px;
|
176
|
+
visibility: visible;
|
182
177
|
}
|
183
178
|
}
|
184
179
|
|
data/_sass/yat/_base.scss
CHANGED
data/_sass/yat/_layout.scss
CHANGED
@@ -1,10 +1,51 @@
|
|
1
|
+
/**
|
2
|
+
* Animation for transparent header
|
3
|
+
*/
|
4
|
+
html {
|
5
|
+
&[data-header-transparent] {
|
6
|
+
header.site-header {
|
7
|
+
position: fixed;
|
8
|
+
}
|
9
|
+
}
|
10
|
+
|
11
|
+
&[data-scroll-status='top'] {
|
12
|
+
header.site-header-transparent {
|
13
|
+
height: 0;
|
14
|
+
|
15
|
+
&.site-header {
|
16
|
+
text-shadow: 0 0 2px #505050a0;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
footer.site-footer {
|
21
|
+
color: #888;
|
22
|
+
background-color: transparent;
|
23
|
+
|
24
|
+
.site-footer-inner {
|
25
|
+
border-top: solid 1px #eee;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
&[data-scroll-status='down'] {
|
31
|
+
header.site-header {
|
32
|
+
top: -$header-height;
|
33
|
+
}
|
34
|
+
|
35
|
+
.framework .sidebar {
|
36
|
+
top: 20px;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
1
41
|
/**
|
2
42
|
* Site header
|
3
43
|
*/
|
4
44
|
.site-header {
|
5
|
-
background: $header-background-color;
|
45
|
+
background-color: $header-background-color;
|
6
46
|
height: $header-height;
|
7
47
|
width: 100%;
|
48
|
+
transition: height 0.2s, text-shadow 0.2s, top 0.2s;
|
8
49
|
|
9
50
|
// Positioning context for the mobile navigation icon
|
10
51
|
@include flex-sticky(0);
|
@@ -13,26 +54,28 @@
|
|
13
54
|
a {
|
14
55
|
text-decoration: none;
|
15
56
|
}
|
57
|
+
|
58
|
+
.site-header-inner {
|
59
|
+
position: relative;
|
60
|
+
}
|
16
61
|
}
|
17
62
|
|
18
63
|
.site-brand {
|
19
|
-
|
64
|
+
line-height: $header-height;
|
20
65
|
margin-right: 50px;
|
21
66
|
|
22
67
|
.site-brand-inner {
|
23
68
|
@include relative-font-size(1.125);
|
24
69
|
font-weight: $base-font-weight;
|
25
|
-
filter: drop-shadow(0 0 2px #08080880);
|
26
|
-
text-shadow: 0 0 2px #080808d0;
|
27
70
|
letter-spacing: -1px;
|
28
|
-
transition:
|
71
|
+
transition: filter 0.2s;
|
29
72
|
|
30
73
|
&, &:visited {
|
31
74
|
color: $header-text-color;
|
32
75
|
}
|
33
76
|
|
34
77
|
&:hover {
|
35
|
-
filter: drop-shadow(0 0
|
78
|
+
filter: drop-shadow(0 0 2px #08080880);
|
36
79
|
}
|
37
80
|
|
38
81
|
.site-favicon {
|
@@ -45,8 +88,10 @@
|
|
45
88
|
|
46
89
|
.site-nav {
|
47
90
|
@include relative-font-size(1.025);
|
48
|
-
float: right;
|
49
91
|
line-height: $header-height;
|
92
|
+
position: absolute;
|
93
|
+
right: 0;
|
94
|
+
top: 0;
|
50
95
|
|
51
96
|
.nav-trigger {
|
52
97
|
display: none;
|
@@ -68,12 +113,11 @@
|
|
68
113
|
|
69
114
|
@include media-query($on-palm) {
|
70
115
|
position: absolute;
|
71
|
-
|
116
|
+
top: 0;
|
72
117
|
text-align: left;
|
73
118
|
|
74
119
|
label[for="nav-trigger"] {
|
75
120
|
display: block;
|
76
|
-
float: right;
|
77
121
|
z-index: 2;
|
78
122
|
cursor: pointer;
|
79
123
|
}
|
@@ -113,9 +157,14 @@
|
|
113
157
|
.site-footer {
|
114
158
|
@include relative-font-size(0.9);
|
115
159
|
color: $footer-text-color;
|
116
|
-
background: $footer-background-color;
|
117
|
-
padding: $spacing-unit * 0.8 0;
|
160
|
+
background-color: $footer-background-color;
|
118
161
|
text-align: left;
|
162
|
+
transition: background-color 0.2s;
|
163
|
+
|
164
|
+
.site-footer-inner {
|
165
|
+
transition: border-top 0.2s;
|
166
|
+
padding: $spacing-unit * 0.8 0;
|
167
|
+
}
|
119
168
|
|
120
169
|
a {
|
121
170
|
$a-color: invert(mix(invert($theme-color), #0030ae));
|
@@ -151,6 +200,7 @@
|
|
151
200
|
*/
|
152
201
|
.page-content {
|
153
202
|
@extend %flex-1; /* <-- Keep footer on the bottom */
|
203
|
+
-ms-flex: none; /* <-- Fix IE footer issue */
|
154
204
|
padding: $spacing-unit * 1.5 0;
|
155
205
|
}
|
156
206
|
|
@@ -184,7 +234,7 @@
|
|
184
234
|
@include relative-font-size(1.5);
|
185
235
|
|
186
236
|
display: block;
|
187
|
-
font-weight:
|
237
|
+
font-weight: $base-font-weight * 1.5;
|
188
238
|
}
|
189
239
|
}
|
190
240
|
|
@@ -271,6 +321,7 @@
|
|
271
321
|
position: relative;
|
272
322
|
height: $banner-height;
|
273
323
|
background-color: $banner-background;
|
324
|
+
transition: height 0.2s;
|
274
325
|
|
275
326
|
.page-banner-img {
|
276
327
|
position: absolute;
|
@@ -294,23 +345,33 @@
|
|
294
345
|
padding: 10px 5px;
|
295
346
|
text-shadow: 1px 1px 2px #333;
|
296
347
|
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
348
|
+
& > *:first-child {
|
349
|
+
margin: 0;
|
350
|
+
|
351
|
+
> :nth-child(1) {
|
352
|
+
@include relative-font-size(2.825);
|
353
|
+
letter-spacing: -1px;
|
354
|
+
line-height: 1;
|
355
|
+
margin-bottom: 10px;
|
302
356
|
|
303
|
-
|
304
|
-
|
357
|
+
@include media-query($on-palm) {
|
358
|
+
@include relative-font-size(2.425);
|
359
|
+
}
|
305
360
|
}
|
306
|
-
}
|
307
361
|
|
308
|
-
|
362
|
+
> :nth-child(2) {
|
363
|
+
font-weight: $base-font-weight * 1.5;
|
364
|
+
}
|
309
365
|
|
310
|
-
|
311
|
-
|
366
|
+
> :last-child {
|
367
|
+
margin-bottom: 0;
|
368
|
+
}
|
312
369
|
}
|
313
370
|
}
|
371
|
+
|
372
|
+
@include media-query($on-palm) {
|
373
|
+
height: $banner-height / 1.5;
|
374
|
+
}
|
314
375
|
}
|
315
376
|
|
316
377
|
|
@@ -318,7 +379,7 @@
|
|
318
379
|
* Layout and sidebar
|
319
380
|
*/
|
320
381
|
.framework {
|
321
|
-
@extend %flex
|
382
|
+
@extend %flex;
|
322
383
|
|
323
384
|
.main {
|
324
385
|
@extend %flex-1;
|
@@ -326,6 +387,7 @@
|
|
326
387
|
|
327
388
|
.sidebar {
|
328
389
|
padding-left: 8px;
|
390
|
+
transition: top 0.2s, display 0.2s;
|
329
391
|
|
330
392
|
@include flex-sticky($header-height + 20px);
|
331
393
|
|
@@ -347,7 +409,7 @@
|
|
347
409
|
}
|
348
410
|
|
349
411
|
.segment-name {
|
350
|
-
font-weight:
|
412
|
+
font-weight: $base-font-weight * 1.5;
|
351
413
|
margin-bottom: 8px;
|
352
414
|
position: relative;
|
353
415
|
|
data/_sass/yat.scss
CHANGED
@@ -31,7 +31,7 @@ $footer-height: $header-height * 1.05 !default;
|
|
31
31
|
$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
|
32
32
|
$footer-background-color: darken($theme-color, 5%) !default;
|
33
33
|
|
34
|
-
$banner-height:
|
34
|
+
$banner-height: 400px !default;
|
35
35
|
$banner-text-color: lighten($white-color, 0%) !default;
|
36
36
|
$banner-background: darken(#333, 5%) !default;
|
37
37
|
|
File without changes
|
data/assets/js/main.js
ADDED
@@ -0,0 +1,57 @@
|
|
1
|
+
// Fix DOM matches function
|
2
|
+
if (!Element.prototype.matches) {
|
3
|
+
Element.prototype.matches =
|
4
|
+
Element.prototype.matchesSelector ||
|
5
|
+
Element.prototype.mozMatchesSelector ||
|
6
|
+
Element.prototype.msMatchesSelector ||
|
7
|
+
Element.prototype.oMatchesSelector ||
|
8
|
+
Element.prototype.webkitMatchesSelector ||
|
9
|
+
function(s) {
|
10
|
+
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
|
11
|
+
i = matches.length;
|
12
|
+
while (--i >= 0 && matches.item(i) !== this) {}
|
13
|
+
return i > -1;
|
14
|
+
};
|
15
|
+
}
|
16
|
+
|
17
|
+
// Get Scroll position
|
18
|
+
function getScrollPos() {
|
19
|
+
var supportPageOffset = window.pageXOffset !== undefined;
|
20
|
+
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
|
21
|
+
|
22
|
+
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
|
23
|
+
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
|
24
|
+
|
25
|
+
return { x: x, y: y };
|
26
|
+
}
|
27
|
+
|
28
|
+
var _scrollTimer = [];
|
29
|
+
|
30
|
+
// Smooth scroll
|
31
|
+
function smoothScrollTo(y, time) {
|
32
|
+
time = time == undefined ? 500 : time;
|
33
|
+
|
34
|
+
var scrollPos = getScrollPos();
|
35
|
+
var count = 60;
|
36
|
+
var length = (y - scrollPos.y);
|
37
|
+
|
38
|
+
function easeInOut(k) {
|
39
|
+
return .5 * (Math.sin((k - .5) * Math.PI) + 1);
|
40
|
+
}
|
41
|
+
|
42
|
+
for (var i = _scrollTimer.length - 1; i >= 0; i--) {
|
43
|
+
clearTimeout(_scrollTimer[i]);
|
44
|
+
}
|
45
|
+
|
46
|
+
for (var i = 0; i <= count; i++) {
|
47
|
+
(function() {
|
48
|
+
var cur = i;
|
49
|
+
_scrollTimer[cur] = setTimeout(function() {
|
50
|
+
window.scrollTo(
|
51
|
+
scrollPos.x,
|
52
|
+
scrollPos.y + length * easeInOut(cur/count)
|
53
|
+
);
|
54
|
+
}, (time / count) * cur);
|
55
|
+
})();
|
56
|
+
}
|
57
|
+
}
|
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.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- jeffreytse
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-09-
|
11
|
+
date: 2019-09-24 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -166,7 +166,8 @@ files:
|
|
166
166
|
- _sass/yat/_base.scss
|
167
167
|
- _sass/yat/_layout.scss
|
168
168
|
- _sass/yat/_syntax-highlighting.scss
|
169
|
-
- assets/main.scss
|
169
|
+
- assets/css/main.scss
|
170
|
+
- assets/js/main.js
|
170
171
|
homepage: https://github.com/jeffreytse/jekyll-theme-yat
|
171
172
|
licenses:
|
172
173
|
- MIT
|