reprogl

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

4
.post-view-menu-bars {
5
    position: fixed;
6
    top: rem-calc(30);
7
    width: rem-calc(50);
8
    height: rem-calc(50);
9
    font-size: rem-calc(36);
10
    right: rem-calc(35);
11
    vertical-align: middle;
12
    line-height: rem-calc(50);
13
    text-align: center;
14
    z-index: 10;
15
    color: $color-main-dark;
16
    cursor: pointer;
17
    -webkit-transform: translateZ(0);
18
    transform: translateZ(0);
19
    display: none;
20
    @media only screen and (min-width: 64em) {
21
        display: block;
22
    }
23
}
24
.post-view-menu-bars-mobile {
25
    height: rem-calc(120);
26
    line-height: rem-calc(120);
27
    width: rem-calc(50);
28
    font-size: rem-calc(36);
29
    vertical-align: middle;
30
    text-align: center;
31
    color: $color-main-light;
32
    cursor: pointer;
33
    float: right;
34
    display: block;
35
    @media only screen and (min-width: 64em) {
36
        display: none;
37
    }
38
}
39

40
.post-view {
41
    width: 100%;
42
    .post-view-sidebar {
43
        width: 100%;
44
        height: rem-calc(120);
45
        float: none;
46
        background-size: cover;
47
        background-position: 50% 50%;
48
        background-repeat: no-repeat;
49
        background-color: $color-main-dark;
50
        position: relative;
51
        @media only screen and (min-width: 64em) {
52
            width: rem-calc(280);
53
            height: 100%;
54
            position: fixed;
55
            top: 0;
56
            left: 0;
57
            z-index: 10;
58
            -webkit-transform: translateZ(0);
59
            transform: translateZ(0);
60
            float: left;
61
        }
62
        @media only screen and (min-width: 90.063em) {
63
            width: rem-calc(360);
64
        }
65
        .post-view-elems {
66
            padding: 0 rem-calc(15);
67
            height: 100%;
68
            background-color: rgba($color-main-dark, .8);
69
            .post-view-elems-header {
70
                padding-top: 0;
71
                line-height: rem-calc(120);
72
                height: rem-calc(120);
73
                .blog-logo {
74
                    svg {
75
                        width: rem-calc(80);
76
                        height: rem-calc(80);
77
                        border-radius: rem-calc(6);
78
                        vertical-align:middle;
79
                    }
80
                }
81
                @media only screen and (min-width: 64em) {
82
                    padding-top: rem-calc(15);
83
                    line-height: 1.1;
84
                    height: auto;
85
                }
86
                @media only screen and (min-width: 64em) and (min-height: rem-calc(720)) {
87
                    padding-top: rem-calc(40);
88
                    .blog-logo {
89
                        display: block;
90
                        text-align: center;
91
                        svg {
92
                            width: rem-calc(150);
93
                            height: rem-calc(150);
94
                            border-radius: rem-calc(10);
95
                        }
96
                    }
97
                }
98
            }
99
            .post-view-elems-body {
100
                margin-top: rem-calc(40);
101
                .post-reading-time {
102
                    position: relative;
103
                    background-color: rgba($color-main-light, .15);
104
                    height: rem-calc(80);
105
                    overflow-y: hidden;
106
                    margin-top: rem-calc(30);
107
                    margin-bottom: rem-calc(30);
108
                    .read-estimation {
109
                        position: absolute;
110
                        top: 0;
111
                        left: 0;
112
                        z-index: 1050;
113
                        color: $color-main-light;
114
                        padding: rem-calc(15);
115
                        height: rem-calc(80);
116
                        vertical-align: middle;
117
                        display: table;
118
                        .read-estimation-content {
119
                            display: table-cell;
120
                            background-color: transparent;
121
                            vertical-align: middle;
122
                            margin-bottom: 0;
123
                            .title {
124
                                font-weight: 600;
125
                                font-family: $headers-font;
126
                                line-height: 1.1;
127
                                font-size: rem-calc(14);
128
                                text-transform: uppercase;
129
                            }
130
                            .estimated-time {
131
                                font-weight: 300;
132
                                font-size: rem-calc(14);
133
                            }
134
                        }
135
                    }
136

137
                    // based on : 'Reading Position Indicator' article
138
                    // http://css-tricks.com/reading-position-indicator/
139

140
                    .read-progress-indicator {
141
                        width: 100%;
142
                        height: rem-calc(80);
143
                        -webkit-appearance: none;
144
                        -moz-appearance: none;
145
                        appearance: none;
146
                        border: none;
147
                        background-color: transparent;
148
                        color: darken($color-main-light, 20%);
149
                        &::-webkit-progress-bar {
150
                            background-color: transparent;
151
                        }
152
                        &.single {
153
                            &::-webkit-progress-value {
154
                                background-color: rgba($color-main-light, .15);
155
                            }
156
                            &::-moz-progress-bar {
157
                                background-color: rgba(#6E6C72, .5);
158
                            }
159
                        }
160
                    }
161
                    .progress-container {
162
                        width: 100%;
163
                        background-color: transparent;
164
                        position: absolute;
165
                        top: 0;
166
                        left: 0;
167
                        height: rem-calc(80);
168
                        display: block;
169
                        -webkit-transform: translateZ(0);
170
                        transform: translateZ(0);
171
                        overflow-x: hidden;
172
                        .progress-bar {
173
                            background-color: rgba($color-main-light, .2);
174
                            width: 100%;
175
                            height: 100%;
176
                            display: block;
177
                        }
178
                    }
179
                    display: none;
180
                    @media only screen and (min-width: 64em) {
181
                        display: block;
182
                    }
183
                    @media only screen and (max-height: rem-calc(720)) {
184
                        margin-top: rem-calc(22);
185
                        margin-bottom: rem-calc(15);
186
                    }
187
                }
188
                .post-view-elems-share {
189
                    padding: rem-calc(10) rem-calc(10) rem-calc(30);
190
                    a {
191
                        color: $color-main-dark;
192
                        font-size: rem-calc(16);
193
                        margin-right: rem-calc(4);
194
                        @include social-icons;
195
                    }
196
                    display: none;
197
                    @media only screen and (min-width: 64em) {
198
                        display: block;
199
                    }
200
                    @media only screen and (max-height: rem-calc(720)) {
201
                        padding-bottom: rem-calc(20);
202
                    }
203
                }
204
                .post-recent-list {
205
                    padding: 0 rem-calc(10) rem-calc(20);
206
                    .post-recent-list-label {
207
                        font-size: rem-calc(18);
208
                        color: $color-main-light;
209
                        font-weight: 900;
210
                        text-transform: uppercase;
211
                    }
212
                    .post-recent-list-separator {
213
                        width: 30%;
214
                        height: rem-calc(2);
215
                        background-color: $color-main-light;
216
                        margin-bottom: rem-calc(15);
217
                    }
218
                    ul {
219
                        list-style-type: none;
220
                        margin: 0;
221
                        padding: 0;
222
                        li {
223
                            line-height: 1.2;
224
                            padding: rem-calc(5) 0;
225
                            a {
226
                                font-weight: 400;
227
                                color: $color-main-light;
228
                                display: inline-block;
229
                                -webkit-transition: color .3s;
230
                                transition: color .3s;
231
                                &:hover, &:focus, &:active {
232
                                    color: darken($color-main-light, 40%);
233
                                    text-decoration: none;
234
                                }
235
                            }
236
                        }
237
                    }
238
                    display: none;
239
                    @media only screen and (min-width: 64em) {
240
                        display: block;
241
                    }
242
                }
243
                @media only screen and (max-height: rem-calc(720)) {
244
                    margin-top: 0;
245
                }
246
            }
247
        }
248

249
        .flagcounter {
250
            margin-top: rem-calc(5);
251
            @media only screen and (min-width: 64em) and (min-height: rem-calc(720)) {
252
                margin-top: rem-calc(30);
253
                a {
254
                    display: block;
255
                    text-align: center;
256
                }
257
            }
258
            @media only screen and (max-width: 64em) {
259
                img {
260
                    width: 2px;
261
                    height: 2px;
262
                    position: absolute;
263
                    top: 2px;
264
                    left: 2px;
265
                }
266
            }
267
        }
268
    }
269
    .post-view-content {
270
        min-height: 100%;
271
        @media only screen and (min-width: 64em) {
272
            padding-left: rem-calc(280);
273
        }
274
        @media only screen and (min-width: 90.063em) {
275
            padding-left: rem-calc(360);
276
        }
277
        .post-view-right-container {
278
            background-color: $color-main-light;
279
            min-height: 100%;
280
            .post-view-article {
281
                .post-article-content {
282
                    p a,
283
                    ul a {
284
                        color: $color-main-contrast;
285
                        position: relative;
286
                        display: inline-block;
287
                        &.button {
288
                            text-decoration: none;
289
                            color: $color-main-light;
290
                            &:hover, &:active, &:focus {
291
                                text-decoration: none;
292
                                color: $color-main-light;
293
                            }
294
                            &:after {
295
                                display: none;
296
                            }
297
                        }
298
                    }
299
                    p {
300
                        hyphens: auto;
301
                        &.notice {
302
                            background: darken($color-main-light, 3%);
303
                            border-radius: rem-calc(5);
304
                            padding: rem-calc(10) rem-calc(20);
305
                            text-align: right;
306
                        }
307
                    }
308
                    a {
309
                        @include corner-link;
310
                        &.anima-image-popup:after {
311
                            content: '';
312
                        }
313
                    }
314
                    table {
315
                        display: block;
316
                        overflow: auto;
317
                    }
318
                    .comment-header a {
319
                        &:hover, &:focus, &:active {
320
                            color: darken($color-comment-header-link, 5%);
321
                        }
322
                    }
323
                }
324
                .post-header-content {
325
                    margin-bottom: rem-calc(60);
326
                    .post-title {
327
                        font-size: rem-calc(36);
328
                        line-height: 1.1;
329
                        @media only screen and (min-width: 30em) {
330
                            font-size: rem-calc(42);
331
                        }
332
                        @media only screen and (min-width: 48em) {
333
                            font-size: rem-calc(48);
334
                        }
335
                        @media only screen and (min-width: 64em) {
336
                            font-size: rem-calc(60);
337
                        }
338
                        @media only screen and (min-width: 90.063em) {
339
                            font-size: rem-calc(72);
340
                        }
341
                    }
342
                    .post-title-separator {
343
                        height: rem-calc(5);
344
                        background-color: $color-main-dark;
345
                        width: rem-calc(200);
346
                        margin-top: rem-calc(20);
347
                        margin-bottom: rem-calc(20);
348
                    }
349
                    .post-meta {
350
                        font-weight: 600;
351
                        .post-created-at {
352
                            float: left;
353
                            @media only screen and (max-width: 40.0625em) {
354
                                float: none;
355
                            }
356
                        }
357
                        .post-views-cnt {
358
                            float: right;
359
                            font-weight: 200;
360
                            .glyphicon {
361
                                color: lighten($color-main-dark, 50%);
362
                            }
363
                            @media only screen and (max-width: 40.0625em) {
364
                                float: none;
365
                                margin: 0.25rem 0 1.25rem;
366
                            }
367
                        }
368
                    }
369
                }
370
                width: 100%;
371
                max-width: rem-calc(920);
372
                padding: rem-calc(60) 0;
373
                @media only screen and (min-width: 48em) {
374
                    padding: rem-calc(100) rem-calc(60) rem-calc(60);
375
                }
376
                @media only screen and (min-width: 90.063em) {
377
                    max-width: rem-calc(1020);
378
                    padding: rem-calc(100);
379
                }
380
                @media only screen and (min-width: 100em) {
381
                    max-width: rem-calc(1124);
382
                }
383
                @media only screen and (max-width: 48em) {
384
                    .post-content.row:not(.statistic-row) {
385
                        .column, .columns {
386
                            padding-left: rem-calc(15);
387
                            padding-right: rem-calc(15);
388

389
                        }
390
                    }
391
                }
392
                @include flash-messages;
393
            }
394
        }
395
    }
396
}
397

398
html[data-useragent*='MSIE 9.0'] .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a .icon svg {
399
    width: 2em;
400
}
401

402
// post view tags list
403
.post-tags {
404
    margin-top: rem-calc(30);
405
    padding-top: rem-calc(30);
406
    border-top: rem-calc(1) solid lighten($color-main-dark, 75%);
407
    a {
408
        @include green-button;
409
    }
410
}
411

412
.statistic-row h2 {
413
    font-size: 1.6875rem;
414
}
415

416
// author info box in post view page
417
.author-info {
418
    position: relative;
419
    padding: rem-calc(60) 0;
420
    margin: rem-calc(60) rem-calc(15) rem-calc(40);
421
    background: darken($color-main-light, 3%);
422
    border-radius: rem-calc(5);
423
    .post-author {
424
        padding: 0 rem-calc(30);
425
        text-align: center;
426
        .author-label {
427
            display: block;
428
            font-size: rem-calc(16);
429
            color: lighten($color-main-dark, 50%);
430
            font-style: italic;
431
        }
432
        .author-link-name {
433
            color: $color-main-dark;
434
            -webkit-transition: color .3s;
435
            transition: color .3s;
436
            &:active, &:hover, &:focus {
437
                color: $color-main-contrast;
438
            }
439
        }
440
        .author-website {
441
            font-size: rem-calc(16);
442
        }
443
        h2 {
444
            margin: 0;
445
            padding: 0;
446
            font-family: $headers-font;
447
            font-weight: 900;
448
            text-transform: uppercase;
449
            font-size: rem-calc(30);
450
        }
451
        > p {
452
            font-size: rem-calc(18);
453
            margin-bottom: 0.5rem;
454
            a {
455
                color: $color-main-contrast;
456
                font-weight: 400;
457
                @include corner-link;
458
            }
459
        }
460
        .post-author-avatar {
461
            width: rem-calc(200);
462
            height: rem-calc(200);
463
            border-radius: rem-calc(6);
464
            float: none;
465
            margin-right: 0;
466
            margin-bottom: rem-calc(20);
467
            @media only screen and (min-width: 40.063em) {
468
                margin-right: rem-calc(50);
469
                margin-bottom: 0;
470
                float: left;
471
            }
472
        }
473
        a {
474
            text-decoration: none;
475
        }
476
        @media only screen and (min-width: 40.063em) {
477
            text-align: left;
478
        }
479
        .adr {
480
            font-size: rem-calc(14);
481
        }
482
        &.vcard {
483
            border: none;
484
            display: block;
485
            margin: 0;
486
            .fn {
487
                font-weight: inherit;
488
                font-size: inherit;
489
            }
490
        }
491
    }
492
    &.profile-info {
493
        margin: rem-calc(15);
494
    }
495
}
496

497
// prev next posts
498

499
.prev-next-post {
500
    margin-bottom: rem-calc(40);
501
    margin-top: rem-calc(40);
502
    .prev-block,
503
    .next-block {
504
        position: relative;
505
        overflow: hidden;
506
        background-position: 50% 50%;
507
        background-size: cover;
508
        background-repeat: no-repeat;
509
        .description {
510
            padding: rem-calc(60) rem-calc(16);
511
            text-align: center;
512
            color: $color-main-light;
513
            border: rem-calc(20) solid transparent;
514
            -webkit-transition: border .5s;
515
            transition: border .5s;
516
            min-height: 100%;
517
            &:before {
518
                content: " ";
519
                position: absolute;
520
                width: 100%;
521
                height: 100%;
522
                top: 0;
523
                left: 0;
524
                -webkit-transition: background .5s;
525
                transition: background .5s;
526
                background-color: rgba($color-main-dark, .3);
527
                z-index: 2;
528
            }
529
            &:hover {
530
                border: rem-calc(20) solid rgba($color-main-light, .4);
531
                &:before {
532
                    background-color: rgba($color-main-dark, .5);
533
                }
534
                .prev-next-label {
535
                    background-color: $color-main-light;
536
                    color: $color-main-dark;
537
                }
538
            }
539
            .prev-next-label,
540
            .post-title {
541
                position: relative;
542
                display: block;
543
                z-index: 3;
544
            }
545
            .prev-next-label {
546
                display: inline-block;
547
                padding: rem-calc(5) rem-calc(10);
548
                border: rem-calc(1) solid rgba($color-main-light, .8);
549
                text-transform: uppercase;
550
                margin-bottom: rem-calc(15);
551
                font-size: rem-calc(12);
552
                border-radius: rem-calc(3);
553
                -webkit-transition: all .5s;
554
                transition: all .5s;
555
            }
556
            .post-title {
557
                font-family: $headers-font;
558
                font-size: rem-calc(28);
559
                line-height: 1;
560
            }
561
        }
562
    }
563
    .prev-next-block-link {
564
        color: $color-main-light;
565
        &:hover, &:active, &:focus {
566
            color: $color-main-light;
567
            text-decoration: none;
568
        }
569
    }
570
    .prev-block {
571
        float: left;
572
    }
573
    .next-block {
574
        float: right;
575
    }
576
    .prev-block,
577
    .next-block {
578
        width: 100%;
579
        margin-bottom: rem-calc(10);
580
        @media only screen and (min-width: 48em) {
581
            width: 49%;
582
            margin-bottom: 0;
583
        }
584
    }
585
}
586

587
section.powered-by {
588
    padding: 0 rem-calc(45);
589
    margin-top: rem-calc(20);
590
    font-size: rem-calc(14);
591
    a {
592
        color: #222;
593
        -webkit-transition: color 0.5s;
594
        transition: color 0.5s;
595
        &:hover, &:focus, &:active {
596
            color: darken($color-main-contrast, 10%);
597
        }
598
        &.ghash {
599
            color: #b84;
600
            background: #eed;
601
            border-radius: rem-calc(4);
602
            padding: 0.125rem 0.3125rem 0.0625rem;
603
            @include corner-link;
604
        }
605
    }
606
}
607