arco 0.4.4 → 0.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 005677b6e82a07acddb77c599807118330bd828ba162c4bc4c113a31ff985e09
4
- data.tar.gz: 614b354a81b60ae41c9615f58a7b577f82dd720d2f464e61c48e341a6a541cef
3
+ metadata.gz: 34c9177715720e4b51a74a81a2d1fbedb52be7a0c723803995646fffa3697529
4
+ data.tar.gz: 1aaff9ca6ce314be160c0c09b2fea63ad6682146ee6d4f92d084ca84bf9e1759
5
5
  SHA512:
6
- metadata.gz: 244dc7792f5b6a5cc3c1a58a9202863b44dae7dd1abd1cdf65e69fcde3aaa765c2c9f1b031ca1c3cc74b09fba8b95ac82e1b45854865485b2a4403d1a485bf55
7
- data.tar.gz: 4f2b2d30302c761723ee7fa759b4f636489895ede649f4b086b2c57536332e27571653354265c7c5247b62cc2e1540701423945c6f0cf739a4ef2fdec6deb05a
6
+ metadata.gz: 05bb49b4f18a1ceb6733d234c86bce8e078033e7648a4970fa2f6baf88a8dcb52ba9bc44e3a5def0b0c647997e41f5d501fd2723accd3086cb7c6bf0148bc607
7
+ data.tar.gz: ce9460e3995fdb845acab1980a2208cf29265bccbf100e0ff0d75033c4c7a070d523f3a2f9cab03d19b97d5b9561146b1bcda5057a7d236f5d8b4b5aefe608ea
data/README.md CHANGED
@@ -80,12 +80,39 @@ title: Post title
80
80
  description: Post description
81
81
  category: completed | ongoing
82
82
  permalink: /projects/post-title
83
- cover-image: /assets/image-for-front-page.png
84
- image: /assets/image-for-top-of-post.png
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]
85
90
  mathjax: true | false
86
91
  ---
87
92
  ```
88
93
 
94
+ ### Favicon
95
+
96
+ Simply add your favicon `favicon.png` to the root of your site.
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
+
89
116
  ### Markdown features
90
117
 
91
118
  [Check here](https://meebuhs.github.io/projects/arco) for examples of the supported markdown features.
@@ -1,6 +1,6 @@
1
1
  <section class="cover">
2
2
  <div class="cover-text">
3
- {% if site.image %}<img class="site-image" src="{{ site.image }}" />{% endif %}
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>
@@ -10,7 +10,7 @@
10
10
  <script
11
11
  type="text/javascript"
12
12
  charset="utf-8"
13
- src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
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
@@ -1,23 +1,33 @@
1
1
  <section id="sidebar" class="sidebar">
2
2
  <svg id="sidebar-fader"></svg>
3
- <div class="sidebar-text">
4
- {% if site.image %}<img class="site-image" src="{{ site.image }}" />{% endif %}
5
- <h1><a href="{{ "/projects/" }}" class="fade-onclick">{{ site.title }}</a></h1>
6
- <h6>{{ site.description }}</h6>
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
- {% assign identifier = page.url | split: "/" | last %}
10
- {% if identifier == "completed" %}
11
- completed
12
- {% else %}
13
- <a href="{{ "/projects/completed" }}" class="fade-onclick">completed</a>
14
- {% endif %}
15
- /
16
- {% if identifier == "ongoing" %}
17
- ongoing
18
- {% else %}
19
- <a href="{{ "/projects/ongoing" }}" class="fade-onclick">ongoing</a>
20
- {% endif %}
21
- {% if site.github_url %} / <a href="{{ site.github_url }}">github</a> {% endif %}{% if site.resume %} / <a href="{{ "/resume" }}" class="fade-onclick">resume</a> {% endif %}
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>
@@ -2,7 +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
+ <link rel="shortcut icon" type="image/png" href="favicon.png?">
6
6
  <link rel="stylesheet" href="/assets/css/main.css">
7
7
  </head>
8
8
  <body>
@@ -2,7 +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
+ <link rel="shortcut icon" type="image/png" href="favicon.png?">
6
6
  <link rel="stylesheet" href="/assets/css/main.css">
7
7
  <link rel="stylesheet" href="/assets/flexmasonry/flexmasonry.css">
8
8
  <script src="/assets/flexmasonry/flexmasonry.js"></script>
@@ -11,8 +11,11 @@
11
11
  <body>
12
12
  {% include sidebar.html %}
13
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>
14
20
  </body>
15
- <script src="/assets/js/sidebar.js"></script>
16
- <script src="/assets/js/fade-transitions.js"></script>
17
- <script>fadeInPage();</script>
18
21
  </html>
@@ -2,7 +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
+ <link rel="shortcut icon" type="image/png" href="favicon.png?">
6
6
  <link rel="stylesheet" href="/assets/css/main.css">
7
7
  {% seo %}
8
8
  </head>
@@ -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
- <img class="list-post-image" src="{{ post.cover-image }}" />
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>
@@ -21,6 +23,9 @@ layout: default
21
23
  <span class="list-post-date">{{ post.date | date_to_string}}</span>
22
24
  &middot;
23
25
  <a href="{{ "/projects/" }}{{ post.category }}" class="fade-onclick"><span class="list-post-category">{{ post.category }}</span></a>
26
+ <div class="list-post-tags">
27
+ {{ post.tags | join: ", "}}
28
+ </div>
24
29
  </div>
25
30
  </div>
26
31
  {% endfor %}
@@ -9,6 +9,17 @@ 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-primary">Home</a>
14
+ {% if page.urls.source %}
15
+ <a href="{{ page.urls.source }}" class="button-light-secondary">See the source</a>
16
+ {% endif %}
17
+ {% if page.urls.download %}
18
+ <a href="{{ page.urls.download }}" class="button-light-tertiary">Download {{ page.title }}</a>
19
+ {% endif %}
20
+
21
+ </div>
22
+
12
23
  <div class="post-title"><h1>{{ page.title }}</h1></div>
13
24
  <div class="post-description">{{ page.description }}</div>
14
25
  <div class="post-header">
@@ -16,11 +27,23 @@ layout: default
16
27
  &middot;
17
28
  <a href="{{ "/projects/" }}{{ page.category }}" class="fade-onclick"><span class="post-category">{{ page.category }}</span></a>
18
29
  </div>
19
- <img class="post-image" src="{{ page.image }}" />
30
+ <a href="{{ page.images.top }}">
31
+ <img class="post-image" alt="{{ page.title }} | {{ page.description | truncate: 80 }}" src="{{ page.images.top }}" />
32
+ </a>
20
33
 
21
34
  <div class="post-content">
22
35
  {{ content }}
23
36
  </div>
37
+
38
+ <div class="post-buttons">
39
+ <a href="{{ site.url }}\projects\" class="button-light-primary">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>
45
+ {% endif %}
46
+ </div>
24
47
  </div>
25
48
  {% include footer.html %}
26
49
  </section>
@@ -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
  }
@@ -125,11 +125,6 @@ li, ul {
125
125
  line-height: 1.5em;
126
126
  }
127
127
 
128
- .site-image {
129
- width: 200px;
130
- border-radius: 50%;
131
- }
132
-
133
128
  .content {
134
129
  width: auto;
135
130
  height: auto;
@@ -8,6 +8,7 @@
8
8
  border: 2px solid $background;
9
9
  background-color: $background;
10
10
  color: $highlight;
11
+ font-weight: bold;
11
12
  &:hover, &:focus {
12
13
  background-color: $highlight;
13
14
  color: $background;
@@ -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
+ }
@@ -30,7 +30,7 @@
30
30
  .list-post-title {
31
31
  color: $text-colour-dark;
32
32
  width: 100%;
33
- font-size: 18px;
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: 16px;
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: 14px;
56
+ font-size: 0.9em;
57
57
  }
58
58
 
59
59
  .list-post-category {
60
60
  font-weight: bold;
61
- font-size: 14px;
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
  }
@@ -4,7 +4,7 @@
4
4
  }
5
5
 
6
6
  .post-title h1 {
7
- margin-bottom: 0;
7
+ margin: 1.5em 0 0 0;
8
8
  }
9
9
 
10
10
  .post-description {
@@ -14,25 +14,30 @@
14
14
  .post-date {
15
15
  color: $secondary-highlight;
16
16
  font-weight: bold;
17
- font-size: 14px;
17
+ font-size: 0.9em;
18
18
  }
19
19
 
20
20
  .post-image {
21
21
  display: block;
22
- width: 70%;
22
+ max-width: 70%;
23
+ max-height: 50vh;
23
24
  margin: 2em auto 0 auto;
24
25
  border-radius: 5px;
25
26
  }
26
27
 
27
28
  .post-category {
28
29
  font-weight: bold;
29
- font-size: 14px;
30
+ font-size: 0.9em;
30
31
  color: $primary-highlight;
31
32
  &:hover, &:focus {
32
33
  color: lighten($primary-highlight, 14%);
33
34
  }
34
35
  }
35
36
 
37
+ .post-content {
38
+ margin-bottom: 2em;
39
+ }
40
+
36
41
  .post-content img {
37
42
  max-width: 90%;
38
43
  max-height: 600px;
@@ -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 {
@@ -35,7 +34,7 @@
35
34
  @media only screen and (orientation: portrait) {
36
35
  #sidebar {
37
36
  flex-direction: row;
38
- justify-content: space-evenly;
37
+ justify-content: space-between;
39
38
  align-items: center;
40
39
  text-align: center;
41
40
  }
@@ -50,9 +49,37 @@
50
49
  height: $sidebar-height-min;
51
50
  }
52
51
 
53
- .sidebar-text {
52
+ .sidebar-header {
54
53
  display: flex;
55
- flex-direction: column;
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;
56
83
  }
57
84
 
58
85
  .content {
@@ -104,6 +131,12 @@
104
131
  width: $sidebar-width;
105
132
  height: 100%;
106
133
  }
134
+
135
+ .sidebar-image {
136
+ width: 200px;
137
+ height: 200px;
138
+ border-radius: 50%;
139
+ }
107
140
 
108
141
  .content {
109
142
  flex: 1;
@@ -3,9 +3,8 @@
3
3
  pre, code {
4
4
  font-family: "Roboto Mono";
5
5
  color: #cccccc;
6
- font-size: 0.9em;
6
+ font-size: 1em;
7
7
  background-color: #f8f8f8;
8
- font-size: 14px;
9
8
  }
10
9
 
11
10
  code {
@@ -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">&rsaquo;</a><a id="prev">&lsaquo;</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">&rsaquo;</a><a id="prev">&lsaquo;</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">&rsaquo;</a><a id="prev">&lsaquo;</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.4
4
+ version: 0.6.5
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-02 00:00:00.000000000 Z
11
+ date: 2020-07-07 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