From 9c70c7f0810b00a6f1d956ccd510c96413211f32 Mon Sep 17 00:00:00 2001
From: Patrick Marsceill <patrick.marsceill@gmail.com>
Date: Thu, 15 Nov 2018 15:12:12 -0500
Subject: [PATCH] Convert colors to vars
---
_config.yml | 2 ++
_sass/base.scss | 5 +++--
_sass/buttons.scss | 6 +++++-
_sass/code.scss | 4 ++--
_sass/layout.scss | 8 ++++----
_sass/navigation.scss | 13 ++++++++-----
_sass/search.scss | 3 ++-
_sass/support/_variables.scss | 7 +++++++
_sass/tables.scss | 3 ++-
assets/css/just-the-docs.scss | 16 +++++++++++++---
index.md | 2 +-
11 files changed, 49 insertions(+), 20 deletions(-)
diff --git a/_config.yml b/_config.yml
index 6ce2ed36..f9b5dc5e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -30,3 +30,5 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
+
+color_scheme: "dark"
diff --git a/_sass/base.scss b/_sass/base.scss
index 6fdf0586..e787f01d 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -16,6 +16,7 @@ body {
font-size: inherit;
line-height: $body-line-height;
color: $body-text-color;
+ background-color: $body-background-color;
}
p,
@@ -64,7 +65,7 @@ a {
a:not([class]) {
text-decoration: none;
- background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
+ background-image: linear-gradient($border-color 0%, $border-color 100%);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 1px 1px;
@@ -99,6 +100,6 @@ hr {
height: 1px;
padding: 0;
margin: $sp-6 0;
- background-color: $grey-lt-100;
+ background-color: $border-color;
border: 0;
}
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index a58c9202..7fcb2109 100644
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -75,7 +75,7 @@
}
.btn-outline {
- color: $blue-100;
+ color: $link-color;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;
@@ -101,6 +101,10 @@
}
}
+.btn-primary {
+ @include btn-color($white, $btn-primary-color);
+}
+
.btn-purple {
@include btn-color($white, $purple-100);
}
diff --git a/_sass/code.scss b/_sass/code.scss
index 7d2b68a2..19a2a397 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -6,7 +6,7 @@
code {
padding: 0.2em 0.15em;
font-weight: 400;
- background-color: $grey-lt-000;
+ background-color: $code-background-color;
border: $border $border-color;
border-radius: $border-radius;
}
@@ -14,7 +14,7 @@ code {
.highlight {
padding: $sp-3;
margin-bottom: 0;
- background-color: $grey-lt-000;
+ background-color: $code-background-color;
code {
padding: 0;
diff --git a/_sass/layout.scss b/_sass/layout.scss
index e3c93e48..12fef6fa 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -21,7 +21,7 @@
flex-wrap: wrap;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
- background-color: $grey-lt-000;
+ background-color: $sidebar-color;
@include mq(md) {
flex-wrap: nowrap;
@@ -75,10 +75,10 @@
}
.page-header {
- background-color: $grey-lt-000;
+ background-color: $sidebar-color;
@include mq(md) {
- background-color: $white;
+ background-color: $body-background-color;
border-bottom: $border $border-color;
}
@@ -137,6 +137,6 @@ body {
position: static;
align-self: flex-end;
justify-self: end;
- background-color: $grey-lt-000;
+ background-color: $sidebar-color;
}
}
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 802a6edb..8a0bf49c 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -5,7 +5,8 @@
.site-title {
display: block;
flex: 1 1 auto;
- background-color: $grey-lt-000;
+ color: $body-heading-color;
+ background-color: $sidebar-color;
@include mq(md) {
position: absolute;
@@ -34,21 +35,23 @@
list-style: none;
.navigation-list-link {
- color: $grey-dk-100;
+ color: $nav-child-link-color;
}
.navigation-list-item {
+ position: relative;
+
&::before {
position: absolute;
margin-top: 0.3em;
margin-left: -0.8em;
- color: $grey-dk-000;
+ color: $border-color;
content: "- ";
}
&.active {
&::before {
- color: $grey-dk-100;
+ color: $body-text-color;
}
}
}
@@ -70,7 +73,7 @@
&.active {
font-weight: 600;
- color: $grey-dk-200;
+ color: $body-heading-color;
text-decoration: none;
}
}
diff --git a/_sass/search.scss b/_sass/search.scss
index 70370806..c847af5b 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -46,13 +46,14 @@
.search-input-wrap {
display: flex;
- background-color: $white;
+ background-color: $body-background-color;
}
.search-input {
width: 100%;
padding-top: $sp-1;
padding-bottom: $sp-1;
+ background-color: $body-background-color;
border-top: 0;
border-right: 0;
border-bottom: 0;
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 59cb59e8..ce25353c 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -17,6 +17,7 @@ $white: #fff !default;
$grey-dk-000: #959396 !default;
$grey-dk-100: #5c5962 !default;
$grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
$grey-dk-300: #27262b !default;
$grey-lt-000: #f5f6fa !default;
@@ -49,9 +50,15 @@ $red-100: #f96e65 !default;
$red-200: #e94c4c !default;
$red-300: #dd2e2e !default;
+$body-background-color: $white !default;
+$sidebar-color: $grey-lt-000 !default;
+$code-background-color: $grey-lt-000 !default;
+
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
+$nav-child-link-color: $grey-dk-100 !default;
$link-color: $purple-000 !default;
+$btn-primary-color: $purple-100 !default;
//
// Media queries in pixels
diff --git a/_sass/tables.scss b/_sass/tables.scss
index 5728c884..37172b2c 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -21,11 +21,12 @@ th,
td {
@include fs-3;
min-width: 120px;
+ background-color: lighten($body-background-color, 1%);
padding-top: $sp-2;
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
- border-bottom: $border $grey-lt-000;
+ border-bottom: $border rgba($border-color, 0.5);
border-left: $border $border-color;
&:first-of-type {
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
index f7306430..18d948cf 100644
--- a/assets/css/just-the-docs.scss
+++ b/assets/css/just-the-docs.scss
@@ -4,7 +4,7 @@
---
//
-// Import dependancies
+// Import external dependencies
//
@import "./normalize.scss/normalize.scss";
@@ -16,8 +16,13 @@
// Support
@import "./support/support";
-// Custom overrides
-@import "./custom/custom";
+//
+// Import custom color scheme scss
+//
+
+{% if site.color_scheme == "dark" %}
+@import "./color_schemes/dark.scss";
+{% endif %}
// Modules
@import "./base";
@@ -31,3 +36,8 @@
@import "./tables";
@import "./code";
@import "./utilities/utilities";
+
+//
+// Import custom overrides
+//
+@import "./custom/custom";
diff --git a/index.md b/index.md
index 66c83390..b467f5d1 100644
--- a/index.md
+++ b/index.md
@@ -12,7 +12,7 @@ permalink: /
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
{: .fs-6 .fw-300 }
-[Get started now](#getting-started){: .btn .btn-purple .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
+[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
---
--
GitLab