jekyll-theme-yat 1.1.0 → 1.2.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: 8e400b5095fe94ac655f5b7082ed7a1ed084d2f91df05628303d892261330214
4
- data.tar.gz: b7a07628a1f055962edc70349575cf25b4ee5bdde8720b2f41b476fd22ec3eb8
3
+ metadata.gz: 199b703930a9c7789ba8aa41c785b78c60297f4deb8ecae19a0931279a041a43
4
+ data.tar.gz: 5bb14cf3155134a0adb196352f8fdf50b40e0867644979bd11423cb79f2c7eba
5
5
  SHA512:
6
- metadata.gz: eb2bc388b34096a5044585ba79e176ce17da6ee8f18c8609230e875bd5bc6e84d77effd1b548d010afeba8d364ddf3d8d3a4bc1d9476734f2d0f2b4f05fccffa
7
- data.tar.gz: b4a421865b0ca37cefa41a3cebf68cd3c14b85e1665e1877df3e0e0adbbc33d87ef78c3c95fdfc2c1322ee49f33d17570b01902d747f9a802bef31e8f2a2e13e
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
- if (header) {
13
- headerHeight = header.offsetHeight;
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
- var offsetY = element.offsetTop - headerHeight - 12;
22
- if (y === offsetY) {
14
+ if (offsetY == scrollPos.y) {
23
15
  return;
24
16
  }
25
17
 
26
- window.scrollTo(x, offsetY);
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
- if (window.location.hash) {
31
- hashLocate(window.location.hash);
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
- element.appendChild(pattern.canvas());
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
- var menu = document.querySelector(".post-menu .post-menu-content");
16
- var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
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
- // Generate post menu
19
- var menuHTML = '';
20
- headings.forEach(function (h) {
21
- menuHTML += (
22
- '<li class="h-' + h.tagName.toLowerCase() + '">'
23
- + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
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
- menu.innerHTML = '<ul>' + menuHTML + '</ul>';
28
+ menu.innerHTML = '<ul>' + menuHTML + '</ul>';
27
29
 
28
- // The anchor offsetHeight
29
- var headerHeight = 0;
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
- // Active the menu item
36
- window.addEventListener('scroll', function (event) {
37
- var lastActive = menu.querySelector('.active');
38
- var changed = true;
39
- for (var i = headings.length - 1; i >= 0; i--) {
40
- var h = headings[i];
41
- var clientRect = h.getBoundingClientRect();
42
- if (clientRect.top < offsetHeight) {
43
- var id = 'h-' + h.getAttribute('id');
44
- var curActive = menu.querySelector('a[href="#' + id + '"]');
45
- if (curActive) {
46
- curActive.classList.add('active');
47
- }
48
- if (lastActive == curActive) {
49
- changed = false;
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
- if (lastActive && changed) {
55
- lastActive.classList.remove('active');
56
- }
57
- event.preventDefault();
58
- });
53
+ if (lastActive && changed) {
54
+ lastActive.classList.remove('active');
55
+ }
56
+ event.preventDefault();
57
+ });
58
+ }
59
+ generateContent();
59
60
  </script>
@@ -44,12 +44,14 @@
44
44
 
45
45
  {%- else -%}
46
46
 
47
- <h1 class="page-banner-heading">
48
- {{ heading | default: page.title | escape }}
49
- </h1>
50
- <h3 class="page-banner-subheading">
51
- {{ subheading | default: page.subtitle | escape }}
52
- </h3>
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 -%}
@@ -1,44 +1,96 @@
1
- <header class="site-header" role="banner">
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
- {%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
5
- {%- assign page_paths = site.header_pages | default: default_paths -%}
6
-
7
- <span class="site-brand">
8
- {%- include views/site-brand.html -%}
9
- </span>
10
-
11
- {%- if page_paths -%}
12
- <nav class="site-nav">
13
- <input type="checkbox" id="nav-trigger" class="nav-trigger" />
14
- <label for="nav-trigger">
15
- <span class="menu-icon">
16
- <svg viewBox="0 0 18 15" width="18px" height="15px">
17
- <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"/>
18
- </svg>
19
- </span>
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
- {%- endif -%}
40
- </div>
41
- </nav>
42
- {%- endif -%}
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>
@@ -32,4 +32,4 @@ layout: default
32
32
 
33
33
  {%- endfor -%}
34
34
  </section>
35
- <div>
35
+ </div>
@@ -15,8 +15,6 @@
15
15
  }
16
16
 
17
17
  li {
18
- border-bottom: 1px solid $background-color;
19
-
20
18
  &:last-child {
21
19
  border-bottom: none;
22
20
  }
@@ -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
- padding-top: 0;
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
- padding-top: 8px;
174
+ margin-top: 8px;
181
175
  max-height: 10000px;
176
+ visibility: visible;
182
177
  }
183
178
  }
184
179
 
data/_sass/yat/_base.scss CHANGED
@@ -229,7 +229,7 @@ table {
229
229
  /**
230
230
  * Flex layout
231
231
  */
232
- %flex-layout {
232
+ %flex {
233
233
  display: flex;
234
234
  }
235
235
 
@@ -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
- @include vertical-center(absolute);
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: drop-shadow 0.2s;
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 3px #080808a0);
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
- right: $spacing-unit / 2;
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: 600;
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
- .page-banner-heading {
298
- @include relative-font-size(2.825);
299
- letter-spacing: -1px;
300
- line-height: 1;
301
- margin-bottom: 10px;
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
- @include media-query($on-palm) {
304
- @include relative-font-size(2.425);
357
+ @include media-query($on-palm) {
358
+ @include relative-font-size(2.425);
359
+ }
305
360
  }
306
- }
307
361
 
308
- @extend %post-header;
362
+ > :nth-child(2) {
363
+ font-weight: $base-font-weight * 1.5;
364
+ }
309
365
 
310
- .post-title {
311
- @include relative-font-size(2.925);
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-layout;
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: 600;
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: 380px !default;
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.1.0
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-19 00:00:00.000000000 Z
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