steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Color "skins" (#1242)

Browse Source 
* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close #1208
This commit is contained in:
Michael Rose
2017-09-12 12:01:43 -04:00
committed by GitHub
parent d67aa113c8
commit 93c4fbc4b9
86 changed files with 1395 additions and 985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_sass/minimal-mistakes/_archive.scss
View File

@ -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);
}

15
docs/_sass/minimal-mistakes/_base.scss
View File

@ -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;
}
}
}

127
docs/_sass/minimal-mistakes/_buttons.scss
View File

@ -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,8 +28,41 @@
margin-left: -0.5em; /* override for hidden text*/
}
/* fills width of parent container */
/* 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);
@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;
}
&:hover {
@include yiq-contrasted(mix(#000, $color, 20%));
}
&:visited {
@include yiq-contrasted($color);
}
}
}
/* fills width of parent container */
&--block {
display: block;
width: 100%;
@ -45,68 +72,7 @@
}
}
/* 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%);
}
}
/* success */
&--success {
background-color: $success-color;
&:hover {
background-color: mix(#000, $success-color, 20%);
}
}
/* danger */
&--danger {
background-color: $danger-color;
&:hover {
background-color: mix(#000, $danger-color, 20%);
}
}
/* 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;
}

7
docs/_sass/minimal-mistakes/_footer.scss
View File

@ -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;
}
}

16
docs/_sass/minimal-mistakes/_forms.scss
View File

@ -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;
}

39
docs/_sass/minimal-mistakes/_mixins.scss
View File

@ -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);
}

28
docs/_sass/minimal-mistakes/_navigation.scss
View File

@ -85,21 +85,22 @@
line-height: 1.5;
text-align: center;
text-decoration: none;
color: mix(#fff, $gray, 25%);
border: 1px solid $light-gray;
color: $muted-text-color;
border: 1px solid mix(#000, $border-color, 25%);
border-radius: 0;
&:hover {
color: $link-color-hover;
}
&.current {
&.current,
&.current.disabled {
color: #fff;
background: $primary-color;
}
&.disabled {
color: mix(#fff, $gray, 75%);
color: rgba($muted-text-color, 0.5);
pointer-events: none;
cursor: not-allowed;
}
@ -133,12 +134,12 @@
font-weight: bold;
text-align: center;
text-decoration: none;
color: $link-color;
border: 1px solid $light-gray;
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);
}
&:first-child {
@ -153,7 +154,7 @@
}
&.disabled {
color: mix(#fff, $gray, 75%);
color: rgba($muted-text-color, 0.5);
pointer-events: none;
cursor: not-allowed;
}
@ -262,7 +263,7 @@
padding: 5px;
border: 1px solid $border-color;
border-radius: $border-radius;
background: #fff;
background: $background-color;
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
&.hidden {
@ -301,7 +302,7 @@
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: #fff transparent;
border-color: $background-color transparent;
display: block;
z-index: 1;
}
@ -494,7 +495,7 @@
color: $gray;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #fff;
background-color: $background-color;
border: 1px solid $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
@ -518,15 +519,14 @@
a {
display: block;
padding: 0.5rem 1rem;
color: $gray;
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;
color: $text-color;
}
}

1
docs/_sass/minimal-mistakes/_notices.scss
View File

@ -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*/

9
docs/_sass/minimal-mistakes/_page.scss
View File

@ -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;

4
docs/_sass/minimal-mistakes/_sidebar.scss
View File

@ -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) {

4
docs/_sass/minimal-mistakes/_syntax.scss
View File

@ -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);
}
}

6
docs/_sass/minimal-mistakes/_tables.scss
View File

@ -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,

4
docs/_sass/minimal-mistakes/_utilities.scss
View File

@ -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,

171
docs/_sass/minimal-mistakes/_variables.scss
View File

@ -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;
$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;
$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%);
$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;
$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;

23
docs/_sass/minimal-mistakes/skins/_air.scss Normal file
View File

@ -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;
}

34
docs/_sass/minimal-mistakes/skins/_contrast.scss Normal file
View File

@ -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;
}

24
docs/_sass/minimal-mistakes/skins/_dark.scss Normal file
View File

@ -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;
}

5
docs/_sass/minimal-mistakes/skins/_default.scss Normal file
View File

@ -0,0 +1,5 @@
/* ==========================================================================
Default skin
========================================================================== */
// Intentionally left blank

15
docs/_sass/minimal-mistakes/skins/_dirt.scss Normal file
View File

@ -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;

23
docs/_sass/minimal-mistakes/skins/_mint.scss Normal file
View File

@ -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;
}

26
docs/_sass/minimal-mistakes/skins/_sunrise.scss Normal file
View File

@ -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;
}