Merge pull request mmistakes#347 from alxddh/skinization

A customizable skin
clarafy · Oct 28, 2019 · 3e984a5 · 3e984a5
2 parents a19a262 + ad5992b
commit 3e984a5
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;