- remove static/css, static/js and yarn.lock

- specify output for generated css resources to "css/"
- update documentations

.gitignore

@@ -6,4 +6,7 @@ Thumbs.db
 
 # IDEs
 .vscode
+
+# Hugo
+**/resources/_gen
 public/

README.md

@@ -4,6 +4,12 @@ A minimal blog theme built for [Hugo](https://gohugo.io/) 🍜
 
 - An about page 👋🏻 and a blog 📝
 - Blog posts can be tagged 🏷
+- Mathematical notations are supported with KaTex
+- Sass/SCSS for styling
+
+### Prerequisites
+
+Hugo extended version (for Sass/SCSS support).
 
 ### Getting started
 
@@ -93,6 +99,33 @@ In your site's `config.toml`, add a new menu definition for say, "photos":
 
 Then, put your posts under "content/photos". 
 
+### Custom styling
+
+In your site's folder, create `assets/scss/custom.scss` and put your custom styling there. For example, the snippet below 
+changes the dot's color on your About page to blue:
+
+```scss
+// custom.scss
+.fancy {
+  color: #1e88e5;
+}
+```
+
+You can even use Hugo variables/params in your custom styles too!
+
+```scss
+// custom.scss
+.fancy {
+  color: {{ .Site.Params.colors.fancy | default "#1e88e5" }}
+}
+```
+
+```toml
+# config.toml
+[params.colors]
+    fancy = "#f06292"
+```
+
 ### Tags
 
 Right now `hugo-theme-codex` uses the `tags` taxonomy for blog posts. You can view all the blog posts of a given tag by going to `/tags/:tag-name`, where `:tag-name` is the name of your tag.

layouts/_default/baseof.html

@@ -28,12 +28,14 @@
   <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
 
   <!-- Styles -->
-  {{ block "styles" . }} {{ end }} <!-- Get "style_path" variable from "styles" block -->
-  {{ $base_styles := .Scratch.Get "style_path" | default "scss/pages/about.scss" }}
-  {{ $custom_styles := "scss/custom.scss" }}
+  {{ block "styles" . }} {{ end }} <!-- Get "style_opts" variable from "styles" block -->
+  {{ $base_styles_opts := .Scratch.Get "style_opts" | default (dict "src" "scss/pages/about.scss" "dest" "css/about.css") }}
+  {{ $custom_styles_opts := (dict "src" "scss/custom.scss" "dest" "css/custom.css") }}
 
-  {{ range (slice $base_styles $custom_styles) }}
-    {{ $style := resources.Get . | toCSS | minify | fingerprint }}
+  {{ $current_page := . }}
+
+  {{ range (slice $base_styles_opts $custom_styles_opts) }}
+    {{ $style := resources.Get .src | resources.ExecuteAsTemplate .dest $current_page | toCSS | minify | fingerprint }}
     <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}"/>
   {{ end }}
 

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "styles" }}
-    {{ $.Scratch.Set "style_path" "scss/pages/posts.scss" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/posts.scss" "dest" "css/posts.css") }}
 {{ end }}
 
 {{ define "main" }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "styles" }}
-    {{ $.Scratch.Set "style_path" "scss/pages/post.scss" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/post.scss" "dest" "css/post.css") }}
 {{ end }}
 
 {{ define "main" }}

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "styles" }}
-    {{ $.Scratch.Set "style_path" "scss/pages/about.scss" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/about.scss" "dest" "css/about.css") }}
 {{ end }}
 
 {{ define "main" }}

layouts/taxonomy/tag.html

@@ -1,5 +1,5 @@
 {{ define "styles" }}
-    {{ $.Scratch.Set "style_path" "scss/pages/tags.scss" }}
+    {{ $.Scratch.Set "style_opts" (dict "src" "scss/pages/tags.scss" "dest" "css/tags.css") }}
 {{ end }}
 
 {{ define "main" }}