arco 0.6.0 → 0.8.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 +13 -6
- data/_includes/cover.html +6 -1
- data/_includes/mathjax.html +1 -1
- data/_includes/sidebar.html +40 -17
- data/_layouts/404.html +1 -0
- data/_layouts/default.html +1 -0
- data/_layouts/landing.html +1 -0
- data/_layouts/post-list.html +4 -2
- 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 +5 -5
- data/_sass/cover.scss +12 -1
- data/_sass/post-list.scss +7 -7
- data/_sass/post.scss +25 -11
- data/_sass/sidebar.scss +117 -51
- data/_sass/syntax-highlighting.scss +9 -9
- data/assets/images/demo.gif +0 -0
- data/assets/js/post-grid-init.js +5 -2
- data/assets/lightbox/lightbox.js +3 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 526cd05606bf060a1a1b17e57e7be4ed0c84763569b5860b0f2123dff9a148ff
|
4
|
+
data.tar.gz: 707a6ba4bb548d1f1edb5053809822fc51225b593c0012bf7ed3d48573e77b18
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 75050f7bd3ca7302c8dc132058af92249c6646c781f4c859d8f40944bca14e76582ee9ea5627a1cc0244185012d10cdd8e229f0fe6b9917d26fded4899a097ed
|
7
|
+
data.tar.gz: 765cb69e42c12307d9f36d21225ca7385b7cb1108f6fd66f83ead45138b22963f0a11c32bdd40840ebec4cfea25dfefbe3f9e72f7af80916e9564cbe7df15691
|
data/README.md
CHANGED
@@ -1,6 +1,10 @@
|
|
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
|
+
|
5
|
+
<p align="center">
|
6
|
+
<img src="assets/images/demo.gif" width="60%">
|
7
|
+
</p>
|
4
8
|
|
5
9
|
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
10
|
|
@@ -80,9 +84,12 @@ title: Post title
|
|
80
84
|
description: Post description
|
81
85
|
category: completed | ongoing
|
82
86
|
permalink: /projects/post-title
|
83
|
-
|
84
|
-
|
85
|
-
|
87
|
+
urls:
|
88
|
+
source: https://project.source/link/
|
89
|
+
download: https://project.download/link/
|
90
|
+
images:
|
91
|
+
cover: /assets/image-for-front-page.png
|
92
|
+
top: /assets/image-for-top-of-post.png
|
86
93
|
tags: [tags, which, relate, to, post]
|
87
94
|
mathjax: true | false
|
88
95
|
---
|
@@ -102,10 +109,10 @@ In order to enable lazy loading on an image you must add a `data-echo` attribute
|
|
102
109
|
|
103
110
|
### Image lightbox
|
104
111
|
|
105
|
-
In order to open an image in a fullscreen lightbox on click, you must wrap the image in a link tag like so:
|
112
|
+
In order to open an image in a fullscreen lightbox on click, you must wrap the image in a link tag with the class `clickable-image` like so:
|
106
113
|
|
107
114
|
```html
|
108
|
-
<a href="/assets/actual-image.png">
|
115
|
+
<a class="clickable-image" href="/assets/actual-image.png">
|
109
116
|
<img src="/assets/placeholder-for-image.png" alt="alt-text" data-echo="/assets/actual-image.png" />
|
110
117
|
</a>
|
111
118
|
```
|
data/_includes/cover.html
CHANGED
@@ -1,8 +1,13 @@
|
|
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
|
+
{% if site.tagline %}
|
7
|
+
<div class="cover-tagline">
|
8
|
+
{{ site.tagline }}
|
9
|
+
</div>
|
10
|
+
{% endif %}
|
6
11
|
</div>
|
7
12
|
<div class="open-button-container">
|
8
13
|
<a href="/projects/" id="open-button" class="button-dark">See my projects</a>
|
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,46 @@
|
|
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
|
+
{% if site.tagline %}
|
13
|
+
<div class="sidebar-tagline">
|
14
|
+
{{ site.tagline }}
|
15
|
+
</div>
|
16
|
+
{% endif %}
|
17
|
+
</div>
|
7
18
|
</div>
|
8
19
|
<div class="sidebar-links">
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
ongoing
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
20
|
+
<div class="sidebar-links-top">
|
21
|
+
{% assign identifier = page.url | split: "/" | last %}
|
22
|
+
{% if identifier == "completed" %}
|
23
|
+
completed
|
24
|
+
{% else %}
|
25
|
+
<a href="{{ "/projects/completed" }}" class="fade-onclick">completed</a>
|
26
|
+
{% endif %}
|
27
|
+
/
|
28
|
+
{% if identifier == "ongoing" %}
|
29
|
+
ongoing
|
30
|
+
{% else %}
|
31
|
+
<a href="{{ "/projects/ongoing" }}" class="fade-onclick">ongoing</a>
|
32
|
+
{% endif %}
|
33
|
+
</div>
|
34
|
+
<div class="sidebar-links-bottom">
|
35
|
+
{% if site.github_url %}
|
36
|
+
<a href="{{ site.github_url }}">github</a>
|
37
|
+
{% endif %}
|
38
|
+
{% if site.github_url and site.resume %}
|
39
|
+
/
|
40
|
+
{% endif %}
|
41
|
+
{% if site.resume %}
|
42
|
+
<a href="{{ "/resume" }}" class="fade-onclick">resume</a>
|
43
|
+
{% endif %}
|
44
|
+
</div>
|
22
45
|
</div>
|
23
46
|
</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">
|
data/_layouts/landing.html
CHANGED
data/_layouts/post-list.html
CHANGED
@@ -10,10 +10,12 @@ 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
|
-
<div class="list-post-
|
18
|
+
<div class="list-post-description">{{ post.description }}</div>
|
17
19
|
</div>
|
18
20
|
</div>
|
19
21
|
</a>
|
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
|
+
<div class="clickable-image"><a href="{{ page.images.top }}" style="max-width: 80%">
|
31
|
+
<img class="post-image" alt="{{ page.title }} | {{ page.description | truncate: 80 }}" src="{{ page.images.top }}" />
|
32
|
+
</a></div>
|
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,12 +1,12 @@
|
|
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;
|
9
|
-
$
|
9
|
+
$description-colour: #474747;
|
10
10
|
$text-colour-light: white;
|
11
11
|
$text-colour-dark: black;
|
12
12
|
|
@@ -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: 150px;
|
19
|
+
$sidebar-height: 200px;
|
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,15 @@
|
|
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
|
+
}
|
48
|
+
|
49
|
+
.cover-tagline {
|
50
|
+
max-width: 250px;
|
51
|
+
margin: auto;
|
52
|
+
color: $hover-colour;
|
53
|
+
}
|
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;
|
@@ -40,10 +40,10 @@
|
|
40
40
|
}
|
41
41
|
}
|
42
42
|
|
43
|
-
.list-post-
|
44
|
-
color: $
|
43
|
+
.list-post-description {
|
44
|
+
color: $description-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,15 @@
|
|
1
|
+
@media only screen and (orientation: landscape) and (min-width: 900px) {
|
2
|
+
.post {
|
3
|
+
max-width: 900px !important;
|
4
|
+
}
|
5
|
+
}
|
6
|
+
|
1
7
|
.post {
|
2
|
-
|
3
|
-
width: 100%;
|
8
|
+
max-width: 100%;
|
4
9
|
}
|
5
10
|
|
6
11
|
.post-title h1 {
|
7
|
-
margin:
|
12
|
+
margin: 0;
|
8
13
|
}
|
9
14
|
|
10
15
|
.post-description {
|
@@ -14,19 +19,19 @@
|
|
14
19
|
.post-date {
|
15
20
|
color: $secondary-highlight;
|
16
21
|
font-weight: bold;
|
17
|
-
font-size:
|
22
|
+
font-size: 0.9rem;
|
18
23
|
}
|
19
24
|
|
20
25
|
.post-image {
|
21
|
-
|
22
|
-
|
23
|
-
margin: 2em auto 0 auto;
|
26
|
+
max-width: 100%;
|
27
|
+
max-height: 600px;
|
24
28
|
border-radius: 5px;
|
29
|
+
margin-top: 1em;
|
25
30
|
}
|
26
31
|
|
27
32
|
.post-category {
|
28
33
|
font-weight: bold;
|
29
|
-
font-size:
|
34
|
+
font-size: 0.9rem;
|
30
35
|
color: $primary-highlight;
|
31
36
|
&:hover, &:focus {
|
32
37
|
color: lighten($primary-highlight, 14%);
|
@@ -37,10 +42,19 @@
|
|
37
42
|
margin-bottom: 2em;
|
38
43
|
}
|
39
44
|
|
45
|
+
.clickable-image {
|
46
|
+
max-width: 100%;
|
47
|
+
max-height: 600px;
|
48
|
+
text-align: center;
|
49
|
+
}
|
50
|
+
|
51
|
+
.clickable-image a {
|
52
|
+
max-width: 80%;
|
53
|
+
display: inline-block;
|
54
|
+
}
|
55
|
+
|
40
56
|
.post-content img {
|
41
|
-
max-width:
|
57
|
+
max-width: 100%;
|
42
58
|
max-height: 600px;
|
43
|
-
display: block;
|
44
|
-
margin: 0 auto;
|
45
59
|
border-radius: 5px;
|
46
60
|
}
|
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 {
|
@@ -22,6 +21,12 @@
|
|
22
21
|
}
|
23
22
|
}
|
24
23
|
|
24
|
+
.sidebar-tagline {
|
25
|
+
max-width: 250px;
|
26
|
+
margin: auto;
|
27
|
+
color: $hover-colour;
|
28
|
+
}
|
29
|
+
|
25
30
|
#sidebar {
|
26
31
|
display: flex;
|
27
32
|
top: 0;
|
@@ -32,14 +37,36 @@
|
|
32
37
|
transition: all .35s ease;
|
33
38
|
}
|
34
39
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
40
|
+
.content {
|
41
|
+
display: flex;
|
42
|
+
flex: 1;
|
43
|
+
flex-direction: column;
|
44
|
+
align-items: center;
|
45
|
+
}
|
46
|
+
|
47
|
+
#content-fader {
|
48
|
+
position: fixed;
|
49
|
+
right: 0;
|
50
|
+
z-index: 9999;
|
51
|
+
pointer-events: none;
|
52
|
+
background: white;
|
53
|
+
opacity: 1;
|
54
|
+
animation-duration: .35s;
|
55
|
+
animation-timing-function: ease;
|
56
|
+
}
|
42
57
|
|
58
|
+
#sidebar-fader {
|
59
|
+
position: fixed;
|
60
|
+
left: 0;
|
61
|
+
z-index: 9999;
|
62
|
+
pointer-events: none;
|
63
|
+
background: $sidebar-colour;
|
64
|
+
opacity: 1;
|
65
|
+
animation-duration: .35s;
|
66
|
+
animation-timing-function: ease;
|
67
|
+
}
|
68
|
+
|
69
|
+
@media only screen and (orientation: portrait) {
|
43
70
|
.sidebar {
|
44
71
|
width: 100%;
|
45
72
|
height: $sidebar-height;
|
@@ -51,45 +78,93 @@
|
|
51
78
|
}
|
52
79
|
|
53
80
|
.sidebar-text {
|
54
|
-
|
55
|
-
|
81
|
+
h6 {
|
82
|
+
margin: 0;
|
83
|
+
}
|
56
84
|
}
|
57
85
|
|
58
86
|
.content {
|
59
|
-
flex: 1;
|
60
87
|
max-width: 100%;
|
61
|
-
margin:
|
62
|
-
display: flex;
|
63
|
-
flex-direction: column;
|
64
|
-
align-items: center;
|
88
|
+
margin: calc(#{$sidebar-height} + 1em) 1em 1em 1em;
|
65
89
|
}
|
66
90
|
|
67
91
|
#content-fader {
|
68
|
-
position: fixed;
|
69
92
|
bottom: 0;
|
70
|
-
right: 0;
|
71
93
|
height: calc(100% - #{$sidebar-height});
|
72
94
|
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
95
|
}
|
80
96
|
|
81
97
|
#sidebar-fader {
|
82
|
-
position: fixed;
|
83
98
|
top: 0;
|
84
|
-
left: 0;
|
85
99
|
height: $sidebar-height;
|
86
100
|
width: 100%;
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
101
|
+
}
|
102
|
+
|
103
|
+
@media (min-width: 450px) {
|
104
|
+
#sidebar {
|
105
|
+
flex-direction: row;
|
106
|
+
justify-content: space-between;
|
107
|
+
align-items: center;
|
108
|
+
text-align: center;
|
109
|
+
}
|
110
|
+
|
111
|
+
.sidebar-header {
|
112
|
+
display: flex;
|
113
|
+
margin-left: 1em;
|
114
|
+
}
|
115
|
+
|
116
|
+
.sidebar-image-container {
|
117
|
+
margin-right: 1em;
|
118
|
+
}
|
119
|
+
|
120
|
+
.sidebar-image {
|
121
|
+
width: 80px;
|
122
|
+
height: 80px;
|
123
|
+
border-radius: 50%;
|
124
|
+
}
|
125
|
+
|
126
|
+
.sidebar-text {
|
127
|
+
text-align: start;
|
128
|
+
h1 {
|
129
|
+
margin-top: -0.2em;
|
130
|
+
}
|
131
|
+
}
|
132
|
+
|
133
|
+
.sidebar-links {
|
134
|
+
margin-right: 1em;
|
135
|
+
text-align: end;
|
136
|
+
}
|
137
|
+
|
138
|
+
.post-buttons {
|
139
|
+
margin: 3em 0;
|
140
|
+
}
|
141
|
+
}
|
142
|
+
|
143
|
+
@media (max-width: 450px) {
|
144
|
+
#sidebar {
|
145
|
+
flex-direction: column;
|
146
|
+
text-align: center;
|
147
|
+
justify-content: center;
|
148
|
+
}
|
149
|
+
|
150
|
+
.sidebar-image-container {
|
151
|
+
display: none;
|
152
|
+
}
|
153
|
+
|
154
|
+
.sidebar-text {
|
155
|
+
h1 {
|
156
|
+
margin-top: -0.3em;
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
.post-buttons {
|
161
|
+
margin: 0;
|
162
|
+
display: flex;
|
163
|
+
flex-direction: column;
|
164
|
+
a {
|
165
|
+
margin: .5em;
|
166
|
+
}
|
167
|
+
}
|
93
168
|
}
|
94
169
|
}
|
95
170
|
|
@@ -104,46 +179,37 @@
|
|
104
179
|
width: $sidebar-width;
|
105
180
|
height: 100%;
|
106
181
|
}
|
182
|
+
|
183
|
+
.sidebar-image {
|
184
|
+
width: 200px;
|
185
|
+
height: 200px;
|
186
|
+
border-radius: 50%;
|
187
|
+
}
|
107
188
|
|
108
189
|
.content {
|
109
|
-
flex: 1;
|
110
|
-
display: flex;
|
111
|
-
flex-direction: column;
|
112
|
-
align-items: center;
|
113
190
|
justify-content: space-between;
|
114
191
|
margin: 1em 1em 1em calc(1em + #{$sidebar-width});
|
115
192
|
}
|
116
193
|
|
117
194
|
.sidebar-links {
|
118
|
-
margin-top:
|
195
|
+
margin-top: 1em;
|
119
196
|
}
|
120
197
|
|
121
198
|
#content-fader {
|
122
|
-
position: fixed;
|
123
199
|
top: 0;
|
124
|
-
right: 0;
|
125
200
|
width: calc(100% - #{$sidebar-width});
|
126
201
|
height: 100%;
|
127
|
-
z-index: 9999;
|
128
|
-
pointer-events: none;
|
129
202
|
background: white;
|
130
|
-
opacity: 1;
|
131
|
-
animation-duration: .35s;
|
132
|
-
animation-timing-function: ease;
|
133
203
|
}
|
134
204
|
|
135
205
|
#sidebar-fader {
|
136
|
-
position: fixed;
|
137
206
|
bottom: 0;
|
138
|
-
left: 0;
|
139
207
|
height: 100%;
|
140
208
|
width: $sidebar-width;
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
animation-duration: .35s;
|
146
|
-
animation-timing-function: ease;
|
209
|
+
}
|
210
|
+
|
211
|
+
.post-buttons {
|
212
|
+
margin: 3em 0;
|
147
213
|
}
|
148
214
|
}
|
149
215
|
|
@@ -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;
|
Binary file
|
data/assets/js/post-grid-init.js
CHANGED
data/assets/lightbox/lightbox.js
CHANGED
@@ -111,6 +111,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
111
111
|
if(event.target.id != 'next' && event.target.id != 'prev'){
|
112
112
|
this.innerHTML = '';
|
113
113
|
document.getElementById('lightbox').style.display = 'none';
|
114
|
+
document.body.style.overflow="visible";
|
114
115
|
}
|
115
116
|
});
|
116
117
|
|
@@ -121,6 +122,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
121
122
|
event.preventDefault();
|
122
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>';
|
123
124
|
document.getElementById('lightbox').style.display = 'block';
|
125
|
+
document.body.style.overflow="hidden";
|
124
126
|
|
125
127
|
setGallery(this);
|
126
128
|
});
|
@@ -133,6 +135,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
|
133
135
|
event.preventDefault();
|
134
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>';
|
135
137
|
document.getElementById('lightbox').style.display = 'block';
|
138
|
+
document.body.style.overflow="hidden";
|
136
139
|
|
137
140
|
setGallery(this);
|
138
141
|
});
|
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.8.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-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -76,6 +76,7 @@ files:
|
|
76
76
|
- assets/fonts/roboto-mono/RobotoMono-BoldItalic.ttf
|
77
77
|
- assets/fonts/roboto-mono/RobotoMono-Italic.ttf
|
78
78
|
- assets/fonts/roboto-mono/RobotoMono-Regular.ttf
|
79
|
+
- assets/images/demo.gif
|
79
80
|
- assets/js/fade-transitions.js
|
80
81
|
- assets/js/post-grid-init.js
|
81
82
|
- assets/js/sidebar.js
|