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
File without changes
@@ -0,0 +1,54 @@
1
+ .site-footer
2
+ padding-top: 20px
3
+ padding-bottom: 60px
4
+ color: rgba(255, 255, 255, 0.7)
5
+ background: $black
6
+
7
+ .site-footer-content
8
+ display: flex
9
+ flex-wrap: wrap
10
+ justify-content: space-between
11
+ align-items: center
12
+ font-size: .8rem
13
+
14
+ a
15
+ color: rgba(255, 255, 255, 0.7)
16
+
17
+ .site-footer-nav
18
+
19
+ ul
20
+ list-style: none
21
+ display: flex
22
+ padding: 0
23
+ margin: 10px 0
24
+
25
+ li
26
+
27
+ &:not(:first-child):before
28
+
29
+ a
30
+ content: ""
31
+ position: absolute
32
+ top: 11px
33
+ left: -11px
34
+ display: block
35
+ width: 2px
36
+ height: 2px
37
+ background: $white
38
+ border-radius: 100%
39
+
40
+ a
41
+ position: relative
42
+ margin-left: 20px
43
+
44
+
45
+ @media (max-width: 700px)
46
+ .site-footer-content
47
+ flex-direction: column
48
+
49
+ .site-footer-nav
50
+ ul
51
+ li
52
+ &:first-child
53
+ a
54
+ margin-left: 0
@@ -0,0 +1,174 @@
1
+ @media (min-width: 900px)
2
+ .home-template
3
+ .site-nav
4
+ position: relative
5
+ top: -65px
6
+
7
+ .site-header
8
+ position: relative
9
+ padding-top: 12px
10
+ padding-bottom: 12px
11
+ color: rgb(255, 255, 255)
12
+ background: 50% center / cover no-repeat rgb(9, 10, 11)
13
+
14
+ @media (max-width: 700px)
15
+ .site-header
16
+ padding-right: 0
17
+ padding-left: 0
18
+
19
+ .site-header-content
20
+ display: flex
21
+ flex-direction: column
22
+ justify-content: center
23
+ align-items: center
24
+ padding: 7.8vw 4vw
25
+ min-height: 200px
26
+ max-height: 450px
27
+ text-align: center
28
+
29
+ .site-title
30
+ margin: 0
31
+ padding: 0
32
+ font-size: 2.8rem
33
+ line-height: 1.3
34
+
35
+ img
36
+ max-height: 50px
37
+
38
+ .site-description
39
+ margin: 0
40
+ padding: 5px 0
41
+ font-size: 1.3rem
42
+ font-weight: 300
43
+ letter-spacing: .5px
44
+ opacity: .8
45
+
46
+ @media (max-width: 500px)
47
+ .site-header-content
48
+ padding: 10vw 4vw 5.8vw
49
+
50
+ .site-nav, .site-nav-left
51
+ display: flex
52
+ overflow-y: hidden
53
+
54
+ .site-nav
55
+ position: relative
56
+ z-index: 300
57
+ justify-content: space-between
58
+ height: 39px
59
+ font-size: 1.2rem
60
+ align-items: flex-start
61
+
62
+ .site-nav-logo
63
+ flex-shrink: 0
64
+ display: block
65
+ margin-right: 24px
66
+ color: $white
67
+ font-weight: 700
68
+ margin-bottom: 0
69
+
70
+ img
71
+ display: block
72
+ width: auto
73
+ height: 30px
74
+
75
+ h1
76
+ font-size: .9rem
77
+ margin-bottom: 0
78
+
79
+ @media (max-width: 700px)
80
+ .site-nav-left
81
+ margin-right: 0
82
+
83
+ .site-nav-left
84
+ align-items: center
85
+ overflow-x: auto
86
+ margin-right: 10px
87
+ letter-spacing: .4px
88
+ white-space: nowrap
89
+
90
+ .nav
91
+ display: flex
92
+ margin: 0 0 0 -12px
93
+ padding: 0
94
+ list-style: none
95
+
96
+ li
97
+ padding: 0
98
+ text-transform: uppercase
99
+
100
+ a
101
+ padding: 10px 12px
102
+ color: $white
103
+ opacity: .8
104
+ font-size: .8rem
105
+
106
+ &:hover
107
+ opacity: 1
108
+
109
+ .nav li, .nav li a
110
+ display: block
111
+ margin: 0
112
+
113
+ .site-nav-right
114
+ height: 40px
115
+
116
+ @media (max-width: 700px)
117
+ .site-nav-right
118
+ display: none !important
119
+
120
+ .site-nav-right, .social-links
121
+ flex-shrink: 0
122
+ display: flex
123
+ align-items: center
124
+
125
+ .social-links
126
+ flex-shrink: 0
127
+ display: flex
128
+ align-items: center
129
+
130
+ .social-link
131
+ display: flex
132
+ justify-content: center
133
+ align-items: center
134
+ margin: 0
135
+ padding: 10px
136
+ color: $white
137
+
138
+ svg
139
+ opacity: .8
140
+ fill: $white
141
+ height: .99rem
142
+
143
+ &:hover
144
+ opacity: 1
145
+
146
+ .social-link-tw
147
+ padding-right: 20px
148
+
149
+ .subscribe-button
150
+ display: block
151
+ padding: 4px 10px
152
+ border: 1px solid $white
153
+ color: $white
154
+ font-size: .75rem
155
+ line-height: 1em
156
+ border-radius: 100px
157
+ opacity: .8
158
+ transition: opacity .2s ease-in
159
+
160
+ &:hover
161
+ opacity: 1
162
+
163
+ .rss-button
164
+ display: flex
165
+ justify-content: center
166
+ align-items: center
167
+
168
+ svg
169
+ opacity: 0.8
170
+ fill: $white
171
+ height: 1.2rem
172
+
173
+ &:hover
174
+ opacity: 1
@@ -0,0 +1,2 @@
1
+ @import 'header'
2
+ @import 'footer'
@@ -0,0 +1,229 @@
1
+ @media (max-width: 650px)
2
+ .author-name-tooltip
3
+ display: none
4
+
5
+ @media (min-width: 795px)
6
+
7
+ .home-template
8
+
9
+ .post-feed
10
+
11
+ .post-card
12
+ display: flex
13
+
14
+ &:nth-child(6n+1):not(.no-image)
15
+ flex: 1 1 100%
16
+ flex-direction: row
17
+
18
+ .post-card-image-link
19
+ position: relative
20
+ flex: 1 1 auto
21
+ border-radius: 5px 0 0 5px
22
+
23
+ .post-card-image
24
+ position: absolute
25
+ width: 100%
26
+ height: 100%
27
+
28
+ .post-card-content
29
+ flex: 0 1 357px
30
+
31
+ .post-card-content-link
32
+ padding: 30px 40px 0
33
+
34
+ .post-card-header
35
+
36
+ .post-card-title
37
+ font-size: 1.8rem
38
+ margin: 0 0 .5em
39
+
40
+ .post-card-description
41
+
42
+ p
43
+ font-size: 1rem
44
+ margin: 0 0 1.5rem
45
+
46
+ .post-card-meta
47
+ padding: 0 40px 30px
48
+
49
+ @media (min-width: 900px)
50
+ .inner > .post-feed
51
+ margin-top: -68px
52
+ padding-top: 0
53
+
54
+ .post-template
55
+
56
+ .site-main
57
+ padding-bottom: 4vw
58
+ background: $white
59
+
60
+ .site-main
61
+ flex-grow: 1
62
+
63
+ .post-card, .post-feed
64
+ display: flex
65
+
66
+ .post-feed
67
+ position: relative
68
+ flex-wrap: wrap
69
+ margin: 0 -20px
70
+ padding: 40px 0 0
71
+
72
+ .post-card
73
+ +card
74
+
75
+ // &:nth-child(6n+1):not(.no-image)
76
+ // flex: 1 1 100%
77
+ // flex-direction: row
78
+
79
+ .post-card-image-link
80
+ position: relative
81
+ display: block
82
+ overflow: hidden
83
+ border-radius: 5px 5px 0 0
84
+
85
+ .post-card-image
86
+ width: auto
87
+ height: 200px
88
+ background: #c5d2d9 no-repeat 50%
89
+ background-size: cover
90
+
91
+ .post-card-content
92
+ flex-grow: 1
93
+ display: flex
94
+ flex-direction: column
95
+ justify-content: space-between
96
+
97
+ .post-card-content-link
98
+ position: relative
99
+ flex-grow: 1
100
+ display: block
101
+ padding: 25px 25px 0
102
+ color: #15171a
103
+
104
+ .post-card-header
105
+
106
+ .post-card-category
107
+ display: block
108
+ margin-bottom: 5px
109
+ color: #738a94
110
+ font-size: .8rem
111
+ line-height: 1.15
112
+ font-weight: 500
113
+ letter-spacing: .5px
114
+ text-transform: uppercase
115
+
116
+ .post-card-meta
117
+ display: flex
118
+ justify-content: space-between
119
+ align-items: flex-end
120
+ padding: 0 25px 25px
121
+
122
+ .author-list
123
+ display: flex
124
+ flex-wrap: wrap-reverse
125
+ margin: 0
126
+ padding: 0
127
+ list-style: none
128
+
129
+ .author-list-item
130
+ position: relative
131
+ display: flex
132
+ flex-shrink: 0
133
+ margin: 0
134
+ padding: 0
135
+
136
+ &:nth-child(1)
137
+ z-index: 10
138
+
139
+ &:nth-child(2)
140
+ z-index: 9
141
+
142
+ &:nth-child(3)
143
+ z-index: 8
144
+
145
+ &:nth-child(4)
146
+ z-index: 7
147
+
148
+ &:nth-child(5)
149
+ z-index: 6
150
+
151
+ &:nth-child(6)
152
+ z-index: 5
153
+
154
+ &:nth-child(7)
155
+ z-index: 4
156
+
157
+ &:nth-child(8)
158
+ z-index: 3
159
+
160
+ &:nth-child(9)
161
+ z-index: 2
162
+
163
+ &:nth-child(10)
164
+ z-index: 1
165
+
166
+ &:hover
167
+ .author-name-tooltip
168
+ opacity: 1.0
169
+ transform: translateY(0px)
170
+
171
+ .author-name-tooltip
172
+ position: absolute
173
+ bottom: 105%
174
+ z-index: 999
175
+ display: block
176
+ padding: 2px 8px
177
+ color: $white
178
+ font-size: 1rem
179
+ letter-spacing: .2px
180
+ white-space: nowrap
181
+ background: #15171a
182
+ border-radius: 3px
183
+ box-shadow: 0 12px 26px rgba(39,44,49,.08), 1px 3px 8px rgba(39,44,49,.03)
184
+ opacity: 0
185
+ transition: all .3s cubic-bezier(.4,.01,.165,.99)
186
+ transform: translateY(6px)
187
+ pointer-events: none
188
+
189
+ .static-avatar
190
+ width: 34px
191
+ height: 34px
192
+
193
+ .author-profile-image
194
+ background: #e3e9ed
195
+ object-fit: cover
196
+ width: 100%
197
+ height: 100%
198
+
199
+ .moving-avatar, .static-avatar
200
+ display: block
201
+ margin-right: 5px
202
+ overflow: hidden
203
+ border: 2px solid $white
204
+ border-radius: 100%
205
+
206
+ .author-profile-name
207
+ font-size: .9rem
208
+ font-weight: 500
209
+ align-items: center
210
+ display: flex
211
+ letter-spacing: .5px
212
+ text-transform: uppercase
213
+
214
+ a
215
+ color: #3eb0ef
216
+
217
+ &:hover
218
+ text-decoration: underline
219
+
220
+ .reading-time
221
+ flex-shrink: 0
222
+ margin-left: 20px
223
+ color: #738a94
224
+ font-size: .8rem
225
+ line-height: 38px
226
+ font-weight: 500
227
+ letter-spacing: .5px
228
+ text-transform: uppercase
229
+ +reading-time