Generate all 3 themes: auto,light,dark

5 files changed, 70 insertions, 29 deletions

diff --git a/config.toml b/config.toml
index 31b3efb..82953e9 100644
--- a/config.toml
+++ b/config.toml
@@ -62,10 +62,13 @@ menu_footer = [
 # Resource Files
 #################
 banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined.
-stylesheet = "abridge.css" # location and file to use for stylesheet
 js_search_index ="search_index.en.js"
 js_search = "search.min.js"
 rss_atom_feed = "atom.xml"
+stylesheet = "abridge.css" # location and file to use for stylesheet:
+#       abridge.css - Automatic Dark/Light Theme based on browser/system preference.
+#  abridge-dark.css - Dark Theme
+# abridge-light.css - Light Theme
 
 # For externally loaded fonts make sure the include the FULL url including the http/https prefix
 fonts_load = false
diff --git a/sass/_imports.scss b/sass/_imports.scss
new file mode 100644
index 0000000..28c71f4
--- /dev/null
+++ b/sass/_imports.scss
@@ -0,0 +1,25 @@
+// Config
+@import "variables";
+
+// Includes - Sorted by importance/category (includes at top are needed most frequently)
+@import "include/document"; // html
+@import "include/typography"; // a, headings, p, ul, blockquote, ...
+@import "include/sectioning"; // body, header, main, footer
+@import "include/nav"; // Nav
+
+@import "include/embedded"; // iframe(youtube/vimeo), audio, canvas, img, svg, video
+@import "include/table"; // table, tr, td, ...
+@import "include/code"; // pre, code, ...
+@import "include/hr"; // hr
+
+@import "include/search"; // Zola Search - elasticlunr site-wide search
+
+@import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
+
+//@import "include/scroller"; // figure
+//@import "include/button"; // button, a[role=button], type=button, type=submit ...
+//@import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button)
+
+@import "include/icons"; // svg icons
+//@import "include/grid"; // section infinite grid -- test/rework this similar to hnav and milligram in that it should collapse to a single column as the page becomes narrow
+//@import "include/misc"; // template, [hidden], dialog, canvas
diff --git a/sass/abridge-dark.scss b/sass/abridge-dark.scss
new file mode 100644
index 0000000..73327ba
--- /dev/null
+++ b/sass/abridge-dark.scss
@@ -0,0 +1,19 @@
+/*
+ * Forked from Bamboo: https://github.com/rilwis/bamboo (MIT)
+ * which was forked from new.css (MIT)
+ * Supplemented code from Pico.css: https://github.com/picocss/pico (MIT)
+ * Supplemented code from Basic.css: https://github.com/vladocar/Basic.css (MIT)
+ * Supplemented code from AttriCSS: https://github.com/raj457036/attriCSS (MIT)
+ * Feather Icons: https://github.com/feathericons/feather (MIT)
+ * Tabler Icons: https://github.com/tabler/tabler-icons/find/master (MIT)
+ *
+ * Bamboo, New, Pico: based on Normalize.css & Sanitize.css
+ *  Normalize: https://github.com/necolas/normalize.css (MIT)
+ *  Sanitize: https://github.com/csstools/sanitize.css (CC0 1.0 Universal)
+ */
+
+@import "variables"; //config
+
+@import "themes/dark"; // Dark Theme
+
+@import "imports"; // html
diff --git a/sass/abridge-light.scss b/sass/abridge-light.scss
new file mode 100644
index 0000000..b57caf0
--- /dev/null
+++ b/sass/abridge-light.scss
@@ -0,0 +1,19 @@
+/*
+ * Forked from Bamboo: https://github.com/rilwis/bamboo (MIT)
+ * which was forked from new.css (MIT)
+ * Supplemented code from Pico.css: https://github.com/picocss/pico (MIT)
+ * Supplemented code from Basic.css: https://github.com/vladocar/Basic.css (MIT)
+ * Supplemented code from AttriCSS: https://github.com/raj457036/attriCSS (MIT)
+ * Feather Icons: https://github.com/feathericons/feather (MIT)
+ * Tabler Icons: https://github.com/tabler/tabler-icons/find/master (MIT)
+ *
+ * Bamboo, New, Pico: based on Normalize.css & Sanitize.css
+ *  Normalize: https://github.com/necolas/normalize.css (MIT)
+ *  Sanitize: https://github.com/csstools/sanitize.css (CC0 1.0 Universal)
+ */
+
+@import "variables"; //config
+
+@import "themes/light"; // Light Theme
+
+@import "imports"; // html
diff --git a/sass/abridge.scss b/sass/abridge.scss
index 6b8733a..4381866 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -12,33 +12,8 @@
  *  Sanitize: https://github.com/csstools/sanitize.css (CC0 1.0 Universal)
  */
 
-// Config
-@import "variables";
+@import "variables"; //config
 
-// Theming - you should only import one of these themes
-@import "themes/auto";
-//@import "themes/dark";
-//@import "themes/light";
+@import "themes/auto"; // Automatic Dark/Light Theme based on browser/system preference.
 
-// Includes - Sorted by importance/category (includes at top are needed most frequently)
-@import "include/document"; // html
-@import "include/typography"; // a, headings, p, ul, blockquote, ...
-@import "include/sectioning"; // body, header, main, footer
-@import "include/nav"; // Nav
-
-@import "include/embedded"; // iframe(youtube/vimeo), audio, canvas, img, svg, video
-@import "include/table"; // table, tr, td, ...
-@import "include/code"; // pre, code, ...
-@import "include/hr"; // hr
-
-@import "include/search"; // Zola Search - elasticlunr site-wide search
-
-@import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
-
-//@import "include/scroller"; // figure
-//@import "include/button"; // button, a[role=button], type=button, type=submit ...
-//@import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button)
-
-@import "include/icons"; // svg icons
-//@import "include/grid"; // section infinite grid -- test/rework this similar to hnav and milligram in that it should collapse to a single column as the page becomes narrow
-//@import "include/misc"; // template, [hidden], dialog, canvas
+@import "imports"; // html