jasper-theme 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +52 -0
  4. data/_includes/author-profile.html +68 -0
  5. data/_includes/author.html +61 -0
  6. data/_includes/card.html +26 -0
  7. data/_includes/category.html +27 -0
  8. data/_includes/floating-header.hbs +28 -0
  9. data/_includes/footer.html +30 -0
  10. data/_includes/header.html +17 -0
  11. data/_includes/icons/avatar.svg +1 -0
  12. data/_includes/icons/facebook.svg +1 -0
  13. data/_includes/icons/infinity.svg +1 -0
  14. data/_includes/icons/rss.svg +1 -0
  15. data/_includes/icons/twitter.svg +1 -0
  16. data/_includes/icons/web.svg +1 -0
  17. data/_includes/meta.html +7 -0
  18. data/_includes/multiple-author.html +0 -0
  19. data/_includes/navbar.html +36 -0
  20. data/_includes/navigation.html +14 -0
  21. data/_includes/other-post.html +38 -0
  22. data/_includes/posts.html +3 -0
  23. data/_includes/reading-time.html +10 -0
  24. data/_includes/single-author.html +24 -0
  25. data/_includes/subscribe-form.html +8 -0
  26. data/_includes/subscribe-overlay.html +15 -0
  27. data/_layouts/author.html +12 -0
  28. data/_layouts/category.html +13 -0
  29. data/_layouts/default.html +12 -0
  30. data/_layouts/home.html +9 -0
  31. data/_layouts/page.html +5 -0
  32. data/_layouts/post.html +103 -0
  33. data/_sass/1-helpers/_functions.sass +0 -0
  34. data/_sass/1-helpers/_helpers.sass +2 -0
  35. data/_sass/1-helpers/_mixins.sass +43 -0
  36. data/_sass/1-helpers/_variables.sass +10 -0
  37. data/_sass/2-base/_base.sass +2 -0
  38. data/_sass/2-base/_global.sass +62 -0
  39. data/_sass/2-base/_normalize.scss +190 -0
  40. data/_sass/2-base/_typography.sass +0 -0
  41. data/_sass/3-layout/_footer.sass +54 -0
  42. data/_sass/3-layout/_header.sass +174 -0
  43. data/_sass/3-layout/_layout.sass +2 -0
  44. data/_sass/4-modules/_card.sass +229 -0
  45. data/_sass/4-modules/_modules.sass +4 -0
  46. data/_sass/4-modules/_previous-next-post.sass +116 -0
  47. data/_sass/4-modules/_subscribe-form.sass +66 -0
  48. data/_sass/4-modules/_subscribe-overlay.sass +78 -0
  49. data/_sass/5-pages/_author-profile.sass +66 -0
  50. data/_sass/5-pages/_pages.sass +2 -0
  51. data/_sass/5-pages/_post.sass +361 -0
  52. data/assets/css/style.sass +8 -0
  53. data/assets/js/script.js +9 -0
  54. metadata +138 -0
@@ -0,0 +1,4 @@
1
+ @import 'card'
2
+ @import 'previous-next-post'
3
+ @import 'subscribe-form'
4
+ @import 'subscribe-overlay'
@@ -0,0 +1,116 @@
1
+ .read-next
2
+
3
+ .read-next-card, .read-next-feed
4
+ display: flex
5
+
6
+ .read-next-feed
7
+ flex-wrap: wrap
8
+ margin: 0 -20px
9
+ padding: 40px 0 0
10
+
11
+ .read-next-card
12
+ position: relative
13
+ flex: 1 1 300px
14
+ flex-direction: column
15
+ overflow: hidden
16
+ margin: 0 20px 40px
17
+ padding: 25px
18
+ color: $white
19
+ background: #15171a 50%
20
+ background-size: cover
21
+ border-radius: 5px
22
+ box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03)
23
+
24
+ .read-next-card-header
25
+ position: relative
26
+ z-index: 50
27
+ padding-top: 20px
28
+ text-align: center
29
+
30
+ .read-next-card-header-sitetitle
31
+ display: block
32
+ font-size: .9rem
33
+ line-height: 1.3em
34
+ opacity: .8
35
+
36
+ .read-next-card-header-title
37
+ margin: 0
38
+ padding: 0 20px
39
+ color: $white
40
+ font-size: 1.9rem
41
+ line-height: 1.4
42
+ letter-spacing: 1px
43
+
44
+ a
45
+ color: $white
46
+ font-weight: 300
47
+ text-decoration: none
48
+
49
+ .read-next-divider
50
+ position: relative
51
+ display: flex
52
+ justify-content: center
53
+ height: 80px
54
+
55
+ svg
56
+ width: 40px
57
+ fill: transparent
58
+ stroke: $white
59
+ stroke-width: .5px
60
+ stroke-opacity: .65
61
+
62
+
63
+ .read-next-card-content
64
+ position: relative
65
+ z-index: 50
66
+ flex-grow: 1
67
+ display: flex
68
+ font-size: 1.7rem
69
+
70
+ ul
71
+ display: flex
72
+ flex-direction: column
73
+ margin: 0 auto
74
+ padding: 0
75
+ text-align: center
76
+ list-style: none
77
+
78
+ li
79
+ margin: 0
80
+ padding: 0
81
+ font-size: 1.1rem
82
+ line-height: 1.25
83
+ font-weight: 200
84
+ letter-spacing: -.5px
85
+
86
+ &:first-of-type
87
+ a
88
+ padding-top: 10px
89
+
90
+ a
91
+ display: block
92
+ padding: 20px 0
93
+ border-bottom: 1px solid hsla(0,0%,100%,.3)
94
+ color: $white
95
+ font-weight: 500
96
+ vertical-align: top
97
+ transition: opacity .3s ease
98
+ letter-spacing: .2px
99
+
100
+ &:hover
101
+ text-decoration: underline
102
+
103
+ @media (max-width: 500px)
104
+ a
105
+ font-size: 1rem
106
+
107
+ .read-next-card-footer
108
+ position: relative
109
+ margin: 15px 0 3px
110
+ text-align: center
111
+
112
+ a
113
+ color: $white
114
+
115
+ &:hover
116
+ text-decoration: underline
@@ -0,0 +1,66 @@
1
+ form
2
+ display: flex
3
+ justify-content: center
4
+ align-items: center
5
+ margin: 0 auto
6
+ max-width: 420px
7
+
8
+ .form-group
9
+ flex-grow: 1
10
+ display: flex
11
+
12
+ input
13
+ display: block
14
+ padding: 10px
15
+ width: 100%
16
+ border: 1px solid #dae2e7
17
+ color: #738a94
18
+ font-size: 1.2rem
19
+ line-height: 1em
20
+ font-weight: 400
21
+ -webkit-user-select: text
22
+ -moz-user-select: text
23
+ -ms-user-select: text
24
+ user-select: text
25
+ border-radius: 5px
26
+ transition: border-color .15s linear
27
+ -webkit-appearance: none
28
+
29
+ &:focus
30
+ outline: 0
31
+ border-color: #becdd5
32
+
33
+
34
+ button
35
+ display: inline-block
36
+ margin: 0 0 0 10px
37
+ padding: 0 20px
38
+ height: 44px
39
+ outline: none
40
+ border: none
41
+ color: $white
42
+ font-size: 1rem
43
+ line-height: 37px
44
+ font-weight: 400
45
+ text-align: center
46
+ text-shadow: 0 -1px 0 rgba(0,0,0,.1)
47
+ background: linear-gradient(#4fb7f0,#29a0e0 60%,#29a0e0 90%,#36a6e2)
48
+ border-radius: 5px
49
+ box-shadow: inset 0 0 0 1px rgba(0,0,0,.14)
50
+ -webkit-font-smoothing: subpixel-antialiased
51
+
52
+ &:focus
53
+ background: #209cdf
54
+
55
+
56
+ @media (max-width: 650px)
57
+ form
58
+ flex-direction: column
59
+
60
+ .form-group
61
+ width: 100%
62
+
63
+ button
64
+ margin: 10px 0 0
65
+ width: 100%
66
+ padding: 0
@@ -0,0 +1,78 @@
1
+ .subscribe-overlay
2
+ position: fixed
3
+ top: 0
4
+ right: 0
5
+ bottom: 0
6
+ left: 0
7
+ z-index: 9000
8
+ justify-content: center
9
+ align-items: center
10
+ background: rgba(0,25,40,.97)
11
+ opacity: 0
12
+
13
+ &:target
14
+ opacity: 1
15
+ pointer-events: auto
16
+
17
+ .subscribe-overlay-close
18
+ cursor: pointer
19
+ position: absolute
20
+ top: 0
21
+ right: 0
22
+ bottom: 0
23
+ left: 0
24
+ display: block
25
+
26
+ &:before, &:after
27
+ content: ""
28
+ position: absolute
29
+ top: 40px
30
+ right: 25px
31
+ display: block
32
+ width: 30px
33
+ height: 2px
34
+ background: #fff
35
+ opacity: .8
36
+
37
+ &:after
38
+ transform: rotate(-45deg)
39
+
40
+ &:before
41
+ transform: rotate(45deg)
42
+
43
+ .subscribe-overlay-content
44
+ position: relative
45
+ z-index: 9999
46
+ margin: 0 0 3vw
47
+ padding: 4vw
48
+ color: $white
49
+ text-align: center
50
+
51
+ .subscribe-overlay-logo
52
+ position: fixed
53
+ top: 23px
54
+ left: 30px
55
+ height: 30px
56
+
57
+ .subscribe-overlay-site-name
58
+ margin: 0px 0px 10px
59
+ position: fixed
60
+ top: 23px
61
+ left: 30px
62
+ font-size: 1.5rem
63
+
64
+ .subscribe-overlay-title
65
+ display: inline-block
66
+ font-size: 3.5rem
67
+ line-height: 1.15em
68
+ margin: 0px 0px 10px
69
+
70
+ .subscribe-overlay-description
71
+ max-width: 650px
72
+ font-family: Georgia, serif
73
+ font-size: 1.8rem
74
+ line-height: 1.3em
75
+ letter-spacing: 0.2px
76
+ font-weight: 300
77
+ opacity: 0.8
78
+ margin: 0px auto 50px
@@ -0,0 +1,66 @@
1
+ .site-header-content
2
+
3
+ .author-profile-image
4
+ display: block
5
+ background: #e3e9ed
6
+ border-radius: 100%
7
+ object-fit: cover
8
+ z-index: 10
9
+ flex-shrink: 0
10
+ margin: 0 0 20px
11
+ width: 100px
12
+ height: 100px
13
+ box-shadow: 0 0 0 6px hsla(0,0%,100%,.1)
14
+
15
+ .author-bio
16
+ z-index: 10
17
+ flex-shrink: 0
18
+ margin: 5px 0 10px
19
+ max-width: 600px
20
+ font-size: 1.2rem
21
+ line-height: 1.3
22
+ font-weight: 300
23
+ letter-spacing: .5px
24
+ opacity: .8
25
+
26
+ .author-meta
27
+ z-index: 10
28
+ flex-shrink: 0
29
+ display: flex
30
+ justify-content: center
31
+ align-items: center
32
+ margin: 0 0 10px
33
+ font-family: Georgia, serif
34
+ font-style: italic
35
+
36
+ .author-location, .author-stats
37
+
38
+ .bull
39
+ display: inline-block
40
+ margin: 0 12px
41
+ opacity: .5
42
+
43
+ @media (max-width: 500px)
44
+ .author-stats, .bull
45
+ display: none
46
+
47
+ .social-link
48
+ display: flex
49
+ justify-content: center
50
+ align-items: center
51
+ margin: 0
52
+ padding: 10px
53
+ color: $white
54
+ opacity: .8
55
+
56
+ &:first-of-type
57
+ padding-left: 4px
58
+
59
+
60
+ svg
61
+ height: 1.1rem
62
+ fill: $white
63
+
64
+ .social-link-rss
65
+ svg
66
+ height: 1.2rem !important
@@ -0,0 +1,2 @@
1
+ @import 'post'
2
+ @import 'author-profile'
@@ -0,0 +1,361 @@
1
+ .post-full
2
+ position: relative
3
+ z-index: 50
4
+
5
+ .post-full-header
6
+ margin: 0 auto
7
+ padding: 6vw 3vw 3vw
8
+ max-width: 1040px
9
+ text-align: center
10
+
11
+ .post-full-meta
12
+ display: flex
13
+ justify-content: center
14
+ align-items: center
15
+ color: #738a94
16
+ font-weight: 600
17
+ text-transform: uppercase
18
+
19
+ .post-full-meta-date
20
+ color: #3eb0ef
21
+
22
+ .date-divider
23
+ display: inline-block
24
+ margin: 0 6px 1px
25
+
26
+ .post-full-meta-category
27
+ color: #26a8ed
28
+
29
+ &:hover
30
+ text-decoration: underline
31
+
32
+ .post-full-title
33
+ margin: 0
34
+ color: #090a0b
35
+ font-size: 3.5rem
36
+ font-weight: 700
37
+
38
+ @media (max-width: 800px)
39
+ .post-full-title
40
+ font-size: 2.8rem
41
+
42
+ @media (max-width: 500px)
43
+ .post-full-title
44
+ font-size: 2rem
45
+
46
+ .post-full-image
47
+ @if $header_post_image == "big"
48
+ margin: 0 -10vw -165px
49
+ height: 800px
50
+ background: #c5d2d9 50%
51
+ background-size: cover
52
+ border-radius: 5px
53
+ @else
54
+ margin: 0 auto
55
+ max-width: 700px
56
+ height: 350px
57
+ background: #c5d2d9 50%
58
+ background-size: cover
59
+ border-radius: 5px
60
+
61
+ @media (max-width: 1170px)
62
+ .post-full-image
63
+ margin: 0 -4vw -100px
64
+ height: 600px
65
+ border-radius: 0
66
+
67
+ @media (max-width: 800px)
68
+ .post-full-image
69
+ height: 400px
70
+
71
+ @media (max-width: 500px)
72
+ .post-full-image
73
+ height: 350px
74
+ margin-bottom: 4vw
75
+
76
+ .post-full-content
77
+ position: relative
78
+ margin: 0 auto
79
+ padding: 70px 100px 0
80
+ min-height: 230px
81
+ font-family: Georgia,serif
82
+ font-size: 2.2rem
83
+ line-height: 1.6em
84
+ background: $white
85
+
86
+ p, li
87
+ font-size: 1.3rem
88
+ line-height: 1.6
89
+
90
+ strong
91
+ color: #090a0b
92
+
93
+ p
94
+ margin: 0 0 1.5em
95
+ min-width: 100%
96
+
97
+ &:first-child
98
+ font-size: 1.7rem
99
+
100
+ img
101
+ display: block
102
+ +post_image
103
+
104
+ video
105
+ display: block
106
+ margin-top: 1.5em
107
+ margin-bottom: 1.5em
108
+ vertical-align: middle
109
+
110
+ a
111
+ color: $black
112
+ box-shadow: inset 0 -1px 0 #3eb0ef
113
+
114
+ &:hover
115
+ color: #3eb0ef
116
+ text-decoration: none
117
+
118
+ h1, h2, h3, h4, h5, h6
119
+ color: #090a0b
120
+ font-family: BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif
121
+ font-weight: 700
122
+ margin: .5em 0 .2em
123
+
124
+ h1
125
+ font-size: 3rem
126
+
127
+ h2
128
+ font-size: 2.8rem
129
+
130
+ h3
131
+ font-size: 2.6rem
132
+
133
+ h4
134
+ font-size: 2.4rem
135
+
136
+ h5
137
+ font-size: 2.2rem
138
+
139
+ h6
140
+ font-size: 1.9rem
141
+
142
+ ol, ul
143
+ margin-top: 0
144
+
145
+ ol
146
+ li
147
+ margin: .5em 0
148
+ padding-left: .3em
149
+ line-height: 1.6em
150
+
151
+ &:first-child
152
+ margin-top: 0
153
+
154
+ code
155
+ padding: 0 5px 2px
156
+ font-size: .8em
157
+ line-height: 1em
158
+ font-weight: 400!important
159
+ background: #e5eff5
160
+ border-radius: 3px
161
+
162
+ pre
163
+ overflow-x: auto
164
+ margin: 1.5em 0 3em
165
+ padding: 20px
166
+ max-width: 100%
167
+ border: 1px solid $white
168
+ color: #e5eff5
169
+ font-size: 1rem
170
+ line-height: 1.5rem
171
+ background: #0e0f11
172
+ border-radius: 5px
173
+
174
+ code
175
+ padding: 0
176
+ font-size: inherit
177
+ line-height: inherit
178
+ background: transparent
179
+
180
+ blockquote
181
+ margin: 0 0 1.5em
182
+ padding: 0 1.8rem
183
+ border-left: 3px solid #3eb0ef
184
+
185
+ p
186
+ margin: 0 0 1em
187
+ color: inherit
188
+ font-size: 1.3rem !important
189
+ line-height: 1.5
190
+ font-style: italic
191
+
192
+ &:last-child
193
+ margin-bottom: 0
194
+
195
+ hr
196
+ margin: 4vw 0
197
+
198
+ @media (max-width: 500px)
199
+
200
+ h1
201
+ font-size: 2.7rem
202
+
203
+ h2
204
+ font-size: 2.5rem
205
+
206
+ h3
207
+ font-size: 2.2rem
208
+
209
+ h4
210
+ font-size: 2rem
211
+
212
+ h5
213
+ font-size: 1.7rem
214
+ margin: .6em 0 .25em
215
+
216
+ h6
217
+ font-size: 1.5rem
218
+ margin: .6em 0 .3em
219
+
220
+ @media (max-width: 1170px)
221
+ .post-full-content
222
+ padding: 5vw 7vw 0
223
+
224
+ @media (max-width: 800px)
225
+ .post-full-content
226
+ font-size: 1.9rem
227
+
228
+ @media (max-width: 500px)
229
+ .post-full-content
230
+ padding: 0
231
+
232
+ @media (min-width: 500px)
233
+ .post-full-content
234
+
235
+ @if $header_post_image == "big"
236
+ &:before
237
+ left: -5px
238
+ transform: rotate(-5deg)
239
+
240
+ &:after
241
+ right: -5px
242
+ transform: rotate(5deg)
243
+
244
+ &:before, &:after
245
+ content: ""
246
+ position: absolute
247
+ top: 15px
248
+ z-index: -1
249
+ display: block
250
+ width: 20px
251
+ height: 200px
252
+ background: rgba(39,44,49,.15)
253
+ filter: blur(5px)
254
+
255
+ .subscribe-form
256
+ margin: 1.5em 0
257
+ padding: 6.5vw 7vw 7vw
258
+ border: 1px solid #edf4f8
259
+ text-align: center
260
+ background: #f4f8fb
261
+ border-radius: 7px
262
+
263
+ .subscribe-form-title
264
+ margin: 0 0 3px
265
+ padding: 0
266
+ color: #15171a
267
+ font-size: 2rem
268
+ line-height: 1
269
+ font-weight: 700
270
+
271
+ p
272
+ margin: .8rem 0 1.4rem
273
+ color: #738a94
274
+ font-size: 1.4rem
275
+ letter-spacing: .2px
276
+
277
+ @media (max-width: 650px)
278
+ .subscribe-form-title
279
+ font-size: 1.4rem
280
+
281
+ p
282
+ font-size: 1rem
283
+
284
+ .author-card, .post-full-footer
285
+ display: flex
286
+
287
+ .post-full-footer
288
+ justify-content: space-between
289
+ align-items: center
290
+ margin: 0 auto
291
+ padding: 3vw 0 6vw
292
+ max-width: 840px
293
+
294
+ .author-card
295
+
296
+ .author-profile-image, .avatar-wrapper
297
+ margin-right: 15px
298
+ position: relative
299
+ width: 60px
300
+ height: 60px
301
+ border-radius: 100%
302
+ background: #e3e9ed
303
+ display: block
304
+ object-fit: cover
305
+
306
+ .author-profile-image
307
+ border: none
308
+
309
+ .avatar-wrapper
310
+ position: relative
311
+ margin: 0
312
+ border: none
313
+
314
+ svg
315
+ margin: 0
316
+ width: 60px
317
+ height: 60px
318
+
319
+ .author-card-content
320
+
321
+ .author-card-name
322
+ margin: 8px 0 0
323
+ padding: 0
324
+ font-size: 1.3rem
325
+
326
+ a
327
+ color: #15171a
328
+ font-weight: 700
329
+
330
+ p
331
+ margin: 0
332
+ color: #738a94
333
+ line-height: 1.3
334
+ font-size: .98rem
335
+
336
+ a
337
+ color: #738a94
338
+
339
+ &:hover
340
+ color: #3eb0ef
341
+
342
+ .post-full-footer-right
343
+ -ms-flex-negative: 0
344
+ flex-shrink: 0
345
+ margin-left: 20px
346
+
347
+ .author-card-button
348
+ display: block
349
+ padding: 9px 16px
350
+ border: 1px solid #aebbc1
351
+ color: #738a94
352
+ font-size: .8rem
353
+ line-height: 1
354
+ font-weight: 500
355
+ border-radius: 20px
356
+ transition: all .2s ease
357
+
358
+ &:hover
359
+ border-color: #3eb0ef
360
+ color: #3eb0ef
361
+ text-decoration: none