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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
.post-header {
.post-title {
margin: 0;
word-break: initial;
overflow: hidden;
&:hover {
text-decoration: none;
}
}
}
// Cover image displayed in single post view
// When post's `coverImage` variable is defined
.post-header-cover {
display: table;
position: relative;
// Fix the cover image to the top of the page
top: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
padding: calc(#{map-get($header, 'height')} + 30px) 0 30px 0;
// 100% minus header high, minus padding-top, minus padding bottom and minus 4px for perfect pixels
height: 100%;
z-index: map-get($z-indexes, 'c-post-header-cover');
// Sidebar animation
// Transition style (push)
transition: transform .25s ease-in-out;
-webkit-transition: -webkit-transform .25s ease-in-out;
// Eliminate any flickering of elements while they are in a state of being animated
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
.post-header {
display: table-cell;
vertical-align: middle;
.post-title {
max-width: map-get($main-content, 'max-width');
margin: 0 auto;
color: white;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9);
margin-bottom: 20px;
&:hover {
text-decoration: none;
}
}
// Post meta contains post's date, post's categories and tags
.post-meta {
max-width: map-get($main-content, 'max-width');
font-family: map-get($font-families, 'post-meta');
font-size: $font-size-base;
color: white !important;
font-weight: 400;
letter-spacing: 0.05em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
margin: 0 auto;
a {
color: white;
}
}
}
}
// Decrease height of cover image
.post-header-cover.post-header-cover--partial {
height: 60%;
}
.post-header-cover-caption {
margin: 5px 0 50px 0;
}
// Decrease the font size of the post's title on very small screen
@media #{$xsmall-and-down} {
.post-header-cover {
.post-header {
.post-title {
font-size: map-get($headings-font-size, h1);
}
}
}
}
// Increase the font size of the post's title on small screen
@media #{$small-only} {
.post-header-cover {
.post-header {
.post-title {
font-size: map-get($headings-font-size, h1) + 0.5rem;
}
}
}
}
@media #{$small-and-down} {
.post-header-cover {
// Display post header cover div in large size
@include post-header-cover-lg;
// Push post header cover div from the size of the large sidebar
&[data-behavior="1"],
&[data-behavior="2"],
&[data-behavior="4"],
&[data-behavior="5"] {
@include post-header-cover-pushed-lg;
}
// Push post header cover div from the size of the medium sidebar
&[data-behavior="3"],
&[data-behavior="6"] {
@include post-header-cover-pushed-md;
}
}
}
@media #{$medium-only} {
// Increase the font size of the post's title on medium screen
.post-header-cover {
.post-header {
.post-title {
font-size: map-get($headings-font-size, h1) + 3rem;
line-height: 1.3em;
}
}
// Display post header cover div in medium size
&[data-behavior="1"],
&[data-behavior="2"],
&[data-behavior="3"] {
@include post-header-cover-md;
}
// Display post header cover div in large size and push it from the size of the large sidebar
&[data-behavior="4"],
&[data-behavior="5"] {
@include post-header-cover-lg;
@include post-header-cover-pushed-lg;
}
// Display post header cover div in large size and push it from the size of the medium sidebar
&[data-behavior="6"] {
@include post-header-cover-lg;
@include post-header-cover-pushed-md;
}
}
}
@media #{$large-only} {
// Increase the font size of the post's title on large screen
.post-header-cover {
.post-header {
.post-title {
font-size: map-get($headings-font-size, h1) + 3.7rem;
line-height: 1.3em;
}
}
// Display post header cover div in small size
&[data-behavior="1"],
&[data-behavior="2"] {
@include post-header-cover-sm;
}
// Display post header cover div in medium size
&[data-behavior="3"] {
@include post-header-cover-md;
}
// Display post header cover div in large size and push it from the size of the large sidebar
&[data-behavior="4"],
&[data-behavior="5"] {
@include post-header-cover-lg;
@include post-header-cover-pushed-lg;
}
// Display post header cover div in large size and push it from the size of the medium sidebar
&[data-behavior="6"] {
@include post-header-cover-lg;
@include post-header-cover-pushed-md;
}
}
}
@media #{$xlarge-and-up} {
// Increase the font size of the post's title on large screen
.post-header-cover {
.post-header {
.post-title {
font-size: map-get($headings-font-size, h1) + 3.7rem;
line-height: 1.3em;
}
}
// Display post header cover div in extra small size
&[data-behavior="1"] {
@include post-header-cover-xs;
}
// Display post header cover div in small size
&[data-behavior="2"] {
@include post-header-cover-sm;
}
// Display post header cover div in medium size
&[data-behavior="3"] {
@include post-header-cover-md;
}
// Display post header cover div in large size and push it from the size of the large sidebar
&[data-behavior="4"] {
@include post-header-cover-lg;
@include post-header-cover-pushed-xlg;
}
// Display post header cover div in large size and push it from the size of the extra large sidebar
&[data-behavior="5"] {
@include post-header-cover-lg;
@include post-header-cover-pushed-lg;
}
// Display post header cover div in large size and push it from the size of the medium sidebar
&[data-behavior="6"] {
@include post-header-cover-lg;
@include post-header-cover-pushed-md;
}
}
}
|
