M CHANGELOG.md => CHANGELOG.md +5 -1
@@ 4,6 4,10 @@
- Test strict Front Matter in `/test` site. [#1236](https://github.com/mmistakes/minimal-mistakes/pull/1236)
- Rename `gems` key to `plugins`. [#1239](https://github.com/mmistakes/minimal-mistakes/pull/1239)
+- Add [YIQ Color Contrast](https://github.com/easy-designs/yiq-color-contrast) mixin for determining lightness of a color.
+- DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
+- Add `btn--primary` button class. **Note:** elements that were previously using only a `.btn` class will now also need `.btn--primary` (eg. `<a class="btn btn--primary" href="#">my link</a>`).
+- Add `air`, `contrast`, `dark`, `dirt`, `mint`, and `sunrise` skin color options. [#1208](https://github.com/mmistakes/minimal-mistakes/issues/1208)
## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)
@@ 27,7 31,7 @@
- Reduce amount of blank pages when printing in Chrome. [#1196](https://github.com/mmistakes/minimal-mistakes/issues/1196)
- Remove `#disqus_thread` duplicate from `comments-providers/disqus.html` as it is already in `comments.html` include. [#1199](https://github.com/mmistakes/minimal-mistakes/issues/1199)
- Fix Liquid syntax errors in `tag-list.html` and `category-list.html` includes by removing parenthesis in `assign`s. [#1223](https://github.com/mmistakes/minimal-mistakes/issues/1223)
-- Fix Liquid syntax error: "Expected id but found open_square in `"{{page.[include.id] }}"`" in `gallery` and `feature_row` includes.
+- Fix Liquid syntax error: "Expected id but found open_square in `"{{ page.[include.id] }}"`" in `gallery` and `feature_row` includes.
- Fix Liquid syntax error: "Expected end_of_string but found pipe in `"name in __names | sort"`" in `group-by-array` include.
## [4.5.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.1)
M _config.yml => _config.yml +2 -0
@@ 5,6 5,8 @@
# For technical reasons, this file is *NOT* reloaded automatically when you use
# `jekyll serve`. If you change this file, please restart the server process.
+minimal_mistakes_skin : "default" # "air", "contrast", "dark", "dirt", "mint", "sunrise"
+
# Site Settings
locale : "en"
title : "Site Title"
M => +2 -2
@@ 84,7 84,7 @@
</p>
<!-- End comment form alert messaging -->
<fieldset>
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
</fieldset>
</form>
</div>
@@ 94,4 94,4 @@
{% when "custom" %}
<section id="custom-comments"></section>
{% endcase %}
</div>
</div>
\ No newline at end of file
M _layouts/single.html => _layouts/single.html +1 -1
@@ 35,7 35,7 @@ layout: default
<section class="page__content" itemprop="text">
{{ content }}
- {% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
+ {% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
</section>
<footer class="page__meta">
M _sass/minimal-mistakes/_archive.scss => _sass/minimal-mistakes/_archive.scss +2 -1
@@ 26,7 26,7 @@
margin: 1.414em 0 0;
padding-bottom: 0.5em;
font-size: $type-size-5;
- color: mix(#fff, $gray, 25%);
+ color: $muted-text-color;
border-bottom: 1px solid $border-color;
+ .list__item .archive__item-title {
@@ 72,6 72,7 @@
}
.archive__item:hover {
+
.archive__item-teaser {
box-shadow: 0 0 10px rgba(#000, 0.25);
}
M _sass/minimal-mistakes/_base.scss => _sass/minimal-mistakes/_base.scss +8 -7
@@ 118,8 118,13 @@ a {
&:hover,
&:active {
+ color: $link-color-hover;
outline: 0;
}
+
+ &:visited {
+ color: $link-color-visited;
+ }
}
/* code */
@@ 141,7 146,7 @@ td > code {
padding-bottom: 0.1rem;
font-size: $type-size-6;
background: $code-background-color;
- border: 1px solid $lighter-gray;
+ border: 1px solid $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
@@ 236,20 241,16 @@ figure {
figcaption {
margin-bottom: 0.5em;
- color: mix(#fff, $text-color, 25%);
+ color: $muted-text-color;
font-family: $caption-font-family;
font-size: $type-size-6;
a {
- color: inherit;
- text-decoration: none;
- border-bottom: 1px solid $light-gray;
-webkit-transition: $global-transition;
transition: $global-transition;
&:hover {
- color: #000;
- border-bottom-color: #000;
+ color: $link-color-hover;
}
}
}
M _sass/minimal-mistakes/_buttons.scss => _sass/minimal-mistakes/_buttons.scss +36 -91
@@ 7,25 7,19 @@
========================================================================== */
.btn {
- /* default button */
+ /* default */
display: inline-block;
margin-bottom: 0.25em;
padding: 0.5em 1em;
- color: #fff !important;
font-family: $sans-serif;
font-size: $type-size-6;
font-weight: bold;
text-align: center;
text-decoration: none;
- background-color: $primary-color;
- border: 0 !important;
+ border-width: 0;
border-radius: $border-radius;
cursor: pointer;
- &:hover {
- background-color: mix(white, #000, 20%);
- }
-
.icon {
margin-right: 0.5em;
}
@@ 34,79 28,51 @@
margin-left: -0.5em; /* override for hidden text*/
}
- /* fills width of parent container */
-
- &--block {
- display: block;
- width: 100%;
-
- + .btn--block {
- margin-top: 0.25em;
- }
- }
-
- /* for dark backgrounds */
-
- &--inverse {
- color: $gray !important;
- border: 1px solid $light-gray !important; /* override*/
- background-color: #fff;
-
- &:hover {
- color: #fff !important;
- border-color: $gray;
- }
- }
-
- /* light outline */
-
- &--light-outline {
- border: 1px solid #fff !important; /* override*/
- background-color: transparent;
- }
-
- /* information */
-
- &--info {
- background-color: $info-color;
-
- &:hover {
- background-color: mix(#000, $info-color, 20%);
- }
- }
-
- /* warning */
-
- &--warning {
- background-color: $warning-color;
-
- &:hover {
- background-color: mix(#000, $warning-color, 20%);
- }
- }
+ /* button colors */
+ $buttoncolors:
+ (primary, $primary-color),
+ (inverse, #fff),
+ (light-outline, transparent),
+ (success, $success-color),
+ (warning, $warning-color),
+ (danger, $danger-color),
+ (info, $info-color),
+ (facebook, $facebook-color),
+ (twitter, $twitter-color),
+ (google-plus, $google-plus-color),
+ (linkedin, $linkedin-color);
- /* success */
+ @each $buttoncolor, $color in $buttoncolors {
+ &--#{$buttoncolor} {
+ @include yiq-contrasted($color);
+ @if ($buttoncolor == inverse) {
+ border: 1px solid $border-color;
+ }
+ @if ($buttoncolor == light-outline) {
+ border: 1px solid #fff;
+ }
- &--success {
- background-color: $success-color;
+ &:hover {
+ @include yiq-contrasted(mix(#000, $color, 20%));
+ }
- &:hover {
- background-color: mix(#000, $success-color, 20%);
+ &:visited {
+ @include yiq-contrasted($color);
+ }
}
}
- /* danger */
-
- &--danger {
- background-color: $danger-color;
+ /* fills width of parent container */
+ &--block {
+ display: block;
+ width: 100%;
- &:hover {
- background-color: mix(#000, $danger-color, 20%);
+ + .btn--block {
+ margin-top: 0.25em;
}
}
/* disabled */
-
&--disabled {
pointer-events: none;
cursor: not-allowed;
@@ 115,38 81,17 @@
opacity: 0.65;
}
- /* social buttons */
-
- $social:
- (facebook, $facebook-color),
- (twitter, $twitter-color),
- (google-plus, $google-plus-color),
- (linkedin, $linkedin-color);
-
- @each $socialnetwork, $color in $social {
- &--#{$socialnetwork} {
- background-color: $color;
-
- &:hover {
- background-color: mix(#000, $color, 20%);
- }
- }
- }
-
/* extra large button */
-
&--x-large {
font-size: $type-size-4;
}
/* large button */
-
&--large {
font-size: $type-size-5;
}
/* small button */
-
&--small {
font-size: $type-size-7;
}
M => +3 -4
@@ 15,13 15,12 @@
height: auto;
/* sticky footer fix end */
margin-top: 3em;
color: mix(#fff, $gray, 25%);
color: $muted-text-color;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
background-color: $lighter-gray;
border-top: 1px solid $light-gray;
background-color: $footer-background-color;
footer {
@include clearfix;
@@ 46,7 45,7 @@
}
.fa {
color: mix(#fff, $gray, 25%);
color: $muted-text-color;
}
}
M _sass/minimal-mistakes/_forms.scss => _sass/minimal-mistakes/_forms.scss +7 -9
@@ 4,6 4,8 @@
form {
margin: 0 0 5px 0;
+ padding: 1em;
+ background-color: $form-background-color;
fieldset {
margin-bottom: 5px;
@@ 19,7 21,6 @@ form {
padding: 0;
color: $text-color;
border: 0;
- border-bottom: 1px solid mix(#fff, #000, 80%);
white-space: normal;
}
@@ 80,14 81,10 @@ select {
padding: 0.25em;
margin-bottom: 0.5em;
color: $text-color;
- background-color: #fff;
- border: 1px solid mix(#fff, #000, 80%);
+ background-color: $background-color;
+ border: $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
-
- &:hover {
- border-color: mix(#fff, $primary-color, 50%);
- }
}
.input-mini {
@@ 224,6 221,7 @@ textarea:focus {
border-color: $primary-color;
outline: 0;
outline: thin dotted \9;
+ box-shadow: inset 0 1px 3px rgba($text-color, 0.06), 0 0 5px rgba($primary-color, 0.7);
}
input[type="file"]:focus,
@@ 240,7 238,7 @@ select:focus {
.help-block,
.help-inline {
- color: $info-color;
+ color: $muted-text-color;
}
.help-block {
@@ 382,7 380,7 @@ select:focus {
color: #000;
border-width: 2px !important;
border-style: solid !important;
- border-color: lighten(#000,50);
+ border-color: $border-color;
border-radius: $border-radius;
}
M _sass/minimal-mistakes/_mixins.scss => _sass/minimal-mistakes/_mixins.scss +39 -0
@@ 50,4 50,43 @@
content: "";
display: table;
}
+}
+
+/*
+ Compass YIQ Color Contrast
+ https://github.com/easy-designs/yiq-color-contrast
+ ========================================================================== */
+
+@function yiq-is-light(
+ $color,
+ $threshold: $yiq-contrasted-threshold
+) {
+ $red: red($color);
+ $green: green($color);
+ $blue: blue($color);
+
+ $yiq: (($red*299)+($green*587)+($blue*114))/1000;
+
+ @if $yiq-debug { @debug $yiq, $threshold; }
+
+ @return if($yiq >= $threshold, true, false);
+}
+
+@function yiq-contrast-color(
+ $color,
+ $dark: $yiq-contrasted-dark-default,
+ $light: $yiq-contrasted-light-default,
+ $threshold: $yiq-contrasted-threshold
+) {
+ @return if(yiq-is-light($color, $threshold), $yiq-contrasted-dark-default, $yiq-contrasted-light-default);
+}
+
+@mixin yiq-contrasted(
+ $background-color,
+ $dark: $yiq-contrasted-dark-default,
+ $light: $yiq-contrasted-light-default,
+ $threshold: $yiq-contrasted-threshold
+) {
+ background-color: $background-color;
+ color: yiq-contrast-color($background-color, $dark, $light, $threshold);
}=
\ No newline at end of file
M _sass/minimal-mistakes/_navigation.scss => _sass/minimal-mistakes/_navigation.scss +426 -426
@@ 6,547 6,547 @@
Breadcrumb navigation links
========================================================================== */
-.breadcrumbs {
- @include clearfix;
- margin: 0 auto;
- max-width: 100%;
- padding-left: 2em;
- padding-right: 2em;
- font-family: $sans-serif;
- -webkit-animation: $intro-transition;
- animation: $intro-transition;
- -webkit-animation-delay: 0.30s;
- animation-delay: 0.30s;
-
- @include breakpoint($large) {
- padding-left: 1em;
- padding-right: 1em;
- }
-
- @include breakpoint($x-large) {
- max-width: $x-large;
- }
-
- ol {
- padding: 0;
- list-style: none;
- font-size: $type-size-6;
+ .breadcrumbs {
+ @include clearfix;
+ margin: 0 auto;
+ max-width: 100%;
+ padding-left: 2em;
+ padding-right: 2em;
+ font-family: $sans-serif;
+ -webkit-animation: $intro-transition;
+ animation: $intro-transition;
+ -webkit-animation-delay: 0.30s;
+ animation-delay: 0.30s;
@include breakpoint($large) {
- float: right;
- width: span(10 of 12);
+ padding-left: 1em;
+ padding-right: 1em;
}
@include breakpoint($x-large) {
- padding-left: gutter(0.5 of 12);
+ max-width: $x-large;
}
- }
- li {
- display: inline;
- }
-
- .current {
- font-weight: bold;
- }
-}
+ ol {
+ padding: 0;
+ list-style: none;
+ font-size: $type-size-6;
+ @include breakpoint($large) {
+ float: right;
+ width: span(10 of 12);
+ }
-/*
- Post pagination navigation links
- ========================================================================== */
+ @include breakpoint($x-large) {
+ padding-left: gutter(0.5 of 12);
+ }
+ }
-.pagination {
- @include clearfix();
- float: left;
- margin-top: 1em;
- padding-top: 1em;
- width: 100%;
+ li {
+ display: inline;
+ }
- ul {
- margin: 0;
- padding: 0;
- list-style-type: none;
- font-family: $sans-serif;
+ .current {
+ font-weight: bold;
+ }
}
- li {
- display: block;
+
+ /*
+ Post pagination navigation links
+ ========================================================================== */
+
+ .pagination {
+ @include clearfix();
float: left;
- margin-left: -1px;
+ margin-top: 1em;
+ padding-top: 1em;
+ width: 100%;
- a {
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ font-family: $sans-serif;
+ }
+
+ li {
display: block;
- margin-bottom: 0.25em;
- padding: 0.5em 1em;
+ float: left;
+ margin-left: -1px;
+
+ a {
+ display: block;
+ margin-bottom: 0.25em;
+ padding: 0.5em 1em;
+ font-family: $sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 1.5;
+ text-align: center;
+ text-decoration: none;
+ color: $muted-text-color;
+ border: 1px solid mix(#000, $border-color, 25%);
+ border-radius: 0;
+
+ &:hover {
+ color: $link-color-hover;
+ }
+
+ &.current,
+ &.current.disabled {
+ color: #fff;
+ background: $primary-color;
+ }
+
+ &.disabled {
+ color: rgba($muted-text-color, 0.5);
+ pointer-events: none;
+ cursor: not-allowed;
+ }
+ }
+
+ &:first-child {
+ margin-left: 0;
+
+ a {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ }
+ }
+
+ &:last-child {
+ a {
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+ }
+ }
+ }
+
+ /* next/previous buttons */
+ &--pager {
+ display: block;
+ padding: 1em 2em;
+ float: left;
+ width: 50%;
font-family: $sans-serif;
- font-size: 14px;
+ font-size: $type-size-5;
font-weight: bold;
- line-height: 1.5;
text-align: center;
text-decoration: none;
- color: mix(#fff, $gray, 25%);
- border: 1px solid $light-gray;
- border-radius: 0;
+ color: $muted-text-color;
+ border: 1px solid mix(#000, $border-color, 25%);
+ border-radius: $border-radius;
&:hover {
- color: $link-color-hover;
+ @include yiq-contrasted($muted-text-color);
}
- &.current {
- color: #fff;
- background: $primary-color;
+ &:first-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &:last-child {
+ margin-left: -1px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
&.disabled {
- color: mix(#fff, $gray, 75%);
+ color: rgba($muted-text-color, 0.5);
pointer-events: none;
cursor: not-allowed;
}
}
+ }
- &:first-child {
- margin-left: 0;
+ .page__content + .pagination,
+ .page__meta + .pagination,
+ .page__share + .pagination,
+ .page__comments + .pagination {
+ margin-top: 2em;
+ padding-top: 2em;
+ border-top: 1px solid $border-color;
+ }
- a {
- border-top-left-radius: $border-radius;
- border-bottom-left-radius: $border-radius;
- }
- }
- &:last-child {
- a {
- border-top-right-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
- }
- }
- }
+ /*
+ Priority plus navigation
+ ========================================================================== */
- /* next/previous buttons */
- &--pager {
- display: block;
- padding: 1em 2em;
- float: left;
- width: 50%;
- font-family: $sans-serif;
- font-size: $type-size-5;
- font-weight: bold;
- text-align: center;
- text-decoration: none;
- color: $link-color;
- border: 1px solid $light-gray;
- border-radius: $border-radius;
+ .greedy-nav {
+ position: relative;
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ background: $background-color;
- &:hover {
- color: $link-color-hover;
- }
+ a {
+ display: block;
+ margin: 0 1rem;
+ padding: 0.5rem 0;
+ color: $masthead-link-color;
+ text-decoration: none;
- &:first-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
+ &:hover {
+ color: $masthead-link-color-hover;
+ }
- &:last-child {
- margin-left: -1px;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
+ &.site-title {
+ margin-left: 0;
+ }
}
- &.disabled {
- color: mix(#fff, $gray, 75%);
- pointer-events: none;
- cursor: not-allowed;
+ button {
+ padding: 0 0.5rem;
+ align-self: stretch;
+ border: 0;
+ outline: none;
+ color: #fff;
+ background-color: $primary-color;
+ cursor: pointer;
}
- }
-}
-
-.page__content + .pagination,
-.page__meta + .pagination,
-.page__share + .pagination,
-.page__comments + .pagination {
- margin-top: 2em;
- padding-top: 2em;
- border-top: 1px solid $border-color;
-}
-
-
-/*
- Priority plus navigation
- ========================================================================== */
-.greedy-nav {
- position: relative;
- display: -webkit-box;
- display: flex;
- -webkit-box-align: center;
- align-items: center;
- background: $background-color;
-
- a {
- display: block;
- margin: 0 1rem;
- padding: 0.5rem 0;
- color: $masthead-link-color;
- text-decoration: none;
+ .visible-links {
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: end;
+ justify-content: flex-end;
+ -webkit-box-flex: 1;
+ flex: 1;
+ padding-right: 2rem;
+ overflow: hidden;
+
+ li {
+ -webkit-box-flex: 0;
+ flex: none;
+
+ &:last-child {
+ a {
+ margin-right: 0;
+ }
+ }
+ }
- &:hover {
- color: $masthead-link-color-hover;
- }
+ a {
+ position: relative;
+
+ &:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 4px;
+ background: $primary-color;
+ width: 100%;
+ -webkit-transition: $global-transition;
+ transition: $global-transition;
+ -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
+ transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
+ }
- &.site-title {
- margin-left: 0;
+ &:hover:before {
+ -webkit-transform: scaleX(1);
+ -ms-transform: scaleX(1);
+ transform: scaleX(1); /* reveal*/
+ }
+ }
}
- }
- button {
- padding: 0 0.5rem;
- align-self: stretch;
- border: 0;
- outline: none;
- color: #fff;
- background-color: $primary-color;
- cursor: pointer;
- }
+ .hidden-links {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin-top: 15px;
+ padding: 5px;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ background: $background-color;
+ box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
- .visible-links {
- display: -webkit-box;
- display: flex;
- -webkit-box-pack: end;
- justify-content: flex-end;
- -webkit-box-flex: 1;
- flex: 1;
- padding-right: 2rem;
- overflow: hidden;
+ &.hidden {
+ display: none;
+ }
- li {
- -webkit-box-flex: 0;
- flex: none;
+ a {
+ margin: 0;
+ padding: 10px 20px;
+ font-size: $type-size-5;
- &:last-child {
- a {
- margin-right: 0;
+ &:hover {
+ color: $masthead-link-color-hover;
+ background: $navicon-link-color-hover;
}
}
- }
-
- a {
- position: relative;
&:before {
content: "";
position: absolute;
- left: 0;
- bottom: 0;
- height: 4px;
- background: mix(#fff, $primary-color, 50%);
- width: 100%;
- -webkit-transition: $global-transition;
- transition: $global-transition;
- -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
- transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
+ top: -11px;
+ right: 10px;
+ width: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: $border-color transparent;
+ display: block;
+ z-index: 0;
}
- &:hover:before {
- -webkit-transform: scaleX(1);
- -ms-transform: scaleX(1);
- transform: scaleX(1); /* reveal*/
+ &:after {
+ content: "";
+ position: absolute;
+ top: -10px;
+ right: 10px;
+ width: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: $background-color transparent;
+ display: block;
+ z-index: 1;
}
- }
- }
- .hidden-links {
- position: absolute;
- top: 100%;
- right: 0;
- margin-top: 15px;
- padding: 5px;
- border: 1px solid $border-color;
- border-radius: $border-radius;
- background: #fff;
- box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
+ li {
+ display: block;
+ border-bottom: 1px solid $border-color;
- &.hidden {
- display: none;
- }
-
- a {
- margin: 0;
- padding: 10px 20px;
- font-size: $type-size-5;
-
- &:hover {
- color: $masthead-link-color-hover;
- background: $navicon-link-color-hover;
+ &:last-child {
+ border-bottom: none;
+ }
}
}
+ }
- &:before {
- content: "";
- position: absolute;
- top: -11px;
- right: 10px;
- width: 0;
- border-style: solid;
- border-width: 0 10px 10px;
- border-color: $border-color transparent;
- display: block;
- z-index: 0;
- }
- &:after {
- content: "";
- position: absolute;
- top: -10px;
- right: 10px;
- width: 0;
- border-style: solid;
- border-width: 0 10px 10px;
- border-color: #fff transparent;
- display: block;
- z-index: 1;
- }
+ /*
+ Navigation list
+ ========================================================================== */
- li {
- display: block;
- border-bottom: 1px solid $border-color;
+ .nav__list {
+ margin-bottom: 1.5em;
- &:last-child {
- border-bottom: none;
- }
+ input[type="checkbox"],
+ label {
+ display: none;
}
- }
-}
+ @include breakpoint(max-width ($large - 1px)) {
+
+ label {
+ position: relative;
+ display: inline-block;
+ padding: 0.5em 2.5em 0.5em 1em;
+ color: $gray;
+ font-size: $type-size-6;
+ font-weight: bold;
+ border: 1px solid $light-gray;
+ border-radius: $border-radius;
+ z-index: 20;
+ -webkit-transition: 0.2s ease-out;
+ transition: 0.2s ease-out;
+ cursor: pointer;
-/*
- Navigation list
- ========================================================================== */
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ right: 1em;
+ top: 1.25em;
+ width: 0.75em;
+ height: 0.125em;
+ line-height: 1;
+ background-color: $gray;
+ -webkit-transition: 0.2s ease-out;
+ transition: 0.2s ease-out;
+ }
-.nav__list {
- margin-bottom: 1.5em;
+ &:after {
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
- input[type="checkbox"],
- label {
- display: none;
- }
+ &:hover {
+ color: #fff;
+ border-color: $gray;
+ background-color: mix(white, #000, 20%);
- @include breakpoint(max-width ($large - 1px)) {
+ &:before,
+ &:after {
+ background-color: #fff;
+ }
+ }
+ }
- label {
- position: relative;
- display: inline-block;
- padding: 0.5em 2.5em 0.5em 1em;
- color: $gray;
- font-size: $type-size-6;
- font-weight: bold;
- border: 1px solid $light-gray;
- border-radius: $border-radius;
- z-index: 20;
- -webkit-transition: 0.2s ease-out;
- transition: 0.2s ease-out;
- cursor: pointer;
+ /* selected*/
+ input:checked + label {
+ color: white;
+ background-color: mix(white, #000, 20%);
- &:before,
- &:after {
- content: '';
- position: absolute;
- right: 1em;
- top: 1.25em;
- width: 0.75em;
- height: 0.125em;
- line-height: 1;
- background-color: $gray;
- -webkit-transition: 0.2s ease-out;
- transition: 0.2s ease-out;
+ &:before,
+ &:after {
+ background-color: #fff;
+ }
}
- &:after {
+ /* on hover show expand*/
+ label:hover:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
- &:hover {
- color: #fff;
- border-color: $gray;
- background-color: mix(white, #000, 20%);
+ input:checked + label:hover:after {
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
- &:before,
- &:after {
- background-color: #fff;
- }
+ ul {
+ margin-bottom: 1em;
}
- }
- /* selected*/
- input:checked + label {
- color: white;
- background-color: mix(white, #000, 20%);
+ a {
+ display: block;
+ padding: 0.25em 0;
+
+ @include breakpoint($large) {
+ padding-top: 0.125em;
+ padding-bottom: 0.125em;
+ }
- &:before,
- &:after {
- background-color: #fff;
+ &:hover {
+ text-decoration: underline;
+ }
}
}
+ }
- /* on hover show expand*/
- label:hover:after {
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
- }
+ .nav__list .nav__items {
+ margin: 0;
+ font-size: 1.25rem;
- input:checked + label:hover:after {
- -webkit-transform: rotate(0);
- -ms-transform: rotate(0);
- transform: rotate(0);
+ a {
+ color: inherit;
}
- ul {
- margin-bottom: 1em;
+ .active {
+ margin-left: -0.5em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ font-weight: bold;
}
- a {
- display: block;
- padding: 0.25em 0;
-
- @include breakpoint($large) {
- padding-top: 0.125em;
- padding-bottom: 0.125em;
- }
-
- &:hover {
- text-decoration: underline;
- }
+ @include breakpoint(max-width ($large - 1px)) {
+ position: relative;
+ max-height: 0;
+ opacity: 0%;
+ overflow: hidden;
+ z-index: 10;
+ -webkit-transition: 0.3s ease-in-out;
+ transition: 0.3s ease-in-out;
+ -webkit-transform: translate(0, 10%);
+ -ms-transform: translate(0, 10%);
+ transform: translate(0, 10%);
}
}
-}
-.nav__list .nav__items {
- margin: 0;
- font-size: 1.25rem;
-
- a {
- color: inherit;
+ @include breakpoint(max-width ($large - 1px)) {
+ .nav__list input:checked ~ .nav__items {
+ -webkit-transition: 0.5s ease-in-out;
+ transition: 0.5s ease-in-out;
+ max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
+ overflow: visible;
+ opacity: 1;
+ margin-top: 1em;
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
}
- .active {
- margin-left: -0.5em;
- padding-left: 0.5em;
- padding-right: 0.5em;
+ .nav__title {
+ margin: 0;
+ padding: 0.5rem 1rem;
+ font-family: $sans-serif-narrow;
+ font-size: $type-size-5;
font-weight: bold;
}
- @include breakpoint(max-width ($large - 1px)) {
- position: relative;
- max-height: 0;
- opacity: 0%;
- overflow: hidden;
- z-index: 10;
- -webkit-transition: 0.3s ease-in-out;
- transition: 0.3s ease-in-out;
- -webkit-transform: translate(0, 10%);
- -ms-transform: translate(0, 10%);
- transform: translate(0, 10%);
- }
-}
-
-@include breakpoint(max-width ($large - 1px)) {
- .nav__list input:checked ~ .nav__items {
- -webkit-transition: 0.5s ease-in-out;
- transition: 0.5s ease-in-out;
- max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
- overflow: visible;
- opacity: 1;
- margin-top: 1em;
- -webkit-transform: translate(0, 0);
- -ms-transform: translate(0, 0);
- transform: translate(0, 0);
+ .nav__sub-title {
+ display: block;
+ margin: 0.5rem 0;
+ padding: 0.5rem 0;
+ font-family: $sans-serif-narrow;
+ font-size: $type-size-6;
+ font-weight: bold;
+ text-transform: uppercase;
+ border-bottom: 1px solid $border-color;
}
-}
-
-.nav__title {
- margin: 0;
- padding: 0.5rem 1rem;
- font-family: $sans-serif-narrow;
- font-size: $type-size-5;
- font-weight: bold;
-}
-
-.nav__sub-title {
- display: block;
- margin: 0.5rem 0;
- padding: 0.5rem 0;
- font-family: $sans-serif-narrow;
- font-size: $type-size-6;
- font-weight: bold;
- text-transform: uppercase;
- border-bottom: 1px solid $border-color;
-}
-/*
- Table of contents navigation
- ========================================================================== */
+ /*
+ Table of contents navigation
+ ========================================================================== */
-.toc {
- font-family: $sans-serif-narrow;
- color: $gray;
- text-transform: uppercase;
- letter-spacing: 1px;
- background-color: #fff;
- border: 1px solid $border-color;
- border-radius: $border-radius;
- box-shadow: $box-shadow;
+ .toc {
+ font-family: $sans-serif-narrow;
+ color: $gray;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ background-color: $background-color;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ box-shadow: $box-shadow;
- .nav__title {
- color: #fff;
- font-size: $type-size-6;
- background: $primary-color;
- border-top-left-radius: $border-radius;
- border-top-right-radius: $border-radius;
+ .nav__title {
+ color: #fff;
+ font-size: $type-size-6;
+ background: $primary-color;
+ border-top-left-radius: $border-radius;
+ border-top-right-radius: $border-radius;
+ }
}
-}
-.toc__menu {
- margin: 0;
- padding: 0;
- width: 100%;
- list-style: none;
- font-size: 0.8rem;
+ .toc__menu {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ list-style: none;
+ font-size: 0.8rem;
- a {
- display: block;
- padding: 0.5rem 1rem;
- color: $gray;
- font-size: $type-size-7;
- font-weight: bold;
- line-height: 1.5;
- border-bottom: 1px solid $border-color;
+ a {
+ display: block;
+ padding: 0.5rem 1rem;
+ color: $muted-text-color;
+ font-size: $type-size-7;
+ font-weight: bold;
+ line-height: 1.5;
+ border-bottom: 1px solid $border-color;
- &:hover {
- color: #000;
- background: $lighter-gray;
+ &:hover {
+ color: $text-color;
+ }
}
- }
- > li:last-child {
- a {
- border-bottom: none;
+ > li:last-child {
+ a {
+ border-bottom: none;
+ }
}
- }
- li ul > li a {
- padding-left: 1.75rem;
- font-weight: normal;
- }
+ li ul > li a {
+ padding-left: 1.75rem;
+ font-weight: normal;
+ }
- /* hide sub sub links on small screens*/
- li > ul li {
- display: none;
+ /* hide sub sub links on small screens*/
+ li > ul li {
+ display: none;
- @include breakpoint($medium) {
- display: block;
+ @include breakpoint($medium) {
+ display: block;
+ }
}
}
-}
M _sass/minimal-mistakes/_notices.scss => _sass/minimal-mistakes/_notices.scss +1 -0
@@ 13,6 13,7 @@
@mixin notice($notice-color) {
margin: 2em 0 !important; /* override*/
padding: 1em;
+ color: $dark-gray;
font-family: $global-font-family;
font-size: $type-size-6 !important;
text-indent: initial; /* override*/
M _sass/minimal-mistakes/_page.scss => _sass/minimal-mistakes/_page.scss +3 -6
@@ 91,8 91,7 @@
}
}
- a {
- text-decoration: none;
+ a:not(.btn) {
&:hover {
text-decoration: underline;
@@ 250,7 249,7 @@
.page__meta {
margin-top: 2em;
- color: mix(#fff, $gray, 25%);
+ color: $muted-text-color;
font-family: $sans-serif;
font-size: $type-size-6;
@@ 290,7 289,7 @@
margin-bottom: 8px;
padding: 5px 10px;
text-decoration: none;
- border: 1px solid $light-gray;
+ border: 1px solid mix(#000, $border-color, 25%);
border-radius: $border-radius;
&:hover {
@@ 322,8 321,6 @@
}
.page__comments-form {
- padding: 1em;
- background: $lighter-gray;
-webkit-transition: $global-transition;
transition: $global-transition;
M => +2 -2
@@ 189,7 189,7 @@
list-style-type: none;
border: 1px solid $border-color;
border-radius: $border-radius;
background: #fff;
background: $background-color;
z-index: -1;
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
cursor: default;
@@ 234,7 234,7 @@
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: #fff transparent;
border-color: $background-color transparent;
z-index: 1;
@include breakpoint($large) {
M _sass/minimal-mistakes/_syntax.scss => _sass/minimal-mistakes/_syntax.scss +2 -2
@@ 19,7 19,7 @@ figure.highlight {
top: 0;
right: 0;
padding: 0.5em;
- background-color: $lighter-gray;
+ background-color: $border-color;
content: "\f121";
font-family: "fontawesome" !important;
line-height: 1;
@@ 49,7 49,7 @@ figure.highlight {
/* line numbers*/
&.gutter {
padding-right: 1em;
- color: $light-gray;
+ color: rgba($muted-text-color, 0.5);
}
}
M _sass/minimal-mistakes/_tables.scss => _sass/minimal-mistakes/_tables.scss +3 -3
@@ 15,8 15,8 @@ table {
}
thead {
- background-color: $lighter-gray;
- border-bottom: 2px solid $light-gray;
+ background-color: $border-color;
+ border-bottom: 2px solid mix(#000, $border-color, 25%);
}
th {
@@ 27,7 27,7 @@ th {
td {
padding: 0.5em;
- border-bottom: 1px solid $light-gray;
+ border-bottom: 1px solid mix(#000, $border-color, 25%);
}
tr,
M _sass/minimal-mistakes/_utilities.scss => _sass/minimal-mistakes/_utilities.scss +2 -2
@@ 57,7 57,7 @@ body:hover .visually-hidden button {
background: #fff;
z-index: 100000;
text-decoration: none;
- box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+ box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}
@@ 185,7 185,7 @@ body:hover .visually-hidden button {
.social-icons {
.fa {
- color: #000;
+ color: $text-color;
}
.fa-behance,
M _sass/minimal-mistakes/_variables.scss => _sass/minimal-mistakes/_variables.scss +91 -84
@@ 6,125 6,132 @@
Typography
========================================================================== */
-$doc-font-size : 16 !default;
+$doc-font-size : 16 !default;
/* paragraph indention */
-$paragraph-indent : false !default; // true, false (default)
-$indent-var : 1.3em !default;
+$paragraph-indent : false !default; // true, false (default)
+$indent-var : 1.3em !default;
/* system typefaces */
-$serif : Georgia, Times, serif !default;
-$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
-$monospace : Monaco, Consolas, "Lucida Console", monospace !default;
+$serif : Georgia, Times, serif !default;
+$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
+$monospace : Monaco, Consolas, "Lucida Console", monospace !default;
/* sans serif typefaces */
-$sans-serif-narrow : $sans-serif !default;
-$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
+$sans-serif-narrow : $sans-serif !default;
+$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
/* serif typefaces */
-$georgia : Georgia, serif !default;
-$times : Times, serif !default;
-$bodoni : "Bodoni MT", serif !default;
-$calisto : "Calisto MT", serif !default;
-$garamond : Garamond, serif !default;
+$georgia : Georgia, serif !default;
+$times : Times, serif !default;
+$bodoni : "Bodoni MT", serif !default;
+$calisto : "Calisto MT", serif !default;
+$garamond : Garamond, serif !default;
-$global-font-family : $sans-serif !default;
-$header-font-family : $sans-serif !default;
-$caption-font-family : $serif !default;
+$global-font-family : $sans-serif !default;
+$header-font-family : $sans-serif !default;
+$caption-font-family : $serif !default;
/* type scale */
-$type-size-1 : 2.441em !default; // ~39.056px
-$type-size-2 : 1.953em !default; // ~31.248px
-$type-size-3 : 1.563em !default; // ~25.008px
-$type-size-4 : 1.25em !default; // ~20px
-$type-size-5 : 1em !default; // ~16px
-$type-size-6 : 0.75em !default; // ~12px
-$type-size-7 : 0.6875em !default; // ~11px
-$type-size-8 : 0.625em !default; // ~10px
+$type-size-1 : 2.441em !default; // ~39.056px
+$type-size-2 : 1.953em !default; // ~31.248px
+$type-size-3 : 1.563em !default; // ~25.008px
+$type-size-4 : 1.25em !default; // ~20px
+$type-size-5 : 1em !default; // ~16px
+$type-size-6 : 0.75em !default; // ~12px
+$type-size-7 : 0.6875em !default; // ~11px
+$type-size-8 : 0.625em !default; // ~10px
/*
Colors
========================================================================== */
-$gray : #7a8288 !default;
-$dark-gray : mix(#000, $gray, 40%) !default;
-$darker-gray : mix(#000, $gray, 60%) !default;
-$light-gray : mix(#fff, $gray, 50%) !default;
-$lighter-gray : mix(#fff, $gray, 90%) !default;
-
-$body-color : #fff !default;
-$background-color : #fff !default;
-$code-background-color : #fafafa !default;
-$code-background-color-dark : $light-gray !default;
-$text-color : $dark-gray !default;
-$border-color : $lighter-gray !default;
-
-$primary-color : #7a8288 !default;
-$success-color : #62c462 !default;
-$warning-color : #f89406 !default;
-$danger-color : #ee5f5b !default;
-$info-color : #52adc8 !default;
+$gray : #7a8288 !default;
+$dark-gray : mix(#000, $gray, 40%) !default;
+$darker-gray : mix(#000, $gray, 60%) !default;
+$light-gray : mix(#fff, $gray, 50%) !default;
+$lighter-gray : mix(#fff, $gray, 90%) !default;
+
+$background-color : #fff !default;
+$code-background-color : #fafafa !default;
+$code-background-color-dark : $light-gray !default;
+$text-color : $dark-gray !default;
+$muted-text-color : mix(#fff, $text-color, 35%) !default;
+$border-color : $lighter-gray !default;
+$form-background-color : $lighter-gray !default;
+$footer-background-color : $lighter-gray !default;
+
+$primary-color : #7a8288 !default;
+$success-color : #62c462 !default;
+$warning-color : #f89406 !default;
+$danger-color : #ee5f5b !default;
+$info-color : #52adc8 !default;
+
+/* YIQ color contrast */
+$yiq-contrasted-dark-default : $dark-gray !default;
+$yiq-contrasted-light-default : #fff !default;
+$yiq-contrasted-threshold : 175 !default;
+$yiq-debug : false !default;
/* brands */
-$behance-color : #1769FF !default;
-$bitbucket-color : #205081 !default;
-$dribbble-color : #ea4c89 !default;
-$facebook-color : #3b5998 !default;
-$flickr-color : #ff0084 !default;
-$foursquare-color : #0072b1 !default;
-$github-color : #171516 !default;
-$google-plus-color : #dd4b39 !default;
-$instagram-color : #517fa4 !default;
-$lastfm-color : #d51007 !default;
-$linkedin-color : #007bb6 !default;
-$pinterest-color : #cb2027 !default;
-$rss-color : #fa9b39 !default;
-$soundcloud-color : #ff3300 !default;
-$stackoverflow-color : #fe7a15 !default;
-$tumblr-color : #32506d !default;
-$twitter-color : #55acee !default;
-$vimeo-color : #1ab7ea !default;
-$vine-color : #00bf8f !default;
-$youtube-color : #bb0000 !default;
-$xing-color : #006567 !default;
-
+$behance-color : #1769FF !default;
+$bitbucket-color : #205081 !default;
+$dribbble-color : #ea4c89 !default;
+$facebook-color : #3b5998 !default;
+$flickr-color : #ff0084 !default;
+$foursquare-color : #0072b1 !default;
+$github-color : #171516 !default;
+$google-plus-color : #dd4b39 !default;
+$instagram-color : #517fa4 !default;
+$lastfm-color : #d51007 !default;
+$linkedin-color : #007bb6 !default;
+$pinterest-color : #cb2027 !default;
+$rss-color : #fa9b39 !default;
+$soundcloud-color : #ff3300 !default;
+$stackoverflow-color : #fe7a15 !default;
+$tumblr-color : #32506d !default;
+$twitter-color : #55acee !default;
+$vimeo-color : #1ab7ea !default;
+$vine-color : #00bf8f !default;
+$youtube-color : #bb0000 !default;
+$xing-color : #006567 !default;
/* links */
-$link-color : $info-color !default;
-$link-color-hover : mix(#000, $link-color, 25%) !default;
-$link-color-visited : mix(#fff, $link-color, 25%) !default;
-$masthead-link-color : $primary-color !default;
-$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
-$navicon-link-color-hover : mix(#fff, $primary-color, 75%) !default;
+$link-color : $info-color !default;
+$link-color-hover : mix(#000, $link-color, 25%) !default;
+$link-color-visited : mix(#fff, $link-color, 25%) !default;
+$masthead-link-color : $primary-color !default;
+$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
+$navicon-link-color-hover : mix(#fff, $primary-color, 75%) !default;
/*
Breakpoints
========================================================================== */
-$small : 600px !default;
-$medium : 768px !default;
-$medium-wide : 900px !default;
-$large : 1024px !default;
-$x-large : 1280px !default;
+$small : 600px !default;
+$medium : 768px !default;
+$medium-wide : 900px !default;
+$large : 1024px !default;
+$x-large : 1280px !default;
/*
Grid
========================================================================== */
-$right-sidebar-width-narrow : 200px !default;
-$right-sidebar-width : 300px !default;
-$right-sidebar-width-wide : 400px !default;
+$right-sidebar-width-narrow : 200px !default;
+$right-sidebar-width : 300px !default;
+$right-sidebar-width-wide : 400px !default;
/*
Other
========================================================================== */
-$border-radius : 4px !default;
-$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
-$navicon-width : 1.5rem !default;
-$navicon-height : 0.25rem !default;
-$global-transition : all 0.2s ease-in-out !default;
-$intro-transition : intro 0.3s both !default;
+$border-radius : 4px !default;
+$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
+$navicon-width : 1.5rem !default;
+$navicon-height : 0.25rem !default;
+$global-transition : all 0.2s ease-in-out !default;
+$intro-transition : intro 0.3s both !default;
A _sass/minimal-mistakes/skins/_air.scss => _sass/minimal-mistakes/skins/_air.scss +23 -0
@@ 0,0 1,23 @@
+/* ==========================================================================
+ Air skin
+ ========================================================================== */
+
+/* Colors */
+$background-color: #eeeeee !default;
+$text-color: #222831 !default;
+$muted-text-color: #393e46 !default;
+$primary-color: #0092ca !default;
+$border-color: mix(#fff, #393e46, 75%) !default;
+$footer-background-color: $primary-color !default;
+$link-color: #393e46 !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: $text-color !default;
+$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+
+.page__footer {
+ color: #fff !important; // override
+}
+
+.page__footer-follow .social-icons .fa {
+ color: inherit;
+}<
\ No newline at end of file
A _sass/minimal-mistakes/skins/_contrast.scss => _sass/minimal-mistakes/skins/_contrast.scss +34 -0
@@ 0,0 1,34 @@
+/* ==========================================================================
+ Contrast skin
+ ========================================================================== */
+
+/* Colors */
+$text-color: #000 !default;
+$muted-text-color: $text-color !default;
+$primary-color: #ff0000 !default;
+$border-color: mix(#fff, $text-color, 75%) !default;
+$footer-background-color: #000 !default;
+$link-color: #0000ff !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: $text-color !default;
+$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+
+.page__content {
+
+ .notice,
+ .notice--primary,
+ .notice--info,
+ .notice--warning,
+ .notice--success,
+ .notice--danger {
+ color: $text-color;
+ }
+}
+
+.page__footer {
+ color: #fff !important; // override
+}
+
+.page__footer-follow .social-icons .fa {
+ color: inherit;
+}<
\ No newline at end of file
A _sass/minimal-mistakes/skins/_dark.scss => _sass/minimal-mistakes/skins/_dark.scss +24 -0
@@ 0,0 1,24 @@
+/* ==========================================================================
+ Dark skin
+ ========================================================================== */
+
+/* Colors */
+$background-color: #252a34 !default;
+$text-color: #eaeaea !default;
+$primary-color: #00adb5 !default;
+$border-color: mix(#fff, $background-color, 20%) !default;
+$code-background-color: mix(#000, $background-color, 15%) !default;
+$code-background-color-dark: mix(#000, $background-color, 20%) !default;
+$form-background-color: mix(#000, $background-color, 15%) !default;
+$footer-background-color: mix(#000, $background-color, 30%) !default;
+$link-color: mix($primary-color, $text-color, 40%) !default;
+$link-color-hover: mix(#fff, $link-color, 25%) !default;
+$link-color-visited: mix(#000, $link-color, 25%) !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+
+.author__urls.social-icons .fa,
+.page__footer-follow .social-icons .fa {
+ color: inherit;
+}<
\ No newline at end of file
A _sass/minimal-mistakes/skins/_default.scss => _sass/minimal-mistakes/skins/_default.scss +5 -0
@@ 0,0 1,5 @@
+/* ==========================================================================
+ Default skin
+ ========================================================================== */
+
+// Intentionally left blank
A _sass/minimal-mistakes/skins/_dirt.scss => _sass/minimal-mistakes/skins/_dirt.scss +15 -0
@@ 0,0 1,15 @@
+/* ==========================================================================
+ Dirt skin
+ ========================================================================== */
+
+/* Colors */
+$background-color: #f3f3f3 !default;
+$text-color: #343434 !default;
+$muted-text-color: #8e8b82 !default;
+$primary-color: #343434 !default;
+$border-color: #e9dcbe !default;
+$footer-background-color: #e9dcbe !default;
+$link-color: #343434 !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: $text-color !default;
+$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;<
\ No newline at end of file
A _sass/minimal-mistakes/skins/_mint.scss => _sass/minimal-mistakes/skins/_mint.scss +23 -0
@@ 0,0 1,23 @@
+/* ==========================================================================
+ Mint skin
+ ========================================================================== */
+
+/* Colors */
+$background-color: #f3f6f6 !default;
+$text-color: #40514e !default;
+$muted-text-color: #40514e !default;
+$primary-color: #11999e !default;
+$border-color: mix(#fff, #40514e, 75%) !default;
+$footer-background-color: #30e3ca !default;
+$link-color: #11999e !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: $text-color !default;
+$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+
+.page__footer {
+ color: #fff !important; // override
+}
+
+.page__footer-follow .social-icons .fa {
+ color: inherit;
+}<
\ No newline at end of file
A _sass/minimal-mistakes/skins/_sunrise.scss => _sass/minimal-mistakes/skins/_sunrise.scss +26 -0
@@ 0,0 1,26 @@
+/* ==========================================================================
+ Sunrise skin
+ ========================================================================== */
+
+/* Colors */
+$dark-gray: #0e2431 !default;
+$background-color: #e8d5b7 !default;
+$text-color: #000 !default;
+$muted-text-color: $dark-gray !default;
+$primary-color: #fc3a52 !default;
+$border-color: mix(#000, $background-color, 20%) !default;
+$code-background-color: mix(#fff, $background-color, 20%) !default;
+$code-background-color-dark: mix(#000, $background-color, 10%) !default;
+$form-background-color: mix(#fff, $background-color, 15%) !default;
+$footer-background-color: #f9b248 !default;
+$link-color: mix(#000, $primary-color, 10%) !default;
+$link-color-hover: mix(#fff, $link-color, 25%) !default;
+$link-color-visited: mix(#000, $link-color, 25%) !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+
+.author__urls.social-icons .fa,
+.page__footer-follow .social-icons .fa {
+ color: inherit;
+}<
\ No newline at end of file
M assets/css/main.scss => assets/css/main.scss +2 -1
@@ 4,4 4,5 @@
@charset "utf-8";
-@import "minimal-mistakes";>
\ No newline at end of file
+@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
+@import "minimal-mistakes"; // main partials<
\ No newline at end of file