minimal-mistakes-jekyll 4.12.0 → 4.12.1

Sign up to get free protection for your applications and to get access to all the features.
data/_layouts/splash.html CHANGED
@@ -1,22 +1,22 @@
1
- ---
2
- layout: default
3
- ---
4
-
5
- {% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
6
- {% include page__hero.html %}
7
- {% elsif page.header.video.id and page.header.video.provider %}
8
- {% include page__hero_video.html %}
9
- {% endif %}
10
-
11
- <div id="main" role="main">
12
- <article class="splash" itemscope itemtype="http://schema.org/CreativeWork">
13
- {% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
14
- {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
15
- {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
16
- {% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date: "%B %d, %Y" }}">{% endif %}
17
-
18
- <section class="page__content" itemprop="text">
19
- {{ content }}
20
- </section>
21
- </article>
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
6
+ {% include page__hero.html %}
7
+ {% elsif page.header.video.id and page.header.video.provider %}
8
+ {% include page__hero_video.html %}
9
+ {% endif %}
10
+
11
+ <div id="main" role="main">
12
+ <article class="splash" itemscope itemtype="http://schema.org/CreativeWork">
13
+ {% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
14
+ {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
15
+ {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
16
+ {% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date: "%B %d, %Y" }}">{% endif %}
17
+
18
+ <section class="page__content" itemprop="text">
19
+ {{ content }}
20
+ </section>
21
+ </article>
22
22
  </div>
data/_layouts/tags.html CHANGED
@@ -1,42 +1,42 @@
1
- ---
2
- layout: archive
3
- ---
4
-
5
- {{ content }}
6
-
7
- {% assign tags_max = 0 %}
8
- {% for tag in site.tags %}
9
- {% if tag[1].size > tags_max %}
10
- {% assign tags_max = tag[1].size %}
11
- {% endif %}
12
- {% endfor %}
13
-
14
- <ul class="taxonomy__index">
15
- {% for i in (1..tags_max) reversed %}
16
- {% for tag in site.tags %}
17
- {% if tag[1].size == i %}
18
- <li>
19
- <a href="#{{ tag[0] | slugify }}">
20
- <strong>{{ tag[0] }}</strong> <span class="taxonomy__count">{{ i }}</span>
21
- </a>
22
- </li>
23
- {% endif %}
24
- {% endfor %}
25
- {% endfor %}
26
- </ul>
27
-
28
- {% for i in (1..tags_max) reversed %}
29
- {% for tag in site.tags %}
30
- {% if tag[1].size == i %}
31
- <section id="{{ tag[0] | slugify | downcase }}" class="taxonomy__section">
32
- <h2 class="archive__subtitle">{{ tag[0] }}</h2>
33
- <div class="entries-{{ page.entries_layout | default: 'list' }}">
34
- {% for post in tag.last %}
35
- {% include archive-single.html type=page.entries_layout %}
36
- {% endfor %}
37
- </div>
38
- <a href="#page-title" class="back-to-top">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
39
- </section>
40
- {% endif %}
41
- {% endfor %}
42
- {% endfor %}
1
+ ---
2
+ layout: archive
3
+ ---
4
+
5
+ {{ content }}
6
+
7
+ {% assign tags_max = 0 %}
8
+ {% for tag in site.tags %}
9
+ {% if tag[1].size > tags_max %}
10
+ {% assign tags_max = tag[1].size %}
11
+ {% endif %}
12
+ {% endfor %}
13
+
14
+ <ul class="taxonomy__index">
15
+ {% for i in (1..tags_max) reversed %}
16
+ {% for tag in site.tags %}
17
+ {% if tag[1].size == i %}
18
+ <li>
19
+ <a href="#{{ tag[0] | slugify }}">
20
+ <strong>{{ tag[0] }}</strong> <span class="taxonomy__count">{{ i }}</span>
21
+ </a>
22
+ </li>
23
+ {% endif %}
24
+ {% endfor %}
25
+ {% endfor %}
26
+ </ul>
27
+
28
+ {% for i in (1..tags_max) reversed %}
29
+ {% for tag in site.tags %}
30
+ {% if tag[1].size == i %}
31
+ <section id="{{ tag[0] | slugify | downcase }}" class="taxonomy__section">
32
+ <h2 class="archive__subtitle">{{ tag[0] }}</h2>
33
+ <div class="entries-{{ page.entries_layout | default: 'list' }}">
34
+ {% for post in tag.last %}
35
+ {% include archive-single.html type=page.entries_layout %}
36
+ {% endfor %}
37
+ </div>
38
+ <a href="#page-title" class="back-to-top">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
39
+ </section>
40
+ {% endif %}
41
+ {% endfor %}
42
+ {% endfor %}
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Minimal Mistakes Jekyll Theme 4.12.0 by Michael Rose
2
+ * Minimal Mistakes Jekyll Theme 4.12.1 by Michael Rose
3
3
  * Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
4
4
  * Licensed under MIT (https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE.txt)
5
5
  */
@@ -1,91 +1,91 @@
1
- /* ==========================================================================
2
- FOOTER
3
- ========================================================================== */
4
-
5
- .page__footer {
6
- @include clearfix;
7
- float: left;
8
- margin-left: 0;
9
- margin-right: 0;
10
- width: 100%;
11
- clear: both;
12
- /* sticky footer fix start */
13
- position: absolute;
14
- bottom: 0;
15
- height: auto;
16
- /* sticky footer fix end */
17
- margin-top: 3em;
18
- color: $muted-text-color;
19
- -webkit-animation: $intro-transition;
20
- animation: $intro-transition;
21
- -webkit-animation-delay: 0.45s;
22
- animation-delay: 0.45s;
23
- background-color: $footer-background-color;
24
-
25
- footer {
26
- @include clearfix;
27
- margin-left: auto;
28
- margin-right: auto;
29
- margin-top: 2em;
30
- max-width: 100%;
31
- padding: 0 1em 2em;
32
-
33
- @include breakpoint($x-large) {
34
- max-width: $x-large;
35
- }
36
- }
37
-
38
- a {
39
- color: inherit;
40
- text-decoration: none;
41
-
42
- &:hover {
43
- text-decoration: underline;
44
- }
45
- }
46
-
47
- .fas,
48
- .fab,
49
- .far,
50
- .fal {
51
- color: $muted-text-color;
52
- }
53
- }
54
-
55
- .page__footer-copyright {
56
- font-family: $global-font-family;
57
- font-size: $type-size-7;
58
- }
59
-
60
- .page__footer-follow {
61
- ul {
62
- margin: 0;
63
- padding: 0;
64
- list-style-type: none;
65
- }
66
-
67
- li {
68
- display: inline-block;
69
- padding-top: 5px;
70
- padding-bottom: 5px;
71
- font-family: $sans-serif-narrow;
72
- font-size: $type-size-6;
73
- text-transform: uppercase;
74
- }
75
-
76
- li + li:before {
77
- content: "";
78
- padding-right: 5px;
79
- }
80
-
81
- a {
82
- padding-right: 10px;
83
- font-weight: bold;
84
- }
85
-
86
- .social-icons {
87
- a {
88
- white-space: nowrap;
89
- }
90
- }
91
- }
1
+ /* ==========================================================================
2
+ FOOTER
3
+ ========================================================================== */
4
+
5
+ .page__footer {
6
+ @include clearfix;
7
+ float: left;
8
+ margin-left: 0;
9
+ margin-right: 0;
10
+ width: 100%;
11
+ clear: both;
12
+ /* sticky footer fix start */
13
+ position: absolute;
14
+ bottom: 0;
15
+ height: auto;
16
+ /* sticky footer fix end */
17
+ margin-top: 3em;
18
+ color: $muted-text-color;
19
+ -webkit-animation: $intro-transition;
20
+ animation: $intro-transition;
21
+ -webkit-animation-delay: 0.45s;
22
+ animation-delay: 0.45s;
23
+ background-color: $footer-background-color;
24
+
25
+ footer {
26
+ @include clearfix;
27
+ margin-left: auto;
28
+ margin-right: auto;
29
+ margin-top: 2em;
30
+ max-width: 100%;
31
+ padding: 0 1em 2em;
32
+
33
+ @include breakpoint($x-large) {
34
+ max-width: $x-large;
35
+ }
36
+ }
37
+
38
+ a {
39
+ color: inherit;
40
+ text-decoration: none;
41
+
42
+ &:hover {
43
+ text-decoration: underline;
44
+ }
45
+ }
46
+
47
+ .fas,
48
+ .fab,
49
+ .far,
50
+ .fal {
51
+ color: $muted-text-color;
52
+ }
53
+ }
54
+
55
+ .page__footer-copyright {
56
+ font-family: $global-font-family;
57
+ font-size: $type-size-7;
58
+ }
59
+
60
+ .page__footer-follow {
61
+ ul {
62
+ margin: 0;
63
+ padding: 0;
64
+ list-style-type: none;
65
+ }
66
+
67
+ li {
68
+ display: inline-block;
69
+ padding-top: 5px;
70
+ padding-bottom: 5px;
71
+ font-family: $sans-serif-narrow;
72
+ font-size: $type-size-6;
73
+ text-transform: uppercase;
74
+ }
75
+
76
+ li + li:before {
77
+ content: "";
78
+ padding-right: 5px;
79
+ }
80
+
81
+ a {
82
+ padding-right: 10px;
83
+ font-weight: bold;
84
+ }
85
+
86
+ .social-icons {
87
+ a {
88
+ white-space: nowrap;
89
+ }
90
+ }
91
+ }
@@ -1,524 +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-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
- }
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
+ }