Merge pull request #347 from alxddh/skinization

A customizable skin
mmistakes · Oct 28, 2019 · 8d7015d · 8d7015d
2 parents d3f4d81 + d584223
commit 8d7015d
Show file tree

Hide file tree

Showing 18 changed files with 701 additions and 439 deletions.
diff --git a/_config.yml b/_config.yml
@@ -101,3 +101,5 @@ footer_links:
   - title: Feed
     url: atom.xml
     icon: fas fa-rss-square
+
+skin: "/assets/css/skins/default.css"
diff --git a/_includes/head.html b/_includes/head.html
@@ -24,6 +24,7 @@
   </script>
 
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ site.skin | default: '/assets/css/skins/default.css' | relative_url }}">
   {% if site.google_fonts %}
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={%- for font in site.google_fonts -%}{{ font.name | replace: ' ', '+' }}{% if font.weights %}:{% endif %}{{ font.weights | remove: ' ' }}{% if forloop.last != true %}|{% endif %}{%- endfor -%}">
   {% endif %}

diff --git a/_sass/so-simple/_base.scss b/_sass/so-simple/_base.scss
@@ -7,9 +7,7 @@ html {
 }
 
 body {
-  background: $background-color;
-  color: $text-color;
-  border-top: solid 0.25em $nav-background-color;
+  border-top: solid 0.25em;
 }
 
 blockquote,
@@ -37,6 +35,7 @@ kbd {
   display: inline-block;
   margin: 0 0.125em;
   padding: 0.125em 0.5em;
+  color: #000;
   border: 1px solid rgb(204, 204, 204);
   border-radius: 3px;
   background-color: rgb(247, 247, 247);
@@ -102,11 +101,6 @@ figcaption {
 }
 
 a {
-  color: $accent-color;
   -webkit-transition: $global-transition;
   transition: $global-transition;
-
-  &:hover {
-    color: shade($accent-color, 25%);
-  }
 }
diff --git a/_sass/so-simple/_buttons.scss b/_sass/so-simple/_buttons.scss
@@ -28,34 +28,6 @@
     margin-left: -0.5em; /* override for hidden text*/
   }
 
-  /* button colors */
-  $buttoncolors: (primary, $primary-color), (accent, $accent-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),
-     (reddit, $reddit-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;

diff --git a/_sass/so-simple/_entries.scss b/_sass/so-simple/_entries.scss
@@ -8,10 +8,6 @@
 
   a {
     color: inherit;
-
-    &:hover {
-      color: $accent-color;
-    }
   }
 }
 

diff --git a/_sass/so-simple/_global.scss b/_sass/so-simple/_global.scss
@@ -14,8 +14,6 @@
   display: block;
   margin: 0;
   padding: 0.25em 0.75em 0.5em;
-  color: $nav-color;
-  background-color: $nav-background-color;
   text-transform: uppercase;
   text-decoration: none;
   text-align: center;
@@ -35,8 +33,6 @@
     margin: 0;
     padding: 0.25em 0.75em;
     list-style: none;
-    color: $nav-color;
-    background-color: $nav-background-color;
     border-radius: 0 0 (2 * $border-radius) (2 * $border-radius);
 
     @include breakpoint($medium) {
@@ -52,15 +48,10 @@
   a {
     display: block;
     padding: 0.5em 0.75em;
-    color: $nav-color;
     text-transform: uppercase;
     text-decoration: none;
-    border: 1px solid $nav-background-color;
+    border: 1px solid;
     border-radius: $border-radius;
-
-    &:hover {
-      border-color: $nav-color;
-    }
   }
 
   @include breakpoint($medium) {
@@ -87,7 +78,6 @@
   font-weight: 700;
 
   a {
-    color: $text-color;
     text-decoration: none;
   }
 }
@@ -109,7 +99,7 @@
 .site-logo-img {
   width: $site-logo-width;
   height: $site-logo-height;
-  border: 5px solid $background-color;
+  border: 5px solid;
   border-radius: $site-logo-width;
 
   @include breakpoint($medium) {
@@ -130,7 +120,7 @@
   margin: 2em 0;
   padding: 2em 0;
   text-align: center;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid;
 
   .social-icons {
     margin-bottom: 0.5em;
@@ -143,23 +133,18 @@
 }
 
 .copyright {
-  color: lighten($text-color, 35%);
   font-size: 0.75em;
 
   p {
     margin: 0;
     padding: 0;
   }
-
-  a {
-    color: lighten($text-color, 35%);
-  }
 }
 
 .footnotes {
   margin: 2rem 0;
   padding-top: 1rem;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid;
   font-size: 80%;
 }
 
@@ -170,7 +155,6 @@
 
 .back-to-top {
   display: block;
-  color: lighten($text-color, 50%);
   font-size: 0.75em;
   text-transform: uppercase;
   text-align: right;
@@ -182,7 +166,7 @@
   padding-bottom: 1em;
 
   &:not(:last-child) {
-    border-bottom: solid 1px $border-color;
+    border-bottom: solid 1px;
   }
 
   + .taxonomy-section {
@@ -193,14 +177,9 @@
 .taxonomy-title {
   @include fluid-type($min-vw, $max-vw, 28px, 32px);
   margin-bottom: 0.5em;
-  color: lighten($text-color, 60%);
   font-family: $base-font-family;
 }
 
-.taxonomy-count {
-  color: lighten($text-color, 50%);
-}
-
 .taxonomy-index {
   display: grid;
   grid-column-gap: 2em;
@@ -225,11 +204,7 @@
     justify-content: space-between;
     color: inherit;
     text-decoration: none;
-    border-bottom: 1px solid $border-color;
-
-    &:hover {
-      color: $accent-color;
-    }
+    border-bottom: 1px solid;
   }
 
   + .taxonomy-section {
@@ -260,22 +235,15 @@
       display: block;
       margin-bottom: 0.25em;
       padding: 0.5em 1em;
-      color: mix(#000, $border-color, 25%);
       font-size: 14px;
       font-weight: bold;
       line-height: 1.5;
       text-align: center;
       text-decoration: none;
-      border: 1px solid $border-color;
+      border: 1px solid;
       border-radius: 0;
 
-      &.current,
-      &.current.disabled {
-        @include yiq-contrasted(mix(#000, $border-color, 25%));
-      }
-
       &.disabled {
-        color: $border-color;
         pointer-events: none;
         cursor: not-allowed;
       }
@@ -304,14 +272,14 @@
   padding: 0.5em;
   width: 100%;
   font-size: 0.9em;
-  border: 2px solid $border-color;
+  border: 2px solid;
   border-radius: $border-radius;
 }
 
 .toc-wrapper {
   display: inline-block;
   margin-bottom: 1.5em;
-  border: 1px solid (mix(#fff, $border-color, 25%));
+  border: 1px solid;
   border-radius: $border-radius;
 
   h2 {
@@ -326,8 +294,6 @@
     align-items: center;
     margin: 0;
     padding: 0.75rem 1rem;
-    color: $base05;
-    background-color: $base00;
     font-family: $base-font-family;
     font-size: 0.75rem;
     text-transform: uppercase;
@@ -356,7 +322,6 @@
     margin-bottom: 0;
     padding-left: 2rem;
     overflow: hidden;
-    color: $base05;
     font-size: 0.9rem;
     -webkit-transition: height 350ms ease;
     transition: height 350ms ease;
@@ -378,17 +343,11 @@
       font-weight: 600;
       text-decoration: none;
       border-bottom: 1px dotted transparent;
-
-      &:hover,
-      &:focus {
-        border-bottom: 1px dotted $border-color;
-      }
     }
 
     ol {
       padding-left: 0.5rem;
       list-style-type: lower-roman;
-      background-color: $background-color;
     }
   }
 }
diff --git a/_sass/so-simple/_notices.scss b/_sass/so-simple/_notices.scss
@@ -55,45 +55,3 @@
     }
   }
 }
-
-/* Default notice */
-
-.notice {
-  @include notice(lighten($base-color, 90%));
-}
-
-/* Primary notice */
-
-.notice--primary {
-  @include notice(mix(#fff, $primary-color, 70%));
-}
-
-/* Accent notice */
-
-.notice--accent {
-  @include notice(mix(#fff, $accent-color, 70%));
-}
-
-/* Info notice */
-
-.notice--info {
-  @include notice(mix(#fff, $info-color, 70%));
-}
-
-/* Warning notice */
-
-.notice--warning {
-  @include notice(mix(#fff, $warning-color, 70%));
-}
-
-/* Success notice */
-
-.notice--success {
-  @include notice(mix(#fff, $success-color, 70%));
-}
-
-/* Danger notice */
-
-.notice--danger {
-  @include notice(mix(#fff, $danger-color, 70%));
-}
diff --git a/_sass/so-simple/_page.scss b/_sass/so-simple/_page.scss
@@ -172,7 +172,6 @@
   -ms-flex: 1;
   flex: 1;
   text-decoration: none;
-  color: $text-color;
 }
 
 .page-next {

diff --git a/_sass/so-simple/_reset.scss b/_sass/so-simple/_reset.scss
@@ -224,8 +224,7 @@ blockquote {
   margin-right: 0;
   margin-left: 0;
   padding: 2em 3em;
-  background-color: mix(#fff, $accent-color, 95%);
-  border-left: solid 0.5em $accent-color;
+  border-left: solid 0.5em;
 
   *:last-child {
     margin-bottom: 0;
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,10 +8,6 @@ @@
       a {
         color: inherit;
-        &:hover {
-          color: $accent-color;
-        }
       }
     }
@@ Expand Down @@