- 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" }} 

static/css/tags.css

@@ -1 +0,0 @@
-button,button[type="button"],button[type="reset"],button[type="submit"]{-webkit-appearance:button}input,input[type=text],input[type=email]{-webkit-appearance:none;-moz-appearance:none;appearance:none}html,body{background-color:#fff;color:#111;height:100%}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{padding:0;margin:0;-webkit-box-sizing:inherit;box-sizing:inherit}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;font-size:95%}@media screen and (min-width:800px){html{font-size:100%}}@media screen and (min-width:1400px){html{font-size:115%}}h1,h2,h3,h4,h5,h6{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}h1{font-size:2.121rem;line-height:2.25rem;margin-top:2.25rem}h2{font-size:1.414rem}h3{font-size:1.414/2rem}h4{font-size:1.414/3rem}h5{font-size:1.414/4rem}p{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}ul,ol{padding-left:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem}ul li,ol li{line-height:1.5rem}ul ul,ol ul,ul ol,ol ol{margin-top:0;margin-bottom:0}blockquote{margin-top:1.5rem;margin-bottom:1.5rem;line-height:1.5rem;color:#717171;font-style:italic}pre{line-height:1.45;margin-top:1.5rem;padding:16px;word-wrap:normal;overflow:auto;background-color:#f6f8fa;border-radius:3px}code{font-size:85%;font-family:"SFMono-Regular",Consolas,Menlo,monospace;padding:.2em .4em;margin:0;background-color:rgba(27,31,35,0.05);border-radius:3px}pre>code{word-break:normal;white-space:pre}pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.lead{font-size:1.414rem}.burger__container{height:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 1.5rem;position:fixed;width:100%;background:#fff;z-index:2}@media screen and (min-width:800px){.burger__container{display:none}}.burger{position:relative;width:28px;height:28px;cursor:pointer}.burger__meat{position:absolute;width:28px;height:2px;background:#111;top:calc(50% - 2px / 2);left:calc(50% - 28px / 2);-webkit-transition:all 150ms ease-in;transition:all 150ms ease-in}.burger__meat--1{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.burger__meat--2{width:calc(28px - 6px)}.burger__meat--3{-webkit-transform:translateY(10px);transform:translateY(10px)}.nav--active .burger__meat--1{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nav--active .burger__meat--2{opacity:0}.nav--active .burger__meat--3{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.nav{font-size:16px;position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#fff;visibility:hidden;z-index:1}@media screen and (min-width:800px){.nav{display:block;visibility:visible;padding-top:3em;width:100px}}.nav--active .nav{visibility:visible;height:100%;width:100%}.nav__list{text-align:right;list-style:none;margin:0;padding:0;width:50%}@media screen and (min-width:800px){.nav__list{width:auto}}@media screen and (max-width:799px){.nav__list{-webkit-transform:translateY(-25px);transform:translateY(-25px);opacity:0}.nav--active .nav__list{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 500ms ease;transition:all 500ms ease}}.nav__list li{margin-bottom:3em;line-height:1.5em}.nav__list li:last-of-type{margin-bottom:0}@media screen and (min-width:800px){.nav__list li{margin-bottom:1.75em}}.nav__list a{color:#9b9b9b;text-decoration:none;font-size:2em}.nav__list a.active{color:#111}.nav__list a:hover{color:#111}@media screen and (min-width:800px){.nav__list a{font-size:1em}}body.nav--active{overflow:hidden}main{padding:3rem 1.5rem}@media screen and (min-width:800px){main{padding-left:calc(1.5rem + 100px)}}@media screen and (max-width:799px){main{padding-top:calc(3rem + 4rem)}}.post-list__container{margin:0 auto;max-width:1200px;width:100%}@media screen and (min-width:800px){.post-list__container{padding-left:50px}}.post-list{list-style:none;margin:0;padding:0}.post{margin-bottom:1.5rem}.post__title{margin-top:0;font-weight:500}.post__title a{color:#111;text-decoration:none}.post__date{color:#9b9b9b;font-size:.8rem}.tag__header{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;margin-bottom:3rem}.tag__header a,.tag__header .separator{color:#9b9b9b;font-size:1.5rem}.tag__header a{text-decoration:none}.tag__header .separator{-ms-flex-item-align:center;align-self:center;margin:0 5px}.tag__header .tag__term{margin:0;font-weight:600}

static/js/index.js

@@ -1,20 +0,0 @@
-"use strict";
-
-/*
- * Handles mobile nav
- */
-function toggleMobileNavState() {
-  var body = document.querySelector("body");
-  body.classList.toggle("nav--active");
-}
-/*
- * Initializes burger functionality
- */
-
-
-function initBurger() {
-  var burger = document.querySelector(".burger");
-  burger.addEventListener("click", toggleMobileNavState);
-}
-
-initBurger();