From 8ebb4ed202b242575f29cc735946f1d6bfe76145 Mon Sep 17 00:00:00 2001 From: Jake Wiesler Date: Wed, 29 Jul 2020 05:02:52 -0400 Subject: [PATCH] Add overrides.scss (#85) * feat: add overrides.scss * docs: Update README * refactor: fix naming * refactor: scss vars --- README.md | 12 ++++++++++-- assets/scss/_main.scss | 2 +- assets/scss/overrides.scss | 4 ++++ assets/scss/pages/post.scss | 1 - assets/scss/partials/_burger.scss | 2 -- assets/scss/partials/_colors.scss | 7 ------- assets/scss/partials/_post-list.scss | 3 --- assets/scss/partials/_reset.scss | 2 -- assets/scss/partials/_screenSizes.scss | 2 -- assets/scss/partials/_typography.scss | 2 -- assets/scss/partials/_vars.scss | 20 +++++++++++++++++--- 11 files changed, 32 insertions(+), 25 deletions(-) create mode 100644 assets/scss/overrides.scss delete mode 100644 assets/scss/partials/_colors.scss delete mode 100644 assets/scss/partials/_screenSizes.scss diff --git a/README.md b/README.md index da55115..3a6c58c 100644 --- a/README.md +++ b/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. diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index 61bdea0..971f59a 100644 --- a/assets/scss/_main.scss +++ b/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"; diff --git a/assets/scss/overrides.scss b/assets/scss/overrides.scss new file mode 100644 index 0000000..cd50bf5 --- /dev/null +++ b/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: diff --git a/assets/scss/pages/post.scss b/assets/scss/pages/post.scss index 52f6f40..5b97764 100644 --- a/assets/scss/pages/post.scss +++ b/assets/scss/pages/post.scss @@ -1,6 +1,5 @@ @import "../main"; @import "../partials/github-syntax-highlighting"; -@import "../partials/colors"; $tocBreakpoint: 1024px; diff --git a/assets/scss/partials/_burger.scss b/assets/scss/partials/_burger.scss index 4338306..2826029 100644 --- a/assets/scss/partials/_burger.scss +++ b/assets/scss/partials/_burger.scss @@ -1,5 +1,3 @@ -@import "vars"; - .burger__container { height: $burgerContainerHeight; display: flex; diff --git a/assets/scss/partials/_colors.scss b/assets/scss/partials/_colors.scss deleted file mode 100644 index 351903c..0000000 --- a/assets/scss/partials/_colors.scss +++ /dev/null @@ -1,7 +0,0 @@ -$black: #111; -$lightGrey: #f7f7f7; -$greyTableBorder: #eeeeee; -$grey: #9b9b9b; -$darkGrey: #717171; -$white: #fff; -$primary: #9013fe; diff --git a/assets/scss/partials/_post-list.scss b/assets/scss/partials/_post-list.scss index 53fc67b..544bf70 100644 --- a/assets/scss/partials/_post-list.scss +++ b/assets/scss/partials/_post-list.scss @@ -1,6 +1,3 @@ -@import "colors"; -@import "vars"; - .post-list__container { margin: 0 auto; max-width: 1200px; diff --git a/assets/scss/partials/_reset.scss b/assets/scss/partials/_reset.scss index 1c298ff..78ebe16 100644 --- a/assets/scss/partials/_reset.scss +++ b/assets/scss/partials/_reset.scss @@ -1,5 +1,3 @@ -@import "colors"; - html, body { background-color: $white; diff --git a/assets/scss/partials/_screenSizes.scss b/assets/scss/partials/_screenSizes.scss deleted file mode 100644 index 52a3d44..0000000 --- a/assets/scss/partials/_screenSizes.scss +++ /dev/null @@ -1,2 +0,0 @@ -$medium: 800px; -$large: 1400px; diff --git a/assets/scss/partials/_typography.scss b/assets/scss/partials/_typography.scss index e9fb87c..c695b00 100644 --- a/assets/scss/partials/_typography.scss +++ b/assets/scss/partials/_typography.scss @@ -1,5 +1,3 @@ -@import "vars"; - $baseFontSize: 16; $fontSizeMobile: 14; $baseLineHeight: 1.5; diff --git a/assets/scss/partials/_vars.scss b/assets/scss/partials/_vars.scss index b730615..c3c06ac 100644 --- a/assets/scss/partials/_vars.scss +++ b/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";