reality-blue-jekyll-theme 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -2
- data/_includes/layout-controller.html +97 -0
- data/_layouts/default.html +0 -1
- data/_layouts/home.html +1 -35
- data/_sass/reality-blue.scss +3 -0
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5fd73961416a4db462d3d2936730b46b743d578134115f275563d7683cf13647
|
4
|
+
data.tar.gz: 667c0de8492c8ee046a9fb9f0a43429fab923023dd69e240b4fc948ebf2a4ff4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a52ab946a74374126e347a4cdfb176f6cf0754936506a6239ab75740661b9eb0b7b7604db41780a4579fe69ff82ae304d82f0ea40d13143f8f9ccd2078e57064
|
7
|
+
data.tar.gz: 2c234fa4d514768ab3482dd1db28b0667a9de33da901cdd49934ea3c1e87581ce16a9db7594935f4b321bfb3527a865c17e5e46cf220c2d7591211fd3d4627af
|
data/README.md
CHANGED
@@ -34,8 +34,8 @@ Or install it yourself as:
|
|
34
34
|
|
35
35
|
The primary layout of Reality-Blue is a basic dynamic-page layout.
|
36
36
|
|
37
|
-
1. Define your "sections" in the _config.yml and add your content files as includes.
|
38
|
-
2. Define further desired CSS/Sass in css/style.scss
|
37
|
+
1. Define your "sections" in the _config.yml and add your content files as includes. Currently there is support for exactly 3 sections.
|
38
|
+
2. Define further desired CSS/Sass in css/style.scss, being sure that 'reality-blue' styling is imported as well
|
39
39
|
|
40
40
|
Available Includes:
|
41
41
|
- post-list: generic blogpost front-page list. links to archive once page is full
|
@@ -0,0 +1,97 @@
|
|
1
|
+
<script type="text/javascript">
|
2
|
+
// Base doc elements
|
3
|
+
let main = document.getElementById(`main`);
|
4
|
+
let home = document.getElementById(`home`);
|
5
|
+
let content = document.getElementById(`content`);
|
6
|
+
let nav = document.getElementById(`nav`);
|
7
|
+
|
8
|
+
// Section tags
|
9
|
+
let buttons = [];
|
10
|
+
let active = null;
|
11
|
+
|
12
|
+
// CSS vh simulator
|
13
|
+
let vh = function (v) {
|
14
|
+
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
15
|
+
return (v * h) / 100;
|
16
|
+
}
|
17
|
+
|
18
|
+
let clearNav = function () {
|
19
|
+
for (let i = 0; i < buttons.length; i++) {
|
20
|
+
if (nav.children[i].children[0].classList.contains(`active`)) {
|
21
|
+
nav.children[i].children[0].classList.remove(`active`);
|
22
|
+
content.children[i].style.opacity = `0`;
|
23
|
+
setTimeout(() => {
|
24
|
+
content.children[i].classList.add(`hidden`);
|
25
|
+
}, 300);
|
26
|
+
}
|
27
|
+
}
|
28
|
+
active = null;
|
29
|
+
}
|
30
|
+
|
31
|
+
let recenter = function () {
|
32
|
+
if (!!active) {
|
33
|
+
content.style.height = `600px`;
|
34
|
+
content.style.padding = `20px 10px`;
|
35
|
+
} else {
|
36
|
+
content.style.height = `0`;
|
37
|
+
content.style.padding = `0px 10px`;
|
38
|
+
}
|
39
|
+
let mainHeight = !!active ? 900 : 217; //TODO: make default value adjustable
|
40
|
+
let top = Math.max(0, vh(50) - mainHeight / 2);
|
41
|
+
main.style.top = `${top}px`;
|
42
|
+
}
|
43
|
+
|
44
|
+
let reset = function (delay) {
|
45
|
+
clearNav();
|
46
|
+
setTimeout(recenter, delay);
|
47
|
+
}
|
48
|
+
|
49
|
+
let makeActive = function (section) {
|
50
|
+
let wasActive = !!active;
|
51
|
+
active = section;
|
52
|
+
document.getElementById(section).classList.remove(`hidden`);
|
53
|
+
document.getElementById(section + `-link`).classList.add(`active`);
|
54
|
+
if (!wasActive) {
|
55
|
+
// recenter content if content was not already active
|
56
|
+
setTimeout(recenter, 10);
|
57
|
+
}
|
58
|
+
setTimeout(() => {
|
59
|
+
document.getElementById(section).style.opacity = `1.0`;
|
60
|
+
}, 200);
|
61
|
+
}
|
62
|
+
|
63
|
+
window.addEventListener(`resize`, recenter);
|
64
|
+
|
65
|
+
document.addEventListener(`DOMContentLoaded`, function (event) {
|
66
|
+
main = document.getElementById(`main`);
|
67
|
+
home = document.getElementById(`home`);
|
68
|
+
content = document.getElementById(`content`);
|
69
|
+
nav = document.getElementById(`nav`);
|
70
|
+
|
71
|
+
{% for section in site.sections %}
|
72
|
+
buttons.push(`{{ section.name }}`);
|
73
|
+
{% endfor %}
|
74
|
+
|
75
|
+
home.addEventListener(`click`, function (event) {
|
76
|
+
reset(300);
|
77
|
+
});
|
78
|
+
|
79
|
+
buttons.forEach(section => {
|
80
|
+
document.getElementById(`${section}-link`).addEventListener(`click`, function (event) {
|
81
|
+
let fadeTimeout = 0;
|
82
|
+
if (active) {
|
83
|
+
if (active === section) {
|
84
|
+
return
|
85
|
+
}
|
86
|
+
clearNav();
|
87
|
+
fadeTimeout = 300;
|
88
|
+
}
|
89
|
+
setTimeout(() => {
|
90
|
+
makeActive(section);
|
91
|
+
}, fadeTimeout);
|
92
|
+
});
|
93
|
+
});
|
94
|
+
|
95
|
+
reset(0);
|
96
|
+
});
|
97
|
+
</script>
|
data/_layouts/default.html
CHANGED
@@ -5,7 +5,6 @@
|
|
5
5
|
{% assign title = page.title | default: site.title | escape %}
|
6
6
|
<title>{{ title }}</title>
|
7
7
|
<link rel="icon" type="image/png" href="/assets/img/favicon.ico">
|
8
|
-
<link rel="stylesheet" href="/css/main.css">
|
9
8
|
<link rel="stylesheet" href="/css/style.css">
|
10
9
|
<meta charset="utf-8">
|
11
10
|
<meta name="author" content="{{ site.author | escape }}">
|
data/_layouts/home.html
CHANGED
@@ -19,39 +19,5 @@ layout: default
|
|
19
19
|
{% endfor %}
|
20
20
|
</div>
|
21
21
|
</div>
|
22
|
-
|
23
|
-
<script type="text/javascript">
|
24
|
-
document.addEventListener(`DOMContentLoaded`, function (event) {
|
25
|
-
main = document.getElementById(`main`);
|
26
|
-
home = document.getElementById(`home`);
|
27
|
-
content = document.getElementById(`content`);
|
28
|
-
nav = document.getElementById(`nav`);
|
29
|
-
|
30
|
-
{% for section in site.sections %}
|
31
|
-
buttons.push(`{{ section.name }}`);
|
32
|
-
{% endfor %}
|
33
|
-
|
34
|
-
home.addEventListener(`click`, function (event) {
|
35
|
-
reset(300);
|
36
|
-
});
|
37
|
-
|
38
|
-
buttons.forEach(section => {
|
39
|
-
document.getElementById(`${section}-link`).addEventListener(`click`, function (event) {
|
40
|
-
let fadeTimeout = 0;
|
41
|
-
if (active) {
|
42
|
-
if (active === section) {
|
43
|
-
return
|
44
|
-
}
|
45
|
-
clearNav();
|
46
|
-
fadeTimeout = 300;
|
47
|
-
}
|
48
|
-
setTimeout(() => {
|
49
|
-
makeActive(section);
|
50
|
-
}, fadeTimeout);
|
51
|
-
});
|
52
|
-
});
|
53
|
-
|
54
|
-
reset(0);
|
55
|
-
});
|
56
|
-
</script>
|
22
|
+
{% include layout-controller.html %}
|
57
23
|
</body>
|
data/_sass/reality-blue.scss
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: reality-blue-jekyll-theme
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Terry Wen
|
@@ -50,6 +50,7 @@ files:
|
|
50
50
|
- _includes/_about.html
|
51
51
|
- _includes/_blog.html
|
52
52
|
- _includes/_links.html
|
53
|
+
- _includes/layout-controller.html
|
53
54
|
- _includes/post-list.html
|
54
55
|
- _layouts/archive.html
|
55
56
|
- _layouts/default.html
|