Anima 3.0.0 Diff

Files changed (12) show
assets/css/post.css CHANGED
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  .post-view-menu-bars {
2
3
  position: fixed;
3
4
  top: 1.875rem;
@@ -14,9 +15,10 @@
14
15
  -webkit-transform: translateZ(0);
15
16
  transform: translateZ(0);
16
17
  display: none; }
17
- @media only screen and (min-width: 64em) {
18
- .post-view-menu-bars {
19
- display: block; } }
18
+
19
+ @media only screen and (min-width: 64em) {
20
+ .post-view-menu-bars {
21
+ display: block; } }
20
22
 
21
23
  .post-view-menu-bars-mobile {
22
24
  height: 7.5rem;
@@ -29,283 +31,344 @@
29
31
  cursor: pointer;
30
32
  float: right;
31
33
  display: block; }
32
- @media only screen and (min-width: 64em) {
33
- .post-view-menu-bars-mobile {
34
- display: none; } }
34
+
35
+ @media only screen and (min-width: 64em) {
36
+ .post-view-menu-bars-mobile {
37
+ display: none; } }
35
38
 
36
39
  .post-view {
37
40
  width: 100%; }
41
+
42
+ .post-view .post-view-sidebar {
43
+ width: 100%;
44
+ height: 7.5rem;
45
+ float: none;
46
+ background-size: cover;
47
+ background-position: 50% 50%;
48
+ background-repeat: no-repeat;
49
+ background-color: #23222D;
50
+ position: relative; }
51
+
52
+ @media only screen and (min-width: 64em) {
38
53
  .post-view .post-view-sidebar {
39
- width: 100%;
40
- height: 7.5rem;
41
- float: none;
42
- background-size: cover;
43
- background-position: 50% 50%;
44
- background-repeat: no-repeat;
45
- background-color: #23222D;
46
- position: relative; }
47
- @media only screen and (min-width: 64em) {
48
- .post-view .post-view-sidebar {
49
- width: 17.5rem;
50
- height: 100%;
51
- position: fixed;
52
- top: 0;
53
- left: 0;
54
- z-index: 10;
55
- -webkit-transform: translateZ(0);
56
- transform: translateZ(0);
57
- float: left; } }
58
- @media only screen and (min-width: 90.063em) {
59
- .post-view .post-view-sidebar {
60
- width: 22.5rem; } }
61
- .post-view .post-view-sidebar .post-view-elems {
62
- padding: 0 0.9375rem;
63
- height: 100%;
64
- background-color: rgba(35, 34, 45, 0.8); }
65
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-header {
66
- padding-top: 0;
67
- line-height: 7.5rem;
68
- height: 7.5rem; }
69
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-header .blog-logo img {
70
- width: 5rem; }
71
- @media only screen and (min-width: 64em) {
72
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-header {
73
- padding-top: 2.5rem;
74
- line-height: 1.1;
75
- height: auto; }
76
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-header .blog-logo img {
77
- width: 9.375rem;
78
- margin-left: 2.1875rem; } }
79
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body {
80
- margin-top: 2.5rem; }
81
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time {
82
- position: relative;
83
- background-color: rgba(255, 255, 255, 0.15);
84
- height: 5rem;
85
- overflow-y: hidden;
86
- margin-top: 1.875rem;
87
- margin-bottom: 1.875rem;
88
- display: none; }
89
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation {
90
- position: absolute;
91
- top: 0;
92
- left: 0;
93
- z-index: 1050;
94
- color: #ffffff;
95
- padding: 0.9375rem;
96
- height: 5rem;
97
- vertical-align: middle;
98
- display: table; }
99
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation .read-estimation-content {
100
- display: table-cell;
101
- background-color: transparent;
102
- vertical-align: middle;
103
- margin-bottom: 0; }
104
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation .read-estimation-content .title {
105
- font-weight: 600;
106
- font-family: "Raleway", sans-serif;
107
- line-height: 1.1;
108
- font-size: 0.875rem;
109
- text-transform: uppercase; }
110
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation .read-estimation-content .estimated-time {
111
- font-weight: 300;
112
- font-size: 0.875rem; }
113
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator {
114
- width: 100%;
115
- height: 5rem;
116
- -webkit-appearance: none;
117
- -moz-appearance: none;
118
- appearance: none;
119
- border: none;
120
- background-color: transparent;
121
- color: #cccccc; }
122
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator::-webkit-progress-bar {
123
- background-color: transparent; }
124
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator.single::-webkit-progress-value {
125
- background-color: rgba(255, 255, 255, 0.15); }
126
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator.single::-moz-progress-bar {
127
- background-color: rgba(110, 108, 114, 0.5); }
128
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .progress-container {
129
- width: 100%;
130
- background-color: transparent;
131
- position: absolute;
132
- top: 0;
133
- left: 0;
134
- height: 5rem;
135
- display: block;
136
- -webkit-transform: translateZ(0);
137
- transform: translateZ(0);
138
- overflow-x: hidden; }
139
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .progress-container .progress-bar {
140
- background-color: rgba(255, 255, 255, 0.2);
141
- width: 100%;
142
- height: 100%;
143
- display: block; }
144
- @media only screen and (min-width: 64em) {
145
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time {
146
- display: block; } }
147
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share {
148
- padding: 0.625rem 0.625rem 1.875rem;
149
- display: none; }
150
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a {
151
- color: #23222D;
152
- font-size: 1rem; }
153
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a .fa-stack {
154
- display: inline-block;
155
- -webkit-transition: color .3s;
156
- transition: color .3s; }
157
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a:hover {
158
- color: black;
159
- text-decoration: none; }
160
- @media only screen and (min-width: 64em) {
161
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share {
162
- display: block; } }
163
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list {
164
- padding: 0 0.625rem 1.25rem;
165
- display: none; }
166
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list .post-recent-list-label {
167
- font-size: 1.125rem;
168
- color: #ffffff;
169
- font-weight: 900;
170
- text-transform: uppercase; }
171
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list .post-recent-list-separator {
172
- width: 30%;
173
- height: 0.125rem;
174
- background-color: #ffffff;
175
- margin-bottom: 0.9375rem; }
176
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul {
177
- list-style-type: none;
178
- margin: 0;
179
- padding: 0; }
180
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li {
181
- line-height: 1.2;
182
- padding: 0.3125rem 0; }
183
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a {
184
- font-weight: 400;
185
- color: #ffffff;
186
- display: inline-block;
187
- -webkit-transition: color .3s;
188
- transition: color .3s; }
189
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a:hover, .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a:focus, .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a:active {
190
- color: #999999;
191
- text-decoration: none; }
192
- @media only screen and (min-width: 64em) {
193
- .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list {
194
- display: block; } }
54
+ width: 17.5rem;
55
+ height: 100%;
56
+ position: fixed;
57
+ top: 0;
58
+ left: 0;
59
+ z-index: 10;
60
+ -webkit-transform: translateZ(0);
61
+ transform: translateZ(0);
62
+ float: left; } }
63
+
64
+ @media only screen and (min-width: 90.063em) {
65
+ .post-view .post-view-sidebar {
66
+ width: 22.5rem; } }
67
+
68
+ .post-view .post-view-sidebar .post-view-elems {
69
+ padding: 0 0.9375rem;
70
+ height: 100%;
71
+ background-color: rgba(35, 34, 45, 0.8); }
72
+
73
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-header {
74
+ padding-top: 0;
75
+ line-height: 7.5rem;
76
+ height: 7.5rem; }
77
+
78
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-header .blog-logo img {
79
+ width: 5rem; }
80
+
81
+ @media only screen and (min-width: 64em) {
82
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-header {
83
+ padding-top: 2.5rem;
84
+ line-height: 1.1;
85
+ height: auto; }
86
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-header .blog-logo img {
87
+ width: 9.375rem;
88
+ margin-left: 2.1875rem; } }
89
+
90
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body {
91
+ margin-top: 2.5rem; }
92
+
93
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time {
94
+ position: relative;
95
+ background-color: rgba(255, 255, 255, 0.15);
96
+ height: 5rem;
97
+ overflow-y: hidden;
98
+ margin-top: 1.875rem;
99
+ margin-bottom: 1.875rem;
100
+ display: none; }
101
+
102
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation {
103
+ position: absolute;
104
+ top: 0;
105
+ left: 0;
106
+ z-index: 1050;
107
+ color: #ffffff;
108
+ padding: 0.9375rem;
109
+ height: 5rem;
110
+ vertical-align: middle;
111
+ display: table; }
112
+
113
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation .read-estimation-content {
114
+ display: table-cell;
115
+ background-color: transparent;
116
+ vertical-align: middle;
117
+ margin-bottom: 0; }
118
+
119
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation .read-estimation-content .title {
120
+ font-weight: 600;
121
+ font-family: "Raleway", sans-serif;
122
+ line-height: 1.1;
123
+ font-size: 0.875rem;
124
+ text-transform: uppercase; }
125
+
126
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-estimation .read-estimation-content .estimated-time {
127
+ font-weight: 300;
128
+ font-size: 0.875rem; }
129
+
130
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator {
131
+ width: 100%;
132
+ height: 5rem;
133
+ -webkit-appearance: none;
134
+ -moz-appearance: none;
135
+ appearance: none;
136
+ border: none;
137
+ background-color: transparent;
138
+ color: #cccccc; }
139
+
140
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator::-webkit-progress-bar {
141
+ background-color: transparent; }
142
+
143
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator.single::-webkit-progress-value {
144
+ background-color: rgba(255, 255, 255, 0.15); }
145
+
146
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .read-progress-indicator.single::-moz-progress-bar {
147
+ background-color: rgba(110, 108, 114, 0.5); }
148
+
149
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .progress-container {
150
+ width: 100%;
151
+ background-color: transparent;
152
+ position: absolute;
153
+ top: 0;
154
+ left: 0;
155
+ height: 5rem;
156
+ display: block;
157
+ -webkit-transform: translateZ(0);
158
+ transform: translateZ(0);
159
+ overflow-x: hidden; }
160
+
161
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time .progress-container .progress-bar {
162
+ background-color: rgba(255, 255, 255, 0.2);
163
+ width: 100%;
164
+ height: 100%;
165
+ display: block; }
166
+
167
+ @media only screen and (min-width: 64em) {
168
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-reading-time {
169
+ display: block; } }
170
+
171
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share {
172
+ padding: 0.625rem 0.625rem 1.875rem;
173
+ display: none; }
174
+
175
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a {
176
+ color: #23222D;
177
+ font-size: 1rem; }
178
+
179
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a .fa-stack {
180
+ display: inline-block;
181
+ -webkit-transition: color .3s;
182
+ transition: color .3s; }
183
+
184
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a:hover {
185
+ color: black;
186
+ text-decoration: none; }
187
+
188
+ @media only screen and (min-width: 64em) {
189
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share {
190
+ display: block; } }
191
+
192
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list {
193
+ padding: 0 0.625rem 1.25rem;
194
+ display: none; }
195
+
196
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list .post-recent-list-label {
197
+ font-size: 1.125rem;
198
+ color: #ffffff;
199
+ font-weight: 900;
200
+ text-transform: uppercase; }
201
+
202
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list .post-recent-list-separator {
203
+ width: 30%;
204
+ height: 0.125rem;
205
+ background-color: #ffffff;
206
+ margin-bottom: 0.9375rem; }
207
+
208
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul {
209
+ list-style-type: none;
210
+ margin: 0;
211
+ padding: 0; }
212
+
213
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li {
214
+ line-height: 1.2;
215
+ padding: 0.3125rem 0; }
216
+
217
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a {
218
+ font-weight: 400;
219
+ color: #ffffff;
220
+ display: inline-block;
221
+ -webkit-transition: color .3s;
222
+ transition: color .3s; }
223
+
224
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a:hover, .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a:focus, .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list ul li a:active {
225
+ color: #999999;
226
+ text-decoration: none; }
227
+
228
+ @media only screen and (min-width: 64em) {
229
+ .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-recent-list {
230
+ display: block; } }
231
+
232
+ .post-view .post-view-content {
233
+ min-height: 100%; }
234
+
235
+ @media only screen and (min-width: 64em) {
236
+ .post-view .post-view-content {
237
+ padding-left: 17.5rem; } }
238
+
239
+ @media only screen and (min-width: 90.063em) {
195
240
  .post-view .post-view-content {
196
- min-height: 100%; }
197
- @media only screen and (min-width: 64em) {
198
- .post-view .post-view-content {
199
- padding-left: 17.5rem; } }
200
- @media only screen and (min-width: 90.063em) {
201
- .post-view .post-view-content {
202
- padding-left: 22.5rem; } }
203
- .post-view .post-view-content .post-view-right-container {
204
- background-color: #ffffff;
205
- min-height: 100%; }
206
- .post-view .post-view-content .post-view-right-container .post-view-article {
207
- width: 100%;
208
- max-width: 57.5rem;
209
- padding: 3.75rem 0; }
210
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a,
211
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a {
212
- color: #FF4D4D;
213
- position: relative;
214
- display: inline-block; }
215
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button,
216
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button {
217
- text-decoration: none;
218
- color: #ffffff; }
219
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:hover, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:active, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:focus,
220
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:hover,
221
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:active,
222
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:focus {
223
- text-decoration: none;
224
- color: #ffffff; }
225
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:after,
226
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:after {
227
- display: none; }
228
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:after,
229
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:after {
230
- position: absolute;
231
- content: " ";
232
- display: block;
233
- width: 0;
234
- height: 0.0625rem;
235
- background-color: #FF4D4D;
236
- bottom: 0;
237
- left: 50%;
238
- -webkit-transform: translateX(-50%);
239
- -ms-transform: translateX(-50%);
240
- transform: translateX(-50%);
241
- -webkit-transition: width .2s;
242
- transition: width .2s; }
243
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:hover, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:focus, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:active,
244
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:hover,
245
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:focus,
246
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:active {
247
- text-decoration: none;
248
- color: #FF4D4D; }
249
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:hover:after, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:focus:after, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:active:after,
250
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:hover:after,
251
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:focus:after,
252
- .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:active:after {
253
- width: 100%; }
254
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content {
255
- margin-bottom: 3.75rem; }
256
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
257
- font-size: 2.25rem;
258
- line-height: 1.1; }
259
- @media only screen and (min-width: 30em) {
260
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
261
- font-size: 2.625rem; } }
262
- @media only screen and (min-width: 48em) {
263
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
264
- font-size: 3rem; } }
265
- @media only screen and (min-width: 64em) {
266
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
267
- font-size: 3.75rem; } }
268
- @media only screen and (min-width: 90.063em) {
269
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
270
- font-size: 4.5rem; } }
271
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title-separator {
272
- height: 0.3125rem;
273
- background-color: #23222D;
274
- width: 12.5rem;
275
- margin-top: 1.25rem;
276
- margin-bottom: 1.25rem; }
277
- .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-meta {
278
- font-weight: 600; }
279
- @media only screen and (min-width: 48em) {
280
- .post-view .post-view-content .post-view-right-container .post-view-article {
281
- padding: 6.25rem 3.75rem 3.75rem; } }
282
- @media only screen and (min-width: 90.063em) {
283
- .post-view .post-view-content .post-view-right-container .post-view-article {
284
- max-width: 63.75rem;
285
- padding: 6.25rem; } }
286
- @media only screen and (min-width: 100em) {
287
- .post-view .post-view-content .post-view-right-container .post-view-article {
288
- max-width: 70rem; } }
241
+ padding-left: 22.5rem; } }
242
+
243
+ .post-view .post-view-content .post-view-right-container {
244
+ background-color: #ffffff;
245
+ min-height: 100%; }
246
+
247
+ .post-view .post-view-content .post-view-right-container .post-view-article {
248
+ min-height: 100vh;
249
+ width: 100%;
250
+ max-width: 57.5rem;
251
+ padding: 3.75rem 0; }
252
+
253
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a,
254
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a {
255
+ color: #FF4D4D;
256
+ position: relative;
257
+ display: inline-block; }
258
+
259
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button,
260
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button {
261
+ text-decoration: none;
262
+ color: #ffffff; }
263
+
264
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:hover, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:active, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:focus,
265
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:hover,
266
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:active,
267
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:focus {
268
+ text-decoration: none;
269
+ color: #ffffff; }
270
+
271
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a.button:after,
272
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a.button:after {
273
+ display: none; }
274
+
275
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:after,
276
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:after {
277
+ position: absolute;
278
+ content: " ";
279
+ display: block;
280
+ width: 0;
281
+ height: 0.0625rem;
282
+ background-color: #FF4D4D;
283
+ bottom: 0;
284
+ left: 50%;
285
+ -webkit-transform: translateX(-50%);
286
+ -ms-transform: translateX(-50%);
287
+ transform: translateX(-50%);
288
+ -webkit-transition: width .2s;
289
+ transition: width .2s; }
290
+
291
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:hover, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:focus, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:active,
292
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:hover,
293
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:focus,
294
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:active {
295
+ text-decoration: none;
296
+ color: #FF4D4D; }
297
+
298
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:hover:after, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:focus:after, .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content p a:active:after,
299
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:hover:after,
300
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:focus:after,
301
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-article-content ul a:active:after {
302
+ width: 100%; }
303
+
304
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content {
305
+ margin-bottom: 3.75rem; }
306
+
307
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
308
+ font-size: 2.25rem;
309
+ line-height: 1.1; }
310
+
311
+ @media only screen and (min-width: 30em) {
312
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
313
+ font-size: 2.625rem; } }
314
+
315
+ @media only screen and (min-width: 48em) {
316
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
317
+ font-size: 3rem; } }
318
+
319
+ @media only screen and (min-width: 64em) {
320
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
321
+ font-size: 3.75rem; } }
322
+
323
+ @media only screen and (min-width: 90.063em) {
324
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title {
325
+ font-size: 4.5rem; } }
326
+
327
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-title-separator {
328
+ height: 0.3125rem;
329
+ background-color: #23222D;
330
+ width: 12.5rem;
331
+ margin-top: 1.25rem;
332
+ margin-bottom: 1.25rem; }
333
+
334
+ .post-view .post-view-content .post-view-right-container .post-view-article .post-header-content .post-meta {
335
+ font-weight: 600; }
336
+
337
+ @media only screen and (min-width: 48em) {
338
+ .post-view .post-view-content .post-view-right-container .post-view-article {
339
+ padding: 6.25rem 3.75rem 3.75rem; } }
340
+
341
+ @media only screen and (min-width: 90.063em) {
342
+ .post-view .post-view-content .post-view-right-container .post-view-article {
343
+ max-width: 63.75rem;
344
+ padding: 6.25rem; } }
345
+
346
+ @media only screen and (min-width: 100em) {
347
+ .post-view .post-view-content .post-view-right-container .post-view-article {
348
+ max-width: 70rem; } }
289
349
 
290
350
  .post-tags {
291
351
  margin-top: 1.875rem;
292
352
  padding-top: 1.875rem;
293
353
  border-top: 0.0625rem solid #e4e3ea; }
294
- .post-tags a {
295
- display: inline-block;
296
- padding: 0.3125rem 0.9375rem;
297
- background: #FF4D4D;
298
- color: #ffffff;
299
- font-weight: 400;
300
- -webkit-transition: background-color .3s;
301
- transition: background-color .3s;
302
- border-radius: 0.1875rem;
303
- margin-bottom: 0.1875rem; }
304
- .post-tags a:hover {
305
- color: #ffffff;
306
- background: #ff6767; }
307
- .post-tags a:focus, .post-tags a:active {
308
- color: #ffffff; }
354
+
355
+ .post-tags a {
356
+ display: inline-block;
357
+ padding: 0.3125rem 0.9375rem;
358
+ background: #FF4D4D;
359
+ color: #ffffff;
360
+ font-weight: 400;
361
+ -webkit-transition: background-color .3s;
362
+ transition: background-color .3s;
363
+ border-radius: 0.1875rem;
364
+ margin-bottom: 0.1875rem; }
365
+
366
+ .post-tags a:hover {
367
+ color: #ffffff;
368
+ background: #ff6767; }
369
+
370
+ .post-tags a:focus, .post-tags a:active {
371
+ color: #ffffff; }
309
372
 
310
373
  .author-info {
311
374
  padding: 0;
@@ -315,134 +378,308 @@
315
378
  margin: 3.75rem 0.9375rem 2.5rem;
316
379
  background: #f7f7f7;
317
380
  border-radius: 0.3125rem; }
381
+
382
+ .author-info .post-author {
383
+ padding-left: 1.875rem;
384
+ padding-right: 1.875rem;
385
+ text-align: center; }
386
+
387
+ .author-info .post-author .author-label {
388
+ display: block;
389
+ font-size: 1rem;
390
+ color: #9d9bb3;
391
+ font-style: italic; }
392
+
393
+ .author-info .post-author .author-link-name {
394
+ color: #23222D;
395
+ -webkit-transition: color .3s;
396
+ transition: color .3s; }
397
+
398
+ .author-info .post-author .author-link-name:active, .author-info .post-author .author-link-name:hover, .author-info .post-author .author-link-name:focus {
399
+ color: #FF4D4D; }
400
+
401
+ .author-info .post-author .author-website {
402
+ font-size: 1rem; }
403
+
404
+ .author-info .post-author h1 {
405
+ margin: 0;
406
+ padding: 0;
407
+ font-family: "Raleway", sans-serif;
408
+ font-weight: 900;
409
+ text-transform: uppercase;
410
+ font-size: 2.25rem; }
411
+
412
+ .author-info .post-author > p {
413
+ font-size: 1.125rem; }
414
+
415
+ .author-info .post-author > p a {
416
+ color: #FF4D4D;
417
+ font-weight: 400; }
418
+
419
+ .author-info .post-author .post-author-avatar {
420
+ width: 12.5rem;
421
+ height: 12.5rem;
422
+ border-radius: 50%;
423
+ float: none;
424
+ margin-right: 0;
425
+ margin-bottom: 1.25rem; }
426
+
427
+ @media only screen and (min-width: 40.063em) {
428
+ .author-info .post-author .post-author-avatar {
429
+ margin-right: 3.125rem;
430
+ margin-bottom: 0;
431
+ float: left; } }
432
+
433
+ .author-info .post-author a {
434
+ text-decoration: none; }
435
+
436
+ @media only screen and (min-width: 40.063em) {
318
437
  .author-info .post-author {
319
- padding-left: 1.875rem;
320
- padding-right: 1.875rem;
321
- text-align: center; }
322
- .author-info .post-author .author-label {
323
- display: block;
324
- font-size: 1rem;
325
- color: #9d9bb3;
326
- font-style: italic; }
327
- .author-info .post-author .author-link-name {
328
- color: #23222D;
329
- -webkit-transition: color .3s;
330
- transition: color .3s; }
331
- .author-info .post-author .author-link-name:active, .author-info .post-author .author-link-name:hover, .author-info .post-author .author-link-name:focus {
332
- color: #FF4D4D; }
333
- .author-info .post-author .author-website {
334
- font-size: 1rem; }
335
- .author-info .post-author h1 {
336
- margin: 0;
337
- padding: 0;
338
- font-family: "Raleway", sans-serif;
339
- font-weight: 900;
340
- text-transform: uppercase;
341
- font-size: 2.25rem; }
342
- .author-info .post-author > p {
343
- font-size: 1.125rem; }
344
- .author-info .post-author > p a {
345
- color: #FF4D4D;
346
- font-weight: 400; }
347
- .author-info .post-author .post-author-avatar {
348
- width: 12.5rem;
349
- height: 12.5rem;
350
- border-radius: 50%;
351
- float: none;
352
- margin-right: 0;
353
- margin-bottom: 1.25rem; }
354
- @media only screen and (min-width: 40.063em) {
355
- .author-info .post-author .post-author-avatar {
356
- margin-right: 3.125rem;
357
- margin-bottom: 0;
358
- float: left; } }
359
- .author-info .post-author a {
360
- text-decoration: none; }
361
- @media only screen and (min-width: 40.063em) {
362
- .author-info .post-author {
363
- text-align: left; } }
438
+ text-align: left; } }
364
439
 
365
440
  .prev-next-post {
366
441
  margin-bottom: 2.5rem;
367
442
  margin-top: 2.5rem; }
443
+
444
+ .prev-next-post .prev-block,
445
+ .prev-next-post .next-block {
446
+ position: relative;
447
+ overflow: hidden;
448
+ background-position: 50% 50%;
449
+ background-size: cover;
450
+ background-repeat: no-repeat; }
451
+
452
+ .prev-next-post .prev-block .description,
453
+ .prev-next-post .next-block .description {
454
+ padding: 3.75rem 1rem;
455
+ text-align: center;
456
+ color: #ffffff;
457
+ border: 1.25rem solid transparent;
458
+ -webkit-transition: border .5s;
459
+ transition: border .5s;
460
+ min-height: 100%; }
461
+
462
+ .prev-next-post .prev-block .description:before,
463
+ .prev-next-post .next-block .description:before {
464
+ content: " ";
465
+ position: absolute;
466
+ width: 100%;
467
+ height: 100%;
468
+ top: 0;
469
+ left: 0;
470
+ -webkit-transition: background .5s;
471
+ transition: background .5s;
472
+ background-color: rgba(35, 34, 45, 0.3);
473
+ z-index: 2; }
474
+
475
+ .prev-next-post .prev-block .description:hover,
476
+ .prev-next-post .next-block .description:hover {
477
+ border: 1.25rem solid rgba(255, 255, 255, 0.4); }
478
+
479
+ .prev-next-post .prev-block .description:hover:before,
480
+ .prev-next-post .next-block .description:hover:before {
481
+ background-color: rgba(35, 34, 45, 0.5); }
482
+
483
+ .prev-next-post .prev-block .description:hover .prev-next-label,
484
+ .prev-next-post .next-block .description:hover .prev-next-label {
485
+ background-color: #ffffff;
486
+ color: #23222D; }
487
+
488
+ .prev-next-post .prev-block .description .prev-next-label,
489
+ .prev-next-post .prev-block .description .post-title,
490
+ .prev-next-post .next-block .description .prev-next-label,
491
+ .prev-next-post .next-block .description .post-title {
492
+ position: relative;
493
+ display: block;
494
+ z-index: 3; }
495
+
496
+ .prev-next-post .prev-block .description .prev-next-label,
497
+ .prev-next-post .next-block .description .prev-next-label {
498
+ display: inline-block;
499
+ padding: 0.3125rem 0.625rem;
500
+ border: 0.0625rem solid rgba(255, 255, 255, 0.8);
501
+ text-transform: uppercase;
502
+ margin-bottom: 0.9375rem;
503
+ font-size: 0.75rem;
504
+ border-radius: 0.1875rem;
505
+ -webkit-transition: all .5s;
506
+ transition: all .5s; }
507
+
508
+ .prev-next-post .prev-block .description .post-title,
509
+ .prev-next-post .next-block .description .post-title {
510
+ font-family: "Raleway", sans-serif;
511
+ font-size: 1.75rem;
512
+ line-height: 1; }
513
+
514
+ .prev-next-post .prev-next-block-link {
515
+ color: #ffffff; }
516
+
517
+ .prev-next-post .prev-next-block-link:hover, .prev-next-post .prev-next-block-link:active, .prev-next-post .prev-next-block-link:focus {
518
+ color: #ffffff;
519
+ text-decoration: none; }
520
+
521
+ .prev-next-post .prev-block {
522
+ float: left; }
523
+
524
+ .prev-next-post .next-block {
525
+ float: right; }
526
+
527
+ .prev-next-post .prev-block,
528
+ .prev-next-post .next-block {
529
+ width: 100%;
530
+ margin-bottom: 0.625rem; }
531
+
532
+ @media only screen and (min-width: 48em) {
368
533
  .prev-next-post .prev-block,
369
534
  .prev-next-post .next-block {
370
- position: relative;
371
- overflow: hidden;
372
- background-position: 50% 50%;
373
- background-size: cover;
374
- background-repeat: no-repeat; }
375
- .prev-next-post .prev-block .description,
376
- .prev-next-post .next-block .description {
377
- padding: 3.75rem 1rem;
378
- text-align: center;
379
- color: #ffffff;
380
- border: 1.25rem solid transparent;
381
- -webkit-transition: border .5s;
382
- transition: border .5s;
383
- min-height: 100%; }
384
- .prev-next-post .prev-block .description:before,
385
- .prev-next-post .next-block .description:before {
386
- content: " ";
387
- position: absolute;
388
- width: 100%;
389
- height: 100%;
390
- top: 0;
391
- left: 0;
392
- -webkit-transition: background .5s;
393
- transition: background .5s;
394
- background-color: rgba(35, 34, 45, 0.3);
395
- z-index: 2; }
396
- .prev-next-post .prev-block .description:hover,
397
- .prev-next-post .next-block .description:hover {
398
- border: 1.25rem solid rgba(255, 255, 255, 0.4); }
399
- .prev-next-post .prev-block .description:hover:before,
400
- .prev-next-post .next-block .description:hover:before {
401
- background-color: rgba(35, 34, 45, 0.5); }
402
- .prev-next-post .prev-block .description:hover .prev-next-label,
403
- .prev-next-post .next-block .description:hover .prev-next-label {
404
- background-color: #ffffff;
405
- color: #23222D; }
406
- .prev-next-post .prev-block .description .prev-next-label,
407
- .prev-next-post .prev-block .description .post-title,
408
- .prev-next-post .next-block .description .prev-next-label,
409
- .prev-next-post .next-block .description .post-title {
410
- position: relative;
411
- display: block;
412
- z-index: 3; }
413
- .prev-next-post .prev-block .description .prev-next-label,
414
- .prev-next-post .next-block .description .prev-next-label {
415
- display: inline-block;
416
- padding: 0.3125rem 0.625rem;
417
- border: 0.0625rem solid rgba(255, 255, 255, 0.8);
418
- text-transform: uppercase;
419
- margin-bottom: 0.9375rem;
420
- font-size: 0.75rem;
421
- border-radius: 0.1875rem;
422
- -webkit-transition: all .5s;
423
- transition: all .5s; }
424
- .prev-next-post .prev-block .description .post-title,
425
- .prev-next-post .next-block .description .post-title {
426
- font-family: "Raleway", sans-serif;
427
- font-size: 1.75rem;
428
- line-height: 1; }
429
- .prev-next-post .prev-next-block-link {
430
- color: #ffffff; }
431
- .prev-next-post .prev-next-block-link:hover, .prev-next-post .prev-next-block-link:active, .prev-next-post .prev-next-block-link:focus {
432
- color: #ffffff;
433
- text-decoration: none; }
434
- .prev-next-post .prev-block {
435
- float: left; }
436
- .prev-next-post .next-block {
437
- float: right; }
438
- .prev-next-post .prev-block,
439
- .prev-next-post .next-block {
440
- width: 100%;
441
- margin-bottom: 0.625rem; }
442
- @media only screen and (min-width: 48em) {
443
- .prev-next-post .prev-block,
444
- .prev-next-post .next-block {
445
- width: 49%;
446
- margin-bottom: 0; } }
447
-
448
- /*# sourceMappingURL=post.css.map */
535
+ width: 49%;
536
+ margin-bottom: 0; } }
537
+
538
+ .kg-width-wide {
539
+ grid-column: wide-start / wide-end; }
540
+
541
+ .kg-width-full {
542
+ grid-column: full-start / full-end; }
543
+
544
+ .kg-width-full img {
545
+ width: 100%; }
546
+
547
+ .kg-gallery-container {
548
+ position: relative; }
549
+
550
+ .kg-gallery-row {
551
+ display: flex;
552
+ flex-direction: row;
553
+ justify-content: center; }
554
+
555
+ .kg-gallery-row:not(:first-of-type) {
556
+ margin: 0.75em 0 0 0; }
557
+
558
+ .kg-gallery-image img {
559
+ display: block;
560
+ margin: 0;
561
+ max-width: 100%;
562
+ max-height: 100%; }
563
+
564
+ .kg-gallery-image:not(:first-of-type) {
565
+ margin: 0 0 0 0.75em; }
566
+
567
+ .kg-bookmark-card,
568
+ .kg-bookmark-publisher {
569
+ position: relative;
570
+ width: 100%; }
571
+
572
+ .kg-bookmark-container,
573
+ .kg-bookmark-container:hover {
574
+ display: flex;
575
+ color: #23222D;
576
+ font-family: "Lato", sans-serif;
577
+ text-decoration: none !important;
578
+ background: rgba(255, 255, 255, 0.6);
579
+ border-radius: 5px;
580
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
581
+ overflow: hidden; }
582
+
583
+ .kg-bookmark-content {
584
+ display: flex;
585
+ flex-direction: column;
586
+ flex-grow: 1;
587
+ flex-basis: 100%;
588
+ align-items: flex-start;
589
+ justify-content: flex-start;
590
+ padding: 20px; }
591
+
592
+ .kg-bookmark-title {
593
+ font-size: 1.5rem;
594
+ line-height: 1.4em;
595
+ font-weight: 600;
596
+ color: #23222D; }
597
+
598
+ .kg-bookmark-description {
599
+ display: -webkit-box;
600
+ font-size: 1.4rem;
601
+ line-height: 1.5em;
602
+ margin-top: 3px;
603
+ color: #626d79;
604
+ font-weight: 400;
605
+ max-height: 44px;
606
+ overflow-y: hidden;
607
+ -webkit-line-clamp: 2;
608
+ -webkit-box-orient: vertical; }
609
+
610
+ .kg-bookmark-metadata {
611
+ display: flex;
612
+ align-items: center;
613
+ margin-top: 22px;
614
+ width: 100%;
615
+ color: #394047;
616
+ font-size: 1.4rem;
617
+ font-weight: 500; }
618
+
619
+ .kg-bookmark-metadata > span:nth-of-type(2) {
620
+ color: #626d79;
621
+ font-weight: 400; }
622
+
623
+ .kg-bookmark-metadata > span:nth-of-type(2):before {
624
+ content: "•";
625
+ color: #394047;
626
+ margin: 0 6px; }
627
+
628
+ .kg-bookmark-icon {
629
+ width: 20px;
630
+ height: 20px;
631
+ margin-right: 6px; }
632
+
633
+ .kg-bookmark-author,
634
+ .kg-bookmark-publisher {
635
+ display: inline; }
636
+
637
+ .kg-bookmark-publisher {
638
+ text-overflow: ellipsis;
639
+ overflow: hidden;
640
+ max-width: 240px;
641
+ white-space: nowrap;
642
+ display: block;
643
+ line-height: 1.65em; }
644
+
645
+ .kg-bookmark-thumbnail {
646
+ position: relative;
647
+ flex-grow: 1;
648
+ min-width: 33%; }
649
+
650
+ .kg-bookmark-thumbnail img {
651
+ width: 100%;
652
+ height: 100%;
653
+ object-fit: cover;
654
+ position: absolute;
655
+ top: 0;
656
+ left: 0;
657
+ border-radius: 0 4px 4px 0; }
658
+
659
+ .kg-embed-card {
660
+ height: 0;
661
+ margin-bottom: 1rem;
662
+ overflow: hidden;
663
+ padding-bottom: 67.5%;
664
+ padding-top: 1.5625rem;
665
+ position: relative; }
666
+
667
+ .kg-embed-card iframe {
668
+ height: 100%;
669
+ position: absolute;
670
+ top: 0;
671
+ width: 100%;
672
+ left: 0; }
673
+
674
+ figure.kg-card {
675
+ margin-left: auto;
676
+ margin-right: auto; }
677
+
678
+ .gh-post-upgrade-cta-content {
679
+ background-color: #FF4D4D !important; }
680
+
681
+ .gh-post-upgrade-cta-content .gh-btn.gh-portal-close {
682
+ color: #FF4D4D !important; }
683
+
684
+ .gh-post-upgrade-cta-content a.gh-portal-close {
685
+ color: #ffffff !important; }
assets/css/post.scss CHANGED
@@ -246,6 +246,7 @@
246
246
  background-color: $color-main-light;
247
247
  min-height: 100%;
248
248
  .post-view-article {
249
+ min-height: 100vh;
249
250
  .post-article-content {
250
251
  p a,
251
252
  ul a {
@@ -514,4 +515,175 @@
514
515
  margin-bottom: 0;
515
516
  }
516
517
  }
517
- }
518
+ }
519
+
520
+ // Ghost required classes
521
+
522
+ .kg-width-wide {
523
+ grid-column: wide-start / wide-end;
524
+ }
525
+
526
+ .kg-width-full {
527
+ grid-column: full-start / full-end;
528
+ }
529
+
530
+ .kg-width-full img {
531
+ width: 100%;
532
+ }
533
+
534
+ .kg-gallery-container {
535
+ position: relative;
536
+ }
537
+
538
+ .kg-gallery-row {
539
+ display: flex;
540
+ flex-direction: row;
541
+ justify-content: center;
542
+ }
543
+ .kg-gallery-row:not(:first-of-type) {
544
+ margin: 0.75em 0 0 0;
545
+ }
546
+
547
+ .kg-gallery-image img {
548
+ display: block;
549
+ margin: 0;
550
+ max-width: 100%;
551
+ max-height: 100%;
552
+ }
553
+ .kg-gallery-image:not(:first-of-type) {
554
+ margin: 0 0 0 0.75em;
555
+ }
556
+
557
+ .kg-bookmark-card,
558
+ .kg-bookmark-publisher {
559
+ position: relative;
560
+ width: 100%;
561
+ }
562
+
563
+ .kg-bookmark-container,
564
+ .kg-bookmark-container:hover {
565
+ display: flex;
566
+ color: $color-main-dark;
567
+ font-family: $main-font;
568
+ text-decoration: none !important;
569
+ background: rgba(255,255,255,0.6);
570
+ border-radius: 5px;
571
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
572
+ overflow: hidden;
573
+ }
574
+
575
+ .kg-bookmark-content {
576
+ display: flex;
577
+ flex-direction: column;
578
+ flex-grow: 1;
579
+ flex-basis: 100%;
580
+ align-items: flex-start;
581
+ justify-content: flex-start;
582
+ padding: 20px;
583
+ }
584
+
585
+ .kg-bookmark-title {
586
+ font-size: 1.5rem;
587
+ line-height: 1.4em;
588
+ font-weight: 600;
589
+ color: $color-main-dark;
590
+ }
591
+
592
+ .kg-bookmark-description {
593
+ display: -webkit-box;
594
+ font-size: 1.4rem;
595
+ line-height: 1.5em;
596
+ margin-top: 3px;
597
+ color: #626d79;
598
+ font-weight: 400;
599
+ max-height: 44px;
600
+ overflow-y: hidden;
601
+ -webkit-line-clamp: 2;
602
+ -webkit-box-orient: vertical;
603
+ }
604
+
605
+ .kg-bookmark-metadata {
606
+ display: flex;
607
+ align-items: center;
608
+ margin-top: 22px;
609
+ width: 100%;
610
+ color: #394047;
611
+ font-size: 1.4rem;
612
+ font-weight: 500;
613
+ }
614
+ .kg-bookmark-metadata > span:nth-of-type(2) {
615
+ color: #626d79;
616
+ font-weight: 400;
617
+ }
618
+ .kg-bookmark-metadata > span:nth-of-type(2):before {
619
+ content: "•";
620
+ color: #394047;
621
+ margin: 0 6px;
622
+ }
623
+
624
+ .kg-bookmark-icon {
625
+ width: 20px;
626
+ height: 20px;
627
+ margin-right: 6px;
628
+ }
629
+
630
+ .kg-bookmark-author,
631
+ .kg-bookmark-publisher {
632
+ display: inline;
633
+ }
634
+
635
+ .kg-bookmark-publisher {
636
+ text-overflow: ellipsis;
637
+ overflow: hidden;
638
+ max-width: 240px;
639
+ white-space: nowrap;
640
+ display: block;
641
+ line-height: 1.65em;
642
+ }
643
+
644
+ .kg-bookmark-thumbnail {
645
+ position: relative;
646
+ flex-grow: 1;
647
+ min-width: 33%;
648
+ }
649
+ .kg-bookmark-thumbnail img {
650
+ width: 100%;
651
+ height: 100%;
652
+ object-fit: cover;
653
+ position: absolute;
654
+ top: 0;
655
+ left: 0;
656
+ border-radius: 0 4px 4px 0;
657
+ }
658
+
659
+ .kg-embed-card {
660
+ height: 0;
661
+ margin-bottom: 1rem;
662
+ overflow: hidden;
663
+ padding-bottom: 67.5%;
664
+ padding-top: 1.5625rem;
665
+ position: relative;
666
+
667
+ iframe {
668
+ height: 100%;
669
+ position: absolute;
670
+ top: 0;
671
+ width: 100%;
672
+ left: 0;
673
+ }
674
+ }
675
+
676
+ figure.kg-card {
677
+ margin-left: auto;
678
+ margin-right: auto;
679
+ }
680
+
681
+ .gh-post-upgrade-cta-content {
682
+ background-color: $color-main-contrast !important;
683
+ .gh-btn.gh-portal-close {
684
+ color: $color-main-contrast !important;
685
+ }
686
+ a.gh-portal-close {
687
+ color: $color-main-light !important;
688
+ }
689
+ }
assets/css/style.css CHANGED
@@ -13,17 +13,19 @@ body {
13
13
  background-color: #f2f2f2;
14
14
  min-height: 100%;
15
15
  overflow-x: hidden; }
16
- body.nicescroll {
17
- overflow-y: hidden; }
16
+
17
+ body.nicescroll {
18
+ overflow-y: hidden; }
18
19
 
19
20
  h1, h2, h3, h4, h5, h6 {
20
21
  font-weight: 900;
21
22
  font-family: "Raleway", sans-serif;
22
23
  text-transform: none;
23
24
  color: #23222D; }
24
- h1 a, h1 a:hover, h1 a:focus, h1 a:active, h2 a, h2 a:hover, h2 a:focus, h2 a:active, h3 a, h3 a:hover, h3 a:focus, h3 a:active, h4 a, h4 a:hover, h4 a:focus, h4 a:active, h5 a, h5 a:hover, h5 a:focus, h5 a:active, h6 a, h6 a:hover, h6 a:focus, h6 a:active {
25
- color: inherit;
26
- text-decoration: none; }
25
+
26
+ h1 a, h1 a:hover, h1 a:focus, h1 a:active, h2 a, h2 a:hover, h2 a:focus, h2 a:active, h3 a, h3 a:hover, h3 a:focus, h3 a:active, h4 a, h4 a:hover, h4 a:focus, h4 a:active, h5 a, h5 a:hover, h5 a:focus, h5 a:active, h6 a, h6 a:hover, h6 a:focus, h6 a:active {
27
+ color: inherit;
28
+ text-decoration: none; }
27
29
 
28
30
  p, ul, ol {
29
31
  font-family: "Lato", sans-serif;
@@ -35,21 +37,25 @@ pre {
35
37
  .row {
36
38
  width: 100%;
37
39
  max-width: 75rem; }
38
- .row .column, .row .columns {
39
- padding-left: 1.875rem;
40
- padding-right: 1.875rem; }
41
- .row.row-with-header-logo {
42
- max-width: none; }
43
- .row.row-with-header-logo .column, .row.row-with-header-logo .columns {
44
- padding-left: 0.9375rem;
45
- padding-right: 0.9375rem; }
40
+
41
+ .row .column, .row .columns {
42
+ padding-left: 1.875rem;
43
+ padding-right: 1.875rem; }
44
+
45
+ .row.row-with-header-logo {
46
+ max-width: none; }
47
+
48
+ .row.row-with-header-logo .column, .row.row-with-header-logo .columns {
49
+ padding-left: 0.9375rem;
50
+ padding-right: 0.9375rem; }
46
51
 
47
52
  a.button {
48
53
  text-decoration: none;
49
54
  color: #ffffff; }
50
- a.button:hover, a.button:active, a.button:focus {
51
- text-decoration: none;
52
- color: #ffffff; }
55
+
56
+ a.button:hover, a.button:active, a.button:focus {
57
+ text-decoration: none;
58
+ color: #ffffff; }
53
59
 
54
60
  [class*="block-grid-"] {
55
61
  margin: 0; }
@@ -87,16 +93,19 @@ a.button {
87
93
  z-index: 999;
88
94
  -webkit-transform: translateZ(0);
89
95
  transform: translateZ(0); }
90
- .back-to-top-btn.hidden {
91
- -webkit-transform: translateY(100%);
92
- -ms-transform: translateY(100%);
93
- transform: translateY(100%); }
94
- .back-to-top-btn:hover, .back-to-top-btn:focus, .back-to-top-btn:active {
95
- color: #ffffff;
96
- background-color: #2e2d3c; }
97
- @media only screen and (min-width: 40.063em) {
98
- .back-to-top-btn {
99
- display: block; } }
96
+
97
+ .back-to-top-btn.hidden {
98
+ -webkit-transform: translateY(100%);
99
+ -ms-transform: translateY(100%);
100
+ transform: translateY(100%); }
101
+
102
+ .back-to-top-btn:hover, .back-to-top-btn:focus, .back-to-top-btn:active {
103
+ color: #ffffff;
104
+ background-color: #2e2d3c; }
105
+
106
+ @media only screen and (min-width: 40.063em) {
107
+ .back-to-top-btn {
108
+ display: block; } }
100
109
 
101
110
  .headroom {
102
111
  padding: 1.25rem;
@@ -113,26 +122,32 @@ a.button {
113
122
  -webkit-transform: translate3d(0, -100%, 0);
114
123
  -ms-transform: translate(0, -100%);
115
124
  transform: translate3d(0, -100%, 0); }
116
- .headroom.headroom--not-top {
117
- -webkit-transform: translate3d(0, 0, 0);
118
- -ms-transform: translate(0, 0);
119
- transform: translate3d(0, 0, 0); }
120
- .headroom.headroom--top {
121
- -webkit-transform: translate3d(0, -100%, 0);
122
- -ms-transform: translate(0, -100%);
123
- transform: translate3d(0, -100%, 0); }
124
- .headroom .headroom-logo img {
125
- max-height: 3.125rem; }
126
- .headroom .headeroom-icons {
127
- line-height: 3.125rem;
128
- font-size: 2.25rem; }
129
- .headroom .headeroom-icons .fa {
130
- cursor: pointer;
131
- height: 3.125rem;
132
- line-height: 3.125rem;
133
- vertical-align: middle; }
134
- .headroom .headeroom-icons .fa.fa-search {
135
- font-size: 60%; }
125
+
126
+ .headroom.headroom--not-top {
127
+ -webkit-transform: translate3d(0, 0, 0);
128
+ -ms-transform: translate(0, 0);
129
+ transform: translate3d(0, 0, 0); }
130
+
131
+ .headroom.headroom--top {
132
+ -webkit-transform: translate3d(0, -100%, 0);
133
+ -ms-transform: translate(0, -100%);
134
+ transform: translate3d(0, -100%, 0); }
135
+
136
+ .headroom .headroom-logo img {
137
+ max-height: 3.125rem; }
138
+
139
+ .headroom .headeroom-icons {
140
+ line-height: 3.125rem;
141
+ font-size: 2.25rem; }
142
+
143
+ .headroom .headeroom-icons .fa {
144
+ cursor: pointer;
145
+ height: 3.125rem;
146
+ line-height: 3.125rem;
147
+ vertical-align: middle; }
148
+
149
+ .headroom .headeroom-icons .fa.fa-search {
150
+ font-size: 60%; }
136
151
 
137
152
  html[data-useragent*='Android 4.0'] .headroom,
138
153
  html[data-useragent*='Android 4.1'] .headroom,
@@ -141,16 +156,18 @@ html.no-csstransforms3d .headroom {
141
156
  top: -300px;
142
157
  -webkit-transition: top .5s;
143
158
  transition: top .5s; }
144
- html[data-useragent*='Android 4.0'] .headroom.headroom--not-top,
145
- html[data-useragent*='Android 4.1'] .headroom.headroom--not-top,
146
- html[data-useragent*='Android 4.2'] .headroom.headroom--not-top,
147
- html.no-csstransforms3d .headroom.headroom--not-top {
148
- top: 0; }
149
- html[data-useragent*='Android 4.0'] .headroom.headroom--top,
150
- html[data-useragent*='Android 4.1'] .headroom.headroom--top,
151
- html[data-useragent*='Android 4.2'] .headroom.headroom--top,
152
- html.no-csstransforms3d .headroom.headroom--top {
153
- top: -300px; }
159
+
160
+ html[data-useragent*='Android 4.0'] .headroom.headroom--not-top,
161
+ html[data-useragent*='Android 4.1'] .headroom.headroom--not-top,
162
+ html[data-useragent*='Android 4.2'] .headroom.headroom--not-top,
163
+ html.no-csstransforms3d .headroom.headroom--not-top {
164
+ top: 0; }
165
+
166
+ html[data-useragent*='Android 4.0'] .headroom.headroom--top,
167
+ html[data-useragent*='Android 4.1'] .headroom.headroom--top,
168
+ html[data-useragent*='Android 4.2'] .headroom.headroom--top,
169
+ html.no-csstransforms3d .headroom.headroom--top {
170
+ top: -300px; }
154
171
 
155
172
  .big-search {
156
173
  position: absolute;
@@ -167,136 +184,168 @@ html.no-csstransforms3d .headroom {
167
184
  transition: opacity 0.5s, visibility 0s 0.5s;
168
185
  z-index: 99999;
169
186
  overflow-y: auto; }
170
- .big-search .big-search-close-btn {
171
- font-size: 3.75rem;
172
- text-align: center;
173
- position: absolute;
174
- right: 2.1875rem;
175
- top: 2.1875rem;
176
- overflow: hidden;
177
- border: none;
178
- color: #ffffff;
179
- outline: none;
180
- z-index: 100;
181
- cursor: pointer;
182
- -webkit-user-select: none;
183
- user-select: none; }
184
- .big-search.open {
185
- opacity: 1;
186
- visibility: visible;
187
- -webkit-transition: opacity 0.5s;
188
- transition: opacity 0.5s; }
189
- .big-search .big-search-container {
190
- margin-top: 11%; }
191
- .big-search .big-search-container .big-search-form-input {
192
- color: #ffffff;
193
- height: 7.5rem;
194
- font-size: 3.125rem;
195
- padding: 1.25rem 0;
196
- font-weight: 900;
197
- background-color: transparent;
198
- box-shadow: none;
199
- border: 0;
200
- border-bottom: 0.1875rem solid #ffffff; }
201
- .big-search .big-search-container .big-search-form-input:focus {
202
- box-shadow: none;
203
- background-color: transparent; }
204
- .big-search .big-search-container .big-search-form-input::-webkit-input-placeholder {
205
- color: #ffffff; }
206
- .big-search .big-search-container .big-search-form-input:-moz-placeholder {
207
- color: #ffffff;
208
- opacity: 1; }
209
- .big-search .big-search-container .big-search-form-input::-moz-placeholder {
210
- color: #ffffff;
211
- opacity: 1; }
212
- .big-search .big-search-container .big-search-form-input:-ms-input-placeholder {
213
- color: #ffffff; }
214
- .big-search .big-search-container .big-search-results {
215
- color: #ffffff; }
216
- .big-search .big-search-container .big-search-results > p {
217
- font-weight: 600;
218
- font-size: 2.25rem;
219
- padding-top: 0.9375rem;
220
- padding-bottom: 0.9375rem; }
221
- .big-search .big-search-container .big-search-results a {
222
- color: #ffffff; }
223
- .big-search .big-search-container .big-search-results a p, .big-search .big-search-container .big-search-results a h1, .big-search .big-search-container .big-search-results a h2, .big-search .big-search-container .big-search-results a h3, .big-search .big-search-container .big-search-results a h4, .big-search .big-search-container .big-search-results a h5, .big-search .big-search-container .big-search-results a h6 {
224
- color: #ffffff;
225
- font-weight: 400;
226
- text-transform: none;
227
- -webkit-transition: color .3s;
228
- transition: color .3s; }
229
- .big-search .big-search-container .big-search-results a:hover, .big-search .big-search-container .big-search-results a:active, .big-search .big-search-container .big-search-results a:focus {
230
- text-decoration: none; }
231
- .big-search .big-search-container .big-search-results a:hover p, .big-search .big-search-container .big-search-results a:hover h1, .big-search .big-search-container .big-search-results a:hover h2, .big-search .big-search-container .big-search-results a:hover h3, .big-search .big-search-container .big-search-results a:hover h4, .big-search .big-search-container .big-search-results a:hover h5, .big-search .big-search-container .big-search-results a:hover h6 {
232
- color: #999999; }
187
+
188
+ .big-search .big-search-close-btn {
189
+ font-size: 3.75rem;