arco 0.4.3 → 0.6.3
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 +4 -4
- data/README.md +24 -0
- data/_includes/cover.html +1 -1
- data/_includes/lazyload.html +146 -0
- data/_includes/mathjax.html +1 -1
- data/_includes/sidebar.html +27 -17
- data/_layouts/404.html +1 -0
- data/_layouts/default.html +7 -3
- data/_layouts/landing.html +1 -0
- data/_layouts/post-list.html +3 -0
- data/_layouts/post.html +17 -1
- data/_sass/404.scss +0 -1
- data/_sass/arco.scss +0 -5
- data/_sass/buttons.scss +1 -0
- data/_sass/cover.scss +6 -1
- data/_sass/post-list.scss +11 -4
- data/_sass/post.scss +7 -3
- data/_sass/sidebar.scss +39 -8
- data/_sass/syntax-highlighting.scss +1 -2
- data/assets/lightbox/lightbox.css +94 -0
- data/assets/lightbox/lightbox.js +144 -0
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ed3afabbd0f0d5eb50c6d5dc2eb291efc093a4bfff6b2bd9d24bb86e2104c8c5
|
|
4
|
+
data.tar.gz: 25e40f782d66b71d7aec51e1c3a3d45ce67c919621fc8872b2219479ff172fb3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 28544ffe6094e042a600389c647e628dbca4a92da8ac1ba1027dace5b4aa9b1c3e92e58c36346df07da315dc401b4a899d1c0fe3990a39c79e846f0c3953029b
|
|
7
|
+
data.tar.gz: f01d4e8da0622fddedd6e4d414744cee5936a2cd519f06827cc96991a8988c61d8d0064c655bdc0c2064ed1a0011a5a4a0dcf9097602535cd53680701877ec91
|
data/README.md
CHANGED
|
@@ -80,12 +80,36 @@ title: Post title
|
|
|
80
80
|
description: Post description
|
|
81
81
|
category: completed | ongoing
|
|
82
82
|
permalink: /projects/post-title
|
|
83
|
+
source-url: https://project.source/link/
|
|
83
84
|
cover-image: /assets/image-for-front-page.png
|
|
84
85
|
image: /assets/image-for-top-of-post.png
|
|
86
|
+
tags: [tags, which, relate, to, post]
|
|
85
87
|
mathjax: true | false
|
|
86
88
|
---
|
|
87
89
|
```
|
|
88
90
|
|
|
91
|
+
### Favicon
|
|
92
|
+
|
|
93
|
+
Simply add your favicon `favicon.png` to the root of your site.
|
|
94
|
+
|
|
95
|
+
### Lazy loading
|
|
96
|
+
|
|
97
|
+
In order to enable lazy loading on an image you must add a `data-echo` attribute like so:
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<img src="/assets/placeholder-for-image.png" alt="alt-text" data-echo="/assets/actual-image.png" />
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Image lightbox
|
|
104
|
+
|
|
105
|
+
In order to open an image in a fullscreen lightbox on click, you must wrap the image in a link tag like so:
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<a href="/assets/actual-image.png">
|
|
109
|
+
<img src="/assets/placeholder-for-image.png" alt="alt-text" data-echo="/assets/actual-image.png" />
|
|
110
|
+
</a>
|
|
111
|
+
```
|
|
112
|
+
|
|
89
113
|
### Markdown features
|
|
90
114
|
|
|
91
115
|
[Check here](https://meebuhs.github.io/projects/arco) for examples of the supported markdown features.
|
data/_includes/cover.html
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<section class="cover">
|
|
2
2
|
<div class="cover-text">
|
|
3
|
-
{% if site.image %}<img class="
|
|
3
|
+
{% if site.image %}<img class="cover-image" src="{{ site.image }}" />{% endif %}
|
|
4
4
|
<h1>{{ site.title }}</a></h1>
|
|
5
5
|
<h6>{{ site.description }}</h6>
|
|
6
6
|
</div>
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
(function (root, factory) {
|
|
3
|
+
if (typeof define === 'function' && define.amd) {
|
|
4
|
+
define(function() {
|
|
5
|
+
return factory(root);
|
|
6
|
+
});
|
|
7
|
+
} else if (typeof exports === 'object') {
|
|
8
|
+
module.exports = factory;
|
|
9
|
+
} else {
|
|
10
|
+
root.echo = factory(root);
|
|
11
|
+
}
|
|
12
|
+
})(this, function (root) {
|
|
13
|
+
|
|
14
|
+
'use strict';
|
|
15
|
+
|
|
16
|
+
var echo = {};
|
|
17
|
+
|
|
18
|
+
var callback = function () {};
|
|
19
|
+
|
|
20
|
+
var offset, poll, delay, useDebounce, unload;
|
|
21
|
+
|
|
22
|
+
var isHidden = function (element) {
|
|
23
|
+
return (element.offsetParent === null);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var inView = function (element, view) {
|
|
27
|
+
if (isHidden(element)) {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
var box = element.getBoundingClientRect();
|
|
32
|
+
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
var debounceOrThrottle = function () {
|
|
36
|
+
if(!useDebounce && !!poll) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
clearTimeout(poll);
|
|
40
|
+
poll = setTimeout(function(){
|
|
41
|
+
echo.render();
|
|
42
|
+
poll = null;
|
|
43
|
+
}, delay);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
echo.init = function (opts) {
|
|
47
|
+
opts = opts || {};
|
|
48
|
+
var offsetAll = opts.offset || 0;
|
|
49
|
+
var offsetVertical = opts.offsetVertical || offsetAll;
|
|
50
|
+
var offsetHorizontal = opts.offsetHorizontal || offsetAll;
|
|
51
|
+
var optionToInt = function (opt, fallback) {
|
|
52
|
+
return parseInt(opt || fallback, 10);
|
|
53
|
+
};
|
|
54
|
+
offset = {
|
|
55
|
+
t: optionToInt(opts.offsetTop, offsetVertical),
|
|
56
|
+
b: optionToInt(opts.offsetBottom, offsetVertical),
|
|
57
|
+
l: optionToInt(opts.offsetLeft, offsetHorizontal),
|
|
58
|
+
r: optionToInt(opts.offsetRight, offsetHorizontal)
|
|
59
|
+
};
|
|
60
|
+
delay = optionToInt(opts.throttle, 250);
|
|
61
|
+
useDebounce = opts.debounce !== false;
|
|
62
|
+
unload = !!opts.unload;
|
|
63
|
+
callback = opts.callback || callback;
|
|
64
|
+
echo.render();
|
|
65
|
+
if (document.addEventListener) {
|
|
66
|
+
root.addEventListener('scroll', debounceOrThrottle, false);
|
|
67
|
+
root.addEventListener('load', debounceOrThrottle, false);
|
|
68
|
+
} else {
|
|
69
|
+
root.attachEvent('onscroll', debounceOrThrottle);
|
|
70
|
+
root.attachEvent('onload', debounceOrThrottle);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
echo.render = function (context) {
|
|
75
|
+
var nodes = (context || document).querySelectorAll('[data-echo], [data-echo-background]');
|
|
76
|
+
var length = nodes.length;
|
|
77
|
+
var src, elem;
|
|
78
|
+
var view = {
|
|
79
|
+
l: 0 - offset.l,
|
|
80
|
+
t: 0 - offset.t,
|
|
81
|
+
b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
|
|
82
|
+
r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
|
|
83
|
+
};
|
|
84
|
+
for (var i = 0; i < length; i++) {
|
|
85
|
+
elem = nodes[i];
|
|
86
|
+
if (inView(elem, view)) {
|
|
87
|
+
|
|
88
|
+
if (unload) {
|
|
89
|
+
elem.setAttribute('data-echo-placeholder', elem.src);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
if (elem.getAttribute('data-echo-background') !== null) {
|
|
93
|
+
elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-background') + ')';
|
|
94
|
+
}
|
|
95
|
+
else if (elem.src !== (src = elem.getAttribute('data-echo'))) {
|
|
96
|
+
elem.src = src;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (!unload) {
|
|
100
|
+
elem.removeAttribute('data-echo');
|
|
101
|
+
elem.removeAttribute('data-echo-background');
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
callback(elem, 'load');
|
|
105
|
+
}
|
|
106
|
+
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
|
|
107
|
+
|
|
108
|
+
if (elem.getAttribute('data-echo-background') !== null) {
|
|
109
|
+
elem.style.backgroundImage = 'url(' + src + ')';
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
elem.src = src;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
elem.removeAttribute('data-echo-placeholder');
|
|
116
|
+
callback(elem, 'unload');
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
if (!length) {
|
|
120
|
+
echo.detach();
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
echo.detach = function () {
|
|
125
|
+
if (document.removeEventListener) {
|
|
126
|
+
root.removeEventListener('scroll', debounceOrThrottle);
|
|
127
|
+
} else {
|
|
128
|
+
root.detachEvent('onscroll', debounceOrThrottle);
|
|
129
|
+
}
|
|
130
|
+
clearTimeout(poll);
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
return echo;
|
|
134
|
+
|
|
135
|
+
});
|
|
136
|
+
</script>
|
|
137
|
+
<script>
|
|
138
|
+
echo.init({
|
|
139
|
+
offset: 2500,
|
|
140
|
+
throttle: 250,
|
|
141
|
+
unload: false,
|
|
142
|
+
callback: function (element, op) {
|
|
143
|
+
//console.log(element, 'has been', op + 'ed')
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
</script>
|
data/_includes/mathjax.html
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<script
|
|
11
11
|
type="text/javascript"
|
|
12
12
|
charset="utf-8"
|
|
13
|
-
src="https://
|
|
13
|
+
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
|
|
14
14
|
>
|
|
15
15
|
</script>
|
|
16
16
|
<script
|
data/_includes/sidebar.html
CHANGED
|
@@ -1,23 +1,33 @@
|
|
|
1
1
|
<section id="sidebar" class="sidebar">
|
|
2
2
|
<svg id="sidebar-fader"></svg>
|
|
3
|
-
<div class="sidebar-
|
|
4
|
-
{% if site.image %}
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<div class="sidebar-header">
|
|
4
|
+
{% if site.image %}
|
|
5
|
+
<div class="sidebar-image-container">
|
|
6
|
+
<img class="sidebar-image" src="{{ site.image }}" />
|
|
7
|
+
</div>
|
|
8
|
+
{% endif %}
|
|
9
|
+
<div class="sidebar-text">
|
|
10
|
+
<h1><a href="{{ "/projects/" }}" class="fade-onclick">{{ site.title }}</a></h1>
|
|
11
|
+
<h6>{{ site.description }}</h6>
|
|
12
|
+
</div>
|
|
7
13
|
</div>
|
|
8
14
|
<div class="sidebar-links">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
ongoing
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
<div class="sidebar-links-top">
|
|
16
|
+
{% assign identifier = page.url | split: "/" | last %}
|
|
17
|
+
{% if identifier == "completed" %}
|
|
18
|
+
completed
|
|
19
|
+
{% else %}
|
|
20
|
+
<a href="{{ "/projects/completed" }}" class="fade-onclick">completed</a>
|
|
21
|
+
{% endif %}
|
|
22
|
+
/
|
|
23
|
+
{% if identifier == "ongoing" %}
|
|
24
|
+
ongoing
|
|
25
|
+
{% else %}
|
|
26
|
+
<a href="{{ "/projects/ongoing" }}" class="fade-onclick">ongoing</a>
|
|
27
|
+
{% endif %}
|
|
28
|
+
</div>
|
|
29
|
+
<div class="sidebar-links-bottom">
|
|
30
|
+
{% if site.github_url %} <a href="{{ site.github_url }}">github</a> / {% endif %}{% if site.resume %}<a href="{{ "/resume" }}" class="fade-onclick">resume</a> {% endif %}
|
|
31
|
+
</div>
|
|
22
32
|
</div>
|
|
23
33
|
</section>
|
data/_layouts/404.html
CHANGED
data/_layouts/default.html
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<html lang="en-AU">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
|
+
<link rel="shortcut icon" type="image/png" href="favicon.png?">
|
|
5
6
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
6
7
|
<link rel="stylesheet" href="/assets/flexmasonry/flexmasonry.css">
|
|
7
8
|
<script src="/assets/flexmasonry/flexmasonry.js"></script>
|
|
@@ -10,8 +11,11 @@
|
|
|
10
11
|
<body>
|
|
11
12
|
{% include sidebar.html %}
|
|
12
13
|
{{ content }}
|
|
14
|
+
{% include lazyload.html %}
|
|
15
|
+
<script type="text/javascript" src="/assets/lightbox/lightbox.js"></script>
|
|
16
|
+
<link rel="stylesheet" href="/assets/lightbox/lightbox.css">
|
|
17
|
+
<script src="/assets/js/sidebar.js"></script>
|
|
18
|
+
<script src="/assets/js/fade-transitions.js"></script>
|
|
19
|
+
<script>fadeInPage();</script>
|
|
13
20
|
</body>
|
|
14
|
-
<script src="/assets/js/sidebar.js"></script>
|
|
15
|
-
<script src="/assets/js/fade-transitions.js"></script>
|
|
16
|
-
<script>fadeInPage();</script>
|
|
17
21
|
</html>
|
data/_layouts/landing.html
CHANGED
data/_layouts/post-list.html
CHANGED
|
@@ -21,6 +21,9 @@ layout: default
|
|
|
21
21
|
<span class="list-post-date">{{ post.date | date_to_string}}</span>
|
|
22
22
|
·
|
|
23
23
|
<a href="{{ "/projects/" }}{{ post.category }}" class="fade-onclick"><span class="list-post-category">{{ post.category }}</span></a>
|
|
24
|
+
<div class="list-post-tags">
|
|
25
|
+
{{ post.tags | join: ", "}}
|
|
26
|
+
</div>
|
|
24
27
|
</div>
|
|
25
28
|
</div>
|
|
26
29
|
{% endfor %}
|
data/_layouts/post.html
CHANGED
|
@@ -9,6 +9,13 @@ layout: default
|
|
|
9
9
|
<section class="content">
|
|
10
10
|
<svg id="content-fader"></svg>
|
|
11
11
|
<div class="post">
|
|
12
|
+
<div class="post-buttons">
|
|
13
|
+
<a href="{{ site.url }}\projects\" class="button-light-secondary">Home</a>
|
|
14
|
+
{% if page.source-url %}
|
|
15
|
+
<a href="{{ page.source-url }}" class="button-light-tertiary">See the source</a>
|
|
16
|
+
{% endif %}
|
|
17
|
+
</div>
|
|
18
|
+
|
|
12
19
|
<div class="post-title"><h1>{{ page.title }}</h1></div>
|
|
13
20
|
<div class="post-description">{{ page.description }}</div>
|
|
14
21
|
<div class="post-header">
|
|
@@ -16,11 +23,20 @@ layout: default
|
|
|
16
23
|
·
|
|
17
24
|
<a href="{{ "/projects/" }}{{ page.category }}" class="fade-onclick"><span class="post-category">{{ page.category }}</span></a>
|
|
18
25
|
</div>
|
|
19
|
-
<
|
|
26
|
+
<a href="{{ page.image }}">
|
|
27
|
+
<img class="post-image" alt="{{ page.title }} | {{ page.description | truncate: 80 }}" src="{{ page.image }}" />
|
|
28
|
+
</a>
|
|
20
29
|
|
|
21
30
|
<div class="post-content">
|
|
22
31
|
{{ content }}
|
|
23
32
|
</div>
|
|
33
|
+
|
|
34
|
+
<div class="post-buttons">
|
|
35
|
+
<a href="{{ site.url }}\projects\" class="button-light-secondary">Home</a>
|
|
36
|
+
{% if page.source-url %}
|
|
37
|
+
<a href="{{ page.source-url }}" class="button-light-tertiary">See the source </></a>
|
|
38
|
+
{% endif %}
|
|
39
|
+
</div>
|
|
24
40
|
</div>
|
|
25
41
|
{% include footer.html %}
|
|
26
42
|
</section>
|
data/_sass/404.scss
CHANGED
data/_sass/arco.scss
CHANGED
data/_sass/buttons.scss
CHANGED
data/_sass/cover.scss
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
}
|
|
9
9
|
h6 {
|
|
10
10
|
text-transform: uppercase;
|
|
11
|
-
font-size: .9rem;
|
|
12
11
|
color: $text-colour-light;
|
|
13
12
|
}
|
|
14
13
|
a {
|
|
@@ -40,3 +39,9 @@
|
|
|
40
39
|
text-align: center;
|
|
41
40
|
justify-content: center;
|
|
42
41
|
}
|
|
42
|
+
|
|
43
|
+
.cover-image {
|
|
44
|
+
width: 200px;
|
|
45
|
+
height: 200px;
|
|
46
|
+
border-radius: 50%;
|
|
47
|
+
}
|
data/_sass/post-list.scss
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
.list-post-title {
|
|
31
31
|
color: $text-colour-dark;
|
|
32
32
|
width: 100%;
|
|
33
|
-
font-size:
|
|
33
|
+
font-size: 1.5em;
|
|
34
34
|
font-weight: bold;
|
|
35
35
|
a {
|
|
36
36
|
color: white;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
.list-post-summary {
|
|
44
44
|
color: $summary-colour;
|
|
45
45
|
margin: 0.4em 0;
|
|
46
|
-
font-size:
|
|
46
|
+
font-size: 1em;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.list-post-footer {
|
|
@@ -53,14 +53,21 @@
|
|
|
53
53
|
.list-post-date {
|
|
54
54
|
color: $secondary-highlight;
|
|
55
55
|
font-weight: bold;
|
|
56
|
-
font-size:
|
|
56
|
+
font-size: 0.9em;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.list-post-category {
|
|
60
60
|
font-weight: bold;
|
|
61
|
-
font-size:
|
|
61
|
+
font-size: 0.9em;
|
|
62
62
|
color: $primary-highlight;
|
|
63
63
|
&:hover, &:focus {
|
|
64
64
|
color: lighten($primary-highlight, 14%);
|
|
65
65
|
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.list-post-tags {
|
|
69
|
+
font-weight: bold;
|
|
70
|
+
font-size: 0.9em;
|
|
71
|
+
color: $tertiary-highlight;
|
|
72
|
+
margin-top: 0.4em;
|
|
66
73
|
}
|
data/_sass/post.scss
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.post-title h1 {
|
|
7
|
-
margin
|
|
7
|
+
margin: 1.5em 0 0 0;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.post-description {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
.post-date {
|
|
15
15
|
color: $secondary-highlight;
|
|
16
16
|
font-weight: bold;
|
|
17
|
-
font-size:
|
|
17
|
+
font-size: 0.9em;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.post-image {
|
|
@@ -26,13 +26,17 @@
|
|
|
26
26
|
|
|
27
27
|
.post-category {
|
|
28
28
|
font-weight: bold;
|
|
29
|
-
font-size:
|
|
29
|
+
font-size: 0.9em;
|
|
30
30
|
color: $primary-highlight;
|
|
31
31
|
&:hover, &:focus {
|
|
32
32
|
color: lighten($primary-highlight, 14%);
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
.post-content {
|
|
37
|
+
margin-bottom: 2em;
|
|
38
|
+
}
|
|
39
|
+
|
|
36
40
|
.post-content img {
|
|
37
41
|
max-width: 90%;
|
|
38
42
|
max-height: 600px;
|
data/_sass/sidebar.scss
CHANGED
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
}
|
|
11
11
|
h6 {
|
|
12
12
|
text-transform: uppercase;
|
|
13
|
-
font-size: .9rem;
|
|
14
13
|
color: $text-colour-light;
|
|
15
14
|
}
|
|
16
15
|
a {
|
|
@@ -32,11 +31,10 @@
|
|
|
32
31
|
transition: all .35s ease;
|
|
33
32
|
}
|
|
34
33
|
|
|
35
|
-
|
|
36
|
-
@media only screen and (max-width: 768px), (orientation: portrait) {
|
|
34
|
+
@media only screen and (orientation: portrait) {
|
|
37
35
|
#sidebar {
|
|
38
36
|
flex-direction: row;
|
|
39
|
-
justify-content: space-
|
|
37
|
+
justify-content: space-between;
|
|
40
38
|
align-items: center;
|
|
41
39
|
text-align: center;
|
|
42
40
|
}
|
|
@@ -51,9 +49,37 @@
|
|
|
51
49
|
height: $sidebar-height-min;
|
|
52
50
|
}
|
|
53
51
|
|
|
54
|
-
.sidebar-
|
|
52
|
+
.sidebar-header {
|
|
55
53
|
display: flex;
|
|
56
|
-
|
|
54
|
+
margin-left: 1em;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.sidebar-image-container {
|
|
58
|
+
margin-right: 1em;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sidebar-image {
|
|
62
|
+
width: 80px;
|
|
63
|
+
height: 80px;
|
|
64
|
+
border-radius: 50%;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.sidebar-text {
|
|
68
|
+
h1 {
|
|
69
|
+
font-size: 2.5em;
|
|
70
|
+
margin-top: -0.3em;
|
|
71
|
+
}
|
|
72
|
+
h6 {
|
|
73
|
+
font-size: 1.3em;
|
|
74
|
+
margin: 0;
|
|
75
|
+
}
|
|
76
|
+
text-align: start;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.sidebar-links {
|
|
80
|
+
font-size: 1.5em;
|
|
81
|
+
margin-right: 1em;
|
|
82
|
+
text-align: end;
|
|
57
83
|
}
|
|
58
84
|
|
|
59
85
|
.content {
|
|
@@ -94,8 +120,7 @@
|
|
|
94
120
|
}
|
|
95
121
|
}
|
|
96
122
|
|
|
97
|
-
|
|
98
|
-
@media only screen and (min-width: 768px), (orientation: landscape) {
|
|
123
|
+
@media only screen and (orientation: landscape) {
|
|
99
124
|
#sidebar {
|
|
100
125
|
flex-direction: column;
|
|
101
126
|
text-align: center;
|
|
@@ -106,6 +131,12 @@
|
|
|
106
131
|
width: $sidebar-width;
|
|
107
132
|
height: 100%;
|
|
108
133
|
}
|
|
134
|
+
|
|
135
|
+
.sidebar-image {
|
|
136
|
+
width: 200px;
|
|
137
|
+
height: 200px;
|
|
138
|
+
border-radius: 50%;
|
|
139
|
+
}
|
|
109
140
|
|
|
110
141
|
.content {
|
|
111
142
|
flex: 1;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
|
|
2
|
+
#lightbox .img {
|
|
3
|
+
position: relative;
|
|
4
|
+
top: 50%;
|
|
5
|
+
left: 50%;
|
|
6
|
+
-ms-transform: translateX(-50%) translateY(-50%);
|
|
7
|
+
-webkit-transform: translate(-50%,-50%);
|
|
8
|
+
transform: translate(-50%,-50%);
|
|
9
|
+
max-width: 100%;
|
|
10
|
+
max-height: 100%;
|
|
11
|
+
}
|
|
12
|
+
#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
|
|
13
|
+
@media screen and (min-width: 1200px) {
|
|
14
|
+
#lightbox .img {
|
|
15
|
+
max-width: 1200px;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@media screen and (min-height: 1200px) {
|
|
19
|
+
#lightbox .img {
|
|
20
|
+
max-height: 1200px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:
|
|
24
|
+
-1px -1px 0 #000,
|
|
25
|
+
1px -1px 0 #000,
|
|
26
|
+
-1px 1px 0 #000,
|
|
27
|
+
1px 1px 0 #000;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
#lightbox span {display: none;}
|
|
31
|
+
|
|
32
|
+
#lightbox .videoWrapperContainer {
|
|
33
|
+
position: relative;
|
|
34
|
+
top: 50%;
|
|
35
|
+
left: 50%;
|
|
36
|
+
-ms-transform: translateX(-50%) translateY(-50%);
|
|
37
|
+
-webkit-transform: translate(-50%,-50%);
|
|
38
|
+
transform: translate(-50%,-50%);
|
|
39
|
+
max-width: 900px;
|
|
40
|
+
max-height: 100%;
|
|
41
|
+
}
|
|
42
|
+
#lightbox .videoWrapperContainer .videoWrapper {
|
|
43
|
+
height: 0;
|
|
44
|
+
line-height: 0;
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
position: relative;
|
|
48
|
+
padding-bottom: 56.333%; /* custom */
|
|
49
|
+
background: black;
|
|
50
|
+
}
|
|
51
|
+
#lightbox .videoWrapper iframe {
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 0;
|
|
54
|
+
left: 0;
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 100%;
|
|
57
|
+
border: 0;
|
|
58
|
+
display: block;
|
|
59
|
+
}
|
|
60
|
+
#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
|
|
61
|
+
#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
|
|
62
|
+
#lightbox #prev {left: 0;}
|
|
63
|
+
#lightbox #next {right: 0;}
|
|
64
|
+
#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
|
|
65
|
+
#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px;
|
|
66
|
+
-webkit-transform-origin: 50% 50%;
|
|
67
|
+
-moz-transform-origin: 50% 50%;
|
|
68
|
+
-o-transform-origin: 50% 50%;
|
|
69
|
+
transform-origin: 50% 50%;
|
|
70
|
+
/* Safari */
|
|
71
|
+
-webkit-transform: rotate(-45deg);
|
|
72
|
+
/* Firefox */
|
|
73
|
+
-moz-transform: rotate(-45deg);
|
|
74
|
+
/* IE */
|
|
75
|
+
-ms-transform: rotate(-45deg);
|
|
76
|
+
/* Opera */
|
|
77
|
+
-o-transform: rotate(-45deg);
|
|
78
|
+
}
|
|
79
|
+
#lightbox #close:after {
|
|
80
|
+
/* Safari */
|
|
81
|
+
-webkit-transform: rotate(45deg);
|
|
82
|
+
/* Firefox */
|
|
83
|
+
-moz-transform: rotate(45deg);
|
|
84
|
+
/* IE */
|
|
85
|
+
-ms-transform: rotate(45deg);
|
|
86
|
+
/* Opera */
|
|
87
|
+
-o-transform: rotate(45deg);
|
|
88
|
+
}
|
|
89
|
+
#lightbox, #lightbox * {
|
|
90
|
+
-webkit-user-select: none;
|
|
91
|
+
-moz-user-select: none;
|
|
92
|
+
-ms-user-select: none;
|
|
93
|
+
user-select: none;
|
|
94
|
+
}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
function is_youtubelink(url) {
|
|
2
|
+
var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
|
|
3
|
+
return (url.match(p)) ? RegExp.$1 : false;
|
|
4
|
+
}
|
|
5
|
+
function is_imagelink(url) {
|
|
6
|
+
var p = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i;
|
|
7
|
+
return (url.match(p)) ? true : false;
|
|
8
|
+
}
|
|
9
|
+
function is_vimeolink(url,el) {
|
|
10
|
+
var id = false;
|
|
11
|
+
var xmlhttp = new XMLHttpRequest();
|
|
12
|
+
xmlhttp.onreadystatechange = function() {
|
|
13
|
+
if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
|
|
14
|
+
if (xmlhttp.status == 200) {
|
|
15
|
+
var response = JSON.parse(xmlhttp.responseText);
|
|
16
|
+
id = response.video_id;
|
|
17
|
+
console.log(id);
|
|
18
|
+
el.classList.add('lightbox-vimeo');
|
|
19
|
+
el.setAttribute('data-id',id);
|
|
20
|
+
|
|
21
|
+
el.addEventListener("click", function(event) {
|
|
22
|
+
event.preventDefault();
|
|
23
|
+
document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">›</a><a id="prev">‹</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://player.vimeo.com/video/'+el.getAttribute('data-id')+'/?autoplay=1&byline=0&title=0&portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>';
|
|
24
|
+
document.getElementById('lightbox').style.display = 'block';
|
|
25
|
+
|
|
26
|
+
setGallery(this);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
else if (xmlhttp.status == 400) {
|
|
30
|
+
alert('There was an error 400');
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
alert('something else other than 200 was returned');
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
xmlhttp.open("GET", 'https://vimeo.com/api/oembed.json?url='+url, true);
|
|
38
|
+
xmlhttp.send();
|
|
39
|
+
}
|
|
40
|
+
function setGallery(el) {
|
|
41
|
+
var elements = document.body.querySelectorAll(".gallery");
|
|
42
|
+
elements.forEach(element => {
|
|
43
|
+
element.classList.remove('gallery');
|
|
44
|
+
});
|
|
45
|
+
if(el.closest('ul, p')) {
|
|
46
|
+
var link_elements = el.closest('ul, p').querySelectorAll("a[class*='lightbox-']");
|
|
47
|
+
link_elements.forEach(link_element => {
|
|
48
|
+
link_element.classList.remove('current');
|
|
49
|
+
});
|
|
50
|
+
link_elements.forEach(link_element => {
|
|
51
|
+
if(el.getAttribute('href') == link_element.getAttribute('href')) {
|
|
52
|
+
link_element.classList.add('current');
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
if(link_elements.length>1) {
|
|
56
|
+
document.getElementById('lightbox').classList.add('gallery');
|
|
57
|
+
link_elements.forEach(link_element => {
|
|
58
|
+
link_element.classList.add('gallery');
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
var currentkey;
|
|
62
|
+
var gallery_elements = document.querySelectorAll('a.gallery');
|
|
63
|
+
Object.keys(gallery_elements).forEach(function (k) {
|
|
64
|
+
if(gallery_elements[k].classList.contains('current')) currentkey = k;
|
|
65
|
+
});
|
|
66
|
+
if(currentkey==(gallery_elements.length-1)) var nextkey = 0;
|
|
67
|
+
else var nextkey = parseInt(currentkey)+1;
|
|
68
|
+
if(currentkey==0) var prevkey = parseInt(gallery_elements.length-1);
|
|
69
|
+
else var prevkey = parseInt(currentkey)-1;
|
|
70
|
+
document.getElementById('next').addEventListener("click", function() {
|
|
71
|
+
gallery_elements[nextkey].click();
|
|
72
|
+
});
|
|
73
|
+
document.getElementById('prev').addEventListener("click", function() {
|
|
74
|
+
gallery_elements[prevkey].click();
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
80
|
+
|
|
81
|
+
//create lightbox div in the footer
|
|
82
|
+
var newdiv = document.createElement("div");
|
|
83
|
+
newdiv.setAttribute('id',"lightbox");
|
|
84
|
+
document.body.appendChild(newdiv);
|
|
85
|
+
|
|
86
|
+
//add classes to links to be able to initiate lightboxes
|
|
87
|
+
var elements = document.querySelectorAll('a');
|
|
88
|
+
elements.forEach(element => {
|
|
89
|
+
var url = element.getAttribute('href');
|
|
90
|
+
if(url) {
|
|
91
|
+
if(url.indexOf('vimeo') !== -1 && !element.classList.contains('no-lightbox')) {
|
|
92
|
+
is_vimeolink(url,element);
|
|
93
|
+
}
|
|
94
|
+
if(is_youtubelink(url) && !element.classList.contains('no-lightbox')) {
|
|
95
|
+
element.classList.add('lightbox-youtube');
|
|
96
|
+
element.setAttribute('data-id',is_youtubelink(url));
|
|
97
|
+
}
|
|
98
|
+
if(is_imagelink(url) && !element.classList.contains('no-lightbox')) {
|
|
99
|
+
element.classList.add('lightbox-image');
|
|
100
|
+
var href = element.getAttribute('href');
|
|
101
|
+
var filename = href.split('/').pop();
|
|
102
|
+
var split = filename.split(".");
|
|
103
|
+
var name = split[0];
|
|
104
|
+
element.setAttribute('title',name);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
//remove the clicked lightbox
|
|
110
|
+
document.getElementById('lightbox').addEventListener("click", function(event) {
|
|
111
|
+
if(event.target.id != 'next' && event.target.id != 'prev'){
|
|
112
|
+
this.innerHTML = '';
|
|
113
|
+
document.getElementById('lightbox').style.display = 'none';
|
|
114
|
+
document.body.style.overflow="visible";
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
//add the youtube lightbox on click
|
|
119
|
+
var elements = document.querySelectorAll('a.lightbox-youtube');
|
|
120
|
+
elements.forEach(element => {
|
|
121
|
+
element.addEventListener("click", function(event) {
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">›</a><a id="prev">‹</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://www.youtube.com/embed/'+this.getAttribute('data-id')+'?autoplay=1&showinfo=0&rel=0"></iframe></div>';
|
|
124
|
+
document.getElementById('lightbox').style.display = 'block';
|
|
125
|
+
document.body.style.overflow="hidden";
|
|
126
|
+
|
|
127
|
+
setGallery(this);
|
|
128
|
+
});
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
//add the image lightbox on click
|
|
132
|
+
var elements = document.querySelectorAll('a.lightbox-image');
|
|
133
|
+
elements.forEach(element => {
|
|
134
|
+
element.addEventListener("click", function(event) {
|
|
135
|
+
event.preventDefault();
|
|
136
|
+
document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">›</a><a id="prev">‹</a><div class="img" style="background: url(\''+this.getAttribute('href')+'\') center center / contain no-repeat;" title="'+this.getAttribute('title')+'" ><img src="'+this.getAttribute('href')+'" alt="'+this.getAttribute('title')+'" /></div><span>'+this.getAttribute('title')+'</span>';
|
|
137
|
+
document.getElementById('lightbox').style.display = 'block';
|
|
138
|
+
document.body.style.overflow="hidden";
|
|
139
|
+
|
|
140
|
+
setGallery(this);
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
});
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: arco
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.6.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- meebuhs
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-07-
|
|
11
|
+
date: 2020-07-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -42,6 +42,7 @@ files:
|
|
|
42
42
|
- _config.yml
|
|
43
43
|
- _includes/cover.html
|
|
44
44
|
- _includes/footer.html
|
|
45
|
+
- _includes/lazyload.html
|
|
45
46
|
- _includes/mathjax.html
|
|
46
47
|
- _includes/sidebar.html
|
|
47
48
|
- _layouts/404.html
|
|
@@ -78,6 +79,8 @@ files:
|
|
|
78
79
|
- assets/js/fade-transitions.js
|
|
79
80
|
- assets/js/post-grid-init.js
|
|
80
81
|
- assets/js/sidebar.js
|
|
82
|
+
- assets/lightbox/lightbox.css
|
|
83
|
+
- assets/lightbox/lightbox.js
|
|
81
84
|
homepage: https://github.com/meebuhs/arco
|
|
82
85
|
licenses:
|
|
83
86
|
- MIT
|