From d46d55f0eeb83817945af76ae94ff3acb84d60c3 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Sat, 25 Apr 2020 21:18:51 +0800
Subject: Update custom scss feature

---
 README.md | 45 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

(limited to 'README.md')

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.
-- 
cgit v1.2.3


From 0440ad6d7d326f53e34217abccbc6f4a93469f0b Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Sun, 26 Apr 2020 10:35:29 +0800
Subject: Update metadata

---
 README.md | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index 187811c..a48e15e 100644
--- a/README.md
+++ b/README.md
@@ -76,11 +76,9 @@ Note that if you use the origin markdown syntax to add images such as ```![This
 
 ### Custom CSS (need extended version of Hugo)
 
-You can create ```[SITEROOT]/assets/sass/custom.sass``` to cover sass variables of the theme, for example:
+You can create ```[SITEROOT]/assets/sass/custom.sass``` to cover sass variables of the theme. Just copy the variable which you need into it, check available variables below:
 
 ```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
@@ -98,17 +96,15 @@ $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;
+$body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 // monospace font stack
-$mono-font: 'Cascadia Code', 'SFMono-Regular', 'Consolas', $body-font;
+$mono-font: "Cascadia Code", "SF Mono", "Fira Code", "Consolas", $body-font;
 // the base text size
 $body-font-size: $font-size-l4;
 ```
-- 
cgit v1.2.3