1
// in _settings.scss there are all variables used here
9
font-size: rem-calc(36);
11
vertical-align: middle;
12
line-height: rem-calc(50);
15
color: $color-main-dark;
17
-webkit-transform: translateZ(0);
18
transform: translateZ(0);
20
@media only screen and (min-width: 64em) {
24
.post-view-menu-bars-mobile {
25
height: rem-calc(120);
26
line-height: rem-calc(120);
28
font-size: rem-calc(36);
29
vertical-align: middle;
31
color: $color-main-light;
35
@media only screen and (min-width: 64em) {
44
height: rem-calc(120);
46
background-size: cover;
47
background-position: 50% 50%;
48
background-repeat: no-repeat;
49
background-color: $color-main-dark;
51
@media only screen and (min-width: 64em) {
58
-webkit-transform: translateZ(0);
59
transform: translateZ(0);
62
@media only screen and (min-width: 90.063em) {
66
padding: 0 rem-calc(15);
68
background-color: rgba($color-main-dark, .8);
69
.post-view-elems-header {
71
line-height: rem-calc(120);
72
height: rem-calc(120);
77
border-radius: rem-calc(6);
78
vertical-align:middle;
81
@media only screen and (min-width: 64em) {
82
padding-top: rem-calc(15);
86
@media only screen and (min-width: 64em) and (min-height: rem-calc(720)) {
87
padding-top: rem-calc(40);
93
height: rem-calc(150);
94
border-radius: rem-calc(10);
99
.post-view-elems-body {
100
margin-top: rem-calc(40);
103
background-color: rgba($color-main-light, .15);
104
height: rem-calc(80);
106
margin-top: rem-calc(30);
107
margin-bottom: rem-calc(30);
113
color: $color-main-light;
114
padding: rem-calc(15);
115
height: rem-calc(80);
116
vertical-align: middle;
118
.read-estimation-content {
120
background-color: transparent;
121
vertical-align: middle;
125
font-family: $headers-font;
127
font-size: rem-calc(14);
128
text-transform: uppercase;
132
font-size: rem-calc(14);
137
// based on : 'Reading Position Indicator' article
138
// http://css-tricks.com/reading-position-indicator/
140
.read-progress-indicator {
142
height: rem-calc(80);
143
-webkit-appearance: none;
144
-moz-appearance: none;
147
background-color: transparent;
148
color: darken($color-main-light, 20%);
149
&::-webkit-progress-bar {
150
background-color: transparent;
153
&::-webkit-progress-value {
154
background-color: rgba($color-main-light, .15);
156
&::-moz-progress-bar {
157
background-color: rgba(#6E6C72, .5);
161
.progress-container {
163
background-color: transparent;
167
height: rem-calc(80);
169
-webkit-transform: translateZ(0);
170
transform: translateZ(0);
173
background-color: rgba($color-main-light, .2);
180
@media only screen and (min-width: 64em) {
183
@media only screen and (max-height: rem-calc(720)) {
184
margin-top: rem-calc(22);
185
margin-bottom: rem-calc(15);
188
.post-view-elems-share {
189
padding: rem-calc(10) rem-calc(10) rem-calc(30);
191
color: $color-main-dark;
192
font-size: rem-calc(16);
193
margin-right: rem-calc(4);
194
@include social-icons;
197
@media only screen and (min-width: 64em) {
200
@media only screen and (max-height: rem-calc(720)) {
201
padding-bottom: rem-calc(20);
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;
210
text-transform: uppercase;
212
.post-recent-list-separator {
215
background-color: $color-main-light;
216
margin-bottom: rem-calc(15);
219
list-style-type: none;
224
padding: rem-calc(5) 0;
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;
239
@media only screen and (min-width: 64em) {
243
@media only screen and (max-height: rem-calc(720)) {
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);
258
@media only screen and (max-width: 64em) {
271
@media only screen and (min-width: 64em) {
272
padding-left: rem-calc(280);
274
@media only screen and (min-width: 90.063em) {
275
padding-left: rem-calc(360);
277
.post-view-right-container {
278
background-color: $color-main-light;
281
.post-article-content {
284
color: $color-main-contrast;
286
display: inline-block;
288
text-decoration: none;
289
color: $color-main-light;
290
&:hover, &:active, &:focus {
291
text-decoration: none;
292
color: $color-main-light;
302
background: darken($color-main-light, 3%);
303
border-radius: rem-calc(5);
304
padding: rem-calc(10) rem-calc(20);
309
@include corner-link;
310
&.anima-image-popup:after {
319
&:hover, &:focus, &:active {
320
color: darken($color-comment-header-link, 5%);
324
.post-header-content {
325
margin-bottom: rem-calc(60);
327
font-size: rem-calc(36);
329
@media only screen and (min-width: 30em) {
330
font-size: rem-calc(42);
332
@media only screen and (min-width: 48em) {
333
font-size: rem-calc(48);
335
@media only screen and (min-width: 64em) {
336
font-size: rem-calc(60);
338
@media only screen and (min-width: 90.063em) {
339
font-size: rem-calc(72);
342
.post-title-separator {
344
background-color: $color-main-dark;
345
width: rem-calc(200);
346
margin-top: rem-calc(20);
347
margin-bottom: rem-calc(20);
353
@media only screen and (max-width: 40.0625em) {
361
color: lighten($color-main-dark, 50%);
363
@media only screen and (max-width: 40.0625em) {
365
margin: 0.25rem 0 1.25rem;
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);
376
@media only screen and (min-width: 90.063em) {
377
max-width: rem-calc(1020);
378
padding: rem-calc(100);
380
@media only screen and (min-width: 100em) {
381
max-width: rem-calc(1124);
383
@media only screen and (max-width: 48em) {
384
.post-content.row:not(.statistic-row) {
386
padding-left: rem-calc(15);
387
padding-right: rem-calc(15);
392
@include flash-messages;
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 {
402
// post view tags list
404
margin-top: rem-calc(30);
405
padding-top: rem-calc(30);
406
border-top: rem-calc(1) solid lighten($color-main-dark, 75%);
408
@include green-button;
413
font-size: 1.6875rem;
416
// author info box in post view page
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);
424
padding: 0 rem-calc(30);
428
font-size: rem-calc(16);
429
color: lighten($color-main-dark, 50%);
433
color: $color-main-dark;
434
-webkit-transition: color .3s;
435
transition: color .3s;
436
&:active, &:hover, &:focus {
437
color: $color-main-contrast;
441
font-size: rem-calc(16);
446
font-family: $headers-font;
448
text-transform: uppercase;
449
font-size: rem-calc(30);
452
font-size: rem-calc(18);
453
margin-bottom: 0.5rem;
455
color: $color-main-contrast;
457
@include corner-link;
460
.post-author-avatar {
461
width: rem-calc(200);
462
height: rem-calc(200);
463
border-radius: rem-calc(6);
466
margin-bottom: rem-calc(20);
467
@media only screen and (min-width: 40.063em) {
468
margin-right: rem-calc(50);
474
text-decoration: none;
476
@media only screen and (min-width: 40.063em) {
480
font-size: rem-calc(14);
487
font-weight: inherit;
493
margin: rem-calc(15);
500
margin-bottom: rem-calc(40);
501
margin-top: rem-calc(40);
506
background-position: 50% 50%;
507
background-size: cover;
508
background-repeat: no-repeat;
510
padding: rem-calc(60) rem-calc(16);
512
color: $color-main-light;
513
border: rem-calc(20) solid transparent;
514
-webkit-transition: border .5s;
515
transition: border .5s;
524
-webkit-transition: background .5s;
525
transition: background .5s;
526
background-color: rgba($color-main-dark, .3);
530
border: rem-calc(20) solid rgba($color-main-light, .4);
532
background-color: rgba($color-main-dark, .5);
535
background-color: $color-main-light;
536
color: $color-main-dark;
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;
557
font-family: $headers-font;
558
font-size: rem-calc(28);
563
.prev-next-block-link {
564
color: $color-main-light;
565
&:hover, &:active, &:focus {
566
color: $color-main-light;
567
text-decoration: none;
579
margin-bottom: rem-calc(10);
580
@media only screen and (min-width: 48em) {
588
padding: 0 rem-calc(45);
589
margin-top: rem-calc(20);
590
font-size: rem-calc(14);
593
-webkit-transition: color 0.5s;
594
transition: color 0.5s;
595
&:hover, &:focus, &:active {
596
color: darken($color-main-contrast, 10%);
601
border-radius: rem-calc(4);
602
padding: 0.125rem 0.3125rem 0.0625rem;
603
@include corner-link;