Update custom scss feature

1 files changed, 41 insertions, 4 deletions

diff --git a/README.md b/README.md
index 48f1cec..187811c 100644
--- a/README.md
+++ b/README.md
@@ -62,7 +62,7 @@ playerCover = "..." # Audio cover
 
 ### Lazyload images
 
-Lazyload images in posts, for example in ```content/post/test.md```:
+Lazyload images in posts, for example in ```[SITEROOT]/content/post/test.md```:
 
 ```go-html-template
 {{< lazyimg "This is alt text" "/img/sample.png" >}}
@@ -74,11 +74,50 @@ Lazyload images in posts, for example in ```content/post/test.md```:
 
 Note that if you use the origin markdown syntax to add images such as ```![This is alt text](/img/sample.png)```, it will not become a lazy image.
 
+### Custom CSS (need extended version of Hugo)
+
+You can create ```[SITEROOT]/assets/sass/custom.sass``` to cover sass variables of the theme, for example:
+
+```sass
+// change the variables below to customize the site theme
+
+// colors
+$color-primary: #8AA2D3; // apply to titles and icons
+$color-primary-dark: #3B469B; // apply to links:hover and pagination:current
+$color-secondary: #8F82BC; // apply to titles:hover, normal links, tags, pagination and sidebars
+$color-mute: #9EA1A3; // apply to sub-title and post metadata
+$color-spliter: #E5E2E4; // apply to divider and button background
+
+// font size list
+$font-size-logo: 2.5em; // Logo Only
+$font-size-l1: 1.75em; // Primer CSS H1
+$font-size-l2: 1.5em; // Primer CSS H2
+$font-size-l3: 1.25em; // Primer CSS H3
+$font-size-l4: 1em; // Primer CSS H4 & Normal Text
+
+// divider css
+$spliter: 1px solid $color-spliter;
+
+// @primer/css/support/variables/layout.scss
+// fixed-width container variables
+$container-width: 900px;
+// large screen / desktop (900 + (16 * 2)) <= container + gutters
+$width-lg: 932px;
+
+// @primer/css/support/variables/typography.scss
+// font stacks
+$body-font: -apple-system, BlinkMacSystemFont, sans-serif;
+// monospace font stack
+$mono-font: 'Cascadia Code', 'SFMono-Regular', 'Consolas', $body-font;
+// the base text size
+$body-font-size: $font-size-l4;
+```
+
 ### Markdown render hook
 
 You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks).
 
-You can use ```layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab:
+You can use ```[SITEROOT]/layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab:
 
 ```html
 <a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
@@ -102,6 +141,4 @@ The theme is released under the ```GNU General Public License v3.0```, for more
 
 ## Annotations
 
-Thanks to [ress](https://github.com/ress997/) for some great help and [printempw](https://github.com/printempw/) for the origin idea of theme.
-
 Thanks to developers for creating Hugo, Primer CSS, Font Awesome, APlayer and Lazysizes with the awesome community around these project.