minimal-mistakes-jekyll 4.11.2 → 4.12.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -528,12 +528,6 @@
528
528
  }
529
529
  }
530
530
 
531
- > li:last-child {
532
- a {
533
- border-bottom: none;
534
- }
535
- }
536
-
537
531
  li ul > li a {
538
532
  padding-left: 1.75rem;
539
533
  font-weight: normal;
@@ -74,6 +74,14 @@
74
74
  margin-right: -1 * $right-sidebar-width-narrow;
75
75
  padding-left: 1em;
76
76
  z-index: 10;
77
+
78
+ &.sticky {
79
+ @include clearfix();
80
+ position: -webkit-sticky;
81
+ position: sticky;
82
+ top: 2em;
83
+ float: right;
84
+ }
77
85
  }
78
86
 
79
87
  @include breakpoint($x-large) {
@@ -279,6 +287,7 @@
279
287
 
280
288
  .wide .sidebar__right {
281
289
  margin-bottom: 1em;
290
+
282
291
  @include breakpoint($large) {
283
292
  position: initial;
284
293
  top: initial;
@@ -287,6 +296,10 @@
287
296
  margin-right: initial;
288
297
  padding-left: initial;
289
298
  z-index: initial;
299
+
300
+ &.sticky {
301
+ float: none;
302
+ }
290
303
  }
291
304
 
292
305
  @include breakpoint($x-large) {
@@ -1,520 +1,524 @@
1
- /* ==========================================================================
2
- UTILITY CLASSES
3
- ========================================================================== */
4
-
5
- /*
6
- Visibility
7
- ========================================================================== */
8
-
9
- /* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
10
-
11
- .hidden,
12
- .is--hidden {
13
- display: none;
14
- visibility: hidden;
15
- }
16
-
17
- /* for preloading images */
18
-
19
- .load {
20
- display: none;
21
- }
22
-
23
- .transparent {
24
- opacity: 0;
25
- }
26
-
27
- /* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
28
-
29
- .visually-hidden,
30
- .screen-reader-text,
31
- .screen-reader-text span,
32
- .screen-reader-shortcut {
33
- position: absolute !important;
34
- clip: rect(1px, 1px, 1px, 1px);
35
- height: 1px !important;
36
- width: 1px !important;
37
- border: 0 !important;
38
- overflow: hidden;
39
- }
40
-
41
- body:hover .visually-hidden a,
42
- body:hover .visually-hidden input,
43
- body:hover .visually-hidden button {
44
- display: none !important;
45
- }
46
-
47
- /* screen readers */
48
-
49
- .screen-reader-text:focus,
50
- .screen-reader-shortcut:focus {
51
- clip: auto !important;
52
- height: auto !important;
53
- width: auto !important;
54
- display: block;
55
- font-size: 1em;
56
- font-weight: bold;
57
- padding: 15px 23px 14px;
58
- background: #fff;
59
- z-index: 100000;
60
- text-decoration: none;
61
- box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
62
- }
63
-
64
- /*
65
- Skip links
66
- ========================================================================== */
67
-
68
- .skip-link {
69
- position: fixed;
70
- z-index: 20;
71
- margin: 0;
72
- font-family: $sans-serif;
73
- white-space: nowrap;
74
- }
75
-
76
- .skip-link li {
77
- height: 0;
78
- width: 0;
79
- list-style: none;
80
- }
81
-
82
- /*
83
- Type
84
- ========================================================================== */
85
-
86
- .text-left {
87
- text-align: left;
88
- }
89
-
90
- .text-center {
91
- text-align: center;
92
- }
93
-
94
- .text-right {
95
- text-align: right;
96
- }
97
-
98
- .text-justify {
99
- text-align: justify;
100
- }
101
-
102
- .text-nowrap {
103
- white-space: nowrap;
104
- }
105
-
106
- /*
107
- Alignment
108
- ========================================================================== */
109
-
110
- /* clearfix */
111
-
112
- .cf {
113
- clear: both;
114
- }
115
-
116
- .wrapper {
117
- margin-left: auto;
118
- margin-right: auto;
119
- width: 100%;
120
- }
121
-
122
- /*
123
- Images
124
- ========================================================================== */
125
-
126
- /* image align left */
127
-
128
- .align-left {
129
- display: block;
130
- margin-left: auto;
131
- margin-right: auto;
132
-
133
- @include breakpoint($small) {
134
- float: left;
135
- margin-right: 1em;
136
- }
137
- }
138
-
139
- /* image align right */
140
-
141
- .align-right {
142
- display: block;
143
- margin-left: auto;
144
- margin-right: auto;
145
-
146
- @include breakpoint($small) {
147
- float: right;
148
- margin-left: 1em;
149
- }
150
- }
151
-
152
- /* image align center */
153
-
154
- .align-center {
155
- display: block;
156
- margin-left: auto;
157
- margin-right: auto;
158
- }
159
-
160
- /* file page content container */
161
-
162
- .full {
163
- @include breakpoint($large) {
164
- margin-right: -1 * span(2.5 of 12) !important;
165
- }
166
- }
167
-
168
- /*
169
- Icons
170
- ========================================================================== */
171
-
172
- .icon {
173
- display: inline-block;
174
- fill: currentColor;
175
- width: 1em;
176
- height: 1.1em;
177
- line-height: 1;
178
- position: relative;
179
- top: -0.1em;
180
- vertical-align: middle;
181
- }
182
-
183
- /* social icons*/
184
-
185
- .social-icons {
186
- .fas,
187
- .fab,
188
- .far,
189
- .fal {
190
- color: $text-color;
191
- }
192
-
193
- .fa-behance,
194
- .fa-behance-square {
195
- color: $behance-color;
196
- }
197
-
198
- .fa-bitbucket {
199
- color: $bitbucket-color;
200
- }
201
-
202
- .fa-dribbble,
203
- .fa-dribble-square {
204
- color: $dribbble-color;
205
- }
206
-
207
- .fa-facebook,
208
- .fa-facebook-square,
209
- .fa-facebook-f {
210
- color: $facebook-color;
211
- }
212
-
213
- .fa-flickr {
214
- color: $flickr-color;
215
- }
216
-
217
- .fa-foursquare {
218
- color: $foursquare-color;
219
- }
220
-
221
- .fa-github,
222
- .fa-github-alt,
223
- .fa-github-square {
224
- color: $github-color;
225
- }
226
-
227
- .fa-google-plus,
228
- .fa-google-plus-square,
229
- .fa-google-plus-g {
230
- color: $google-plus-color;
231
- }
232
-
233
- .fa-instagram {
234
- color: $instagram-color;
235
- }
236
-
237
- .fa-lastfm,
238
- .fa-lastfm-square {
239
- color: $lastfm-color;
240
- }
241
-
242
- .fa-linkedin,
243
- .fa-linkedin-in {
244
- color: $linkedin-color;
245
- }
246
-
247
- .fa-pinterest,
248
- .fa-pinterest-p,
249
- .fa-pinterest-square {
250
- color: $pinterest-color;
251
- }
252
-
253
- .fa-rss,
254
- .fa-rss-square {
255
- color: $rss-color;
256
- }
257
-
258
- .fa-soundcloud {
259
- color: $soundcloud-color;
260
- }
261
-
262
- .fa-stack-exchange,
263
- .fa-stack-overflow {
264
- color: $stackoverflow-color;
265
- }
266
-
267
- .fa-tumblr,
268
- .fa-tumblr-square {
269
- color: $tumblr-color;
270
- }
271
-
272
- .fa-twitter,
273
- .fa-twitter-square {
274
- color: $twitter-color;
275
- }
276
-
277
- .fa-vimeo,
278
- .fa-vimeo-square,
279
- .fa-vimeo-v {
280
- color: $vimeo-color;
281
- }
282
-
283
- .fa-vine {
284
- color: $vine-color;
285
- }
286
-
287
- .fa-youtube {
288
- color: $youtube-color;
289
- }
290
-
291
- .fa-xing,
292
- .fa-xing-square {
293
- color: $xing-color;
294
- }
295
- }
296
-
297
- /*
298
- Navicons
299
- ========================================================================== */
300
-
301
- .navicon {
302
- position: relative;
303
- width: $navicon-width;
304
- height: $navicon-height;
305
- background: #fff;
306
- margin: auto;
307
- -webkit-transition: 0.3s;
308
- transition: 0.3s;
309
-
310
- &:before,
311
- &:after {
312
- content: "";
313
- position: absolute;
314
- left: 0;
315
- width: $navicon-width;
316
- height: $navicon-height;
317
- background: #fff;
318
- -webkit-transition: 0.3s;
319
- transition: 0.3s;
320
- }
321
-
322
- &:before {
323
- top: (-2 * $navicon-height);
324
- }
325
-
326
- &:after {
327
- bottom: (-2 * $navicon-height);
328
- }
329
- }
330
-
331
- .close .navicon {
332
- /* hide the middle line*/
333
- background: transparent;
334
-
335
- /* overlay the lines by setting both their top values to 0*/
336
- &:before,
337
- &:after {
338
- -webkit-transform-origin: 50% 50%;
339
- -ms-transform-origin: 50% 50%;
340
- transform-origin: 50% 50%;
341
- top: 0;
342
- width: $navicon-width;
343
- }
344
-
345
- /* rotate the lines to form the x shape*/
346
- &:before {
347
- -webkit-transform: rotate3d(0, 0, 1, 45deg);
348
- transform: rotate3d(0, 0, 1, 45deg);
349
- }
350
- &:after {
351
- -webkit-transform: rotate3d(0, 0, 1, -45deg);
352
- transform: rotate3d(0, 0, 1, -45deg);
353
- }
354
- }
355
-
356
- /*
357
- Sticky, fixed to top content
358
- ========================================================================== */
359
-
360
- .sticky {
361
- @include breakpoint($large) {
362
- @include clearfix();
363
- position: -webkit-sticky;
364
- position: sticky;
365
- top: 2em;
366
-
367
- > * {
368
- display: block;
369
- }
370
- }
371
- }
372
-
373
- /*
374
- Wells
375
- ========================================================================== */
376
-
377
- .well {
378
- min-height: 20px;
379
- padding: 19px;
380
- margin-bottom: 20px;
381
- background-color: #f5f5f5;
382
- border: 1px solid #e3e3e3;
383
- border-radius: $border-radius;
384
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
385
- }
386
-
387
- /*
388
- Modals
389
- ========================================================================== */
390
-
391
- .show-modal {
392
- overflow: hidden;
393
- position: relative;
394
-
395
- &:before {
396
- position: absolute;
397
- content: "";
398
- top: 0;
399
- left: 0;
400
- width: 100%;
401
- height: 100%;
402
- z-index: 999;
403
- background-color: rgba(255, 255, 255, 0.85);
404
- }
405
-
406
- .modal {
407
- display: block;
408
- }
409
- }
410
-
411
- .modal {
412
- display: none;
413
- position: fixed;
414
- width: 300px;
415
- top: 50%;
416
- left: 50%;
417
- margin-left: -150px;
418
- margin-top: -150px;
419
- min-height: 0;
420
- z-index: 9999;
421
- background: #fff;
422
- border: 1px solid $border-color;
423
- border-radius: $border-radius;
424
- box-shadow: $box-shadow;
425
-
426
- &__title {
427
- margin: 0;
428
- padding: 0.5em 1em;
429
- }
430
-
431
- &__supporting-text {
432
- padding: 0 1em 0.5em 1em;
433
- }
434
-
435
- &__actions {
436
- padding: 0.5em 1em;
437
- border-top: 1px solid $border-color;
438
- }
439
- }
440
-
441
- /*
442
- Footnotes
443
- ========================================================================== */
444
-
445
- .footnote {
446
- color: mix(#fff, $gray, 25%);
447
- text-decoration: none;
448
- }
449
-
450
- .footnotes {
451
- color: mix(#fff, $gray, 25%);
452
-
453
- ol,
454
- li,
455
- p {
456
- margin-bottom: 0;
457
- font-size: $type-size-6;
458
- }
459
- }
460
-
461
- a.reversefootnote {
462
- color: $gray;
463
- text-decoration: none;
464
-
465
- &:hover {
466
- text-decoration: underline;
467
- }
468
- }
469
-
470
- /*
471
- Required
472
- ========================================================================== */
473
-
474
- .required {
475
- color: $danger-color;
476
- font-weight: bold;
477
- }
478
-
479
- /*
480
- Google Custom Search Engine
481
- ========================================================================== */
482
-
483
- .gsc-control-cse {
484
- table,
485
- tr,
486
- td {
487
- border: 0; /* remove table borders widget */
488
- }
489
- }
490
-
491
- /*
492
- Responsive Video Embed
493
- ========================================================================== */
494
-
495
- .responsive-video-container {
496
- position: relative;
497
- margin-bottom: 1em;
498
- padding-bottom: 56.25%;
499
- height: 0;
500
- overflow: hidden;
501
- max-width: 100%;
502
-
503
- iframe,
504
- object,
505
- embed {
506
- position: absolute;
507
- top: 0;
508
- left: 0;
509
- width: 100%;
510
- height: 100%;
511
- }
512
- }
513
-
514
- // full screen video fixes
515
- :-webkit-full-screen-ancestor {
516
- .masthead,
517
- .page__footer {
518
- position: static;
519
- }
520
- }
1
+ /* ==========================================================================
2
+ UTILITY CLASSES
3
+ ========================================================================== */
4
+
5
+ /*
6
+ Visibility
7
+ ========================================================================== */
8
+
9
+ /* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
10
+
11
+ .hidden,
12
+ .is--hidden {
13
+ display: none;
14
+ visibility: hidden;
15
+ }
16
+
17
+ /* for preloading images */
18
+
19
+ .load {
20
+ display: none;
21
+ }
22
+
23
+ .transparent {
24
+ opacity: 0;
25
+ }
26
+
27
+ /* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
28
+
29
+ .visually-hidden,
30
+ .screen-reader-text,
31
+ .screen-reader-text span,
32
+ .screen-reader-shortcut {
33
+ position: absolute !important;
34
+ clip: rect(1px, 1px, 1px, 1px);
35
+ height: 1px !important;
36
+ width: 1px !important;
37
+ border: 0 !important;
38
+ overflow: hidden;
39
+ }
40
+
41
+ body:hover .visually-hidden a,
42
+ body:hover .visually-hidden input,
43
+ body:hover .visually-hidden button {
44
+ display: none !important;
45
+ }
46
+
47
+ /* screen readers */
48
+
49
+ .screen-reader-text:focus,
50
+ .screen-reader-shortcut:focus {
51
+ clip: auto !important;
52
+ height: auto !important;
53
+ width: auto !important;
54
+ display: block;
55
+ font-size: 1em;
56
+ font-weight: bold;
57
+ padding: 15px 23px 14px;
58
+ background: #fff;
59
+ z-index: 100000;
60
+ text-decoration: none;
61
+ box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
62
+ }
63
+
64
+ /*
65
+ Skip links
66
+ ========================================================================== */
67
+
68
+ .skip-link {
69
+ position: fixed;
70
+ z-index: 20;
71
+ margin: 0;
72
+ font-family: $sans-serif;
73
+ white-space: nowrap;
74
+ }
75
+
76
+ .skip-link li {
77
+ height: 0;
78
+ width: 0;
79
+ list-style: none;
80
+ }
81
+
82
+ /*
83
+ Type
84
+ ========================================================================== */
85
+
86
+ .text-left {
87
+ text-align: left;
88
+ }
89
+
90
+ .text-center {
91
+ text-align: center;
92
+ }
93
+
94
+ .text-right {
95
+ text-align: right;
96
+ }
97
+
98
+ .text-justify {
99
+ text-align: justify;
100
+ }
101
+
102
+ .text-nowrap {
103
+ white-space: nowrap;
104
+ }
105
+
106
+ /*
107
+ Alignment
108
+ ========================================================================== */
109
+
110
+ /* clearfix */
111
+
112
+ .cf {
113
+ clear: both;
114
+ }
115
+
116
+ .wrapper {
117
+ margin-left: auto;
118
+ margin-right: auto;
119
+ width: 100%;
120
+ }
121
+
122
+ /*
123
+ Images
124
+ ========================================================================== */
125
+
126
+ /* image align left */
127
+
128
+ .align-left {
129
+ display: block;
130
+ margin-left: auto;
131
+ margin-right: auto;
132
+
133
+ @include breakpoint($small) {
134
+ float: left;
135
+ margin-right: 1em;
136
+ }
137
+ }
138
+
139
+ /* image align right */
140
+
141
+ .align-right {
142
+ display: block;
143
+ margin-left: auto;
144
+ margin-right: auto;
145
+
146
+ @include breakpoint($small) {
147
+ float: right;
148
+ margin-left: 1em;
149
+ }
150
+ }
151
+
152
+ /* image align center */
153
+
154
+ .align-center {
155
+ display: block;
156
+ margin-left: auto;
157
+ margin-right: auto;
158
+ }
159
+
160
+ /* file page content container */
161
+
162
+ .full {
163
+ @include breakpoint($large) {
164
+ margin-right: -1 * span(2.5 of 12) !important;
165
+ }
166
+ }
167
+
168
+ /*
169
+ Icons
170
+ ========================================================================== */
171
+
172
+ .icon {
173
+ display: inline-block;
174
+ fill: currentColor;
175
+ width: 1em;
176
+ height: 1.1em;
177
+ line-height: 1;
178
+ position: relative;
179
+ top: -0.1em;
180
+ vertical-align: middle;
181
+ }
182
+
183
+ /* social icons*/
184
+
185
+ .social-icons {
186
+ .fas,
187
+ .fab,
188
+ .far,
189
+ .fal {
190
+ color: $text-color;
191
+ }
192
+
193
+ .fa-behance,
194
+ .fa-behance-square {
195
+ color: $behance-color;
196
+ }
197
+
198
+ .fa-bitbucket {
199
+ color: $bitbucket-color;
200
+ }
201
+
202
+ .fa-dribbble,
203
+ .fa-dribble-square {
204
+ color: $dribbble-color;
205
+ }
206
+
207
+ .fa-facebook,
208
+ .fa-facebook-square,
209
+ .fa-facebook-f {
210
+ color: $facebook-color;
211
+ }
212
+
213
+ .fa-flickr {
214
+ color: $flickr-color;
215
+ }
216
+
217
+ .fa-foursquare {
218
+ color: $foursquare-color;
219
+ }
220
+
221
+ .fa-github,
222
+ .fa-github-alt,
223
+ .fa-github-square {
224
+ color: $github-color;
225
+ }
226
+
227
+ .fa-gitlab {
228
+ color: $gitlab-color;
229
+ }
230
+
231
+ .fa-google-plus,
232
+ .fa-google-plus-square,
233
+ .fa-google-plus-g {
234
+ color: $google-plus-color;
235
+ }
236
+
237
+ .fa-instagram {
238
+ color: $instagram-color;
239
+ }
240
+
241
+ .fa-lastfm,
242
+ .fa-lastfm-square {
243
+ color: $lastfm-color;
244
+ }
245
+
246
+ .fa-linkedin,
247
+ .fa-linkedin-in {
248
+ color: $linkedin-color;
249
+ }
250
+
251
+ .fa-pinterest,
252
+ .fa-pinterest-p,
253
+ .fa-pinterest-square {
254
+ color: $pinterest-color;
255
+ }
256
+
257
+ .fa-rss,
258
+ .fa-rss-square {
259
+ color: $rss-color;
260
+ }
261
+
262
+ .fa-soundcloud {
263
+ color: $soundcloud-color;
264
+ }
265
+
266
+ .fa-stack-exchange,
267
+ .fa-stack-overflow {
268
+ color: $stackoverflow-color;
269
+ }
270
+
271
+ .fa-tumblr,
272
+ .fa-tumblr-square {
273
+ color: $tumblr-color;
274
+ }
275
+
276
+ .fa-twitter,
277
+ .fa-twitter-square {
278
+ color: $twitter-color;
279
+ }
280
+
281
+ .fa-vimeo,
282
+ .fa-vimeo-square,
283
+ .fa-vimeo-v {
284
+ color: $vimeo-color;
285
+ }
286
+
287
+ .fa-vine {
288
+ color: $vine-color;
289
+ }
290
+
291
+ .fa-youtube {
292
+ color: $youtube-color;
293
+ }
294
+
295
+ .fa-xing,
296
+ .fa-xing-square {
297
+ color: $xing-color;
298
+ }
299
+ }
300
+
301
+ /*
302
+ Navicons
303
+ ========================================================================== */
304
+
305
+ .navicon {
306
+ position: relative;
307
+ width: $navicon-width;
308
+ height: $navicon-height;
309
+ background: #fff;
310
+ margin: auto;
311
+ -webkit-transition: 0.3s;
312
+ transition: 0.3s;
313
+
314
+ &:before,
315
+ &:after {
316
+ content: "";
317
+ position: absolute;
318
+ left: 0;
319
+ width: $navicon-width;
320
+ height: $navicon-height;
321
+ background: #fff;
322
+ -webkit-transition: 0.3s;
323
+ transition: 0.3s;
324
+ }
325
+
326
+ &:before {
327
+ top: (-2 * $navicon-height);
328
+ }
329
+
330
+ &:after {
331
+ bottom: (-2 * $navicon-height);
332
+ }
333
+ }
334
+
335
+ .close .navicon {
336
+ /* hide the middle line*/
337
+ background: transparent;
338
+
339
+ /* overlay the lines by setting both their top values to 0*/
340
+ &:before,
341
+ &:after {
342
+ -webkit-transform-origin: 50% 50%;
343
+ -ms-transform-origin: 50% 50%;
344
+ transform-origin: 50% 50%;
345
+ top: 0;
346
+ width: $navicon-width;
347
+ }
348
+
349
+ /* rotate the lines to form the x shape*/
350
+ &:before {
351
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
352
+ transform: rotate3d(0, 0, 1, 45deg);
353
+ }
354
+ &:after {
355
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
356
+ transform: rotate3d(0, 0, 1, -45deg);
357
+ }
358
+ }
359
+
360
+ /*
361
+ Sticky, fixed to top content
362
+ ========================================================================== */
363
+
364
+ .sticky {
365
+ @include breakpoint($large) {
366
+ @include clearfix();
367
+ position: -webkit-sticky;
368
+ position: sticky;
369
+ top: 2em;
370
+
371
+ > * {
372
+ display: block;
373
+ }
374
+ }
375
+ }
376
+
377
+ /*
378
+ Wells
379
+ ========================================================================== */
380
+
381
+ .well {
382
+ min-height: 20px;
383
+ padding: 19px;
384
+ margin-bottom: 20px;
385
+ background-color: #f5f5f5;
386
+ border: 1px solid #e3e3e3;
387
+ border-radius: $border-radius;
388
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
389
+ }
390
+
391
+ /*
392
+ Modals
393
+ ========================================================================== */
394
+
395
+ .show-modal {
396
+ overflow: hidden;
397
+ position: relative;
398
+
399
+ &:before {
400
+ position: absolute;
401
+ content: "";
402
+ top: 0;
403
+ left: 0;
404
+ width: 100%;
405
+ height: 100%;
406
+ z-index: 999;
407
+ background-color: rgba(255, 255, 255, 0.85);
408
+ }
409
+
410
+ .modal {
411
+ display: block;
412
+ }
413
+ }
414
+
415
+ .modal {
416
+ display: none;
417
+ position: fixed;
418
+ width: 300px;
419
+ top: 50%;
420
+ left: 50%;
421
+ margin-left: -150px;
422
+ margin-top: -150px;
423
+ min-height: 0;
424
+ z-index: 9999;
425
+ background: #fff;
426
+ border: 1px solid $border-color;
427
+ border-radius: $border-radius;
428
+ box-shadow: $box-shadow;
429
+
430
+ &__title {
431
+ margin: 0;
432
+ padding: 0.5em 1em;
433
+ }
434
+
435
+ &__supporting-text {
436
+ padding: 0 1em 0.5em 1em;
437
+ }
438
+
439
+ &__actions {
440
+ padding: 0.5em 1em;
441
+ border-top: 1px solid $border-color;
442
+ }
443
+ }
444
+
445
+ /*
446
+ Footnotes
447
+ ========================================================================== */
448
+
449
+ .footnote {
450
+ color: mix(#fff, $gray, 25%);
451
+ text-decoration: none;
452
+ }
453
+
454
+ .footnotes {
455
+ color: mix(#fff, $gray, 25%);
456
+
457
+ ol,
458
+ li,
459
+ p {
460
+ margin-bottom: 0;
461
+ font-size: $type-size-6;
462
+ }
463
+ }
464
+
465
+ a.reversefootnote {
466
+ color: $gray;
467
+ text-decoration: none;
468
+
469
+ &:hover {
470
+ text-decoration: underline;
471
+ }
472
+ }
473
+
474
+ /*
475
+ Required
476
+ ========================================================================== */
477
+
478
+ .required {
479
+ color: $danger-color;
480
+ font-weight: bold;
481
+ }
482
+
483
+ /*
484
+ Google Custom Search Engine
485
+ ========================================================================== */
486
+
487
+ .gsc-control-cse {
488
+ table,
489
+ tr,
490
+ td {
491
+ border: 0; /* remove table borders widget */
492
+ }
493
+ }
494
+
495
+ /*
496
+ Responsive Video Embed
497
+ ========================================================================== */
498
+
499
+ .responsive-video-container {
500
+ position: relative;
501
+ margin-bottom: 1em;
502
+ padding-bottom: 56.25%;
503
+ height: 0;
504
+ overflow: hidden;
505
+ max-width: 100%;
506
+
507
+ iframe,
508
+ object,
509
+ embed {
510
+ position: absolute;
511
+ top: 0;
512
+ left: 0;
513
+ width: 100%;
514
+ height: 100%;
515
+ }
516
+ }
517
+
518
+ // full screen video fixes
519
+ :-webkit-full-screen-ancestor {
520
+ .masthead,
521
+ .page__footer {
522
+ position: static;
523
+ }
524
+ }