diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 45 |
1 files changed, 41 insertions, 4 deletions
@@ -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 ``````, 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. |