minimal-mistakes-jekyll 4.2.1 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/_sass/_masthead.scss CHANGED
@@ -14,6 +14,10 @@
14
14
  &__inner-wrap {
15
15
  @include container;
16
16
  @include clearfix;
17
+ display: -webkit-box;
18
+ display: flex;
19
+ -webkit-box-pack: justify;
20
+ justify-content: space-between;
17
21
  padding: 1em 1em 1em;
18
22
  font-family: $sans-serif-narrow;
19
23
 
@@ -31,7 +35,27 @@
31
35
  }
32
36
  }
33
37
 
38
+ .site-title {
39
+ display: -webkit-box;
40
+ display: flex;
41
+ padding: 0.5rem 0;
42
+ align-self: stretch;
43
+ -webkit-box-align: center;
44
+ align-items: center;
45
+ font-weight: bold;
46
+ z-index: 20;
47
+ }
48
+
34
49
  .masthead__menu {
50
+ width: 100%;
51
+
52
+ .site-nav {
53
+ margin-left: 0;
54
+
55
+ @include breakpoint($small) {
56
+ float: right;
57
+ }
58
+ }
35
59
 
36
60
  ul {
37
61
  margin: 0;
data/_sass/_mixins.scss CHANGED
@@ -1,53 +1,53 @@
1
- /* ==========================================================================
2
- MIXINS
3
- ========================================================================== */
4
-
5
- %tab-focus {
6
- /* Default*/
7
- outline: thin dotted $warning-color;
8
- /* Webkit*/
9
- outline: 5px auto $warning-color;
10
- outline-offset: -2px;
11
- }
12
-
13
- /*
14
- em function
15
- ========================================================================== */
16
-
17
- @function em($target, $context: $doc-font-size) {
18
- @return ($target / $context) * 1em;
19
- }
20
-
21
-
22
- /*
23
- Bourbon clearfix
24
- ========================================================================== */
25
-
26
- /*
27
- * Provides an easy way to include a clearfix for containing floats.
28
- * link http://cssmojo.com/latest_new_clearfix_so_far/
29
- *
30
- * example scss - Usage
31
- *
32
- * .element {
33
- * @include clearfix;
34
- * }
35
- *
36
- * example css - CSS Output
37
- *
38
- * .element::after {
39
- * clear: both;
40
- * content: "";
41
- * display: table;
42
- * }
43
- */
44
-
45
- @mixin clearfix {
46
- clear: both;
47
-
48
- &::after {
49
- clear: both;
50
- content: "";
51
- display: table;
52
- }
1
+ /* ==========================================================================
2
+ MIXINS
3
+ ========================================================================== */
4
+
5
+ %tab-focus {
6
+ /* Default*/
7
+ outline: thin dotted $warning-color;
8
+ /* Webkit*/
9
+ outline: 5px auto $warning-color;
10
+ outline-offset: -2px;
11
+ }
12
+
13
+ /*
14
+ em function
15
+ ========================================================================== */
16
+
17
+ @function em($target, $context: $doc-font-size) {
18
+ @return ($target / $context) * 1em;
19
+ }
20
+
21
+
22
+ /*
23
+ Bourbon clearfix
24
+ ========================================================================== */
25
+
26
+ /*
27
+ * Provides an easy way to include a clearfix for containing floats.
28
+ * link http://cssmojo.com/latest_new_clearfix_so_far/
29
+ *
30
+ * example scss - Usage
31
+ *
32
+ * .element {
33
+ * @include clearfix;
34
+ * }
35
+ *
36
+ * example css - CSS Output
37
+ *
38
+ * .element::after {
39
+ * clear: both;
40
+ * content: "";
41
+ * display: table;
42
+ * }
43
+ */
44
+
45
+ @mixin clearfix {
46
+ clear: both;
47
+
48
+ &::after {
49
+ clear: both;
50
+ content: "";
51
+ display: table;
52
+ }
53
53
  }
@@ -175,7 +175,10 @@
175
175
 
176
176
  .greedy-nav {
177
177
  position: relative;
178
- min-width: 250px;
178
+ display: -webkit-box;
179
+ display: flex;
180
+ -webkit-box-align: center;
181
+ align-items: center;
179
182
  background: $background-color;
180
183
 
181
184
  a {
@@ -188,34 +191,35 @@
188
191
  &:hover {
189
192
  color: $masthead-link-color-hover;
190
193
  }
194
+
195
+ &.site-title {
196
+ margin-left: 0;
197
+ }
191
198
  }
192
199
 
193
200
  button {
194
- position: absolute;
195
- height: 100%;
196
- right: 0;
197
201
  padding: 0 0.5rem;
202
+ align-self: stretch;
198
203
  border: 0;
199
204
  outline: none;
200
- background-color: $primary-color;
201
205
  color: #fff;
206
+ background-color: $primary-color;
202
207
  cursor: pointer;
203
208
  }
204
209
 
205
210
  .visible-links {
206
- display: table;
211
+ display: -webkit-box;
212
+ display: flex;
213
+ -webkit-box-pack: end;
214
+ justify-content: flex-end;
215
+ -webkit-box-flex: 1;
216
+ flex: 1;
217
+ padding-right: 2rem;
218
+ overflow: hidden;
207
219
 
208
220
  li {
209
- display: table-cell;
210
- vertical-align: middle;
211
-
212
- &:first-child {
213
- font-weight: bold;
214
-
215
- a {
216
- margin-left: 0;
217
- }
218
- }
221
+ -webkit-box-flex: 0;
222
+ flex: none;
219
223
 
220
224
  &:last-child {
221
225
  a {
@@ -238,14 +242,13 @@
238
242
  -webkit-transition: $global-transition;
239
243
  transition: $global-transition;
240
244
  -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
241
- -ms-transform: scaleX(0) translate3d(0, 0 , 0);
242
245
  transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
243
246
  }
244
247
 
245
248
  &:hover:before {
246
249
  -webkit-transform: scaleX(1);
247
- -ms-transform: scaleX(1);
248
- transform: scaleX(1); /* reveal*/
250
+ -ms-transform: scaleX(1);
251
+ transform: scaleX(1); /* reveal*/
249
252
  }
250
253
  }
251
254
  }
@@ -259,7 +262,11 @@
259
262
  border: 1px solid $border-color;
260
263
  border-radius: $border-radius;
261
264
  background: #fff;
262
- box-shadow: 0 0 10px rgba(#000, 0.25);
265
+ box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
266
+
267
+ &.hidden {
268
+ display: none;
269
+ }
263
270
 
264
271
  a {
265
272
  margin: 0;
@@ -348,11 +355,14 @@
348
355
  height: 0.125em;
349
356
  line-height: 1;
350
357
  background-color: $gray;
358
+ -webkit-transition: 0.2s ease-out;
351
359
  transition: 0.2s ease-out;
352
360
  }
353
361
 
354
362
  &:after {
355
- transform: rotate(90deg);
363
+ -webkit-transform: rotate(90deg);
364
+ -ms-transform: rotate(90deg);
365
+ transform: rotate(90deg);
356
366
  }
357
367
 
358
368
  &:hover {
@@ -378,13 +388,17 @@
378
388
  }
379
389
  }
380
390
 
381
- // on hover show expand
391
+ /* on hover show expand*/
382
392
  label:hover:after {
383
- transform: rotate(90deg);
393
+ -webkit-transform: rotate(90deg);
394
+ -ms-transform: rotate(90deg);
395
+ transform: rotate(90deg);
384
396
  }
385
397
 
386
398
  input:checked + label:hover:after {
387
- transform: rotate(0);
399
+ -webkit-transform: rotate(0);
400
+ -ms-transform: rotate(0);
401
+ transform: rotate(0);
388
402
  }
389
403
 
390
404
  ul {
@@ -438,8 +452,8 @@
438
452
  -webkit-transition: 0.3s ease-in-out;
439
453
  transition: 0.3s ease-in-out;
440
454
  -webkit-transform: translate(0, 10%);
441
- -ms-transform: translate(0, 10%);
442
- transform: translate(0, 10%);
455
+ -ms-transform: translate(0, 10%);
456
+ transform: translate(0, 10%);
443
457
  }
444
458
  }
445
459
 
@@ -447,13 +461,13 @@
447
461
  .nav__list input:checked ~ .nav__items {
448
462
  -webkit-transition: 0.5s ease-in-out;
449
463
  transition: 0.5s ease-in-out;
450
- max-height: 9999px; // exaggerate max-height to accommodate tall lists
464
+ max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
451
465
  overflow: visible;
452
466
  opacity: 1;
453
467
  margin-top: 1em;
454
468
  -webkit-transform: translate(0, 0);
455
- -ms-transform: translate(0, 0);
456
- transform: translate(0, 0);
469
+ -ms-transform: translate(0, 0);
470
+ transform: translate(0, 0);
457
471
  }
458
472
  }
459
473
 
data/_sass/_notices.scss CHANGED
@@ -1,99 +1,99 @@
1
- /* ==========================================================================
2
- NOTICE TEXT BLOCKS
3
- ========================================================================== */
4
-
5
- /**
6
- * Default Kramdown usage (no indents!):
7
- * <div class="notice" markdown="1">
8
- * #### Headline for the Notice
9
- * Text for the notice
10
- * </div>
11
- */
12
-
13
- @mixin notice($notice-color) {
14
- margin: 2em 0 !important; /* override*/
15
- padding: 1em;
16
- font-family: $global-font-family;
17
- font-size: $type-size-6 !important;
18
- text-indent: initial; /* override*/
19
- background-color: mix(#fff, $notice-color, 90%);
20
- border-radius: $border-radius;
21
- box-shadow: 0 1px 1px rgba($notice-color, 0.25);
22
-
23
- h4 {
24
- margin-top: 0 !important; /* override*/
25
- margin-bottom: 0.75em;
26
- }
27
-
28
- @at-root .page__content #{&} h4 {
29
- /* using at-root to override .page-content h4 font size*/
30
- margin-bottom: 0;
31
- font-size: 1em;
32
- }
33
-
34
- p {
35
- &:last-child {
36
- margin-bottom: 0 !important; /* override*/
37
- }
38
- }
39
-
40
- h4 + p {
41
- /* remove space above paragraphs that appear directly after notice headline*/
42
- margin-top: 0;
43
- padding-top: 0;
44
- }
45
-
46
- a {
47
- color: $notice-color;
48
-
49
- &:hover {
50
- color: mix(#000, $notice-color, 40%);
51
- }
52
- }
53
-
54
- code {
55
- background-color: mix(#fff, $notice-color, 95%)
56
- }
57
-
58
- ul {
59
- &:last-child {
60
- margin-bottom: 0; /* override*/
61
- }
62
- }
63
- }
64
-
65
- /* Default notice */
66
-
67
- .notice {
68
- @include notice($light-gray);
69
- }
70
-
71
- /* Primary notice */
72
-
73
- .notice--primary {
74
- @include notice($primary-color);
75
- }
76
-
77
- /* Info notice */
78
-
79
- .notice--info {
80
- @include notice($info-color);
81
- }
82
-
83
- /* Warning notice */
84
-
85
- .notice--warning {
86
- @include notice($warning-color);
87
- }
88
-
89
- /* Success notice */
90
-
91
- .notice--success {
92
- @include notice($success-color);
93
- }
94
-
95
- /* Danger notice */
96
-
97
- .notice--danger {
98
- @include notice($danger-color);
1
+ /* ==========================================================================
2
+ NOTICE TEXT BLOCKS
3
+ ========================================================================== */
4
+
5
+ /**
6
+ * Default Kramdown usage (no indents!):
7
+ * <div class="notice" markdown="1">
8
+ * #### Headline for the Notice
9
+ * Text for the notice
10
+ * </div>
11
+ */
12
+
13
+ @mixin notice($notice-color) {
14
+ margin: 2em 0 !important; /* override*/
15
+ padding: 1em;
16
+ font-family: $global-font-family;
17
+ font-size: $type-size-6 !important;
18
+ text-indent: initial; /* override*/
19
+ background-color: mix(#fff, $notice-color, 90%);
20
+ border-radius: $border-radius;
21
+ box-shadow: 0 1px 1px rgba($notice-color, 0.25);
22
+
23
+ h4 {
24
+ margin-top: 0 !important; /* override*/
25
+ margin-bottom: 0.75em;
26
+ }
27
+
28
+ @at-root .page__content #{&} h4 {
29
+ /* using at-root to override .page-content h4 font size*/
30
+ margin-bottom: 0;
31
+ font-size: 1em;
32
+ }
33
+
34
+ p {
35
+ &:last-child {
36
+ margin-bottom: 0 !important; /* override*/
37
+ }
38
+ }
39
+
40
+ h4 + p {
41
+ /* remove space above paragraphs that appear directly after notice headline*/
42
+ margin-top: 0;
43
+ padding-top: 0;
44
+ }
45
+
46
+ a {
47
+ color: $notice-color;
48
+
49
+ &:hover {
50
+ color: mix(#000, $notice-color, 40%);
51
+ }
52
+ }
53
+
54
+ code {
55
+ background-color: mix(#fff, $notice-color, 95%)
56
+ }
57
+
58
+ ul {
59
+ &:last-child {
60
+ margin-bottom: 0; /* override*/
61
+ }
62
+ }
63
+ }
64
+
65
+ /* Default notice */
66
+
67
+ .notice {
68
+ @include notice($light-gray);
69
+ }
70
+
71
+ /* Primary notice */
72
+
73
+ .notice--primary {
74
+ @include notice($primary-color);
75
+ }
76
+
77
+ /* Info notice */
78
+
79
+ .notice--info {
80
+ @include notice($info-color);
81
+ }
82
+
83
+ /* Warning notice */
84
+
85
+ .notice--warning {
86
+ @include notice($warning-color);
87
+ }
88
+
89
+ /* Success notice */
90
+
91
+ .notice--success {
92
+ @include notice($success-color);
93
+ }
94
+
95
+ /* Danger notice */
96
+
97
+ .notice--danger {
98
+ @include notice($danger-color);
99
99
  }