arco 0.6.5 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/_includes/sidebar.html +9 -1
  4. data/_layouts/404.html +1 -0
  5. data/_layouts/default.html +1 -0
  6. data/_layouts/landing.html +1 -0
  7. data/_layouts/post.html +2 -2
  8. data/_sass/arco.scss +6 -0
  9. data/_sass/buttons.scss +1 -0
  10. data/_sass/constants.scss +4 -4
  11. data/_sass/post-list.scss +5 -5
  12. data/_sass/post.scss +3 -4
  13. data/_sass/sidebar.scss +102 -75
  14. data/_sass/syntax-highlighting.scss +9 -8
  15. data/assets/js/post-grid-init.js +5 -2
  16. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 34c9177715720e4b51a74a81a2d1fbedb52be7a0c723803995646fffa3697529
4
- data.tar.gz: 1aaff9ca6ce314be160c0c09b2fea63ad6682146ee6d4f92d084ca84bf9e1759
3
+ metadata.gz: 65e6776531db3a3448bc6cf2e7e145b041d64c333251b576241014f0a265c817
4
+ data.tar.gz: 5b4eeebb07bccb252d8034437bb2b6121bc4aae412e64008a0ebcf1865b04b1f
5
5
  SHA512:
6
- metadata.gz: 05bb49b4f18a1ceb6733d234c86bce8e078033e7648a4970fa2f6baf88a8dcb52ba9bc44e3a5def0b0c647997e41f5d501fd2723accd3086cb7c6bf0148bc607
7
- data.tar.gz: ce9460e3995fdb845acab1980a2208cf29265bccbf100e0ff0d75033c4c7a070d523f3a2f9cab03d19b97d5b9561146b1bcda5057a7d236f5d8b4b5aefe608ea
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 two column masonry grid which also features a landing page, a 404 page, smooth page transitions and a simple permalink structure.
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
 
data/_includes/sidebar.html CHANGED
@@ -27,7 +27,15 @@
27
27
  {% endif %}
28
28
  </div>
29
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 %}
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 %}
31
39
  </div>
32
40
  </div>
33
41
  </section>
data/_layouts/404.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
  </head>
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
@@ -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
  {% seo %}
data/_layouts/post.html CHANGED
@@ -10,7 +10,7 @@ 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-primary">Home</a>
13
+ <a href="{{ site.url }}\projects\" class="button-light-primary fade-onclick">Home</a>
14
14
  {% if page.urls.source %}
15
15
  <a href="{{ page.urls.source }}" class="button-light-secondary">See the source</a>
16
16
  {% endif %}
@@ -36,7 +36,7 @@ layout: default
36
36
  </div>
37
37
 
38
38
  <div class="post-buttons">
39
- <a href="{{ site.url }}\projects\" class="button-light-primary">Home</a>
39
+ <a href="{{ site.url }}\projects\" class="button-light-primary fade-onclick">Home</a>
40
40
  {% if page.urls.source %}
41
41
  <a href="{{ page.urls.source }}" class="button-light-secondary">See the source</a>
42
42
  {% endif %}
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
@@ -9,6 +9,7 @@
9
9
  background-color: $background;
10
10
  color: $highlight;
11
11
  font-weight: bold;
12
+ font-size: 1rem;
12
13
  &:hover, &:focus {
13
14
  background-color: $highlight;
14
15
  color: $background;
data/_sass/constants.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  // Colours
2
2
 
3
3
  $primary-highlight: #f2777a;
4
- $secondary-highlight: #66cccc;
5
- $tertiary-highlight: #ffcc66;
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: 100px;
19
- $sidebar-height: 150px;
18
+ $sidebar-height-min: 120px;
19
+ $sidebar-height: 170px;
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.5em;
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: 1em;
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: 0.9em;
56
+ font-size: 0.9rem;
57
57
  }
58
58
 
59
59
  .list-post-category {
60
60
  font-weight: bold;
61
- font-size: 0.9em;
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: 0.9em;
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: 1.5em 0 0 0;
6
+ margin: 0;
8
7
  }
9
8
 
10
9
  .post-description {
@@ -14,7 +13,7 @@
14
13
  .post-date {
15
14
  color: $secondary-highlight;
16
15
  font-weight: bold;
17
- font-size: 0.9em;
16
+ font-size: 0.9rem;
18
17
  }
19
18
 
20
19
  .post-image {
@@ -27,7 +26,7 @@
27
26
 
28
27
  .post-category {
29
28
  font-weight: bold;
30
- font-size: 0.9em;
29
+ font-size: 0.9rem;
31
30
  color: $primary-highlight;
32
31
  &:hover, &:focus {
33
32
  color: lighten($primary-highlight, 14%);
data/_sass/sidebar.scss CHANGED
@@ -31,14 +31,36 @@
31
31
  transition: all .35s ease;
32
32
  }
33
33
 
34
- @media only screen and (orientation: portrait) {
35
- #sidebar {
36
- flex-direction: row;
37
- justify-content: space-between;
38
- align-items: center;
39
- text-align: center;
40
- }
34
+ .content {
35
+ display: flex;
36
+ flex: 1;
37
+ flex-direction: column;
38
+ align-items: center;
39
+ }
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
+ }
41
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) {
42
64
  .sidebar {
43
65
  width: 100%;
44
66
  height: $sidebar-height;
@@ -49,74 +71,94 @@
49
71
  height: $sidebar-height-min;
50
72
  }
51
73
 
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
74
  .sidebar-text {
68
- h1 {
69
- font-size: 2.5em;
70
- margin-top: -0.3em;
71
- }
72
75
  h6 {
73
- font-size: 1.3em;
74
76
  margin: 0;
75
77
  }
76
- text-align: start;
77
- }
78
-
79
- .sidebar-links {
80
- font-size: 1.5em;
81
- margin-right: 1em;
82
- text-align: end;
83
78
  }
84
79
 
85
80
  .content {
86
- flex: 1;
87
81
  max-width: 100%;
88
- margin: 190px 1em 1em 1em;
89
- display: flex;
90
- flex-direction: column;
91
- align-items: center;
82
+ margin: calc(#{$sidebar-height} + 1em) 1em 1em 1em;
92
83
  }
93
84
 
94
85
  #content-fader {
95
- position: fixed;
96
86
  bottom: 0;
97
- right: 0;
98
87
  height: calc(100% - #{$sidebar-height});
99
88
  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
89
  }
107
90
 
108
91
  #sidebar-fader {
109
- position: fixed;
110
92
  top: 0;
111
- left: 0;
112
93
  height: $sidebar-height;
113
94
  width: 100%;
114
- z-index: 9999;
115
- pointer-events: none;
116
- background: $sidebar-colour;
117
- opacity: 1;
118
- animation-duration: .35s;
119
- animation-timing-function: ease;
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
+ }
120
162
  }
121
163
  }
122
164
 
@@ -139,44 +181,29 @@
139
181
  }
140
182
 
141
183
  .content {
142
- flex: 1;
143
- display: flex;
144
- flex-direction: column;
145
- align-items: center;
146
184
  justify-content: space-between;
147
185
  margin: 1em 1em 1em calc(1em + #{$sidebar-width});
148
186
  }
149
187
 
150
188
  .sidebar-links {
151
- margin-top: 1.67em;
189
+ margin-top: 1em;
152
190
  }
153
191
 
154
192
  #content-fader {
155
- position: fixed;
156
193
  top: 0;
157
- right: 0;
158
194
  width: calc(100% - #{$sidebar-width});
159
195
  height: 100%;
160
- z-index: 9999;
161
- pointer-events: none;
162
196
  background: white;
163
- opacity: 1;
164
- animation-duration: .35s;
165
- animation-timing-function: ease;
166
197
  }
167
198
 
168
199
  #sidebar-fader {
169
- position: fixed;
170
200
  bottom: 0;
171
- left: 0;
172
201
  height: 100%;
173
202
  width: $sidebar-width;
174
- z-index: 9999;
175
- pointer-events: none;
176
- background: $sidebar-colour;
177
- opacity: 1;
178
- animation-duration: .35s;
179
- animation-timing-function: ease;
203
+ }
204
+
205
+ .post-buttons {
206
+ margin: 3em 0;
180
207
  }
181
208
  }
182
209
 
data/_sass/syntax-highlighting.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  pre, code {
4
4
  font-family: "Roboto Mono";
5
5
  color: #cccccc;
6
- font-size: 1em;
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: 1em;
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
- ::before {
48
+ &::before {
49
49
  content: attr(data-lang);
50
- position: absolute;
50
+ position: -webkit-sticky;
51
+ position: sticky;
52
+ display: block;
51
53
  top: 0;
52
- right: 0;
54
+ left: 0;
53
55
  color: #ccc;
54
- text-align: right;
56
+ text-align: left;
55
57
  text-transform: uppercase;
56
- font-size: 0.85em;
57
- padding: 5px 10px 0;
58
+ font-size: 0.85rem;
58
59
  line-height: 20px;
59
60
  height: 20px;
60
61
  font-weight: 600;
data/assets/js/post-grid-init.js CHANGED
@@ -1,4 +1,7 @@
1
1
  FlexMasonry.init('.list-posts', {
2
- responsive: false,
3
- numCols: 2
2
+ responsive: true,
3
+ breakpointCols: {
4
+ 'min-width: 1500px': 3,
5
+ 'min-width: 700px': 2,
6
+ }
4
7
  });
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.6.5
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-07 00:00:00.000000000 Z
11
+ date: 2020-07-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll