jumbo-jekyll-theme 5.6.9.2 → 5.6.9.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +10 -10
  3. data/_config.yml +213 -213
  4. data/_data/example-carousel-data-source.yml +36 -36
  5. data/_data/footer.yml +33 -33
  6. data/_data/nav.yml +17 -17
  7. data/_data/settings.yml +103 -103
  8. data/_data/tags.yml +11 -11
  9. data/_data/universal-nav.yml +7 -7
  10. data/_includes/breadcrumb.html +97 -97
  11. data/_includes/core/blocks.html +30 -30
  12. data/_includes/core/button.html +5 -5
  13. data/_includes/core/buttons.html +5 -5
  14. data/_includes/core/container_row.html +7 -7
  15. data/_includes/core/feature_block.html +43 -43
  16. data/_includes/core/full_width_row.html +5 -5
  17. data/_includes/core/members-section.html +32 -32
  18. data/_includes/core/slider.html +33 -33
  19. data/_includes/core/slider_row.html +2 -2
  20. data/_includes/core/title.html +3 -3
  21. data/_includes/core/youtube_video_embed.html +11 -11
  22. data/_includes/css.html +9 -9
  23. data/_includes/custom_include.html +13 -13
  24. data/_includes/custom_include_row.html +562 -562
  25. data/_includes/display-blog-posts.html +154 -154
  26. data/_includes/flow_inner.html +19 -19
  27. data/_includes/footer.html +68 -68
  28. data/_includes/google-analytics.html +16 -16
  29. data/_includes/head.html +19 -19
  30. data/_includes/image.html +6 -6
  31. data/_includes/javascript.html +10 -10
  32. data/_includes/jumbotron.html +115 -115
  33. data/_includes/linaro-404.html +19 -19
  34. data/_includes/nav.html +153 -153
  35. data/_includes/pagination.html +38 -38
  36. data/_includes/post-sidebar.html +182 -182
  37. data/_includes/responsive-image.html +5 -5
  38. data/_includes/schema.html +43 -43
  39. data/_includes/thumb.html +1 -1
  40. data/_includes/thumbnail_image.html +9 -9
  41. data/_includes/universal-nav.html +30 -30
  42. data/_layouts/author.html +5 -5
  43. data/_layouts/default.html +3 -3
  44. data/_layouts/error.html +25 -25
  45. data/_layouts/flow.html +35 -35
  46. data/_layouts/jumbotron.html +11 -11
  47. data/_layouts/post-index.html +16 -16
  48. data/_layouts/post.html +39 -39
  49. data/_sass/app/overrides.scss +65 -65
  50. data/_sass/app/search.scss +51 -51
  51. data/_sass/bootstrap/_variables.scss +932 -932
  52. data/_sass/core.scss +20 -20
  53. data/_sass/core/blog.scss +425 -425
  54. data/_sass/core/carousel-header.scss +90 -90
  55. data/_sass/core/error.scss +190 -190
  56. data/_sass/core/flow.scss +186 -186
  57. data/_sass/core/footer.scss +141 -141
  58. data/_sass/core/jumbotron.scss +279 -279
  59. data/_sass/core/normalize.scss +357 -357
  60. data/_sass/core/theme.scss +871 -871
  61. data/_sass/home.scss +2 -2
  62. data/assets/css/main-blog.scss +13 -13
  63. data/assets/css/main-error.scss +13 -13
  64. data/assets/css/main.scss +11 -11
  65. data/assets/js/app/facebook.js +7 -7
  66. data/assets/js/app/main.js +261 -261
  67. data/assets/js/pacakge-search.js +9 -9
  68. data/assets/js/package-blog.js +12 -12
  69. data/assets/js/package-extended.js +14 -14
  70. data/assets/js/package-home.js +14 -14
  71. data/assets/js/package-main.js +13 -13
  72. data/assets/js/package-search.js +8 -8
  73. data/assets/js/vendor/fess-ss.min.js +24 -24
  74. data/robots.txt +9 -9
  75. metadata +2 -16
data/_sass/core.scss CHANGED
@@ -1,20 +1,20 @@
1
- // Core Jumbo Jekyll Theme Sass includes.
2
- @import "core/normalize";
3
- @import "core/fonts";
4
- @import "core/nav";
5
- @import "core/theme";
6
- @import "core/cookieconsent";
7
- @import "core/footer";
8
- @import "core/social-media-icons";
9
- @import "core/breadcrumb";
10
- @import "core/tables";
11
- @import "core/forms";
12
- @import "core/fa";
13
- @import "core/fly";
14
- @import "core/jumbotron";
15
- @import "core/featherlight";
16
- @import "core/animations";
17
- @import "core/carousel-styles";
18
- @import "core/owl.carousel.min";
19
- @import "core/owl.theme.default.min";
20
- @import "core/flow";
1
+ // Core Jumbo Jekyll Theme Sass includes.
2
+ @import "core/normalize";
3
+ @import "core/fonts";
4
+ @import "core/nav";
5
+ @import "core/theme";
6
+ @import "core/cookieconsent";
7
+ @import "core/footer";
8
+ @import "core/social-media-icons";
9
+ @import "core/breadcrumb";
10
+ @import "core/tables";
11
+ @import "core/forms";
12
+ @import "core/fa";
13
+ @import "core/fly";
14
+ @import "core/jumbotron";
15
+ @import "core/featherlight";
16
+ @import "core/animations";
17
+ @import "core/carousel-styles";
18
+ @import "core/owl.carousel.min";
19
+ @import "core/owl.theme.default.min";
20
+ @import "core/flow";
data/_sass/core/blog.scss CHANGED
@@ -1,426 +1,426 @@
1
- // GENERIC
2
- div#pagination_panel {
3
- ul {
4
- li{
5
- &.active {
6
- a {
7
- color: #fff;
8
- }
9
- }
10
- }
11
- }
12
- }
13
- a {
14
- &:hover {
15
- .blog-author-image {
16
- border-color: #d4d4d4;
17
- }
18
- }
19
- }
20
- p {
21
- &.post_excerpt {
22
- font-size: 15px;
23
- margin-top: 10px;
24
- @media(max-width:$screen-sm-min){
25
- font-size: 11px;
26
- }
27
- }
28
- }
29
- .blog-author-image {
30
- background-position: center center;
31
- transition: all 100ms linear;
32
- @media(max-width:$screen-sm-min){
33
- height: 50px;
34
- width: 50px;
35
- }
36
- }
37
- // BLOG FEATURED IMAGE SECTION
38
- #jumbotron {
39
- a {
40
- &:hover{
41
- text-decoration: none;
42
- & img {
43
- border-color:$brand-primary;
44
- }
45
- }
46
- }
47
- #jumbotron-content{
48
- color: $featured-image-text-color;
49
- margin-left: auto;
50
- margin-bottom: 82px;
51
- margin-right: auto;
52
- z-index: 1;
53
- height: 300px;
54
- text-align: center;
55
- line-height: 50px;
56
- position: relative;
57
- vertical-align: middle;
58
- #jumbotron-text {
59
- small {
60
- @media(min-width:$screen-sm-min){
61
- font-size:15px;
62
- }
63
- }
64
- .blog-author {
65
- a {
66
- em {
67
- color:white;
68
- transition: all 500ms linear;
69
- }
70
- &:hover {
71
- em {
72
- color:#a681b8;
73
- }
74
- }
75
- }
76
- }
77
- .blog-author-image{
78
- height: 83px;
79
- width: 83px;
80
- border-radius: 83px;
81
- border: 4px solid white;
82
- background-size: cover;
83
- background-repeat: no-repeat;
84
- }
85
- }
86
- }
87
- }
88
- .blog-content {
89
- padding: 0;
90
- @media(max-width: $screen-sm-min - 1){
91
- padding-left:0px;
92
- padding-right: 0px;
93
- }
94
- }
95
- // BLOG CONTENT
96
- article {
97
- &.post-content {
98
- overflow: auto;
99
- margin-top: 20px;
100
- ol, ul {
101
- line-height: 1.6em;
102
- font-size: 16px;
103
- }
104
- .post-series {
105
- background-color: whitesmoke;
106
- padding: 5px;
107
- border: 1px solid #e2e2e2;
108
- p {
109
- margin-bottom: 5px;
110
- font-size: 16px;
111
- }
112
- ul {
113
- li.active {
114
- a {
115
- color: white;
116
- }
117
- }
118
- }
119
- }
120
- img {
121
- width: 100%;
122
- height: auto;
123
- &.small-inline {
124
- width: 100px;
125
- height: auto;
126
- display: inline-block;
127
- float: left;
128
- margin-right: 30px;
129
- margin-top: 5px;
130
- margin-bottom: 30px;
131
- &.right {
132
- float: right;
133
- }
134
- }
135
- &.medium-inline {
136
- width: 200px !important;
137
- height: auto !important;
138
- display: inline-block;
139
- float: left;
140
- margin-right: 30px;
141
- margin-top: 5px;
142
- margin-bottom: 30px;
143
- &.right {
144
- float: right;
145
- }
146
- }
147
- &.large-inline {
148
- width: 300px !important;
149
- height: auto !important;
150
- display: inline-block;
151
- float: left;
152
- margin-right: 30px;
153
- margin-top: 5px;
154
- margin-bottom: 30px;
155
- &.right {
156
- float: right;
157
- }
158
- }
159
- }
160
- .highlighter-rouge {
161
- div.highlight {
162
- position: relative;
163
- pre.highlight {
164
- padding: 15px;
165
- position: relative;
166
- }
167
- .copyBtn {
168
- position: absolute;
169
- bottom: 0px;
170
- z-index: 9999;
171
- height: 40px;
172
- right: 0px;
173
- border-left: 1px solid white;
174
- border-top: 1px solid white;
175
- width: 40px;
176
- }
177
- &:hover, &:focus {
178
- background-color:$brand-primary;
179
- }
180
- }
181
- }
182
- }
183
- }
184
- // BLOG SIDEBAR
185
- .blog-sidebar {
186
- padding: 15px;
187
- margin-top: 40px;
188
- margin-bottom: 40px;
189
- .featured_blog_post {
190
- height: auto;
191
- margin: -1px;
192
- border-bottom: 1px solid $gray-lighter;
193
- padding: 12px;
194
- img{
195
- margin-top:5px;
196
- @media(max-width: $screen-md-min - 1){
197
- padding-right: 10px;
198
- }
199
-
200
- }
201
- small {
202
- em {
203
- color:black;
204
- }
205
- }
206
- }
207
- .panel-primary {
208
- .panel-heading{
209
- background-color: $brand-primary;
210
- color: #fff;
211
- h3.panel-title {
212
- color: $blog-panel-title-colour;
213
- }
214
- }
215
- }
216
- #post-tags {
217
- margin-bottom: 20px;
218
- a {
219
- &.hover span.tag {
220
- background-color: $post-tag-hover-bg;
221
- color: $post-tag-hover-color;
222
- }
223
- span.tag {
224
- display: inline-block;
225
- background-color: $post-tag-bg;
226
- color: $post-tag-color;
227
- padding: 10px;
228
- margin: 2px 0;
229
- border: 1px solid $post-tag-border;
230
- }
231
- }
232
-
233
- }
234
- @media(max-width: $screen-sm-min - 1){
235
- padding-left:0px;
236
- padding-right: 0px;
237
- }
238
- @media (max-width: $screen-xs-min) {
239
- padding: 0px;
240
- }
241
- @media(max-width: $screen-md-min - 1){
242
- margin-top: 15px;
243
- padding-right: 0px;
244
- padding-left: 0px;
245
- }
246
- }
247
- // BLOG INDEX PAGE
248
- .blog-section {
249
- display: flex;
250
- flex-wrap: wrap;
251
- [class*='col-'] {
252
- display: flex;
253
- flex-direction: column;
254
- }
255
- .post-cat {
256
- padding: 5px;
257
- margin-bottom: 5px;
258
- color: $brand-primary;
259
- font-weight: bold;
260
- display: inline-block;
261
- text-transform: uppercase;
262
- }
263
- .featured-post-row{
264
- border: 1px solid #eee;
265
- padding-left:0px;
266
- padding-top:0px;
267
- padding-right:0px;
268
- padding-bottom: 0px;
269
- .latest-featured-post {
270
- padding-right:0px;
271
- padding-left:0px;
272
- height: 100%;
273
- img {
274
- height: 100%;
275
- max-height: none !important;
276
- width: 100% !important;
277
- object-fit: cover !important;
278
- }
279
- @media(max-width: $screen-sm-min){
280
- height: auto;
281
- }
282
- }
283
- .latest-featured-post-content {
284
- padding: 20px;
285
- .post-info {
286
- margin-bottom: 20px;
287
- }
288
- }
289
- @media(max-width: $screen-sm-min){
290
- margin-left: 15px;
291
- margin-right: 15px;
292
- }
293
- border-radius:20px;
294
- overflow:hidden;
295
- margin-bottom: 30px;
296
- -webkit-box-shadow: 0px 0px 20px 5px rgb(240, 240, 240);
297
- -moz-box-shadow: 0px 0px 20px 5px rgb(229, 229, 229);
298
- box-shadow: 0px 0px 20px 5px rgb(235, 235, 235);
299
- }
300
- .blog-post-item-col {
301
- .blog-post-item {
302
- border-radius: 10px;
303
- overflow: hidden;
304
- background-color: white;
305
- margin-right: 15px;
306
- margin-bottom: 30px;
307
- -webkit-box-shadow: 0px 0px 20px 5px #f0f0f0;
308
- -moz-box-shadow: 0px 0px 20px 5px #e5e5e5;
309
- box-shadow: 0px 0px 20px 5px #ebebeb;
310
- border: 1px solid #eee;
311
- transition: all 200ms ease;
312
- display: flex;
313
- flex-wrap: wrap;
314
- height: 100%;
315
- @media(max-width: $screen-sm-min){
316
- margin-left: 15px;
317
- margin-right: 15px;
318
- }
319
- a{
320
- width: 100%;
321
- }
322
- &:nth-child(3n+2) {
323
- .blog-post-item {
324
- @media(min-width: $screen-sm-min){
325
- margin-right:15px !important;
326
- margin-left:0px !important;
327
- }
328
- }
329
- }
330
- .blog-featured-image {
331
- position: relative;
332
- overflow:hidden;
333
- height: 150px;
334
- .read-article {
335
- display:none !important;
336
- position: absolute;
337
- z-index: 99999;
338
- color: #fff;
339
- font-weight:bold;
340
- font-size:18px;
341
- top: 80px;
342
- height: 20px;
343
- display: table-cell;
344
- width: 100%;
345
- text-align: center;
346
- }
347
- &.using-placeholder {
348
- img {
349
- object-fit: contain !important;
350
- }
351
- }
352
- &::after {
353
- content: '';
354
- display:none;
355
- height:100%;
356
- width:100%;
357
- position: absolute;
358
- top:0px;
359
- opacity:.4;
360
- background-color:$brand-primary;
361
- }
362
- }
363
- .blog-post-item-content {
364
- padding: 10px;
365
- display: flex;
366
- flex-direction: column;
367
- .author-section {
368
- .blog-author-image {
369
- border-radius: 83px;
370
- background-size: cover;
371
- background-repeat: no-repeat;
372
- display: inline-block;
373
- height: 60px;
374
- width: 60px;
375
- position: relative;
376
- z-index: 2;
377
- border: 1px solid #eee;
378
- }
379
- .small.blog-author {
380
- display: inline-block;
381
- text-align: left;
382
- position: relative;
383
- top: -20px;
384
- }
385
- }
386
- }
387
- img {
388
- width: 100%;
389
- height: 150px;
390
- object-fit: cover;
391
- }
392
- &:hover {
393
- transform: translateY(-5px);
394
- -webkit-box-shadow: 0px 0px 20px 5px rgba(179,179,179,1);
395
- -moz-box-shadow: 0px 0px 20px 5px rgba(179,179,179,1);
396
- box-shadow: 0px 0px 20px 5px rgba(179,179,179,1);
397
- & .blog-featured-image::after {
398
- display:block;
399
- }
400
- & .read-article {
401
- display: block !important;
402
- }
403
- }
404
- }
405
-
406
- }
407
- }
408
- // Disqus Comments
409
- section.disqus {
410
- padding-right: 20px;
411
- margin-top: 40px;
412
- @media(max-width: $screen-sm-min){
413
- padding-right: 0px;
414
- }
415
- }
416
- // Reading Time Span
417
- span.reading-time {
418
- padding: 5px;
419
- background-color: white;
420
- color: black;
421
- font-size: 10px;
422
- opacity: .8;
423
- height: 20px;
424
- line-height: 10px;
425
- border-radius: 2px;
1
+ // GENERIC
2
+ div#pagination_panel {
3
+ ul {
4
+ li{
5
+ &.active {
6
+ a {
7
+ color: #fff;
8
+ }
9
+ }
10
+ }
11
+ }
12
+ }
13
+ a {
14
+ &:hover {
15
+ .blog-author-image {
16
+ border-color: #d4d4d4;
17
+ }
18
+ }
19
+ }
20
+ p {
21
+ &.post_excerpt {
22
+ font-size: 15px;
23
+ margin-top: 10px;
24
+ @media(max-width:$screen-sm-min){
25
+ font-size: 11px;
26
+ }
27
+ }
28
+ }
29
+ .blog-author-image {
30
+ background-position: center center;
31
+ transition: all 100ms linear;
32
+ @media(max-width:$screen-sm-min){
33
+ height: 50px;
34
+ width: 50px;
35
+ }
36
+ }
37
+ // BLOG FEATURED IMAGE SECTION
38
+ #jumbotron {
39
+ a {
40
+ &:hover{
41
+ text-decoration: none;
42
+ & img {
43
+ border-color:$brand-primary;
44
+ }
45
+ }
46
+ }
47
+ #jumbotron-content{
48
+ color: $featured-image-text-color;
49
+ margin-left: auto;
50
+ margin-bottom: 82px;
51
+ margin-right: auto;
52
+ z-index: 1;
53
+ height: 300px;
54
+ text-align: center;
55
+ line-height: 50px;
56
+ position: relative;
57
+ vertical-align: middle;
58
+ #jumbotron-text {
59
+ small {
60
+ @media(min-width:$screen-sm-min){
61
+ font-size:15px;
62
+ }
63
+ }
64
+ .blog-author {
65
+ a {
66
+ em {
67
+ color:white;
68
+ transition: all 500ms linear;
69
+ }
70
+ &:hover {
71
+ em {
72
+ color:#a681b8;
73
+ }
74
+ }
75
+ }
76
+ }
77
+ .blog-author-image{
78
+ height: 83px;
79
+ width: 83px;
80
+ border-radius: 83px;
81
+ border: 4px solid white;
82
+ background-size: cover;
83
+ background-repeat: no-repeat;
84
+ }
85
+ }
86
+ }
87
+ }
88
+ .blog-content {
89
+ padding: 0;
90
+ @media(max-width: $screen-sm-min - 1){
91
+ padding-left:0px;
92
+ padding-right: 0px;
93
+ }
94
+ }
95
+ // BLOG CONTENT
96
+ article {
97
+ &.post-content {
98
+ overflow: auto;
99
+ margin-top: 20px;
100
+ ol, ul {
101
+ line-height: 1.6em;
102
+ font-size: 16px;
103
+ }
104
+ .post-series {
105
+ background-color: whitesmoke;
106
+ padding: 5px;
107
+ border: 1px solid #e2e2e2;
108
+ p {
109
+ margin-bottom: 5px;
110
+ font-size: 16px;
111
+ }
112
+ ul {
113
+ li.active {
114
+ a {
115
+ color: white;
116
+ }
117
+ }
118
+ }
119
+ }
120
+ img {
121
+ width: 100%;
122
+ height: auto;
123
+ &.small-inline {
124
+ width: 100px;
125
+ height: auto;
126
+ display: inline-block;
127
+ float: left;
128
+ margin-right: 30px;
129
+ margin-top: 5px;
130
+ margin-bottom: 30px;
131
+ &.right {
132
+ float: right;
133
+ }
134
+ }
135
+ &.medium-inline {
136
+ width: 200px !important;
137
+ height: auto !important;
138
+ display: inline-block;
139
+ float: left;
140
+ margin-right: 30px;
141
+ margin-top: 5px;
142
+ margin-bottom: 30px;
143
+ &.right {
144
+ float: right;
145
+ }
146
+ }
147
+ &.large-inline {
148
+ width: 300px !important;
149
+ height: auto !important;
150
+ display: inline-block;
151
+ float: left;
152
+ margin-right: 30px;
153
+ margin-top: 5px;
154
+ margin-bottom: 30px;
155
+ &.right {
156
+ float: right;
157
+ }
158
+ }
159
+ }
160
+ .highlighter-rouge {
161
+ div.highlight {
162
+ position: relative;
163
+ pre.highlight {
164
+ padding: 15px;
165
+ position: relative;
166
+ }
167
+ .copyBtn {
168
+ position: absolute;
169
+ bottom: 0px;
170
+ z-index: 9999;
171
+ height: 40px;
172
+ right: 0px;
173
+ border-left: 1px solid white;
174
+ border-top: 1px solid white;
175
+ width: 40px;
176
+ }
177
+ &:hover, &:focus {
178
+ background-color:$brand-primary;
179
+ }
180
+ }
181
+ }
182
+ }
183
+ }
184
+ // BLOG SIDEBAR
185
+ .blog-sidebar {
186
+ padding: 15px;
187
+ margin-top: 40px;
188
+ margin-bottom: 40px;
189
+ .featured_blog_post {
190
+ height: auto;
191
+ margin: -1px;
192
+ border-bottom: 1px solid $gray-lighter;
193
+ padding: 12px;
194
+ img{
195
+ margin-top:5px;
196
+ @media(max-width: $screen-md-min - 1){
197
+ padding-right: 10px;
198
+ }
199
+
200
+ }
201
+ small {
202
+ em {
203
+ color:black;
204
+ }
205
+ }
206
+ }
207
+ .panel-primary {
208
+ .panel-heading{
209
+ background-color: $brand-primary;
210
+ color: #fff;
211
+ h3.panel-title {
212
+ color: $blog-panel-title-colour;
213
+ }
214
+ }
215
+ }
216
+ #post-tags {
217
+ margin-bottom: 20px;
218
+ a {
219
+ &.hover span.tag {
220
+ background-color: $post-tag-hover-bg;
221
+ color: $post-tag-hover-color;
222
+ }
223
+ span.tag {
224
+ display: inline-block;
225
+ background-color: $post-tag-bg;
226
+ color: $post-tag-color;
227
+ padding: 10px;
228
+ margin: 2px 0;
229
+ border: 1px solid $post-tag-border;
230
+ }
231
+ }
232
+
233
+ }
234
+ @media(max-width: $screen-sm-min - 1){
235
+ padding-left:0px;
236
+ padding-right: 0px;
237
+ }
238
+ @media (max-width: $screen-xs-min) {
239
+ padding: 0px;
240
+ }
241
+ @media(max-width: $screen-md-min - 1){
242
+ margin-top: 15px;
243
+ padding-right: 0px;
244
+ padding-left: 0px;
245
+ }
246
+ }
247
+ // BLOG INDEX PAGE
248
+ .blog-section {
249
+ display: flex;
250
+ flex-wrap: wrap;
251
+ [class*='col-'] {
252
+ display: flex;
253
+ flex-direction: column;
254
+ }
255
+ .post-cat {
256
+ padding: 5px;
257
+ margin-bottom: 5px;
258
+ color: $brand-primary;
259
+ font-weight: bold;
260
+ display: inline-block;
261
+ text-transform: uppercase;
262
+ }
263
+ .featured-post-row{
264
+ border: 1px solid #eee;
265
+ padding-left:0px;
266
+ padding-top:0px;
267
+ padding-right:0px;
268
+ padding-bottom: 0px;
269
+ .latest-featured-post {
270
+ padding-right:0px;
271
+ padding-left:0px;
272
+ height: 100%;
273
+ img {
274
+ height: 100%;
275
+ max-height: none !important;
276
+ width: 100% !important;
277
+ object-fit: cover !important;
278
+ }
279
+ @media(max-width: $screen-sm-min){
280
+ height: auto;
281
+ }
282
+ }
283
+ .latest-featured-post-content {
284
+ padding: 20px;
285
+ .post-info {
286
+ margin-bottom: 20px;
287
+ }
288
+ }
289
+ @media(max-width: $screen-sm-min){
290
+ margin-left: 15px;
291
+ margin-right: 15px;
292
+ }
293
+ border-radius:20px;
294
+ overflow:hidden;
295
+ margin-bottom: 30px;
296
+ -webkit-box-shadow: 0px 0px 20px 5px rgb(240, 240, 240);
297
+ -moz-box-shadow: 0px 0px 20px 5px rgb(229, 229, 229);
298
+ box-shadow: 0px 0px 20px 5px rgb(235, 235, 235);
299
+ }
300
+ .blog-post-item-col {
301
+ .blog-post-item {
302
+ border-radius: 10px;
303
+ overflow: hidden;
304
+ background-color: white;
305
+ margin-right: 15px;
306
+ margin-bottom: 30px;
307
+ -webkit-box-shadow: 0px 0px 20px 5px #f0f0f0;
308
+ -moz-box-shadow: 0px 0px 20px 5px #e5e5e5;
309
+ box-shadow: 0px 0px 20px 5px #ebebeb;
310
+ border: 1px solid #eee;
311
+ transition: all 200ms ease;
312
+ display: flex;
313
+ flex-wrap: wrap;
314
+ height: 100%;
315
+ @media(max-width: $screen-sm-min){
316
+ margin-left: 15px;
317
+ margin-right: 15px;
318
+ }
319
+ a{
320
+ width: 100%;
321
+ }
322
+ &:nth-child(3n+2) {
323
+ .blog-post-item {
324
+ @media(min-width: $screen-sm-min){
325
+ margin-right:15px !important;
326
+ margin-left:0px !important;
327
+ }
328
+ }
329
+ }
330
+ .blog-featured-image {
331
+ position: relative;
332
+ overflow:hidden;
333
+ height: 150px;
334
+ .read-article {
335
+ display:none !important;
336
+ position: absolute;
337
+ z-index: 99999;
338
+ color: #fff;
339
+ font-weight:bold;
340
+ font-size:18px;
341
+ top: 80px;
342
+ height: 20px;
343
+ display: table-cell;
344
+ width: 100%;
345
+ text-align: center;
346
+ }
347
+ &.using-placeholder {
348
+ img {
349
+ object-fit: contain !important;
350
+ }
351
+ }
352
+ &::after {
353
+ content: '';
354
+ display:none;
355
+ height:100%;
356
+ width:100%;
357
+ position: absolute;
358
+ top:0px;
359
+ opacity:.4;
360
+ background-color:$brand-primary;
361
+ }
362
+ }
363
+ .blog-post-item-content {
364
+ padding: 10px;
365
+ display: flex;
366
+ flex-direction: column;
367
+ .author-section {
368
+ .blog-author-image {
369
+ border-radius: 83px;
370
+ background-size: cover;
371
+ background-repeat: no-repeat;
372
+ display: inline-block;
373
+ height: 60px;
374
+ width: 60px;
375
+ position: relative;
376
+ z-index: 2;
377
+ border: 1px solid #eee;
378
+ }
379
+ .small.blog-author {
380
+ display: inline-block;
381
+ text-align: left;
382
+ position: relative;
383
+ top: -20px;
384
+ }
385
+ }
386
+ }
387
+ img {
388
+ width: 100%;
389
+ height: 150px;
390
+ object-fit: cover;
391
+ }
392
+ &:hover {
393
+ transform: translateY(-5px);
394
+ -webkit-box-shadow: 0px 0px 20px 5px rgba(179,179,179,1);
395
+ -moz-box-shadow: 0px 0px 20px 5px rgba(179,179,179,1);
396
+ box-shadow: 0px 0px 20px 5px rgba(179,179,179,1);
397
+ & .blog-featured-image::after {
398
+ display:block;
399
+ }
400
+ & .read-article {
401
+ display: block !important;
402
+ }
403
+ }
404
+ }
405
+
406
+ }
407
+ }
408
+ // Disqus Comments
409
+ section.disqus {
410
+ padding-right: 20px;
411
+ margin-top: 40px;
412
+ @media(max-width: $screen-sm-min){
413
+ padding-right: 0px;
414
+ }
415
+ }
416
+ // Reading Time Span
417
+ span.reading-time {
418
+ padding: 5px;
419
+ background-color: white;
420
+ color: black;
421
+ font-size: 10px;
422
+ opacity: .8;
423
+ height: 20px;
424
+ line-height: 10px;
425
+ border-radius: 2px;
426
426
  }