diff --git a/README.md b/README.md index d7764bf6..529c5d96 100644 --- a/README.md +++ b/README.md @@ -38,15 +38,9 @@ hugo server colortheme = "white" # dark, light, white, or classic ``` -### Custom CSS +### Custom SCSS -```toml -[params] - css = ["css/custom.css"] -``` - -You can add multiple custom stylesheets which will be loaded after the main theme css. -For example, the above line will load the CSS-file placed at `/static/css/custom.css`. +Add file to folder `assets/scss/custom.scss` to customize generated CSS. ### Navigation diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 279b5b92..8067e8e1 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,13 +1,13 @@ // Fonts -$font-family-body: "JetBrains Mono", monospace; -$font-family-mono: "JetBrains Mono", monospace; -$font-family-tt: "Inconsolata", monospace; -$font-size: 14px; -$line-height: 1.725; -$page-width: 48rem; +$font-family-body: "JetBrains Mono", monospace !default; +$font-family-mono: "JetBrains Mono", monospace !default; +$font-family-tt: "Inconsolata", monospace !default; +$font-size: 14px !default; +$line-height: 1.725 !default; +$page-width: 48rem !default; // Logo -$logo-width: 50px; -$logo-height: 50px; -$logo-grayout: true; +$logo-width: 50px !default; +$logo-height: 50px !default; +$logo-grayout: true !default; // Colors $colors: "dark" // white dark light classic \ No newline at end of file diff --git a/assets/scss/colors/classic.scss b/assets/scss/colors/classic.scss index 7ff8cb21..8a55a599 100644 --- a/assets/scss/colors/classic.scss +++ b/assets/scss/colors/classic.scss @@ -1,13 +1,13 @@ -$color-background: #fafafa; -$color-footer-mobile-1: darken($color-background, 2%); -$color-footer-mobile-2: darken($color-background, 10%); -$color-background-code: darken($color-background, 2%); -$color-border: #666; -$color-meta: #666; -$color-meta-code: lighten($color-meta, 10%); -$color-link: rgba(86, 124, 119, .4); -$color-text: #22272a; -$color-accent-1: #cc2a41; -$color-accent-2: rgba(86, 124, 119, .8); -$color-accent-3: #666; -$color-quote: #cc2a41; \ No newline at end of file +$color-background: #fafafa !default; +$color-footer-mobile-1: darken($color-background, 2%) !default; +$color-footer-mobile-2: darken($color-background, 10%) !default; +$color-background-code: darken($color-background, 2%) !default; +$color-border: #666 !default; +$color-meta: #666 !default; +$color-meta-code: lighten($color-meta, 10%) !default; +$color-link: rgba(86, 124, 119, .4) !default; +$color-text: #22272a !default; +$color-accent-1: #cc2a41 !default; +$color-accent-2: rgba(86, 124, 119, .8) !default; +$color-accent-3: #666 !default; +$color-quote: #cc2a41 !default; \ No newline at end of file diff --git a/assets/scss/colors/dark.scss b/assets/scss/colors/dark.scss index c7fc243f..cf14dae8 100644 --- a/assets/scss/colors/dark.scss +++ b/assets/scss/colors/dark.scss @@ -1,13 +1,13 @@ -$color-background: #1d1f21; -$color-footer-mobile-1: lighten($color-background, 2%); -$color-footer-mobile-2: lighten($color-background, 10%); -$color-background-code: lighten($color-background, 2%); -$color-border: #666; -$color-meta: #666; -$color-meta-code: #666; -$color-link: rgba(212, 128, 170, 1); -$color-text: #c9cacc; -$color-accent-3: #cccccc; -$color-accent-2: #eeeeee; -$color-accent-1: #2bbc8a; -$color-quote: #ccffb6; \ No newline at end of file +$color-background: #1d1f21 !default; +$color-footer-mobile-1: lighten($color-background, 2%) !default; +$color-footer-mobile-2: lighten($color-background, 10%) !default; +$color-background-code: lighten($color-background, 2%) !default; +$color-border: #666 !default; +$color-meta: #666 !default; +$color-meta-code: #666 !default; +$color-link: rgba(212, 128, 170, 1) !default; +$color-text: #c9cacc !default; +$color-accent-3: #cccccc !default; +$color-accent-2: #eeeeee !default; +$color-accent-1: #2bbc8a !default; +$color-quote: #ccffb6 !default; \ No newline at end of file diff --git a/assets/scss/colors/light.scss b/assets/scss/colors/light.scss index dcfcbd62..c7213c99 100644 --- a/assets/scss/colors/light.scss +++ b/assets/scss/colors/light.scss @@ -1,14 +1,14 @@ // by @GabiThume (https://github.com/gabithume) -$color-background: #e2e0de; -$color-footer-mobile-1: darken($color-background, 2%); -$color-footer-mobile-2: darken($color-background, 10%); -$color-background-code: darken($color-background, 2%); -$color-border: #666; -$color-meta: #666; -$color-meta-code: lighten($color-meta, 10%); -$color-link: rgba(43, 188, 138, 1); -$color-text: #363533; -$color-accent-3: #666666; -$color-accent-2: #111111; -$color-accent-1: #d44375; -$color-quote: #ab2251; \ No newline at end of file +$color-background: #e2e0de !default; +$color-footer-mobile-1: darken($color-background, 2%) !default; +$color-footer-mobile-2: darken($color-background, 10%) !default; +$color-background-code: darken($color-background, 2%) !default; +$color-border: #666 !default; +$color-meta: #666 !default; +$color-meta-code: lighten($color-meta, 10%) !default; +$color-link: rgba(43, 188, 138, 1) !default; +$color-text: #363533 !default; +$color-accent-3: #666666 !default; +$color-accent-2: #111111 !default; +$color-accent-1: #d44375 !default; +$color-quote: #ab2251 !default; \ No newline at end of file diff --git a/assets/scss/colors/white.scss b/assets/scss/colors/white.scss index a4d15471..08b56a85 100644 --- a/assets/scss/colors/white.scss +++ b/assets/scss/colors/white.scss @@ -1,14 +1,14 @@ // by @sergodeeva (https://github.com/sergodeeva) -$color-background: #FFFFFF; -$color-footer-mobile-1: darken($color-background, 2%); -$color-footer-mobile-2: darken($color-background, 10%); -$color-background-code: darken($color-background, 2%); -$color-border: #666; -$color-meta: #666; -$color-meta-code: lighten($color-meta, 10%); -$color-link: rgba(212, 128, 170, 1); -$color-text: #383838; -$color-accent-3: #8c8c8c; -$color-accent-2: #383838; -$color-accent-1: #2bbc8a; -$color-quote: #2bbc8a; \ No newline at end of file +$color-background: #FFFFFF !default; +$color-footer-mobile-1: darken($color-background, 2%) !default; +$color-footer-mobile-2: darken($color-background, 10%) !default; +$color-background-code: darken($color-background, 2%) !default; +$color-border: #666 !default; +$color-meta: #666 !default; +$color-meta-code: lighten($color-meta, 10%) !default; +$color-link: rgba(212, 128, 170, 1) !default; +$color-text: #383838 !default; +$color-accent-3: #8c8c8c !default; +$color-accent-2: #383838 !default; +$color-accent-1: #2bbc8a !default; +$color-quote: #2bbc8a !default; \ No newline at end of file diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss new file mode 100644 index 00000000..e69de29b diff --git a/assets/scss/style.scss b/assets/scss/style.scss index f8215d46..a2bb296f 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,3 +1,5 @@ + + @import "variables"; @import "colors/{{ site.Params.colortheme | default "white" }}"; @import "util"; diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 82ea9c32..52a0fd67 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -20,11 +20,12 @@ {{ $colortheme := .Scratch.Get "colortheme" }} {{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}} - {{- $styles := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "scss/style.scss" . | resources.ToCSS $options | resources.Fingerprint "sha512" }} + {{ $custom_css := resources.Get "scss/custom.scss" }} + {{ $css := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "scss/style.scss" . }} + {{ $resources := slice $custom_css $css }} + {{ $styles := $resources | resources.Concat "scss/styles.scss" | resources.ToCSS $options | resources.Fingerprint "sha512" }} - - {{ range .Site.Params.css }} {{ end }} {{ `