Add overrides.scss (#85)

* feat: add overrides.scss

* docs: Update README

* refactor: fix naming

* refactor: scss vars

README.md

@@ -149,8 +149,7 @@ Then, put your posts under "content/photos".
 
 ### Custom styling
 
-In your site's folder, create `assets/scss/custom.scss` and put your custom styling there. For example, the snippet below 
-changes the dot's color on your About page to blue:
+You have two options for custom styling. The first is to create an `assets/scss/custom.scss` in your project and put your custom styling there. For example, the snippet below changes the dot's color on your About page to blue:
 
 ```scss
 // custom.scss
@@ -174,6 +173,15 @@ You can even use Hugo variables/params in your custom styles too!
     fancy = "#f06292"
 ```
 
+The second option is to use the supported scss overrides. You can do this by creating an `assets/scss/overrides/scss` file in your project. The following overrides are supported:
+
+```scss
+// overrides.scss
+
+// The primary accent color used throughout the site
+$primary: ''
+```
+
 ### Tags
 
 Right now `hugo-theme-codex` uses the `tags` taxonomy for blog posts. You can view all the blog posts of a given tag by going to `/tags/:tag-name`, where `:tag-name` is the name of your tag.

assets/scss/_main.scss

@@ -1,5 +1,5 @@
-@import "partials/normalize";
 @import "partials/vars";
+@import "partials/normalize";
 @import "partials/reset";
 @import "partials/typography";
 @import "partials/nav";

assets/scss/overrides.scss

@@ -0,0 +1,4 @@
+// The following variables can be overridden
+
+// The primary accent color can take any css color property, including hex, named props, rgba etc.
+// $primary:

assets/scss/pages/post.scss

@@ -1,6 +1,5 @@
 @import "../main";
 @import "../partials/github-syntax-highlighting";
-@import "../partials/colors";
 
 $tocBreakpoint: 1024px;
 

assets/scss/partials/_burger.scss

@@ -1,5 +1,3 @@
-@import "vars";
-
 .burger__container {
   height: $burgerContainerHeight;
   display: flex;

assets/scss/partials/_colors.scss

@@ -1,7 +0,0 @@
-$black: #111;
-$lightGrey: #f7f7f7;
-$greyTableBorder: #eeeeee;
-$grey: #9b9b9b;
-$darkGrey: #717171;
-$white: #fff;
-$primary: #9013fe;

assets/scss/partials/_post-list.scss

@@ -1,6 +1,3 @@
-@import "colors";
-@import "vars";
-
 .post-list__container {
   margin: 0 auto;
   max-width: 1200px;

assets/scss/partials/_reset.scss

@@ -1,5 +1,3 @@
-@import "colors";
-
 html,
 body {
   background-color: $white;

assets/scss/partials/_screenSizes.scss

@@ -1,2 +0,0 @@
-$medium: 800px;
-$large: 1400px;

assets/scss/partials/_typography.scss

@@ -1,5 +1,3 @@
-@import "vars";
-
 $baseFontSize: 16;
 $fontSizeMobile: 14;
 $baseLineHeight: 1.5;

assets/scss/partials/_vars.scss

@@ -1,7 +1,21 @@
-@import "_colors";
-@import "_screenSizes";
-
 $navWidth: 100px;
 $meatWidth: 28px;
 $meatHeight: 2px;
 $burgerContainerHeight: 4rem;
+
+// colors
+$black: #111;
+$lightGrey: #f7f7f7;
+$greyTableBorder: #eeeeee;
+$grey: #9b9b9b;
+$darkGrey: #717171;
+$white: #fff;
+$primary: #9013fe;
+
+// screenSizes
+$medium: 800px;
+$large: 1400px;
+
+// import site overrides after variables after
+// variables have been declared
+@import "../overrides";