arco 0.5.0 → 0.7.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +26 -4
- data/_includes/cover.html +1 -1
- data/_includes/lazyload.html +146 -0
- data/_includes/mathjax.html +1 -1
- data/_includes/sidebar.html +35 -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 -1
- data/_layouts/post.html +16 -7
- data/_sass/404.scss +0 -1
- data/_sass/arco.scss +4 -3
- data/_sass/buttons.scss +1 -0
- data/_sass/constants.scss +4 -4
- data/_sass/cover.scss +6 -1
- data/_sass/post-list.scss +5 -5
- data/_sass/post.scss +5 -5
- data/_sass/sidebar.scss +111 -51
- data/_sass/syntax-highlighting.scss +9 -9
- data/assets/js/post-grid-init.js +5 -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: 65e6776531db3a3448bc6cf2e7e145b041d64c333251b576241014f0a265c817
|
|
4
|
+
data.tar.gz: 5b4eeebb07bccb252d8034437bb2b6121bc4aae412e64008a0ebcf1865b04b1f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3c6ded0190753934c1395f5c158f86138ac0cfa37f8927af581406f0f54bb37636a880c8a83aabaad60ce8568f987bcf0ececb5a2cdf3ceab9914d40ae631b83
|
|
7
|
+
data.tar.gz: 8514c2cbd55de8b750f536f1dbdec2b54ca8cd360fd5303db81c9fbe457be062d8105adbbb32cda316bd02eaaf40065a517814aa7bcfa11fdd83f6da5370d74b
|
data/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# arco
|
|
2
2
|
|
|
3
|
-
Arco is a responsive fixed-sidebar layout with a
|
|
3
|
+
Arco is a responsive fixed-sidebar layout with a responsive masonry grid which also features a landing page, a 404 page, smooth page transitions and a simple permalink structure.
|
|
4
4
|
|
|
5
5
|
This theme also utilises [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag) and [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap) to ensure your work will be seen.
|
|
6
6
|
|
|
@@ -80,9 +80,13 @@ title: Post title
|
|
|
80
80
|
description: Post description
|
|
81
81
|
category: completed | ongoing
|
|
82
82
|
permalink: /projects/post-title
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
urls:
|
|
84
|
+
source: https://project.source/link/
|
|
85
|
+
download: https://project.download/link/
|
|
86
|
+
images:
|
|
87
|
+
cover: /assets/image-for-front-page.png
|
|
88
|
+
top: /assets/image-for-top-of-post.png
|
|
89
|
+
tags: [tags, which, relate, to, post]
|
|
86
90
|
mathjax: true | false
|
|
87
91
|
---
|
|
88
92
|
```
|
|
@@ -91,6 +95,24 @@ mathjax: true | false
|
|
|
91
95
|
|
|
92
96
|
Simply add your favicon `favicon.png` to the root of your site.
|
|
93
97
|
|
|
98
|
+
### Lazy loading
|
|
99
|
+
|
|
100
|
+
In order to enable lazy loading on an image you must add a `data-echo` attribute like so:
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<img src="/assets/placeholder-for-image.png" alt="alt-text" data-echo="/assets/actual-image.png" />
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Image lightbox
|
|
107
|
+
|
|
108
|
+
In order to open an image in a fullscreen lightbox on click, you must wrap the image in a link tag like so:
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<a href="/assets/actual-image.png">
|
|
112
|
+
<img src="/assets/placeholder-for-image.png" alt="alt-text" data-echo="/assets/actual-image.png" />
|
|
113
|
+
</a>
|
|
114
|
+
```
|
|
115
|
+
|
|
94
116
|
### Markdown features
|
|
95
117
|
|
|
96
118
|
[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,41 @@
|
|
|
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 %}
|
|
31
|
+
<a href="{{ site.github_url }}">github</a>
|
|
32
|
+
{% endif %}
|
|
33
|
+
{% if site.github_url and site.resume %}
|
|
34
|
+
/
|
|
35
|
+
{% endif %}
|
|
36
|
+
{% if site.resume %}
|
|
37
|
+
<a href="{{ "/resume" }}" class="fade-onclick">resume</a>
|
|
38
|
+
{% endif %}
|
|
39
|
+
</div>
|
|
22
40
|
</div>
|
|
23
41
|
</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
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
6
|
<link rel="shortcut icon" type="image/png" href="favicon.png?">
|
|
6
7
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
7
8
|
<link rel="stylesheet" href="/assets/flexmasonry/flexmasonry.css">
|
|
@@ -11,8 +12,11 @@
|
|
|
11
12
|
<body>
|
|
12
13
|
{% include sidebar.html %}
|
|
13
14
|
{{ content }}
|
|
15
|
+
{% include lazyload.html %}
|
|
16
|
+
<script type="text/javascript" src="/assets/lightbox/lightbox.js"></script>
|
|
17
|
+
<link rel="stylesheet" href="/assets/lightbox/lightbox.css">
|
|
18
|
+
<script src="/assets/js/sidebar.js"></script>
|
|
19
|
+
<script src="/assets/js/fade-transitions.js"></script>
|
|
20
|
+
<script>fadeInPage();</script>
|
|
14
21
|
</body>
|
|
15
|
-
<script src="/assets/js/sidebar.js"></script>
|
|
16
|
-
<script src="/assets/js/fade-transitions.js"></script>
|
|
17
|
-
<script>fadeInPage();</script>
|
|
18
22
|
</html>
|
data/_layouts/landing.html
CHANGED
data/_layouts/post-list.html
CHANGED
|
@@ -10,7 +10,9 @@ layout: default
|
|
|
10
10
|
<div class="list-post">
|
|
11
11
|
<a href="{{ post.url }}" class="fade-onclick">
|
|
12
12
|
<div class="list-post-link">
|
|
13
|
-
|
|
13
|
+
{% if post.images.cover %}
|
|
14
|
+
<img class="list-post-image" src="{{ post.images.cover }}" />
|
|
15
|
+
{% endif %}
|
|
14
16
|
<div class="list-post-info">
|
|
15
17
|
<div class="list-post-title">{{ post.title }}</div>
|
|
16
18
|
<div class="list-post-summary">{{ post.summary }}</div>
|
data/_layouts/post.html
CHANGED
|
@@ -10,10 +10,14 @@ layout: default
|
|
|
10
10
|
<svg id="content-fader"></svg>
|
|
11
11
|
<div class="post">
|
|
12
12
|
<div class="post-buttons">
|
|
13
|
-
<a href="{{ site.url }}\projects\" class="button-light-
|
|
14
|
-
{% if page.source
|
|
15
|
-
<a href="{{ page.source
|
|
13
|
+
<a href="{{ site.url }}\projects\" class="button-light-primary fade-onclick">Home</a>
|
|
14
|
+
{% if page.urls.source %}
|
|
15
|
+
<a href="{{ page.urls.source }}" class="button-light-secondary">See the source</a>
|
|
16
16
|
{% endif %}
|
|
17
|
+
{% if page.urls.download %}
|
|
18
|
+
<a href="{{ page.urls.download }}" class="button-light-tertiary">Download {{ page.title }}</a>
|
|
19
|
+
{% endif %}
|
|
20
|
+
|
|
17
21
|
</div>
|
|
18
22
|
|
|
19
23
|
<div class="post-title"><h1>{{ page.title }}</h1></div>
|
|
@@ -23,16 +27,21 @@ layout: default
|
|
|
23
27
|
·
|
|
24
28
|
<a href="{{ "/projects/" }}{{ page.category }}" class="fade-onclick"><span class="post-category">{{ page.category }}</span></a>
|
|
25
29
|
</div>
|
|
26
|
-
<
|
|
30
|
+
<a href="{{ page.images.top }}">
|
|
31
|
+
<img class="post-image" alt="{{ page.title }} | {{ page.description | truncate: 80 }}" src="{{ page.images.top }}" />
|
|
32
|
+
</a>
|
|
27
33
|
|
|
28
34
|
<div class="post-content">
|
|
29
35
|
{{ content }}
|
|
30
36
|
</div>
|
|
31
37
|
|
|
32
38
|
<div class="post-buttons">
|
|
33
|
-
<a href="{{ site.url }}\projects\" class="button-light-
|
|
34
|
-
{% if page.source
|
|
35
|
-
<a href="{{ page.source
|
|
39
|
+
<a href="{{ site.url }}\projects\" class="button-light-primary fade-onclick">Home</a>
|
|
40
|
+
{% if page.urls.source %}
|
|
41
|
+
<a href="{{ page.urls.source }}" class="button-light-secondary">See the source</a>
|
|
42
|
+
{% endif %}
|
|
43
|
+
{% if page.urls.download %}
|
|
44
|
+
<a href="{{ page.urls.download }}" class="button-light-tertiary">Download {{ page.title }}</a>
|
|
36
45
|
{% endif %}
|
|
37
46
|
</div>
|
|
38
47
|
</div>
|
data/_sass/404.scss
CHANGED
data/_sass/arco.scss
CHANGED
|
@@ -7,6 +7,7 @@ html, body {
|
|
|
7
7
|
height: 100%;
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
font-family: "Open Sans", Arial, sans-serif;
|
|
10
|
+
font-size: 16px;
|
|
10
11
|
-webkit-font-smoothing: antialiased;
|
|
11
12
|
text-rendering: optimizeLegibility;
|
|
12
13
|
}
|
|
@@ -125,9 +126,9 @@ li, ul {
|
|
|
125
126
|
line-height: 1.5em;
|
|
126
127
|
}
|
|
127
128
|
|
|
128
|
-
.
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
.MathJax_Display {
|
|
130
|
+
overflow-x: auto;
|
|
131
|
+
overflow-y: hidden;
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
.content {
|
data/_sass/buttons.scss
CHANGED
data/_sass/constants.scss
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// Colours
|
|
2
2
|
|
|
3
3
|
$primary-highlight: #f2777a;
|
|
4
|
-
$secondary-highlight: #
|
|
5
|
-
$tertiary-highlight: #
|
|
4
|
+
$secondary-highlight: #6b7fd7;
|
|
5
|
+
$tertiary-highlight: #66cccc;
|
|
6
6
|
|
|
7
7
|
$sidebar-colour: #1a2a38;
|
|
8
8
|
$hover-colour: #e5e5e5;
|
|
@@ -15,5 +15,5 @@ $table-background-colour: #e5e5e5;
|
|
|
15
15
|
// Sizes
|
|
16
16
|
|
|
17
17
|
$sidebar-width: 330px;
|
|
18
|
-
$sidebar-height-min:
|
|
19
|
-
$sidebar-height:
|
|
18
|
+
$sidebar-height-min: 120px;
|
|
19
|
+
$sidebar-height: 170px;
|
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.5rem;
|
|
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: 1rem;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.list-post-footer {
|
|
@@ -53,12 +53,12 @@
|
|
|
53
53
|
.list-post-date {
|
|
54
54
|
color: $secondary-highlight;
|
|
55
55
|
font-weight: bold;
|
|
56
|
-
font-size:
|
|
56
|
+
font-size: 0.9rem;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.list-post-category {
|
|
60
60
|
font-weight: bold;
|
|
61
|
-
font-size:
|
|
61
|
+
font-size: 0.9rem;
|
|
62
62
|
color: $primary-highlight;
|
|
63
63
|
&:hover, &:focus {
|
|
64
64
|
color: lighten($primary-highlight, 14%);
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
|
|
68
68
|
.list-post-tags {
|
|
69
69
|
font-weight: bold;
|
|
70
|
-
font-size:
|
|
70
|
+
font-size: 0.9rem;
|
|
71
71
|
color: $tertiary-highlight;
|
|
72
72
|
margin-top: 0.4em;
|
|
73
73
|
}
|
data/_sass/post.scss
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
.post {
|
|
2
|
-
margin-top: 4em;
|
|
3
2
|
width: 100%;
|
|
4
3
|
}
|
|
5
4
|
|
|
6
5
|
.post-title h1 {
|
|
7
|
-
margin:
|
|
6
|
+
margin: 0;
|
|
8
7
|
}
|
|
9
8
|
|
|
10
9
|
.post-description {
|
|
@@ -14,19 +13,20 @@
|
|
|
14
13
|
.post-date {
|
|
15
14
|
color: $secondary-highlight;
|
|
16
15
|
font-weight: bold;
|
|
17
|
-
font-size:
|
|
16
|
+
font-size: 0.9rem;
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
.post-image {
|
|
21
20
|
display: block;
|
|
22
|
-
width: 70%;
|
|
21
|
+
max-width: 70%;
|
|
22
|
+
max-height: 50vh;
|
|
23
23
|
margin: 2em auto 0 auto;
|
|
24
24
|
border-radius: 5px;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.post-category {
|
|
28
28
|
font-weight: bold;
|
|
29
|
-
font-size:
|
|
29
|
+
font-size: 0.9rem;
|
|
30
30
|
color: $primary-highlight;
|
|
31
31
|
&:hover, &:focus {
|
|
32
32
|
color: lighten($primary-highlight, 14%);
|
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,14 +31,36 @@
|
|
|
32
31
|
transition: all .35s ease;
|
|
33
32
|
}
|
|
34
33
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
34
|
+
.content {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex: 1;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-items: center;
|
|
39
|
+
}
|
|
42
40
|
|
|
41
|
+
#content-fader {
|
|
42
|
+
position: fixed;
|
|
43
|
+
right: 0;
|
|
44
|
+
z-index: 9999;
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
background: white;
|
|
47
|
+
opacity: 1;
|
|
48
|
+
animation-duration: .35s;
|
|
49
|
+
animation-timing-function: ease;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
#sidebar-fader {
|
|
53
|
+
position: fixed;
|
|
54
|
+
left: 0;
|
|
55
|
+
z-index: 9999;
|
|
56
|
+
pointer-events: none;
|
|
57
|
+
background: $sidebar-colour;
|
|
58
|
+
opacity: 1;
|
|
59
|
+
animation-duration: .35s;
|
|
60
|
+
animation-timing-function: ease;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@media only screen and (orientation: portrait) {
|
|
43
64
|
.sidebar {
|
|
44
65
|
width: 100%;
|
|
45
66
|
height: $sidebar-height;
|
|
@@ -51,45 +72,93 @@
|
|
|
51
72
|
}
|
|
52
73
|
|
|
53
74
|
.sidebar-text {
|
|
54
|
-
|
|
55
|
-
|
|
75
|
+
h6 {
|
|
76
|
+
margin: 0;
|
|
77
|
+
}
|
|
56
78
|
}
|
|
57
79
|
|
|
58
80
|
.content {
|
|
59
|
-
flex: 1;
|
|
60
81
|
max-width: 100%;
|
|
61
|
-
margin:
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
align-items: center;
|
|
82
|
+
margin: calc(#{$sidebar-height} + 1em) 1em 1em 1em;
|
|
65
83
|
}
|
|
66
84
|
|
|
67
85
|
#content-fader {
|
|
68
|
-
position: fixed;
|
|
69
86
|
bottom: 0;
|
|
70
|
-
right: 0;
|
|
71
87
|
height: calc(100% - #{$sidebar-height});
|
|
72
88
|
width: 100%;
|
|
73
|
-
z-index: 9999;
|
|
74
|
-
pointer-events: none;
|
|
75
|
-
background: white;
|
|
76
|
-
opacity: 1;
|
|
77
|
-
animation-duration: .35s;
|
|
78
|
-
animation-timing-function: ease;
|
|
79
89
|
}
|
|
80
90
|
|
|
81
91
|
#sidebar-fader {
|
|
82
|
-
position: fixed;
|
|
83
92
|
top: 0;
|
|
84
|
-
left: 0;
|
|
85
93
|
height: $sidebar-height;
|
|
86
94
|
width: 100%;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@media (min-width: 450px) {
|
|
98
|
+
#sidebar {
|
|
99
|
+
flex-direction: row;
|
|
100
|
+
justify-content: space-between;
|
|
101
|
+
align-items: center;
|
|
102
|
+
text-align: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.sidebar-header {
|
|
106
|
+
display: flex;
|
|
107
|
+
margin-left: 1em;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.sidebar-image-container {
|
|
111
|
+
margin-right: 1em;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.sidebar-image {
|
|
115
|
+
width: 80px;
|
|
116
|
+
height: 80px;
|
|
117
|
+
border-radius: 50%;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.sidebar-text {
|
|
121
|
+
text-align: start;
|
|
122
|
+
h1 {
|
|
123
|
+
margin-top: -0.2em;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.sidebar-links {
|
|
128
|
+
margin-right: 1em;
|
|
129
|
+
text-align: end;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.post-buttons {
|
|
133
|
+
margin: 3em 0;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@media (max-width: 450px) {
|
|
138
|
+
#sidebar {
|
|
139
|
+
flex-direction: column;
|
|
140
|
+
text-align: center;
|
|
141
|
+
justify-content: center;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.sidebar-image-container {
|
|
145
|
+
display: none;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.sidebar-text {
|
|
149
|
+
h1 {
|
|
150
|
+
margin-top: -0.3em;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.post-buttons {
|
|
155
|
+
margin: 0;
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-direction: column;
|
|
158
|
+
a {
|
|
159
|
+
margin: .5em;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
93
162
|
}
|
|
94
163
|
}
|
|
95
164
|
|
|
@@ -104,46 +173,37 @@
|
|
|
104
173
|
width: $sidebar-width;
|
|
105
174
|
height: 100%;
|
|
106
175
|
}
|
|
176
|
+
|
|
177
|
+
.sidebar-image {
|
|
178
|
+
width: 200px;
|
|
179
|
+
height: 200px;
|
|
180
|
+
border-radius: 50%;
|
|
181
|
+
}
|
|
107
182
|
|
|
108
183
|
.content {
|
|
109
|
-
flex: 1;
|
|
110
|
-
display: flex;
|
|
111
|
-
flex-direction: column;
|
|
112
|
-
align-items: center;
|
|
113
184
|
justify-content: space-between;
|
|
114
185
|
margin: 1em 1em 1em calc(1em + #{$sidebar-width});
|
|
115
186
|
}
|
|
116
187
|
|
|
117
188
|
.sidebar-links {
|
|
118
|
-
margin-top:
|
|
189
|
+
margin-top: 1em;
|
|
119
190
|
}
|
|
120
191
|
|
|
121
192
|
#content-fader {
|
|
122
|
-
position: fixed;
|
|
123
193
|
top: 0;
|
|
124
|
-
right: 0;
|
|
125
194
|
width: calc(100% - #{$sidebar-width});
|
|
126
195
|
height: 100%;
|
|
127
|
-
z-index: 9999;
|
|
128
|
-
pointer-events: none;
|
|
129
196
|
background: white;
|
|
130
|
-
opacity: 1;
|
|
131
|
-
animation-duration: .35s;
|
|
132
|
-
animation-timing-function: ease;
|
|
133
197
|
}
|
|
134
198
|
|
|
135
199
|
#sidebar-fader {
|
|
136
|
-
position: fixed;
|
|
137
200
|
bottom: 0;
|
|
138
|
-
left: 0;
|
|
139
201
|
height: 100%;
|
|
140
202
|
width: $sidebar-width;
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
animation-duration: .35s;
|
|
146
|
-
animation-timing-function: ease;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.post-buttons {
|
|
206
|
+
margin: 3em 0;
|
|
147
207
|
}
|
|
148
208
|
}
|
|
149
209
|
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
pre, code {
|
|
4
4
|
font-family: "Roboto Mono";
|
|
5
5
|
color: #cccccc;
|
|
6
|
-
font-size:
|
|
6
|
+
font-size: 1rem;
|
|
7
7
|
background-color: #f8f8f8;
|
|
8
|
-
font-size: 14px;
|
|
9
8
|
}
|
|
10
9
|
|
|
11
10
|
code {
|
|
@@ -17,7 +16,7 @@ code {
|
|
|
17
16
|
pre { // only apply for code blocks
|
|
18
17
|
overflow: auto;
|
|
19
18
|
display: block;
|
|
20
|
-
padding:
|
|
19
|
+
padding: 0 20px 20px 20px;
|
|
21
20
|
margin: 0 0 1em;
|
|
22
21
|
line-height: 1.3;
|
|
23
22
|
word-break: break-all;
|
|
@@ -46,16 +45,17 @@ pre code {
|
|
|
46
45
|
}
|
|
47
46
|
pre code {
|
|
48
47
|
color: #cccccc;
|
|
49
|
-
|
|
48
|
+
&::before {
|
|
50
49
|
content: attr(data-lang);
|
|
51
|
-
position:
|
|
50
|
+
position: -webkit-sticky;
|
|
51
|
+
position: sticky;
|
|
52
|
+
display: block;
|
|
52
53
|
top: 0;
|
|
53
|
-
|
|
54
|
+
left: 0;
|
|
54
55
|
color: #ccc;
|
|
55
|
-
text-align:
|
|
56
|
+
text-align: left;
|
|
56
57
|
text-transform: uppercase;
|
|
57
|
-
font-size: 0.
|
|
58
|
-
padding: 5px 10px 0;
|
|
58
|
+
font-size: 0.85rem;
|
|
59
59
|
line-height: 20px;
|
|
60
60
|
height: 20px;
|
|
61
61
|
font-weight: 600;
|
data/assets/js/post-grid-init.js
CHANGED
|
@@ -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.7.0
|
|
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-09 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
|