arco 0.6.5 → 0.7.0

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: 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
 
@@ -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>
@@ -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>
@@ -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">
@@ -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 %}
@@ -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 %}
@@ -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;
@@ -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;
@@ -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;
@@ -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
  }
@@ -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%);
@@ -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
 
@@ -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;
@@ -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