jasper-theme 0.0.1

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.
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