adds blockquote styles; adds custom styles via hugo pipes

19 files changed, 74 insertions, 10 deletions

diff --git a/README.md b/README.md
index 40cfb04..e1dcfc9 100644
--- a/README.md
+++ b/README.md
@@ -13,12 +13,13 @@ For a live demo of the theme, see at:
 - General
     - Hugo's Builtin [Content Management](https://gohugo.io/content-management/) Features
     - [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) CSS classes are automatically available via HTML/CSS in your Markdown content
+    - [Font Awesome](https://fontawesome.com/) Icons with Links
+    - Ability to customize CSS styles
     - Google Analytics
 - Header
     - Title and Subtitle
     - Image
     - Navigation Menu
-    - [Font Awesome](https://fontawesome.com/) Icons with Links
 - Main Body
     - Last 'N' Recent Pages
     - Categorical Page Grouping
@@ -87,6 +88,9 @@ copyright = "© Copyright Year, Your Name"
   home_image = "/images/avatar.png"          # Path to header image starting from the static directory
   recent_posts = 5                           # Max amount of recent posts to show
   mainSections = ["posts", "post", "blog"]   # Main sections to include in recent posts
+  [params.style]                             # CSS style overrides
+    backgroundColor = "#f8f9fa"
+    fontColor = "#212529"
   [[params.social]]
     fa_icon = "fab fa-github fa-1x"          # Font Awesome icon class
     href = "http://github.com/youruser"      # Link to associate with icon (http://, https://, mailto:)
@@ -109,6 +113,36 @@ To get updates to the theme, run the following from the root directory of your H
 $ git submodule update --remote themes/devise
 ```
 
+### Adding Custom Styles
+
+Adding custom styles to the devise theme is simple. There are two options 
+available for doing so:
+
+1. Set style parameters in the `config.toml` file
+2. Add custom [Sass](https://sass-lang.com/) to your assets folder
+
+#### Option 1:
+
+In the `config.toml` file of your website, you can set the following custom style
+parameters: 
+
+```toml
+[params.style]
+  backgroundColor = "#f8f9fa"
+  fontColor = "#212529"
+```
+
+#### Option 2:
+
+To add custom [Sass](https://sass-lang.com/) to the devise theme, you'll 
+need to add the following file to the root directory of your site:
+
+- `assets/sass/custom.scss`
+
+In the file, you can use [Sass](https://sass-lang.com/) syntax to declare
+your custom styles. After doing so, you should see custom styling added to 
+your devise based Hugo site.
+
 ## Demo
 
 To run a live demo of the theme on your laptop, run the following from the `exampleSite` directory of the 
diff --git a/assets/sass/template.scss b/assets/sass/override.scss
index 3ac7148..2cdca82 100644
--- a/assets/sass/template.scss
+++ b/assets/sass/override.scss
@@ -1,16 +1,15 @@
-// === Import Bootstrap and variable overrides ===
+// === Import Bootstrap and set variable overrides ===
 $body-bg: {{ .Param "style.backgroundColor" }};
+$body-color: {{ .Param "style.fontColor" }};
 $font-family-base: "Helvetica Neue", Arial, sans-serif;
 $font-size-base: 0.95rem;
-
 @import "../../node_modules/bootstrap/scss/bootstrap";
 
 // === Import Font Awesome ===
-$fa-font-path: "./webfonts";
+$fa-font-path: "../webfonts";
 @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
 @import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
 @import "../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
-
 .fa-1x {
   font-size: 0.9em !important;
 }
@@ -40,7 +39,7 @@ $fa-font-path: "./webfonts";
 }
 
 .category {
-  color: white;
+  color: $body-bg;
   background-color: $body-color;
 }
 
@@ -58,7 +57,6 @@ hr {
           rgba(51, 51, 51, 0.3), rgba(0, 0, 0, 0));
 }
 
-
 h1, h2 {
   letter-spacing: -0.085rem;
   font-weight: 700;
@@ -94,6 +92,27 @@ a {
   text-decoration: underline;
 }
 
+blockquote {
+  background: $body-bg;
+  border-left: 8px solid #ccc;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+}
+
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+
+blockquote p {
+  display: inline;
+}
+
 // === Media breakpoints ===
 // 576px
 @include media-breakpoint-up(sm) {}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 5fdf067..0e56560 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -36,6 +36,9 @@ copyright = "© Copyright Year, Your Name"
   home_image = "/images/avatar.png"          # Path to header image starting from the static directory
   recent_posts = 5                           # Max amount of recent posts to show
   mainSections = ["posts", "post", "blog"]   # Main sections to include in recent posts
+  [params.style]                             # CSS style overrides
+    backgroundColor = "#f8f9fa"
+    fontColor = "#212529"
   [[params.social]]
     fa_icon = "fab fa-github fa-1x"          # Font Awesome icon class
     href = "http://github.com/youruser"      # Link to associate with icon (http://, https://, mailto:)
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 861d4a3..ce95a1e 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -2,8 +2,16 @@
     <title>{{ .Title }}</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    {{ $sassTemplate := resources.Get "sass/template.scss" }}
-    {{ $style := $sassTemplate | resources.ExecuteAsTemplate "css/theme.scss" . | toCSS | minify }}
-    <link rel="stylesheet" href="{{ $style.Permalink }}">
+
+    {{/* Adds complete override capability */}}
+    {{ $overrideTemplate := resources.Get "sass/override.scss" }}
+    {{ $override := $overrideTemplate | resources.ExecuteAsTemplate "css/theme.scss" . | toCSS | minify }}
+    <link rel="stylesheet" href="{{ $override.Permalink }}">
+
+    {{/* Adds custom styles capability */}}
+    {{ $customTemplate := resources.Get "sass/custom.scss" }}
+    {{ $custom := $customTemplate | resources.ExecuteAsTemplate "css/custom.scss" . | toCSS | minify }}
+    <link rel="stylesheet" href="{{ $custom.Permalink }}">
+
     {{ template "_internal/google_analytics.html" . }}
 </head>
diff --git a/assets/sass/webfonts/fa-brands-400.eot b/static/webfonts/fa-brands-400.eot
index 4f991ad..4f991ad 100644
--- a/assets/sass/webfonts/fa-brands-400.eot
+++ b/static/webfonts/fa-brands-400.eot
diff --git a/assets/sass/webfonts/fa-brands-400.svg b/static/webfonts/fa-brands-400.svg
index c5f544c..c5f544c 100644
--- a/assets/sass/webfonts/fa-brands-400.svg
+++ b/static/webfonts/fa-brands-400.svg
diff --git a/assets/sass/webfonts/fa-brands-400.ttf b/static/webfonts/fa-brands-400.ttf
index 8836d9f..8836d9f 100644
--- a/assets/sass/webfonts/fa-brands-400.ttf
+++ b/static/webfonts/fa-brands-400.ttf
diff --git a/assets/sass/webfonts/fa-brands-400.woff b/static/webfonts/fa-brands-400.woff
index d65148d..d65148d 100644
--- a/assets/sass/webfonts/fa-brands-400.woff
+++ b/static/webfonts/fa-brands-400.woff
diff --git a/assets/sass/webfonts/fa-brands-400.woff2 b/static/webfonts/fa-brands-400.woff2
index e2bfe66..e2bfe66 100644
--- a/assets/sass/webfonts/fa-brands-400.woff2
+++ b/static/webfonts/fa-brands-400.woff2
diff --git a/assets/sass/webfonts/fa-regular-400.eot b/static/webfonts/fa-regular-400.eot
index f9c3418..f9c3418 100644
--- a/assets/sass/webfonts/fa-regular-400.eot
+++ b/static/webfonts/fa-regular-400.eot
diff --git a/assets/sass/webfonts/fa-regular-400.svg b/static/webfonts/fa-regular-400.svg
index 38b6671..38b6671 100644
--- a/assets/sass/webfonts/fa-regular-400.svg
+++ b/static/webfonts/fa-regular-400.svg
diff --git a/assets/sass/webfonts/fa-regular-400.ttf b/static/webfonts/fa-regular-400.ttf
index b4abb3d..b4abb3d 100644
--- a/assets/sass/webfonts/fa-regular-400.ttf
+++ b/static/webfonts/fa-regular-400.ttf
diff --git a/assets/sass/webfonts/fa-regular-400.woff b/static/webfonts/fa-regular-400.woff
index b741435..b741435 100644
--- a/assets/sass/webfonts/fa-regular-400.woff
+++ b/static/webfonts/fa-regular-400.woff
diff --git a/assets/sass/webfonts/fa-regular-400.woff2 b/static/webfonts/fa-regular-400.woff2
index 7faee56..7faee56 100644
--- a/assets/sass/webfonts/fa-regular-400.woff2
+++ b/static/webfonts/fa-regular-400.woff2
diff --git a/assets/sass/webfonts/fa-solid-900.eot b/static/webfonts/fa-solid-900.eot
index bf4fd60..bf4fd60 100644
--- a/assets/sass/webfonts/fa-solid-900.eot
+++ b/static/webfonts/fa-solid-900.eot
diff --git a/assets/sass/webfonts/fa-solid-900.svg b/static/webfonts/fa-solid-900.svg
index 35b7866..35b7866 100644
--- a/assets/sass/webfonts/fa-solid-900.svg
+++ b/static/webfonts/fa-solid-900.svg
diff --git a/assets/sass/webfonts/fa-solid-900.ttf b/static/webfonts/fa-solid-900.ttf
index 9821bea..9821bea 100644
--- a/assets/sass/webfonts/fa-solid-900.ttf
+++ b/static/webfonts/fa-solid-900.ttf
diff --git a/assets/sass/webfonts/fa-solid-900.woff b/static/webfonts/fa-solid-900.woff
index 4932553..4932553 100644
--- a/assets/sass/webfonts/fa-solid-900.woff
+++ b/static/webfonts/fa-solid-900.woff
diff --git a/assets/sass/webfonts/fa-solid-900.woff2 b/static/webfonts/fa-solid-900.woff2
index 92c4d57..92c4d57 100644
--- a/assets/sass/webfonts/fa-solid-900.woff2
+++ b/static/webfonts/fa-solid-900.woff2