Add default accent colors and update use of Scratch

* Add default accent colors, because the user shouldn't be obliged to
set these params to see the theme working as intended

* Update use of Scratch. Some scopes were unnecessary and there were
also some repetitions

* Minor change to the JS. Add KaTeX-related JS to the KaTeX partial

* Update color-picker.png to reflect the accent color changes

* Remove some outdated comments

3 files changed, 19 insertions, 28 deletions

diff --git a/assets/js/postpone.js b/assets/js/postpone.js
index 20ea045..f220ee3 100644
--- a/assets/js/postpone.js
+++ b/assets/js/postpone.js
@@ -19,5 +19,4 @@ PALETTE.onchange = function () {
   };
   
   updateAccent()
-};
-
+}
diff --git a/assets/js/prepone.js b/assets/js/prepone.js
index 73c3ca3..cb6ea73 100644
--- a/assets/js/prepone.js
+++ b/assets/js/prepone.js
@@ -1,5 +1,12 @@
 'use strict';
 
+// Get default accent colors
+{{ $darkAccent  := .Scratch.Get "darkAccent" }}
+{{ $lightAccent := .Scratch.Get "lightAccent" }}
+
+// Get CSS transition
+{{ $changeTransition := .Scratch.Get "changeTransition" }}
+
 /******************************
 / Mode switcher + Custom accent color
 / Based on: https://gist.github.com/regpaq/04c67e8aceecbf0fd819945835412d1f
@@ -47,7 +54,7 @@ function getAccent() {
       console.log("The user never used the palette while in the 'dark' mode.");
       console.log("As the mode is 'dark', loading the 'default accent color' for the dark mode.");
       
-      var currentAccent = "{{ .Site.Params.style.darkAccent }}"
+      var currentAccent = "{{ $darkAccent }}"
     } else {
     
       var currentAccent = localStorage.getItem('darkAccent')
@@ -62,7 +69,7 @@ function getAccent() {
       console.log("The user never used the palette while in the 'light' mode.");
       console.log("As the mode is 'light', loading the 'default accent color' for the light mode.");
 
-      var currentAccent = "{{ .Site.Params.style.lightAccent }}"
+      var currentAccent = "{{ $lightAccent }}"
     } else {
       var currentAccent = localStorage.getItem('lightAccent')
       
@@ -94,17 +101,6 @@ function updateAccent() {
 };
 
 
-// Currently being used for a HACK
-// See the KaTeX partial
-function getAll(selector) {
-  return Array.prototype.slice.call(document.querySelectorAll(selector), 0)
-};
-
-
-// Match the property found in the CSS
-// Used in the function below
-{{ $changeTransition := .Site.Params.Style.changeTransition | default ".5s ease" }}
-  
 document.addEventListener('DOMContentLoaded', function () {
 
   // Update the color picker with the active accent color 
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 98624be..137ae8a 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,13 +1,3 @@
-/*

-  TODO

-  * Responsiveness polish (max-height, max-width, portrait and landscape, etc)

-  * Clean code in general

-  * Improve animation consistency (why am I using different delays...?)

-  * Improve dimension consistency (rem, em and px is being used almost randomly)

-  * Not everything should be nested, you moron

-  * Why there are so many word-break rules

-*/

-

 @charset 'utf-8';

 

 // Import base (variables and mixins), typography and general colors

@@ -16,8 +6,8 @@
         'colors/variables';

 

 

-// Transition for color changes

-$change-transition: {{ .Site.Params.Style.changeTransition | default ".5s ease" }}

+// Get transition for color changes

+$change-transition: {{ .Scratch.Get "changeTransition" }};

 

 

 

@@ -1347,7 +1337,13 @@ p.error {
 

 

 // Rich Content

-@import 'rich-content';

+{{ if (fileExists "static/css/rich-content.css") }}

+  @import '/css/rich-content.css';

+{{ else if (fileExists "assets/scss/rich-content.scss") }}

+  @import 'rich-content';

+{{ end }}

+

+

 

 // TODO

 // Custom user stuff