arco 0.6.3 → 0.8.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +15 -11
- data/_includes/cover.html +5 -0
- data/_includes/sidebar.html +14 -17
- data/_layouts/404.html +2 -1
- data/_layouts/default.html +2 -1
- data/_layouts/landing.html +2 -1
- data/_layouts/post-list.html +6 -8
- data/_layouts/post.html +17 -10
- data/_sass/arco.scss +6 -0
- data/_sass/buttons.scss +1 -0
- data/_sass/constants.scss +5 -5
- data/_sass/cover.scss +6 -0
- data/_sass/post-list.scss +7 -17
- data/_sass/post.scss +27 -16
- data/_sass/sidebar.scss +118 -75
- data/_sass/syntax-highlighting.scss +9 -8
- data/assets/images/GitHub-Mark-Light-64px.png +0 -0
- data/assets/images/demo.gif +0 -0
- data/assets/js/post-grid-init.js +5 -2
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d5a37383a5b47ece7a581b757185eaac67f325c6c682547ec5ecaf5ef0f3bfc7
|
4
|
+
data.tar.gz: c8acd591f1bb03327e8de3de979080899d3b369a4e246b248a95eee4f4c77d5f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 796e4e121b0d95e2d460135b677f7291aa873715eb73bce0fb79967d06ed593e0f7d7c6fc354be09e01b3b895b2fa4929d9052a72eb10ee7eadd3815d0319f5e
|
7
|
+
data.tar.gz: d1a173c25f42aab7a711d818b1f85e3d34201d77b8344daa632b53ac63ec4fe5c22bd7daf2b3c72d34a9c971ec6338cde73368a54b1c2a64f7a22aabd6146677
|
data/README.md
CHANGED
@@ -1,11 +1,17 @@
|
|
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
|
|
7
11
|
See this theme in use at [meebuhs.github.io](https://meebuhs.github.io) and check the [source code](https://github.com/meebuhs/meebuhs.github.io) to get yourself started.
|
8
12
|
|
13
|
+
Also check the the usage examples in [this post](https://meebuhs.github.io/projects/arco).
|
14
|
+
|
9
15
|
## Installation
|
10
16
|
|
11
17
|
Add this line to your Jekyll site's `Gemfile`:
|
@@ -78,11 +84,13 @@ There are additional parameters which can be set for use with `jekyll-seo-tag`.
|
|
78
84
|
layout: post
|
79
85
|
title: Post title
|
80
86
|
description: Post description
|
81
|
-
category: completed | ongoing
|
82
87
|
permalink: /projects/post-title
|
83
|
-
|
84
|
-
|
85
|
-
|
88
|
+
urls:
|
89
|
+
source: https://project.source/link/
|
90
|
+
download: https://project.download/link/
|
91
|
+
images:
|
92
|
+
cover: /assets/image-for-front-page.png
|
93
|
+
top: /assets/image-for-top-of-post.png
|
86
94
|
tags: [tags, which, relate, to, post]
|
87
95
|
mathjax: true | false
|
88
96
|
---
|
@@ -102,18 +110,14 @@ In order to enable lazy loading on an image you must add a `data-echo` attribute
|
|
102
110
|
|
103
111
|
### Image lightbox
|
104
112
|
|
105
|
-
In order to open an image in a fullscreen lightbox on click, you must wrap the image in a link tag like so:
|
113
|
+
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
114
|
|
107
115
|
```html
|
108
|
-
<a href="/assets/actual-image.png">
|
116
|
+
<a class="clickable-image" href="/assets/actual-image.png">
|
109
117
|
<img src="/assets/placeholder-for-image.png" alt="alt-text" data-echo="/assets/actual-image.png" />
|
110
118
|
</a>
|
111
119
|
```
|
112
120
|
|
113
|
-
### Markdown features
|
114
|
-
|
115
|
-
[Check here](https://meebuhs.github.io/projects/arco) for examples of the supported markdown features.
|
116
|
-
|
117
121
|
### Resume support
|
118
122
|
|
119
123
|
To add a resume to the site, set `resume: true` in your `_config.yml`.
|
data/_includes/cover.html
CHANGED
@@ -3,6 +3,11 @@
|
|
3
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/sidebar.html
CHANGED
@@ -9,25 +9,22 @@
|
|
9
9
|
<div class="sidebar-text">
|
10
10
|
<h1><a href="{{ "/projects/" }}" class="fade-onclick">{{ site.title }}</a></h1>
|
11
11
|
<h6>{{ site.description }}</h6>
|
12
|
+
{% if site.tagline %}
|
13
|
+
<div class="sidebar-tagline">
|
14
|
+
{{ site.tagline }}
|
15
|
+
</div>
|
16
|
+
{% endif %}
|
12
17
|
</div>
|
13
18
|
</div>
|
14
19
|
<div class="sidebar-links">
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
/
|
23
|
-
|
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>
|
20
|
+
{% if site.github_url %}
|
21
|
+
<a href="{{ site.github_url }}"><img class="github-image" src="/assets/images/GitHub-Mark-Light-64px.png"/>github</a>
|
22
|
+
{% endif %}
|
23
|
+
{% if site.github_url and site.resume %}
|
24
|
+
/
|
25
|
+
{% endif %}
|
26
|
+
{% if site.resume %}
|
27
|
+
<a href="{{ "/resume" }}" class="fade-onclick">resume</a>
|
28
|
+
{% endif %}
|
32
29
|
</div>
|
33
30
|
</section>
|
data/_layouts/404.html
CHANGED
@@ -2,7 +2,8 @@
|
|
2
2
|
<html lang="en-AU">
|
3
3
|
<head>
|
4
4
|
<meta charset="UTF-8">
|
5
|
-
<
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
6
|
+
<link rel="shortcut icon" type="image/png" href="/favicon.png">
|
6
7
|
<link rel="stylesheet" href="/assets/css/main.css">
|
7
8
|
</head>
|
8
9
|
<body>
|
data/_layouts/default.html
CHANGED
@@ -2,7 +2,8 @@
|
|
2
2
|
<html lang="en-AU">
|
3
3
|
<head>
|
4
4
|
<meta charset="UTF-8">
|
5
|
-
<
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
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">
|
8
9
|
<script src="/assets/flexmasonry/flexmasonry.js"></script>
|
data/_layouts/landing.html
CHANGED
@@ -2,7 +2,8 @@
|
|
2
2
|
<html lang="en-AU">
|
3
3
|
<head>
|
4
4
|
<meta charset="UTF-8">
|
5
|
-
<
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
6
|
+
<link rel="shortcut icon" type="image/png" href="/favicon.png">
|
6
7
|
<link rel="stylesheet" href="/assets/css/main.css">
|
7
8
|
{% seo %}
|
8
9
|
</head>
|
data/_layouts/post-list.html
CHANGED
@@ -5,25 +5,23 @@ layout: default
|
|
5
5
|
<section class="content">
|
6
6
|
<svg id="content-fader"></svg>
|
7
7
|
<div class="list-posts">
|
8
|
-
{%
|
9
|
-
{% for post in posts %}
|
8
|
+
{% for post in site.posts %}
|
10
9
|
<div class="list-post">
|
11
10
|
<a href="{{ post.url }}" class="fade-onclick">
|
12
11
|
<div class="list-post-link">
|
13
|
-
|
12
|
+
{% if post.images.cover %}
|
13
|
+
<img class="list-post-image" src="{{ post.images.cover }}" />
|
14
|
+
{% endif %}
|
14
15
|
<div class="list-post-info">
|
15
16
|
<div class="list-post-title">{{ post.title }}</div>
|
16
|
-
<div class="list-post-
|
17
|
+
<div class="list-post-description">{{ post.description }}</div>
|
17
18
|
</div>
|
18
19
|
</div>
|
19
20
|
</a>
|
20
21
|
<div class="list-post-footer">
|
21
22
|
<span class="list-post-date">{{ post.date | date_to_string}}</span>
|
22
23
|
·
|
23
|
-
<
|
24
|
-
<div class="list-post-tags">
|
25
|
-
{{ post.tags | join: ", "}}
|
26
|
-
</div>
|
24
|
+
<span class="list-post-tags">{{ post.tags | join: ", "}}</span>
|
27
25
|
</div>
|
28
26
|
</div>
|
29
27
|
{% endfor %}
|
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>
|
@@ -21,20 +25,23 @@ layout: default
|
|
21
25
|
<div class="post-header">
|
22
26
|
<span class="post-date">{{ page.date | date_to_string}}</span>
|
23
27
|
·
|
24
|
-
<
|
28
|
+
<span class="post-tags">{{ page.tags | join: ", "}}</span>
|
25
29
|
</div>
|
26
|
-
<a href="{{ page.
|
27
|
-
<img class="post-image" alt="{{ page.title }} | {{ page.description | truncate: 80 }}" src="{{ page.
|
28
|
-
</a>
|
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>
|
29
33
|
|
30
34
|
<div class="post-content">
|
31
35
|
{{ content }}
|
32
36
|
</div>
|
33
37
|
|
34
38
|
<div class="post-buttons">
|
35
|
-
<a href="{{ site.url }}\projects\" class="button-light-
|
36
|
-
{% if page.source
|
37
|
-
<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>
|
38
45
|
{% endif %}
|
39
46
|
</div>
|
40
47
|
</div>
|
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,6 +126,11 @@ li, ul {
|
|
125
126
|
line-height: 1.5em;
|
126
127
|
}
|
127
128
|
|
129
|
+
.MathJax_Display {
|
130
|
+
overflow-x: auto;
|
131
|
+
overflow-y: hidden;
|
132
|
+
}
|
133
|
+
|
128
134
|
.content {
|
129
135
|
width: auto;
|
130
136
|
height: auto;
|
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
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: 1.
|
33
|
+
font-size: 1.5rem;
|
34
34
|
font-weight: bold;
|
35
35
|
a {
|
36
36
|
color: white;
|
@@ -40,34 +40,24 @@
|
|
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 {
|
50
|
-
margin
|
50
|
+
margin: 0 1.4em;
|
51
51
|
}
|
52
52
|
|
53
53
|
.list-post-date {
|
54
54
|
color: $secondary-highlight;
|
55
55
|
font-weight: bold;
|
56
|
-
font-size: 0.
|
57
|
-
}
|
58
|
-
|
59
|
-
.list-post-category {
|
60
|
-
font-weight: bold;
|
61
|
-
font-size: 0.9em;
|
62
|
-
color: $primary-highlight;
|
63
|
-
&:hover, &:focus {
|
64
|
-
color: lighten($primary-highlight, 14%);
|
65
|
-
}
|
56
|
+
font-size: 0.9rem;
|
66
57
|
}
|
67
58
|
|
68
59
|
.list-post-tags {
|
69
60
|
font-weight: bold;
|
70
|
-
font-size: 0.
|
61
|
+
font-size: 0.9rem;
|
71
62
|
color: $tertiary-highlight;
|
72
|
-
margin-top: 0.4em;
|
73
63
|
}
|
data/_sass/post.scss
CHANGED
@@ -1,10 +1,15 @@
|
|
1
|
+
@media only screen and (orientation: landscape) and (min-width: 1250px) {
|
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,33 +19,39 @@
|
|
14
19
|
.post-date {
|
15
20
|
color: $secondary-highlight;
|
16
21
|
font-weight: bold;
|
17
|
-
font-size: 0.
|
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
|
-
.post-
|
32
|
+
.post-tags {
|
28
33
|
font-weight: bold;
|
29
|
-
font-size: 0.
|
30
|
-
color: $
|
31
|
-
&:hover, &:focus {
|
32
|
-
color: lighten($primary-highlight, 14%);
|
33
|
-
}
|
34
|
+
font-size: 0.9rem;
|
35
|
+
color: $tertiary-highlight;
|
34
36
|
}
|
35
37
|
|
36
38
|
.post-content {
|
37
39
|
margin-bottom: 2em;
|
38
40
|
}
|
39
41
|
|
42
|
+
.clickable-image {
|
43
|
+
max-width: 100%;
|
44
|
+
max-height: 600px;
|
45
|
+
text-align: center;
|
46
|
+
}
|
47
|
+
|
48
|
+
.clickable-image a {
|
49
|
+
max-width: 80%;
|
50
|
+
display: inline-block;
|
51
|
+
}
|
52
|
+
|
40
53
|
.post-content img {
|
41
|
-
max-width:
|
54
|
+
max-width: 100%;
|
42
55
|
max-height: 600px;
|
43
|
-
display: block;
|
44
|
-
margin: 0 auto;
|
45
56
|
border-radius: 5px;
|
46
57
|
}
|
data/_sass/sidebar.scss
CHANGED
@@ -21,6 +21,18 @@
|
|
21
21
|
}
|
22
22
|
}
|
23
23
|
|
24
|
+
.sidebar-tagline {
|
25
|
+
max-width: 250px;
|
26
|
+
margin: auto;
|
27
|
+
color: $hover-colour;
|
28
|
+
}
|
29
|
+
|
30
|
+
.github-image {
|
31
|
+
width: 1rem;
|
32
|
+
margin-right: .5rem;
|
33
|
+
vertical-align: middle;
|
34
|
+
}
|
35
|
+
|
24
36
|
#sidebar {
|
25
37
|
display: flex;
|
26
38
|
top: 0;
|
@@ -31,14 +43,36 @@
|
|
31
43
|
transition: all .35s ease;
|
32
44
|
}
|
33
45
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
46
|
+
.content {
|
47
|
+
display: flex;
|
48
|
+
flex: 1;
|
49
|
+
flex-direction: column;
|
50
|
+
align-items: center;
|
51
|
+
}
|
52
|
+
|
53
|
+
#content-fader {
|
54
|
+
position: fixed;
|
55
|
+
right: 0;
|
56
|
+
z-index: 9999;
|
57
|
+
pointer-events: none;
|
58
|
+
background: white;
|
59
|
+
opacity: 1;
|
60
|
+
animation-duration: .35s;
|
61
|
+
animation-timing-function: ease;
|
62
|
+
}
|
63
|
+
|
64
|
+
#sidebar-fader {
|
65
|
+
position: fixed;
|
66
|
+
left: 0;
|
67
|
+
z-index: 9999;
|
68
|
+
pointer-events: none;
|
69
|
+
background: $sidebar-colour;
|
70
|
+
opacity: 1;
|
71
|
+
animation-duration: .35s;
|
72
|
+
animation-timing-function: ease;
|
73
|
+
}
|
41
74
|
|
75
|
+
@media only screen and (orientation: portrait) {
|
42
76
|
.sidebar {
|
43
77
|
width: 100%;
|
44
78
|
height: $sidebar-height;
|
@@ -49,74 +83,98 @@
|
|
49
83
|
height: $sidebar-height-min;
|
50
84
|
}
|
51
85
|
|
52
|
-
.sidebar-header {
|
53
|
-
display: flex;
|
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
86
|
.sidebar-text {
|
68
|
-
h1 {
|
69
|
-
font-size: 2.5em;
|
70
|
-
margin-top: -0.3em;
|
71
|
-
}
|
72
87
|
h6 {
|
73
|
-
font-size: 1.3em;
|
74
88
|
margin: 0;
|
75
89
|
}
|
76
|
-
text-align: start;
|
77
|
-
}
|
78
|
-
|
79
|
-
.sidebar-links {
|
80
|
-
font-size: 1.5em;
|
81
|
-
margin-right: 1em;
|
82
|
-
text-align: end;
|
83
90
|
}
|
84
91
|
|
85
92
|
.content {
|
86
|
-
flex: 1;
|
87
93
|
max-width: 100%;
|
88
|
-
margin:
|
89
|
-
display: flex;
|
90
|
-
flex-direction: column;
|
91
|
-
align-items: center;
|
94
|
+
margin: calc(#{$sidebar-height} + 1em) 1em 1em 1em;
|
92
95
|
}
|
93
96
|
|
94
97
|
#content-fader {
|
95
|
-
position: fixed;
|
96
98
|
bottom: 0;
|
97
|
-
right: 0;
|
98
99
|
height: calc(100% - #{$sidebar-height});
|
99
100
|
width: 100%;
|
100
|
-
z-index: 9999;
|
101
|
-
pointer-events: none;
|
102
|
-
background: white;
|
103
|
-
opacity: 1;
|
104
|
-
animation-duration: .35s;
|
105
|
-
animation-timing-function: ease;
|
106
101
|
}
|
107
102
|
|
108
103
|
#sidebar-fader {
|
109
|
-
position: fixed;
|
110
104
|
top: 0;
|
111
|
-
left: 0;
|
112
105
|
height: $sidebar-height;
|
113
106
|
width: 100%;
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
107
|
+
}
|
108
|
+
|
109
|
+
@media (min-width: 450px) {
|
110
|
+
#sidebar {
|
111
|
+
flex-direction: row;
|
112
|
+
justify-content: space-between;
|
113
|
+
align-items: center;
|
114
|
+
text-align: center;
|
115
|
+
}
|
116
|
+
|
117
|
+
.sidebar-header {
|
118
|
+
display: flex;
|
119
|
+
margin-left: 1em;
|
120
|
+
}
|
121
|
+
|
122
|
+
.sidebar-image-container {
|
123
|
+
margin-right: 1em;
|
124
|
+
}
|
125
|
+
|
126
|
+
.sidebar-image {
|
127
|
+
width: 80px;
|
128
|
+
height: 80px;
|
129
|
+
border-radius: 50%;
|
130
|
+
}
|
131
|
+
|
132
|
+
.sidebar-text {
|
133
|
+
text-align: start;
|
134
|
+
h1 {
|
135
|
+
margin-top: -0.2em;
|
136
|
+
}
|
137
|
+
}
|
138
|
+
|
139
|
+
.sidebar-links {
|
140
|
+
margin-right: 1em;
|
141
|
+
text-align: end;
|
142
|
+
}
|
143
|
+
|
144
|
+
.post-buttons {
|
145
|
+
margin: 3em 0;
|
146
|
+
}
|
147
|
+
}
|
148
|
+
|
149
|
+
@media (max-width: 450px) {
|
150
|
+
#sidebar {
|
151
|
+
flex-direction: column;
|
152
|
+
text-align: center;
|
153
|
+
justify-content: center;
|
154
|
+
}
|
155
|
+
|
156
|
+
.sidebar-image-container {
|
157
|
+
display: none;
|
158
|
+
}
|
159
|
+
|
160
|
+
.sidebar-text {
|
161
|
+
h1 {
|
162
|
+
margin-top: -0.3em;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
|
166
|
+
.sidebar-links {
|
167
|
+
margin-top: 1em;
|
168
|
+
}
|
169
|
+
|
170
|
+
.post-buttons {
|
171
|
+
margin: 0;
|
172
|
+
display: flex;
|
173
|
+
flex-direction: column;
|
174
|
+
a {
|
175
|
+
margin: .5em;
|
176
|
+
}
|
177
|
+
}
|
120
178
|
}
|
121
179
|
}
|
122
180
|
|
@@ -139,44 +197,29 @@
|
|
139
197
|
}
|
140
198
|
|
141
199
|
.content {
|
142
|
-
flex: 1;
|
143
|
-
display: flex;
|
144
|
-
flex-direction: column;
|
145
|
-
align-items: center;
|
146
200
|
justify-content: space-between;
|
147
201
|
margin: 1em 1em 1em calc(1em + #{$sidebar-width});
|
148
202
|
}
|
149
203
|
|
150
204
|
.sidebar-links {
|
151
|
-
margin-top:
|
205
|
+
margin-top: 1em;
|
152
206
|
}
|
153
207
|
|
154
208
|
#content-fader {
|
155
|
-
position: fixed;
|
156
209
|
top: 0;
|
157
|
-
right: 0;
|
158
210
|
width: calc(100% - #{$sidebar-width});
|
159
211
|
height: 100%;
|
160
|
-
z-index: 9999;
|
161
|
-
pointer-events: none;
|
162
212
|
background: white;
|
163
|
-
opacity: 1;
|
164
|
-
animation-duration: .35s;
|
165
|
-
animation-timing-function: ease;
|
166
213
|
}
|
167
214
|
|
168
215
|
#sidebar-fader {
|
169
|
-
position: fixed;
|
170
216
|
bottom: 0;
|
171
|
-
left: 0;
|
172
217
|
height: 100%;
|
173
218
|
width: $sidebar-width;
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
animation-duration: .35s;
|
179
|
-
animation-timing-function: ease;
|
219
|
+
}
|
220
|
+
|
221
|
+
.post-buttons {
|
222
|
+
margin: 3em 0;
|
180
223
|
}
|
181
224
|
}
|
182
225
|
|
@@ -3,7 +3,7 @@
|
|
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
8
|
}
|
9
9
|
|
@@ -16,7 +16,7 @@ code {
|
|
16
16
|
pre { // only apply for code blocks
|
17
17
|
overflow: auto;
|
18
18
|
display: block;
|
19
|
-
padding:
|
19
|
+
padding: 0 20px 20px 20px;
|
20
20
|
margin: 0 0 1em;
|
21
21
|
line-height: 1.3;
|
22
22
|
word-break: break-all;
|
@@ -45,16 +45,17 @@ pre code {
|
|
45
45
|
}
|
46
46
|
pre code {
|
47
47
|
color: #cccccc;
|
48
|
-
|
48
|
+
&::before {
|
49
49
|
content: attr(data-lang);
|
50
|
-
position:
|
50
|
+
position: -webkit-sticky;
|
51
|
+
position: sticky;
|
52
|
+
display: block;
|
51
53
|
top: 0;
|
52
|
-
|
54
|
+
left: 0;
|
53
55
|
color: #ccc;
|
54
|
-
text-align:
|
56
|
+
text-align: left;
|
55
57
|
text-transform: uppercase;
|
56
|
-
font-size: 0.
|
57
|
-
padding: 5px 10px 0;
|
58
|
+
font-size: 0.85rem;
|
58
59
|
line-height: 20px;
|
59
60
|
height: 20px;
|
60
61
|
font-weight: 600;
|
Binary file
|
Binary file
|
data/assets/js/post-grid-init.js
CHANGED
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.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- meebuhs
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-
|
11
|
+
date: 2020-08-05 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -76,6 +76,8 @@ 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/GitHub-Mark-Light-64px.png
|
80
|
+
- assets/images/demo.gif
|
79
81
|
- assets/js/fade-transitions.js
|
80
82
|
- assets/js/post-grid-init.js
|
81
83
|
- assets/js/sidebar.js
|