~xdavidwu/xdavidwu.link: move most colors to a individual file

16 files changed, 688 insertions(+), 406 deletions(-)

M _sass/minimal-mistakes.scss
M _sass/minimal-mistakes/_archive.scss
M _sass/minimal-mistakes/_base.scss
M _sass/minimal-mistakes/_buttons.scss
A _sass/minimal-mistakes/_colors.scss
M _sass/minimal-mistakes/_footer.scss
M _sass/minimal-mistakes/_masthead.scss
M _sass/minimal-mistakes/_navigation.scss
M _sass/minimal-mistakes/_noscript.scss
M _sass/minimal-mistakes/_page.scss
M _sass/minimal-mistakes/_reset.scss
M _sass/minimal-mistakes/_search.scss
M _sass/minimal-mistakes/_sidebar.scss
M _sass/minimal-mistakes/_tables.scss
M _sass/minimal-mistakes/_utilities.scss
M assets/css/main.scss

M _sass/minimal-mistakes.scss => _sass/minimal-mistakes.scss +2 -0

@@ 40,3 40,5 @@
 @import "minimal-mistakes/print";
 
 @import "minimal-mistakes/noscript";
+
+@import "minimal-mistakes/colors";

M _sass/minimal-mistakes/_archive.scss => _sass/minimal-mistakes/_archive.scss +4 -2

@@ 33,7 33,8 @@
 .archive__subtitle {
   margin: 0.75rem 0;
   padding-bottom: 0.5em;
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 
   + .list__item .archive__item-title {
     margin-top: 0.5em;


@@ 237,7 238,8 @@
 .feature__wrapper {
   @include clearfix();
   margin-bottom: 2em;
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 
   .archive__item-title {
     margin-bottom: 0;

M _sass/minimal-mistakes/_base.scss => _sass/minimal-mistakes/_base.scss +9 -18

@@ 7,13 7,11 @@ html {
   position: relative;
   min-height: 100%;
   scroll-behavior: smooth;
-  scrollbar-color: $primary-color rgba(0, 0, 0, 0);
 }
 
 body {
   margin: 0;
   padding: 0;
-  color: $text-color;
   line-height: 1.5;
   font-family: $sans-serif;
 


@@ 71,7 69,8 @@ p {
 u,
 ins {
   text-decoration: none;
-  border-bottom: 1px solid $text-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
   a {
     color: inherit;
   }


@@ 102,7 101,8 @@ abbr[title],
 abbr[data-original-title] {
   text-decoration: none;
   cursor: help;
-  border-bottom: 1px dotted $text-color;
+  border-bottom-width: 1px;
+  border-bottom-style: dotted;
 }
 
 /* blockquotes */


@@ 112,7 112,8 @@ blockquote {
   padding-left: 1em;
   padding-right: 1em;
   font-style: italic;
-  border-left: 0.25em solid $primary-color;
+  border-left-width: 0.25em;
+  border-left-style: solid;
 
   cite {
     font-style: italic;


@@ 131,19 132,14 @@ a {
     @extend %tab-focus;
   }
 
-  &:visited {
-    color: $link-color-visited;
-  }
-
   &:hover {
-    color: $link-color-hover;
     outline: 0;
   }
 
   &:link, &:visited {
     text-decoration: none;
   }
-  
+
   &:hover, &:active {
     text-decoration: underline;
   }


@@ 167,7 163,6 @@ figcaption > code,
 td > code {
   padding: 0.1em 0.25em;
   font-size: 0.8em;
-  background: $code-background-color;
   border-radius: $border-radius;
 }
 


@@ 177,7 172,8 @@ hr {
   display: block;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 /* lists */


@@ 252,15 248,10 @@ figure {
 
 figcaption {
   margin-bottom: 0.5em;
-  color: $muted-text-color;
   font-size: $type-size-6;
 
   a {
     transition: $global-transition;
-
-    &:hover {
-      color: $link-color-hover;
-    }
   }
 }

M _sass/minimal-mistakes/_buttons.scss => _sass/minimal-mistakes/_buttons.scss +0 -29

@@ 26,35 26,6 @@
     margin-left: -0.5em; /* override for hidden text*/
   }
 
-  /* 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),
-  (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;
-      }
-
-      &:not(label):hover {
-        @include yiq-contrasted(mix(#000, $color, 20%));
-      }
-    }
-  }
-
   /* fills width of parent container */
   &--block {
     display: block;

A _sass/minimal-mistakes/_colors.scss => _sass/minimal-mistakes/_colors.scss +603 -0

@@ 0,0 1,603 @@
+html {
+  scrollbar-color: $primary-color rgba(0, 0, 0, 0);
+  background: $background-color;
+}
+
+body {
+  color: $text-color;
+}
+
+::selection {
+  color: $background-color;
+  background: $masthead-link-color-hover;
+}
+
+a {
+  color: $link-color;
+}
+
+.archive__subtitle, .feature__wrapper, .masthead {
+  border-bottom-color: $border-color;
+}
+
+u, ins, abbr[title], abbr[data-original-title] {
+  border-bottom-color: $text-color;
+}
+
+blockquote {
+  border-left-color: $primary-color;
+}
+
+a {
+  &:visited {
+    color: $link-color-visited;
+  }
+
+  &:hover {
+    color: $link-color-hover;
+  }
+}
+
+p > code,
+a > code,
+li > code,
+figcaption > code,
+td > code {
+  background: $code-background-color;
+}
+
+hr {
+  border-top-color: $border-color;
+}
+
+figcaption {
+  color: $muted-text-color;
+  a:hover {
+    color: $link-color-hover;
+  }
+}
+
+.btn {
+  $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),
+  (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;
+      }
+
+      &:not(label):hover {
+        @include yiq-contrasted(mix(#000, $color, 20%));
+      }
+    }
+  }
+}
+
+.page__footer {
+  color: $muted-text-color;
+  background: $footer-background-color;
+
+  a {
+    color: inherit;
+  }
+}
+
+.masthead {
+  background: $background-color;
+}
+
+.pagination {
+  li {
+    a {
+      color: $muted-text-color;
+      border-color: mix(#000, $border-color, 25%);
+
+      &:hover {
+        color: $link-color-hover;
+      }
+
+      &.current,
+      &.current.disabled {
+        color: #fff;
+        background: $primary-color;
+      }
+
+      &.disabled {
+        color: rgba($muted-text-color, 0.5);
+      }
+    }
+  }
+
+  &--pager {
+    color: $pager-text-color;
+    background: $primary-color;
+    border-color: $background-color;
+
+    &:visited {
+      color: $pager-text-color;
+    }
+
+    &:hover {
+      background: $primary-color-raised;
+    }
+
+    &.disabled {
+      color: $pager-text-color-disabled;
+      background: $primary-color-disabled;
+    }
+  }
+}
+
+.page__content + .pagination,
+.page__meta + .pagination,
+.page__share + .pagination,
+.page__comments + .pagination {
+  border-top-color: $border-color;
+}
+
+.greedy-nav {
+  background: $background-color;
+
+  a {
+    color: $masthead-link-color;
+
+    &:hover {
+      color: $masthead-link-color-hover;
+    }
+  }
+
+  &__toggle {
+    background: transparent;
+  }
+
+  .hidden-links {
+    border-color: $border-color;
+    background: $background-color;
+
+    a:hover {
+      color: $masthead-link-color-hover;
+      background: $navicon-link-color-hover;
+    }
+
+    &:before {
+      border-color: $border-color transparent;
+    }
+
+    &:after {
+      border-color: $border-color transparent;
+    }
+
+    li {
+      border-bottom-color: $border-color;
+    }
+  }
+}
+
+.nav__list {
+  @include breakpoint(max-width $large - 1px) {
+    label {
+      color: $gray;
+      border-color: $light-gray;
+    }
+
+    &:before,
+    &:after {
+      background: $gray;
+    }
+
+    &:hover {
+      color: #fff;
+      border-color: $gray;
+      background: mix(white, #000, 20%);
+
+      &:before,
+      &:after {
+        background: #fff;
+      }
+    }
+
+    input:checked + label {
+      color: white;
+      background: mix(white, #000, 20%);
+
+      &:before,
+      &:after {
+        background: #fff;
+      }
+    }
+  }
+}
+
+.nav__list .nav__items {
+  a {
+    color: inherit;
+  }
+}
+
+.nav__sub-title {
+  border-bottom-color: $border-color;
+}
+
+.toc {
+  color: $gray;
+  background: $background-color;
+  border-color: $border-color;
+
+  .nav__title {
+    color: #fff;
+    background: $primary-color;
+  }
+
+  .active a { // scroll spy
+    @include yiq-contrasted($active-color);
+  }
+}
+
+.toc__menu {
+  a {
+    color: $muted-text-color;
+    border-bottom-color: $border-color;
+
+    &:hover {
+      color: $text-color;
+    }
+  }
+}
+
+#follow-button {
+  &:checked + label {
+    background-color: $primary-color-disabled;
+  }
+  &:hover + label {
+    background-color: $primary-color-raised;
+  }
+}
+
+.page__content {
+  h2 {
+    border-bottom-color: $border-color;
+  }
+}
+
+.page__hero {
+  &--overlay {
+    a {
+      color: #fff;
+    }
+
+    .page__title,
+    .page__meta,
+    .page__lead,
+    .btn {
+      color: #fff;
+      text-shadow: 1px 1px 4px rgba(#000, 0.5);
+    }
+  }
+}
+
+.page__hero-caption {
+  color: #fff;
+  background: #000;
+
+  a {
+    color: #fff;
+  }
+}
+
+.page__share {
+  border-top-color: $border-color;
+}
+
+.page__meta {
+  color: $muted-text-color;
+
+  a {
+    color: inherit;
+  }
+}
+
+.page__taxonomy-item {
+  border-color: mix(#000, $border-color, 25%);
+
+  &:hover {
+    color: $link-color-hover;
+  }
+}
+
+.taxonomy__section {
+  &:not(:last-child) {
+    border-bottom-color: $border-color;
+  }
+}
+
+.taxonomy__count, .taxonomy__title {
+  color: $muted-text-color
+}
+
+.taxonomy__index {
+  a {
+    color: inherit;
+    border-bottom-color: $border-color;
+  }
+}
+
+.back-to-top {
+  color: $muted-text-color;
+}
+
+.page__comments-title, .page__related {
+  border-top-color: $border-color;
+}
+
+.page__related {
+  a {
+    color: inherit;
+  }
+}
+
+.search__toggle {
+  color: $primary-color;
+  background: transparent;
+
+  &:hover {
+    color: $primary-color-raised;
+  }
+}
+
+.search-content {
+  &__form {
+    background: transparent;
+  }
+
+  .search-input {
+    background: transparent;
+    color: $text-color;
+  }
+}
+
+.archive__item-title .ais-Highlight {
+  color: $primary-color;
+}
+
+.archive__item-excerpt .ais-Highlight {
+  color: $primary-color;
+}
+
+.author__avatar {
+  img {
+    @include breakpoint($large) {
+      border-color: $border-color;
+    }
+  }
+}
+
+.author__content {
+  a {
+    color: inherit;
+  }
+}
+
+.author__urls {
+  border-color: $border-color;
+  background: $background-color;
+
+  @include breakpoint($large) {
+    background: transparent;
+  }
+
+  &:before, &:after {
+    border-color: $border-color transparent;
+  }
+
+  a {
+    color: inherit;
+  }
+}
+
+thead {
+  background: $border-color;
+  border-bottom-color: mix(#000, $border-color, 25%);
+}
+
+td {
+  border-bottom-color: mix(#000, $border-color, 25%);
+}
+
+.social-icons {
+  .fas,
+  .fab,
+  .far,
+  .fal {
+    color: $text-color;
+  }
+/*
+  .fa-behance,
+  .fa-behance-square {
+    color: $behance-color;
+  }
+
+  .fa-bitbucket {
+    color: $bitbucket-color;
+  }
+
+  .fa-dribbble,
+  .fa-dribble-square {
+    color: $dribbble-color;
+  }
+
+  .fa-facebook,
+  .fa-facebook-square,
+  .fa-facebook-f {
+    color: $facebook-color;
+  }
+
+  .fa-flickr {
+    color: $flickr-color;
+  }
+
+  .fa-foursquare {
+    color: $foursquare-color;
+  }
+
+  .fa-github,
+  .fa-github-alt,
+  .fa-github-square {
+    color: $github-color;
+  }
+
+  .fa-gitlab {
+    color: $gitlab-color;
+  }
+
+  .fa-instagram {
+    color: $instagram-color;
+  }
+
+  .fa-keybase {
+    color: $keybase-color;
+  }
+
+  .fa-lastfm,
+  .fa-lastfm-square {
+    color: $lastfm-color;
+  }
+
+  .fa-linkedin,
+  .fa-linkedin-in {
+    color: $linkedin-color;
+  }
+
+  .fa-mastodon,
+  .fa-mastodon-square {
+    color: $mastodon-color;
+  }
+
+  .fa-pinterest,
+  .fa-pinterest-p,
+  .fa-pinterest-square {
+    color: $pinterest-color;
+  }
+
+  .fa-reddit {
+    color: $reddit-color;
+  }
+
+  .fa-rss,
+  .fa-rss-square {
+    color: $rss-color;
+  }
+
+  .fa-soundcloud {
+    color: $soundcloud-color;
+  }
+
+  .fa-stack-exchange,
+  .fa-stack-overflow {
+    color: $stackoverflow-color;
+  }
+
+  .fa-tumblr,
+  .fa-tumblr-square {
+    color: $tumblr-color;
+  }
+
+  .fa-twitter,
+  .fa-twitter-square {
+    color: $twitter-color;
+  }
+
+  .fa-vimeo,
+  .fa-vimeo-square,
+  .fa-vimeo-v {
+    color: $vimeo-color;
+  }
+
+  .fa-vine {
+    color: $vine-color;
+  }
+
+  .fa-youtube {
+    color: $youtube-color;
+  }
+
+  .fa-xing,
+  .fa-xing-square {
+    color: $xing-color;
+  }*/
+}
+
+.navicon {
+  background: $primary-color;
+  &:before, &:after {
+    background: $primary-color;
+  }
+}
+
+.close .navicon {
+  background: transparent;
+}
+
+.greedy-nav__toggle {
+  &:before {
+    background: $background-color;
+  }
+}
+
+.greedy-nav__toggle:hover {
+  .navicon,
+  .navicon:before,
+  .navicon:after {
+    background: mix(#000, $primary-color, 25%);
+  }
+
+  &.close {
+    .navicon {
+      background: transparent;
+    }
+  }
+}
+
+.well {
+  background: #f5f5f5;
+  border-color: #e3e3e3;
+}
+
+.show-modal {
+  &:before {
+    background: rgba(255, 255, 255, 0.85);
+  }
+}
+
+.modal {
+  background: #fff;
+  border-color: $border-color;
+  &__actions {
+    border-top-color: $border-color;
+  }
+}
+
+.footnote, .footnotes {
+  color: mix(#fff, $gray, 25%);
+}
+
+a.reversefootnote {
+  color: $gray;
+}
+
+.required {
+  color: $danger-color;
+}

M _sass/minimal-mistakes/_footer.scss => _sass/minimal-mistakes/_footer.scss +0 -6

@@ 8,10 8,8 @@
   margin-left: 0;
   margin-right: 0;
   width: 100%;
-  color: $muted-text-color;
   animation: $intro-transition;
   animation-delay: 0.45s;
-  background-color: $footer-background-color;
 
   footer {
     @include clearfix;


@@ 25,10 23,6 @@
       max-width: $x-large;
     }
   }
-
-  a {
-    color: inherit;
-  }
 }
 
 .page__footer-copyright {

M _sass/minimal-mistakes/_masthead.scss => _sass/minimal-mistakes/_masthead.scss +2 -2

@@ 3,12 3,12 @@
    ========================================================================== */
 
 .masthead {
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
   animation: $intro-transition;
   animation-delay: 0.15s;
   z-index: 20;
 	position: sticky;
-	background: $background-color;
 	top: 0;
 
   &__inner-wrap {

M _sass/minimal-mistakes/_navigation.scss => _sass/minimal-mistakes/_navigation.scss +17 -88

@@ 75,22 75,11 @@
       line-height: 1.5;
       text-align: center;
       text-decoration: none;
-      color: $muted-text-color;
-      border: 1px solid mix(#000, $border-color, 25%);
+      border-width: 1px;
+      border-style: solid;
       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;
       }


@@ 124,17 113,11 @@
     text-align: center;
     text-decoration: none;
     border-radius: $border-radius;
-    color: $pager-text-color;
-    background-color: $primary-color;
-    border: 1px solid $background-color;
-    transition: background-color 0.2s ease-in-out;
-
-    &:visited {
-      color: $pager-text-color;
-    }
+    border-width: 1px;
+    border-style: solid;
+    transition: 0.2s ease-in-out;
 
     &:hover {
-      background-color: $primary-color-raised;
       text-decoration: none;
     }
 


@@ 150,10 133,8 @@
     }
 
     &.disabled {
-      color: $pager-text-color-disabled;
       pointer-events: none;
       cursor: not-allowed;
-      background-color: $primary-color-disabled;
     }
   }
 }


@@ 164,7 145,8 @@
 .page__comments + .pagination {
   margin-top: 2em;
   padding-top: 2em;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 /*


@@ 176,18 158,12 @@
   display: flex;
   align-items: center;
   min-height: $nav-height;
-  background: $background-color;
 
   a {
     display: block;
     margin: 0 1rem;
-    color: $masthead-link-color;
     text-decoration: none;
 
-    &:hover {
-      color: $masthead-link-color-hover;
-    }
-
     &.site-logo {
       margin-left: 0;
       margin-right: 0.5rem;


@@ 203,7 179,6 @@
     height: $nav-toggle-height;
     border: 0;
     outline: none;
-    background-color: transparent;
     cursor: pointer;
   }
 


@@ 228,9 203,7 @@
     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);
 
     &.hidden {


@@ 241,11 214,6 @@
       margin: 0;
       padding: 10px 20px;
       font-size: $type-size-5;
-
-      &:hover {
-        color: $masthead-link-color-hover;
-        background: $navicon-link-color-hover;
-      }
     }
 
     &:before {


@@ 256,7 224,6 @@
       width: 0;
       border-style: solid;
       border-width: 0 10px 10px;
-      border-color: $border-color transparent;
       display: block;
       z-index: 0;
     }


@@ 269,14 236,14 @@
       width: 0;
       border-style: solid;
       border-width: 0 10px 10px;
-      border-color: $background-color transparent;
       display: block;
       z-index: 1;
     }
 
     li {
       display: block;
-      border-bottom: 1px solid $border-color;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
 
       &:last-child {
         border-bottom: none;


@@ 302,10 269,10 @@
       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-width: 1px;
+      border-style: solid;
       border-radius: $border-radius;
       z-index: 20;
       transition: 0.2s ease-out;


@@ 320,35 287,12 @@
         width: 0.75em;
         height: 0.125em;
         line-height: 1;
-        background-color: $gray;
         transition: 0.2s ease-out;
       }
 
       &:after {
         transform: rotate(90deg);
       }
-
-      &:hover {
-        color: #fff;
-        border-color: $gray;
-        background-color: mix(white, #000, 20%);
-
-        &:before,
-        &:after {
-          background-color: #fff;
-        }
-      }
-    }
-
-    /* selected*/
-    input:checked + label {
-      color: white;
-      background-color: mix(white, #000, 20%);
-
-      &:before,
-      &:after {
-        background-color: #fff;
-      }
     }
 
     /* on hover show expand*/


@@ 384,10 328,6 @@
   margin: 0;
   font-size: 1.25rem;
 
-  a {
-    color: inherit;
-  }
-
   .active {
     margin-left: -0.5em;
     padding-left: 0.5em;


@@ 431,7 371,8 @@
   font-size: $type-size-6;
   font-weight: bold;
   text-transform: uppercase;
-  border-bottom: 1px solid $border-color;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 }
 
 /*


@@ 439,24 380,16 @@
      ========================================================================== */
 
 .toc {
-  color: $gray;
-  background-color: $background-color;
-  border: 1px solid $border-color;
+  border-width: 1px;
+  border-style: solid;
   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;
   }
-
-  // Scrollspy marks toc items as .active when they are in focus
-  .active a {
-    @include yiq-contrasted($active-color);
-  }
 }
 
 .toc__menu {


@@ 473,14 406,10 @@
   a {
     display: block;
     padding: 0.25rem 0.75rem;
-    color: $muted-text-color;
     font-weight: bold;
     line-height: 1.5;
-    border-bottom: 1px solid $border-color;
-
-    &:hover {
-      color: $text-color;
-    }
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 
   li ul > li a {

M _sass/minimal-mistakes/_noscript.scss => _sass/minimal-mistakes/_noscript.scss +0 -6

@@ 15,10 15,4 @@
 
 #follow-button {
   display: none;
-  &:checked + label {
-    background-color: $primary-color-disabled;
-  }
-  &:hover + label {
-    background-color: $primary-color-raised;
-  }
 }

M _sass/minimal-mistakes/_page.scss => _sass/minimal-mistakes/_page.scss +27 -49

@@ 67,7 67,8 @@ body {
 .page__content {
   h2 {
     padding-bottom: 0.5em;
-    border-bottom: 1px solid $border-color;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 
   h1, h2, h3, h4, h5, h6 {


@@ 152,10 153,6 @@ body {
     animation: $intro-transition;
     animation-delay: 0.25s;
 
-    a {
-      color: #fff;
-    }
-
     .wrapper {
       padding-left: 1em;
       padding-right: 1em;


@@ 165,14 162,6 @@ body {
       }
     }
 
-    .page__title,
-    .page__meta,
-    .page__lead,
-    .btn {
-      color: #fff;
-      text-shadow: 1px 1px 4px rgba(#000, 0.5);
-    }
-
     .page__lead {
       max-width: $medium;
     }


@@ 198,9 187,7 @@ body {
   right: 0;
   margin: 0 auto;
   padding: 2px 5px;
-  color: #fff;
   font-size: $type-size-7;
-  background: #000;
   text-align: right;
   z-index: 5;
   opacity: 0.5;


@@ 211,7 198,6 @@ body {
   }
 
   a {
-    color: #fff;
     text-decoration: none;
   }
 }


@@ 223,7 209,8 @@ body {
 .page__share {
   margin-top: 2em;
   padding-top: 1em;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 
   @include breakpoint(max-width $small) {
     .btn span {


@@ 249,16 236,11 @@ body {
 
 .page__meta {
   margin-top: 2em;
-  color: $muted-text-color;
   font-size: $type-size-6;
 
   p {
     margin: 0;
   }
-
-  a {
-    color: inherit;
-  }
 }
 
 .page__meta-title {


@@ 293,12 275,12 @@ body {
   margin-bottom: 8px;
   padding: 4px 8px;
   text-decoration: none;
-  border: 1px solid mix(#000, $border-color, 25%);
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
 
   &:hover {
     text-decoration: none;
-    color: $link-color-hover;
   }
 }
 


@@ 307,7 289,8 @@ body {
   padding-bottom: 1em;
 
   &:not(:last-child) {
-    border-bottom: solid 1px $border-color;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 
   .archive__item-title {


@@ 326,11 309,6 @@ body {
 
 .taxonomy__title {
   margin-bottom: 0.5em;
-  color: $muted-text-color;
-}
-
-.taxonomy__count {
-  color: $muted-text-color;
 }
 
 .taxonomy__index {


@@ 350,16 328,15 @@ body {
     display: flex;
     padding: 0.25em 0;
     justify-content: space-between;
-    color: inherit;
     text-decoration: none;
-    border-bottom: 1px solid $border-color;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 }
 
 .back-to-top {
   display: block;
   clear: both;
-  color: $muted-text-color;
   font-size: 0.6em;
   text-transform: uppercase;
   text-align: right;


@@ 377,13 354,14 @@ body {
 .page__comments-title {
   padding-top: 2rem;
   font-size: $type-size-6;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 @if $comments-provider == staticman or $comments-provider == staticman_v2 {
   .page__comments-form {
     transition: $global-transition;
-  
+
     &.disabled {
       input,
       button,


@@ 397,32 375,32 @@ body {
       }
     }
   }
-  
+
   .comment {
     @include clearfix();
     margin: 1em 0;
-  
+
     &:not(:last-child) {
       border-bottom: 1px solid $border-color;
     }
   }
-  
+
   .comment__avatar-wrapper {
     float: left;
     width: 60px;
     height: 60px;
-  
+
     @include breakpoint($large) {
       width: 100px;
       height: 100px;
     }
   }
-  
+
   .comment__avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-  
+
     @include breakpoint($large) {
       width: 80px;
       height: 80px;


@@ 430,28 408,28 @@ body {
       border: 1px solid $border-color;
     }
   }
-  
+
   .comment__content-wrapper {
     float: right;
     width: calc(100% - 60px);
-  
+
     @include breakpoint($large) {
       width: calc(100% - 100px);
     }
   }
-  
+
   .comment__author {
     margin: 0;
-  
+
     a {
       text-decoration: none;
     }
   }
-  
+
   .comment__date {
     @extend .page__meta;
     margin: 0;
-  
+
     a {
       text-decoration: none;
     }


@@ 465,10 443,10 @@ body {
   @include clearfix();
   margin-top: 2em;
   padding-top: 1em;
-  border-top: 1px solid $border-color;
+  border-top-width: 1px;
+  border-top-style: solid;
 
   a {
-    color: inherit;
     text-decoration: none;
   }
 }

M _sass/minimal-mistakes/_reset.scss => _sass/minimal-mistakes/_reset.scss +0 -12

@@ 7,7 7,6 @@
 html {
   /* apply a natural box layout model to all elements */
   box-sizing: border-box;
-  background-color: $background-color;
   font-size: 16px;
 
   @include breakpoint($medium) {


@@ 28,13 27,6 @@ html {
 
 body { margin: 0; }
 
-/* Selected elements */
-
-::selection {
-  color: $background-color;
-  background: $masthead-link-color-hover;
-}
-
 /* Display HTML5 elements in IE6-9 and FF3 */
 
 article,


@@ 65,10 57,6 @@ audio:not([controls]) {
   display: none;
 }
 
-a {
-  color: $link-color;
-}
-
 /* Apply focus state */
 
 a:focus {

M _sass/minimal-mistakes/_search.scss => _sass/minimal-mistakes/_search.scss +0 -15

@@ 14,14 14,8 @@
   height: $nav-toggle-height;
   border: 0;
   outline: none;
-  color: $primary-color;
-  background-color: transparent;
   cursor: pointer;
   transition: 0.2s;
-
-  &:hover {
-    color: $primary-color-raised;
-  }
 }
 
 .search-icon {


@@ 41,11 35,6 @@
     @include breakpoint($x-large) {
       max-width: $max-width;
     }
-
-  }
-
-  &__form {
-    background-color: transparent;
   }
 
   .search-input {


@@ 55,9 44,7 @@
     border: none;
     outline: none;
     box-shadow: none;
-    background-color: transparent;
     font-size: $type-size-3;
-    color: $text-color;
 
     @include breakpoint($large) {
       font-size: $type-size-2;


@@ 106,13 93,11 @@
 }
 
 .archive__item-title .ais-Highlight {
-  color: $primary-color;
   font-style: normal;
   text-decoration: underline;
 }
 
 .archive__item-excerpt .ais-Highlight {
-  color: $primary-color;
   font-style: normal;
   font-weight: bold;
 }

M _sass/minimal-mistakes/_sidebar.scss => _sass/minimal-mistakes/_sidebar.scss +4 -8

@@ 126,7 126,8 @@
 
     @include breakpoint($large) {
       padding: 5px;
-      border: 1px solid $border-color;
+      border-width: 1px;
+      border-style: solid;
     }
   }
 }


@@ 146,7 147,6 @@
   }
 
   a {
-    color: inherit;
     text-decoration: none;
   }
 }


@@ 230,9 230,9 @@
   margin-top: 16px;
   padding: 8px;
   list-style-type: none;
-  border: 1px solid $border-color;
+  border-width: 1px;
+  border-style: solid;
   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);
   cursor: default;
 


@@ 246,7 246,6 @@
     margin: 0;
     padding: 0;
     border: 0;
-    background: transparent;
     box-shadow: none;
   }
 


@@ 259,7 258,6 @@
     width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
-    border-color: $border-color transparent;
     z-index: 0;
 
     @include breakpoint($large) {


@@ 276,7 274,6 @@
     width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
-    border-color: $background-color transparent;
     z-index: 1;
 
     @include breakpoint($large) {


@@ 292,7 289,6 @@
     display: block;
     padding-right: 4px;
     padding-top: 2px;
-    color: inherit;
     font-size: $type-size-5;
     text-decoration: none;

M _sass/minimal-mistakes/_tables.scss => _sass/minimal-mistakes/_tables.scss +4 -3

@@ 16,8 16,8 @@ table {
 }
 
 thead {
-  background-color: $border-color;
-  border-bottom: 2px solid mix(#000, $border-color, 25%);
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
 }
 
 th {


@@ 28,7 28,8 @@ th {
 
 td {
   padding: 0.5em;
-  border-bottom: 1px solid mix(#000, $border-color, 25%);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 }
 
 tr,

M _sass/minimal-mistakes/_utilities.scss => _sass/minimal-mistakes/_utilities.scss +15 -167

@@ 200,131 200,6 @@ body:hover .visually-hidden button {
   vertical-align: middle;
 }
 
-/* social icons*/
-
-.social-icons {
-  .fas,
-  .fab,
-  .far,
-  .fal {
-    color: $text-color;
-  }
-/*
-  .fa-behance,
-  .fa-behance-square {
-    color: $behance-color;
-  }
-
-  .fa-bitbucket {
-    color: $bitbucket-color;
-  }
-
-  .fa-dribbble,
-  .fa-dribble-square {
-    color: $dribbble-color;
-  }
-
-  .fa-facebook,
-  .fa-facebook-square,
-  .fa-facebook-f {
-    color: $facebook-color;
-  }
-
-  .fa-flickr {
-    color: $flickr-color;
-  }
-
-  .fa-foursquare {
-    color: $foursquare-color;
-  }
-
-  .fa-github,
-  .fa-github-alt,
-  .fa-github-square {
-    color: $github-color;
-  }
-
-  .fa-gitlab {
-    color: $gitlab-color;
-  }
-
-  .fa-instagram {
-    color: $instagram-color;
-  }
-
-  .fa-keybase {
-    color: $keybase-color;
-  }
-
-  .fa-lastfm,
-  .fa-lastfm-square {
-    color: $lastfm-color;
-  }
-
-  .fa-linkedin,
-  .fa-linkedin-in {
-    color: $linkedin-color;
-  }
-
-  .fa-mastodon,
-  .fa-mastodon-square {
-    color: $mastodon-color;
-  }
-
-  .fa-pinterest,
-  .fa-pinterest-p,
-  .fa-pinterest-square {
-    color: $pinterest-color;
-  }
-
-  .fa-reddit {
-    color: $reddit-color;
-  }
-
-  .fa-rss,
-  .fa-rss-square {
-    color: $rss-color;
-  }
-
-  .fa-soundcloud {
-    color: $soundcloud-color;
-  }
-
-  .fa-stack-exchange,
-  .fa-stack-overflow {
-    color: $stackoverflow-color;
-  }
-
-  .fa-tumblr,
-  .fa-tumblr-square {
-    color: $tumblr-color;
-  }
-
-  .fa-twitter,
-  .fa-twitter-square {
-    color: $twitter-color;
-  }
-
-  .fa-vimeo,
-  .fa-vimeo-square,
-  .fa-vimeo-v {
-    color: $vimeo-color;
-  }
-
-  .fa-vine {
-    color: $vine-color;
-  }
-
-  .fa-youtube {
-    color: $youtube-color;
-  }
-
-  .fa-xing,
-  .fa-xing-square {
-    color: $xing-color;
-  }*/
-}
-
 /*
    Navicons
    ========================================================================== */


@@ 333,7 208,6 @@ body:hover .visually-hidden button {
   position: relative;
   width: $navicon-width;
   height: $navicon-height;
-  background: $primary-color;
   margin: auto;
   transition: 0.3s;
 


@@ 344,7 218,6 @@ body:hover .visually-hidden button {
     left: 0;
     width: $navicon-width;
     height: $navicon-height;
-    background: $primary-color;
     transition: 0.3s;
   }
 


@@ 358,9 231,6 @@ body:hover .visually-hidden button {
 }
 
 .close .navicon {
-  /* hide the middle line*/
-  background: transparent;
-
   /* overlay the lines by setting both their top values to 0*/
   &:before,
   &:after {


@@ 380,18 250,15 @@ body:hover .visually-hidden button {
 
 .greedy-nav__toggle {
   &:before {
-    @supports (pointer-events: none) {
-      content: '';
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      background-color: $background-color;
-      transition: $global-transition;
-      pointer-events: none;
-    }
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: $global-transition;
+    pointer-events: none;
   }
 
   &.close {


@@ 403,20 270,6 @@ body:hover .visually-hidden button {
   }
 }
 
-.greedy-nav__toggle:hover {
-  .navicon,
-  .navicon:before,
-  .navicon:after {
-    background: mix(#000, $primary-color, 25%);
-  }
-
-  &.close {
-    .navicon {
-      background: transparent;
-    }
-  }
-}
-
 /*
    Sticky, fixed to top content
    ========================================================================== */


@@ 442,8 295,8 @@ body:hover .visually-hidden button {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }


@@ 464,7 317,6 @@ body:hover .visually-hidden button {
     width: 100%;
     height: 100%;
     z-index: 999;
-    background-color: rgba(255, 255, 255, 0.85);
   }
 
   .modal {


@@ 482,8 334,8 @@ body:hover .visually-hidden button {
   margin-top: -150px;
   min-height: 0;
   z-index: 9999;
-  background: #fff;
-  border: 1px solid $border-color;
+  border-width: 1px;
+  border-style: solid;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 


@@ 498,7 350,8 @@ body:hover .visually-hidden button {
 
   &__actions {
     padding: 0.5em 1em;
-    border-top: 1px solid $border-color;
+    border-top-width: 1px;
+    border-top-style: solid;
   }
 }
 


@@ 507,13 360,10 @@ body:hover .visually-hidden button {
    ========================================================================== */
 
 .footnote {
-  color: mix(#fff, $gray, 25%);
   text-decoration: none;
 }
 
 .footnotes {
-  color: mix(#fff, $gray, 25%);
-
   ol,
   li,
   p {


@@ 523,7 373,6 @@ body:hover .visually-hidden button {
 }
 
 a.reversefootnote {
-  color: $gray;
   text-decoration: none;
 
   &:hover {


@@ 536,7 385,6 @@ a.reversefootnote {
    ========================================================================== */
 
 .required {
-  color: $danger-color;
   font-weight: bold;
 }

M assets/css/main.scss => assets/css/main.scss +1 -1

@@ 13,7 13,7 @@ $comments-provider: {{ site.comments.provider }};
 
 @media (prefers-color-scheme: light) {
 	@import "minimal-mistakes/skins/{{ site.minimal_mistakes_light_skin | default: 'default' }}"; // skin
-  @import "minimal-mistakes"; // main partials
+  @import "minimal-mistakes/colors"; // color overrides
 }