1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
@use "sass:math";
.post {
position: relative;
width: 100%;
display: inline-block;
vertical-align: top;
@include sidebar-slide-animation;
.post-header {
.post-title {
margin: 0;
word-break: initial;
overflow: hidden;
&:hover {
text-decoration: none;
}
}
}
// Post meta contains post's date, post's categories and tags
.post-meta {
line-height: 1.5em;
font-family: map-get($font-families, 'post-meta');
font-size: map-get($font-size, small);
font-weight: 400;
color: map-get($colors, light);
a {
color: map-get($colors, light);
}
}
.post-content {
text-rendering: optimizelegibility;
letter-spacing: -0.3px;
font-family: map-get($font-families, 'post-content');
color: map-get($colors, base);
margin-top: 20px;
font-weight: 400;
overflow: hidden;
@include prefix('hypens', 'auto', 'webkit' 'moz');
img {
display: block;
width: auto;
max-width: 100%;
}
:not(blockquote):not(li):not(.alert) {
& > p {
margin: 1.5em 0 0 0;
}
}
li {
p {
margin: 0 0 0 0;
}
}
}
.post-footer {
margin-top: 20px;
&-tags {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eef2f8;
}
}
}
// Increase the font size of the post's title on medium screen (only for single post view)
@media #{$medium-only} {
.post {
.post-header {
.post-title {
font-size: map-get($headings-font-size, h1) + 0.5rem;
}
}
}
}
@media #{$large-only} {
#main {
// Display bottom bar in small size and push it from the size of the large sidebar
&[data-behavior="1"] .post.pushed,
&[data-behavior="2"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in medium size and push it from the size of the medium sidebar
&[data-behavior="3"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in large size and push it from the size of the large sidebar
&[data-behavior="4"] .post.pushed,
&[data-behavior="5"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in large size and push it from the size of the medium sidebar
&[data-behavior="6"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
}
}
@media #{$xlarge-and-up} {
#main {
// Display bottom bar in extra small size and push it from the size of the extra large sidebar
&[data-behavior="1"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, xlg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in small size and push it from the size of the large sidebar
&[data-behavior="2"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in medium size and push it from the size of the medium sidebar
&[data-behavior="3"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in large size and push it from the size of the extra large sidebar
&[data-behavior="4"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, xlg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in large size and push it from the size of the extra large sidebar
&[data-behavior="5"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
// Display bottom bar in large size and push it from the size of the medium sidebar
&[data-behavior="6"] .post.pushed {
@include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2)}, 0, 0), 'webkit' 'moz');
}
}
}
// Increase font size of the post's title on large screen (only for single post view)
@media #{$large-and-up} {
.post {
.post-header {
.post-title {
font-size: map-get($headings-font-size, h1) + 0.9rem;
}
}
}
}
// Increase font-size on medium and large screen
@media #{$medium-and-up} {
.post-content {
font-size: 1.7rem;
}
}
|
