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
data/_sass/2-base/_typography.sass ADDED
File without changes
data/_sass/3-layout/_footer.sass ADDED
@@ -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
data/_sass/3-layout/_header.sass ADDED
@@ -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
data/_sass/3-layout/_layout.sass ADDED
@@ -0,0 +1,2 @@
1
+ @import 'header'
2
+ @import 'footer'
data/_sass/4-modules/_card.sass ADDED
@@ -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