reprogl

1
// in _settings.scss there are all variables used here
2
@import 'settings';
3

4
html {
5
    height: auto;
6
    min-height: 100%;
7
}
8

9
body {
10
    font-family: $main-font;
11
    font-weight: $main-font-weight;
12
    background-color: darken($color-main-light, 5%);
13
    min-height: 100%;
14
    overflow-x: hidden;
15
    &.nicescroll {
16
        overflow-y: hidden;
17
    }
18
}
19

20
a {
21
    color: $color-main-contrast;
22
}
23

24
h1, h2, h3, h4, h5, h6 {
25
    font-weight: $headers-weight;
26
    font-family: $headers-font;
27
    text-transform: $headers-transform;
28
    color: $color-headers;
29
    a, a:hover, a:focus, a:active {
30
        color: inherit;
31
        text-decoration: none;
32
    }
33
}
34

35
p, ul, ol {
36
    font-family: $main-font;
37
    font-weight: $main-font-weight;
38
}
39

40
pre {
41
    margin-bottom: rem-calc(20);
42
}
43

44
.row {
45
    width: 100%;
46
    max-width: $row-max-width;
47
    .column, .columns {
48
        padding-left: rem-calc(30);
49
        padding-right: rem-calc(30);
50
    }
51
    &.row-with-header-logo {
52
        max-width: none;
53
        .column, .columns {
54
            padding-left: rem-calc(15);
55
            padding-right: rem-calc(15);
56
        }
57
    }
58
}
59

60
.button, button {
61
    font-family: $main-font;
62
}
63

64
a.button {
65
    text-decoration: none;
66
    color: $color-main-light;
67
    &:hover, &:active, &:focus {
68
        text-decoration: none;
69
        color: $color-main-light;
70
    }
71
}
72

73
[class*="block-grid-"] {
74
    margin: 0;
75
}
76

77
::-webkit-scrollbar {
78
    width: rem-calc(10);
79
    background-color: $color-main-light;
80
}
81
::-webkit-scrollbar-track {
82
    -webkit-box-shadow: inset 0 0 rem-calc(6) rgba($color-main-dark, .3);
83
    background-color: $color-main-light;
84
}
85
::-webkit-scrollbar-thumb {
86
    -webkit-box-shadow: inset 0 0 rem-calc(6) rgba($color-main-dark, .3);
87
    background-color: $color-main-dark;
88
}
89

90
.back-to-top-btn {
91
    display: none;
92
    background-color: $color-main-dark;
93
    color: $color-main-light;
94
    position: fixed;
95
    bottom: 0;
96
    right: rem-calc(45);
97
    width: rem-calc(50);
98
    height: rem-calc(40);
99
    line-height: rem-calc(40);
100
    text-align: center;
101
    cursor: pointer;
102
    transition: all .4s;
103
    -webkit-transition: all .4s;
104
    border-radius: rem-calc(3) rem-calc(3) 0 0;
105
    z-index: 999;
106
    -webkit-transform: translateZ(0);
107
    transform: translateZ(0);
108
    &.hidden {
109
        -webkit-transform: translateY(100%);
110
        -ms-transform: translateY(100%);
111
        transform: translateY(100%);
112
    }
113
    &:hover, &:focus, &:active {
114
        color: $color-main-light;
115
        background-color: lighten($color-main-dark, 5%)
116
    }
117
    .glyphicon {
118
        vertical-align: middle;
119
    }
120
    @media only screen and (min-width: 40.063em) {
121
        display: block;
122
    }
123
}
124

125
.headroom {
126
    padding: rem-calc(20);
127
    -webkit-transition: -webkit-transform .5s;
128
    -ms-transition: -ms-transform .5s;
129
    transition: transform .5s;
130
    background-color: $color-main-dark;
131
    color: $color-main-light;
132
    position: fixed;
133
    z-index: 10;
134
    right: 0;
135
    left: 0;
136
    top: 0;
137
    -webkit-transform: translate3d(0, -100%, 0);
138
    -ms-transform: translate(0, -100%);
139
    transform: translate3d(0, -100%, 0);
140
    &.headroom--not-top {
141
        -webkit-transform: translate3d(0, 0, 0);
142
        -ms-transform: translate(0, 0);
143
        transform: translate3d(0, 0, 0);
144
    }
145
    &.headroom--top {
146
        -webkit-transform: translate3d(0, -100%, 0);
147
        -ms-transform: translate(0, -100%);
148
        transform: translate3d(0, -100%, 0);
149
    }
150
    .headroom-logo {
151
        svg {
152
            vertical-align: middle;
153
            border-radius: rem-calc(6);
154
        }
155
    }
156
    .headeroom-icons {
157
        line-height: rem-calc(50);
158
        font-size: rem-calc(36);
159
        .glyphicon {
160
            cursor: pointer;
161
            height: rem-calc(50);
162
            line-height: rem-calc(50);
163
            vertical-align: middle;
164
        }
165
    }
166
}
167

168
// hacks for old android and ie9 buggy behaviour
169
html[data-useragent*='Android 4.0'],
170
html[data-useragent*='Android 4.1'],
171
html[data-useragent*='Android 4.2'],
172
html.no-csstransforms3d {
173
    .headroom {
174
        top: -300px;
175
        -webkit-transition: top .5s;
176
        transition: top .5s;
177
        &.headroom--not-top {
178
            top: 0;
179
        }
180
        &.headroom--top {
181
            top: -300px;
182
        }
183
    }
184
}
185

186
.big-search {
187
    position: absolute;
188
    width: 100%;
189
    min-height: 100%;
190
    top: 0;
191
    left: 0;
192
    background: rgba($color-main-dark, .95);
193
    -webkit-user-select: none;
194
    user-select: none;
195
    opacity: 0;
196
    visibility: hidden;
197
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
198
    transition: opacity 0.5s, visibility 0s 0.5s;
199
    z-index: 99999;
200
    overflow-y: auto;
201
    .big-search-close-btn {
202
        font-size: rem-calc(60);
203
        text-align: center;
204
        position: absolute;
205
        right: rem-calc(35);
206
        top: rem-calc(35);
207
        overflow: hidden;
208
        border: none;
209
        color: $color-main-light;
210
        outline: none;
211
        z-index: 100;
212
        cursor: pointer;
213
        -webkit-user-select: none;
214
        user-select: none;
215
    }
216
    &.open {
217
        opacity: 1;
218
        visibility: visible;
219
        -webkit-transition: opacity 0.5s;
220
        transition: opacity 0.5s;
221
    }
222
    .big-search-container {
223
        margin-top: 11%;
224
        .big-search-form-input {
225
            color: $color-main-light;
226
            height: rem-calc(120);
227
            font-size: rem-calc(50);
228
            padding: rem-calc(20) 0;
229
            font-weight: 900;
230
            background-color: transparent;
231
            box-shadow: none;
232
            border: 0;
233
            border-bottom: rem-calc(3) solid $color-main-light;
234
            &:focus {
235
                box-shadow: none;
236
                background-color: transparent;
237
            }
238
            &::-webkit-input-placeholder {
239
                color: $color-main-light;
240
            }
241
            &:-moz-placeholder {
242
               color: $color-main-light;
243
               opacity: 1;
244
            }
245
            &::-moz-placeholder {
246
               color: $color-main-light;
247
               opacity: 1;
248
            }
249
            &:-ms-input-placeholder {
250
               color: $color-main-light;
251
            }
252
        }
253
        .big-search-results {
254
            color: $color-main-light;
255
            > p {
256
                font-weight: 600;
257
                font-size: rem-calc(36);
258
                // border-bottom: rem-calc(2) solid $color-main-light;
259
                padding-top: rem-calc(15);
260
                padding-bottom: rem-calc(15);
261
            }
262
            a {
263
                color: $color-main-light;
264
                p, h1, h2, h3, h4, h5, h6 {
265
                    color: $color-main-light;
266
                    font-weight: 400;
267
                    text-transform: none;
268
                    -webkit-transition: color .3s;
269
                    transition: color .3s;
270
                }
271
                &:hover, &:active, &:focus {
272
                    text-decoration: none;
273
                }
274
                &:hover {
275
                    p, h1, h2, h3, h4, h5, h6 {
276
                        color: darken($color-main-light, 40%);
277
                    }
278
                }
279
            }
280
        }
281
    }
282
}
283

284
.big-header-container {
285
    position: relative;
286
    z-index: 1;
287
    .main-header {
288
        text-align: left;
289
        color: $color-main-light;
290
        .main-header-content {
291
            padding-top: rem-calc(37);
292
            padding-bottom: rem-calc(60);
293
            .blog-logo {
294
                svg {
295
                    vertical-align: middle;
296
                    border-radius: rem-calc(6);
297
                }
298
            }
299
            .page-description span {
300
                padding: 0 rem-calc(6);
301
                border-radius: rem-calc(6);
302
                margin-left: rem-calc(-6);
303
                background-color: rgba(35, 35, 35, 0.5);
304
            }
305
            @media only screen and (min-width: 48em) {
306
                padding-top: rem-calc(70);
307
            }
308
            @media only screen and (min-width: 64em) {
309
                padding-top: rem-calc(100);
310
            }
311
        }
312
        .page-title {
313
            color: $color-main-light;
314
            font-weight: 800;
315
            font-size: rem-calc(46);
316
            @media only screen and (min-width: 48em) {
317
                font-size: rem-calc(60);
318
            }
319
            @media only screen and (min-width: 64em) {
320
                font-size: rem-calc(80);
321
            }
322
        }
323
        .page-description {
324
            font-weight: 400;
325
            color: $color-main-light;
326
        }
327
        .main-header-logo-container {
328
            .main-header-logo {
329
                img {
330
                    max-height: rem-calc(100);
331
                }
332
            }
333
        }
334
        .main-header-bars {
335
            position: absolute;
336
            right: rem-calc(15);
337
            top: 0;
338
            width: rem-calc(90);
339
            height: rem-calc(100);
340
            font-size: rem-calc(36);
341
            text-align: center;
342
            z-index: 2;
343
            .glyphicon {
344
                cursor: pointer;
345
                line-height: rem-calc(100);
346
                height: rem-calc(100);
347
                vertical-align: middle;
348
            }
349
            @media only screen and (min-width: 48em) {
350
                right: rem-calc(30);
351
            }
352
        }
353
    }
354
}
355

356
.index-filters {
357
    height: rem-calc(60);
358
    line-height: rem-calc(60);
359
    background-color: $color-main-light;
360
    a {
361
        display: inline-block;
362
        color: $color-main-dark;
363
        outline: none;
364
        &:focus, &:active {
365
            color: inherit;
366
        }
367
        &:hover {
368
            color: lighten($color-main-dark, 10%);
369
        }
370
    }
371
    ul.inline-list {
372
        vertical-align: middle;
373
        display: inline-block;
374
        line-height: inherit;
375
        a {
376
            -webkit-transition: color 0.5s;
377
            transition: color 0.5s;
378
            &:hover {
379
                color: $color-main-contrast;
380
            }
381
            img {
382
                position: relative;
383
                top: -2px;
384
                border-radius: 6px;
385
                height: 32px;
386
                width: auto;
387
            }
388
        }
389
    }
390
}
391

392
.main-content-wrapper {
393
    position: relative;
394
    overflow: hidden;
395
}
396

397
.loop {
398
    padding-top: rem-calc(30);
399
    padding-bottom: rem-calc(60);
400
    .post-row {
401
        padding-left: rem-calc(15);
402
        padding-right: rem-calc(15);
403
        max-width: $row-max-width;
404
        margin-left: auto;
405
        margin-right: auto;
406
        @media only screen and (min-width: 48em) {
407
            padding-left: rem-calc(30);
408
            padding-right: rem-calc(30);
409
        }
410
        .post-block-grid {
411
            .post-block-grid-item {
412
                float: left;
413
                width: 100%;
414
                @media only screen and (min-width: 62.5em) {
415
                    width: 50%;
416
                }
417
                .post-block-wrapper {
418
                    overflow: hidden;
419
                }
420
                &.list {
421
                    @media only screen and (min-width: 62.5em) {
422
                        width: 100%;
423
                    }
424
                    .post-block-wrapper {
425
                        background-color: $color-main-light;
426
                        figure {
427
                            width: 100%;
428
                            @media only screen and (min-width: 48em) {
429
                                width: 40%;
430
                            }
431
                        }
432
                        .post-block-grid-content {
433
                            width: 100%;
434
                            @media only screen and (min-width: 48em) {
435
                                width: 60%;
436
                            }
437
                            &.no-image {
438
                                width: 100%;
439
                            }
440
                        }
441
                    }
442
                }
443
            }
444
            .post-block-grid-content {
445
                background-color: $color-main-light;
446
                padding: rem-calc(30);
447
                overflow-x: hidden;
448
                .index-post-image {
449
                    display: block;
450
                }
451
                section p {
452
                    hyphens: auto;
453
                }
454
                @media only screen and (min-width: 40.063em) {
455
                    padding: rem-calc(50);
456
                }
457
                .post-preview a {
458
                    @include corner-link;
459

460
                    &[href^="mailto:"]:after {
461
                        content: "";
462
                    }
463
                }
464
            }
465
            // image hover effects based on great article
466
            // http://tympanus.net/Development/HoverEffectIdeas/index.html
467
            figure {
468
                position: relative;
469
                float: left;
470
                overflow: hidden;
471
                width: 100%;
472
                text-align: center;
473
                text-align: center;
474
                cursor: pointer;
475
                margin: 0;
476
                background-color: $color-main-light;
477
                @extend %clearfix;
478
                img {
479
                    position: relative;
480
                    display: block;
481
                    max-width: 100%;
482
                    margin: 0 auto;
483
                }
484
                figcaption {
485
                    padding: 2em;
486
                    color: #fff;
487
                    text-transform: uppercase;
488
                    font-size: 1.25em;
489
                    -webkit-backface-visibility: hidden;
490
                    backface-visibility: hidden;
491
                    position: absolute;
492
                    top: 0;
493
                    left: 0;
494
                    width: 100%;
495
                    height: 100%;
496
                    > a {
497
                        position: absolute;
498
                        top: 0;
499
                        left: 0;
500
                        width: 100%;
501
                        height: 100%;
502
                        z-index: 1000;
503
                        text-indent: 200%;
504
                        white-space: nowrap;
505
                        font-size: 0;
506
                        opacity: 0;
507
                    }
508
                    &::after, &::before {
509
                        pointer-events: none;
510
                    }
511
                }
512
                p {
513
                    margin: 0;
514
                    letter-spacing: 1px;
515
                    font-size: 68.5%;
516
                }
517
                &.effect-hera {
518
                    p {
519
                        position: absolute;
520
                        top: 50%;
521
                        left: 50%;
522
                        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
523
                        -ms-transition: opacity 0.35s, -ms-transform 0.35s;
524
                        transition: opacity 0.35s, transform 0.35s;
525
                        -webkit-transform: translate3d(-50%, -50%, 0);
526
                        -ms-transform: translate(-50%, -50%);
527
                        transform: translate3d(-50%, -50%, 0);
528
                        -webkit-transform-origin: 50%;
529
                        -ms-transform-origin: 50%;
530
                        transform-origin: 50%;
531
                        width: 100px;
532
                        text-transform: none;
533
                        font-size: 121%;
534
                        line-height: 2;
535
                        a {
536
                            color: $color-main-light;
537
                            outline: none;
538
                            i, span {
539
                                outline: none;
540
                                opacity: 0;
541
                                font-size: rem-calc(32);
542
                                -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
543
                                -ms-transition: opacity 0.35s, -ms-transform 0.35s;
544
                                transition: opacity 0.35s, transform 0.35s;
545
                            }
546
                            &:first-child {
547
                                i, span {
548
                                    -webkit-transform: translate3d(rem-calc(-60), rem-calc(-60), 0);
549
                                    -ms-transform: translate(rem-calc(-60), rem-calc(-60));
550
                                    transform: translate3d(rem-calc(-60), rem-calc(-60), 0);
551
                                }
552
                            }
553
                            &:nth-child(2) {
554
                                i, span {
555
                                    -webkit-transform: translate3d(rem-calc(60), rem-calc(-60), 0);
556
                                    -ms-transform: translate(rem-calc(60), rem-calc(-60));
557
                                    transform: translate3d(rem-calc(60), rem-calc(-60), 0);
558
                                }
559
                            }
560
                            &:hover {
561
                                opacity: 0.6;
562
                                text-decoration: none;
563
                            }
564
                        }
565
                    }
566
                    figcaption {
567
                        &::before {
568
                            position: absolute;
569
                            top: 50%;
570
                            left: 50%;
571
                            width: rem-calc(170);
572
                            height: rem-calc(170);
573
                            border: rem-calc(2) solid #fff;
574
                            content: '';
575
                            opacity: 0;
576
                            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
577
                            -ms-transition: opacity 0.35s, -ms-transform 0.35s;
578
                            transition: opacity 0.35s, transform 0.35s;
579
                            -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
580
                            -ms-transform: translate(-50%, -50%);
581
                            transform: translate3d(-50%, -50%, 0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
582
                            -webkit-transform-origin: 50%;
583
                            -ms-transform-origin: 50%;
584
                            transform-origin: 50%;
585
                        }
586
                    }
587
                    &:hover {
588
                        figcaption {
589
                            &::before {
590
                                opacity: 1;
591
                                -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
592
                                -ms-transform: translate(-50%, -50%);
593
                                transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
594
                            }
595
                        }
596
                        p {
597
                            i, span {
598
                                &:empty {
599
                                    -webkit-transform: translate3d(0, 0, 0);
600
                                    -ms-transform: translate(0, 0);
601
                                    transform: translate3d(0, 0, 0);
602
                                    opacity: 1;
603
                                }
604
                            }
605
                        }
606
                    }
607
                }
608
            }
609
            @include flash-messages;
610
        }
611
        .post {
612
            padding-top: rem-calc(15);
613
            padding-bottom: rem-calc(15);
614
            -webkit-transition: all .3s;
615
            transition: all .3s;
616
            .post-date {
617
                font-weight: 900;
618
                font-size: rem-calc(14);
619
                text-transform: uppercase;
620
                a {
621
                    color: $color-main-contrast;
622
                    position: relative;
623
                    display: inline-block;
624
                    &:after {
625
                        position: absolute;
626
                        content: " ";
627
                        display: block;
628
                        width: 0%;
629
                        height: rem-calc(2);
630
                        background-color: $color-main-contrast;
631
                        bottom: 0;
632
                        left: 50%;
633
                        -webkit-transform: translateX(-50%);
634
                        -ms-transform: translateX(-50%);
635
                        transform: translateX(-50%);
636
                        -webkit-transition: width .2s;
637
                        transition: width .2s;
638
                    }
639
                    &:hover, &:focus, &:active {
640
                        text-decoration: none;
641
                        color: $color-main-contrast;
642
                        &:after {
643
                            width: 100%;
644
                        }
645
                    }
646
                }
647
            }
648
            .post-title {
649
                font-weight: 900;
650
                text-transform: $headers-transform;
651
                line-height: 1.1;
652
                padding-bottom: rem-calc(10);
653
                padding-top: rem-calc(10);
654
                &.draft-title {
655
                    color: lighten($color-main-dark, 50%);
656
                }
657
            }
658
            .post-title-separator {
659
                width: rem-calc(70);
660
                height: rem-calc(5);
661
                margin-bottom: rem-calc(20);
662
                background-color: $color-main-dark;
663
            }
664
            .post-meta {
665
                font-weight: 600;
666
                padding-top: rem-calc(15);
667
                padding-bottom: rem-calc(15);
668
                font-size: rem-calc(12);
669
                text-transform: uppercase;
670
                a {
671
                    color: $color-main-contrast;
672
                    position: relative;
673
                    display: inline-block;
674
                    &:after {
675
                        position: absolute;
676
                        content: " ";
677
                        display: block;
678
                        width: 0%;
679
                        height: rem-calc(2);
680
                        background-color: $color-main-contrast;
681
                        bottom: 0;
682
                        left: 50%;
683
                        -webkit-transform: translateX(-50%);
684
                        -ms-transform: translateX(-50%);
685
                        transform: translateX(-50%);
686
                        -webkit-transition: width .2s;
687
                        transition: width .2s;
688
                    }
689
                    &:hover, &:focus, &:active {
690
                        text-decoration: none;
691
                        color: $color-main-contrast;
692
                        &:after {
693
                            width: 100%;
694
                        }
695
                    }
696
                    &.to-comments {
697
                        color: $color-main-dark;
698
                        &:after {
699
                            background-color: $color-main-dark;
700
                        }
701
                    }
702
                }
703
            }
704
            .job-item {
705
                margin-bottom: rem-calc(30);
706
                .job-emoji {
707
                    float: left;
708
                    font-size: rem-calc(42);
709
                    margin-right: rem-calc(20);
710
                }
711
                .job-dates {
712
                    color: lighten($color-main-dark, 50%);
713
                    font-size: 75%;
714
                    margin-top: rem-calc(6);
715
                }
716
            }
717
        }
718
        .post-read-more-btn {
719
            @include read-more-button;
720
        }
721
    }
722
}
723

724
.author-template .loop .post-row .post-block-grid figure {
725
    cursor: default;
726
}
727

728
.tag-view-info {
729
    height: rem-calc(100);
730
    line-height: rem-calc(100);
731
    background-color: $color-main-light;
732
    font-weight: 400;
733
    font-size: rem-calc(24);
734
    text-transform: uppercase;
735
    position: relative;
736
    .tag-view-label {
737
        height: rem-calc(100);
738
        line-height: rem-calc(100);
739
        float: left;
740
        margin-top: rem-calc(2);
741
        padding-left: 0.3em;
742
        .tag-view-label-text {
743
            display: none;
744
            @media only screen and (min-width: 48em) {
745
                display: inline;
746
            }
747
        }
748
    }
749
    .back-to-index {
750
        color: $color-main-dark;
751
        height: rem-calc(100);
752
        line-height: rem-calc(100);
753
        float: left;
754
        .glyphicon {
755
            -webkit-transition: -webkit-transform .2s;
756
            -ms-transition: -ms-transform .2s;
757
            transition: transform .2s;
758
        }
759
        &:hover {
760
            color: $color-main-dark;
761
            .glyphicon {
762
                -webkit-transform: translateX(-15%);
763
                -ms-transform: translateX(-15%);
764
                transform: translateX(-15%);
765
            }
766
        }
767
    }
768
    .glyphicon {
769
        top: 0;
770
        vertical-align: middle;
771
    }
772
    .tag-name {
773
        font-weight: 900;
774
    }
775
}
776

777
.author-view-info {
778
    background-color: $color-main-light;
779
    font-weight: 400;
780
    font-size: rem-calc(24);
781
    position: relative;
782
    .author-name {
783
        margin-top: rem-calc(25);
784
        font-weight: 900;
785
        font-size: rem-calc(30);
786
        font-family: $headers-font;
787
        text-transform: uppercase;
788
        .author-name-social-icons {
789
            font-size: rem-calc(24);
790
            a {
791
                display: inline-block;
792
                margin-left: rem-calc(6);
793
                margin-right: rem-calc(3);
794
                color: $color-main-contrast;
795
                vertical-align: text-bottom;
796

797
                &:first-child {
798
                    margin-left: rem-calc(16);
799
                }
800
                .icon svg {
801
                    height: 1em;
802
                    width: 1em;
803
                    top: rem-calc(5);
804
                    position: relative;
805
                    fill: $color-main-contrast;
806
                    -webkit-transition: fill 0.5s;
807
                    transition: fill 0.5s;
808
                    &:hover {
809
                        fill: $color-main-dark;
810
                    }
811
                }
812
            }
813
        }
814
    }
815
    .author-bio {
816
        font-size: rem-calc(18);
817
        text-transform: none;
818
        margin-bottom: rem-calc(25);
819
    }
820
    .author-avatar {
821
        .author-rss {
822
            position: absolute;
823
            bottom: rem-calc(5);
824
            right: 0;
825
            z-index: 99;
826
            padding: rem-calc(10) rem-calc(15) rem-calc(5);
827
            background-color: $color-main-light;
828
            line-height: 1.1;
829
            height: auto;
830
            border-radius: rem-calc(15);
831
            color: $color-main-dark;
832
            .icon svg {
833
                height: rem-calc(20);
834
                width: rem-calc(20);
835
                fill: $color-main-dark;
836
                -webkit-transition: fill 0.5s;
837
                transition: fill 0.5s;
838
                &:hover {
839
                    fill: #EE802F;
840
                }
841
            }
842
        }
843
        .author-avatar-img {
844
            display: block;
845
            position: absolute;
846
            max-width: rem-calc(250);
847
            border: rem-calc(20) solid $color-main-light;
848
            bottom: rem-calc(5);
849
            right: 0;
850
        }
851
        display: none;
852
        @media only screen and (min-width: 64em) {
853
            display: block;
854
        }
855
    }
856
}
857

858
.footer {
859
    background-color: $color-main-dark;
860
    text-align: center;
861
    color: darken($color-main-light, 30%);
862
    padding-top: rem-calc(80);
863
    padding-bottom: rem-calc(80);
864
    .footer-social-icons {
865
        a {
866
            margin-right: rem-calc(4);
867
            &:last-child {
868
                margin-right: 0;
869
            }
870
            color: $color-main-dark;
871
            &:hover, &:focus, &:active {
872
                color: $color-main-dark;
873
            }
874
            @include social-icons;
875
        }
876
    }
877
    .footer-poweredby {
878
        margin-top: rem-calc(10);
879
        a {
880
            color: darken($color-main-light, 30%);
881
            -webkit-transition: color 0.5s;
882
            transition: color 0.5s;
883
            &:hover, &:focus, &:active {
884
                color: $color-main-contrast;
885
            }
886
            &.ghash {
887
                color: $color-main-contrast;
888
                -webkit-transition: color 0.5s;
889
                transition: color 0.5s;
890
                &:hover, &:focus, &:active {
891
                    color: #b84;
892
                }
893
            }
894
        }
895
    }
896
}
897

898
html[data-useragent*='MSIE 9.0'] .footer .footer-social-icons a .icon svg {
899
    width: 2em;
900
}
901

902
// loop pagination
903
.pagination {
904
    margin-top: rem-calc(55);
905
    text-align: center;
906
    a {
907
        @include read-more-button;
908
        .glyphicon {
909
            font-size: rem-calc(12);
910
            margin: 0 rem-calc(5) 0;
911
        }
912
    }
913
}
914

915
$placeholder-font-color: #bbb;
916
form {
917
    ::placeholder {
918
        color: $placeholder-font-color;
919
    }
920
    ::-webkit-input-placeholder {
921
        color: $placeholder-font-color;
922
    }
923
    :-moz-placeholder { /* Firefox 18- */
924
        color: $placeholder-font-color;
925
        opacity: 1;
926
    }
927
    ::-moz-placeholder { /* Firefox 19+ */
928
        color: $placeholder-font-color;
929
        opacity: 1;
930
    }
931
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
932
        color: $placeholder-font-color;
933
    }
934
    ::-ms-input-placeholder { /* Microsoft Edge */
935
        color: $placeholder-font-color;
936
    }
937
}
938