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 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