From f709d9bf75a533c55ea2ca54661c623d0d08414d Mon Sep 17 00:00:00 2001 From: weru Date: Mon, 9 Nov 2020 11:12:20 -0500 Subject: [PATCH] update styles' override tips #72 --- README.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bf3f66f9..fd12ad1d 100644 --- a/README.md +++ b/README.md @@ -404,7 +404,15 @@ Each article can optionally have a table of contents (TOC) generated for it base To minimize HTTP requests per page, we would recommend loading CSS styles and JavaScript helpers in single bundles. That is to say, one CSS file and one JavaScript file. Using Hugo minify functions, these files will be minified to optimize the size. -Going by the above 👆🏻 reason, we recommend adding custom CSS and JS via [this custom SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_custom.sass) and [custom JavaScript file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/js/custom.js). +Going by the above 👆🏻 reason, we recommend adding custom CSS and JS via these files: + +1. [override SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_override.sass). + This file should only be used to override sass & css variables e.g theme colors +2. [custom SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_custom.sass). + This file should only be used to except override everything else except sass & css variables. +3 .[custom JavaScript file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/js/custom.js). + +> __Pro Tip__: to ensure that your changes are git trackeable, create `assets/sass/override.sass`,`assets/sass/custom.sass` and `assets/js/custom.js` outside the theme directory. That is, at the root level of your site's directory. However, sometimes you may need to load additional style or script files. In such cases, you can add custom `.css` and `.js` files by listing them in the `config.toml` file (see the snippet below). Similar to images, these paths should be relative to the `static` directory. @@ -416,8 +424,6 @@ customJS = ["js/custom.js"] # Include custom JS files ... ``` -> __Pro Tip__: You can change the theme colors via the [this variable's SASS file](https://github.com/chipzoller/hugo-clarity/blob/master/assets/sass/_variables.sass) - ### Forcing light or dark mode By default, sites authored using Clarity will load in the browser with the user's system-wide settings. I.e., if the underlying OS is set to dark mode, the site will automatically load in dark mode. Regardless of the default mode, a UI control switch exists to override the theme mode at the user's discretion.