overriding CSS variables documented

Updated readme, exampleSite, renamed colors.scss to variables.scss

README.md

@@ -9,6 +9,52 @@ Clean, responsive, single-page [Hugo](https://gohugo.io/) website theme.
 Promo image which may be a bit outdated:<br/>
 ![Screenshot Hugo Scroll Theme](https://raw.githubusercontent.com/zjedi/hugo-scroll/master/images/tn.png)
 
+## Feature highlights
+- Responseive to screen size/shape
+- SEO friendly
+- Customizable
+- [Fork Awesome Icons][fork-awesome-icons] out of the box
+- Header logo
+- Visual guards to guarantee readability
+- External links
+- JS/CSS Assets optimized (Minification, Fingerpriting, pipeline-processed into single file)
+
+## Feature details
+### Icons
+This theme includes the full set of [Fork Awesome 1.2.0 Icons][fork-awesome-icons]. Use the `{{<icon>}}`-[shortcode][hugo-shortcodes] with the respective "fa fa-ICONNAME"-`class` to use an icon directly in your `.markdown` files à la
+```markdown
+Look at this nice »envelope«-icon: `{{<icon class="fa fa-envelope">}}`. I took this from https://forkaweso.me/Fork-Awesome/icon/envelope/ :-)
+```
+### Header logo
+Configured in `_index.md`, see `exampleSite`: `header_logo: "images/chef-hat.png"`
+
+### Footer version information
+In order to see technical version information (extracted from Hugo's [GitInfo](https://gohugo.io/variables/git/))) set the following general option in your config.toml: `enableGitInfo = true`
+
+### External links
+You can add an external link in the menu, see `external.md` in the `exampleSite`.
+
+You can also use `extlink` shortcode to create a link opening in a new tab:
+```markdown
+Visit as at {{<extlink text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
+```
+Referencing and showing icons in front of the link text is possible with a new parameter `icon`:
+```markdown
+Visit as at {{<extlink icon="fa fa-instagram" text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
+```
+
+### Customizing CSS
+Add a [`custom_head.html`](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html) file to your `layouts/partials` directory. 
+- You can use `<style>` tag to embed the overrides (better performance-wise)
+- Alternatively you can `<link>` your own `custom.css`
+
+`CSS` variables `var(--some-var-name)` from `assets\css\variables.scss` can be overridden by adding
+```scss
+:root {
+  --some-var-name: blue!important;
+}
+```
+
 ## Installation
 If you already have a Hugo site on your machine, you can simply add this theme via
 ```
@@ -35,33 +81,6 @@ You can add **a new section to the homepage** by running `hugo new homepage/my-n
 
 To create **a page separate from the homepage**, run `hugo new my-new-page.md`
 
-## Features
-### Icons
-This theme includes the full set of [Fork Awesome 1.2.0 Icons][fork-awesome-icons]. Use the `{{<icon>}}`-[shortcode][hugo-shortcodes] with the respective "fa fa-ICONNAME"-`class` to use an icon directly in your `.markdown` files à la
-```markdown
-Look at this nice »envelope«-icon: `{{<icon class="fa fa-envelope">}}`. I took this from https://forkaweso.me/Fork-Awesome/icon/envelope/ :-)
-```
-### Header logo
-Configured in `_index.md`, see `exampleSite`: `header_logo: "images/chef-hat.png"`
-
-### Footer version information
-In order to see technical version information (extracted from Hugo's [GitInfo](https://gohugo.io/variables/git/))) set the following general option in your config.toml: `enableGitInfo = true`
-
-### External links
-You can add an external link in the menu, see `external.md` in the `exampleSite`.
-
-You can also use `extlink` shortcode to create a link opening in a new tab:
-```markdown
-Visit as at {{<extlink text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
-```
-Referencing and showing icons in front of the link text is possible with a new parameter `icon`:
-```markdown
-Visit as at {{<extlink icon="fa fa-instagram" text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
-```
-
-### Customizing CSS
-Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag _or_ you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file from the `exampleSite`-directory to get started and to find more detailed instructions.
-
 ## Issues / Feedback / Contributing
 [Discussion](https://github.com/zjedi/hugo-scroll/discussions) for Q&A (when unsure), 
 [Issues](https://github.com/zjedi/hugo-scroll/issues) for tracking,

assets/css/_index.scss

@@ -1,11 +1,11 @@
-// Color variables
+// CSS variables
-@import "./colors.scss";
+@import "./variables.scss";
 
-// Theme layout and base styling
+// Theme layout and skelet styling
 @import "./theme.scss";
 
 // Content-related styles
 @import "./content.scss";
 
-// Media queries for responsiveness
+// Media queries for responsiveness (optimizations for various screen sizes)
 @import "./responsiveness.scss"

assets/css/responsiveness.scss

@@ -154,41 +154,7 @@
   .post-template .post-header {
     padding: 30px 0;
   }
-/*
-  .post-meta {
-    font-size: 1.3rem;
-  }
 
-  .post-footer {
-    padding: 4rem 0;
-    text-align: center;
-  }
-
-  .post-footer .author {
-    margin: 0 0 2rem 0;
-    padding: 0 0 1.6rem 0;
-    border-bottom: #ebf2f6 1px dashed;
-  }
-
-  .post-footer .share {
-    position: static;
-    width: auto;
-  }
-
-  .post-footer .share a {
-    margin: 1.4rem 0.8rem 0 0.8rem;
-  }
-
-  .older-posts,
-  .newer-posts {
-    position: static;
-    margin: 10px 0;
-  }
-
-  .page-number {
-    display: block;
-  }
-*/
   .site-footer {
     font-size: 1.1rem;
   }

assets/css/variables.scss

@@ -29,7 +29,7 @@
     /* Dark section - background color */
     --section-dark-bg-color: #b80135;
 
-    /* Light&Dark section >quote. Supressing color, compared to 'Light section - text color'*/
+    /* Light&Dark section >quote. Supressive color, compared to 'Light section - text color'*/
     --section-uni-quote: grey;
     /* Light&Dark section `code` a bit darker than 'Light section - background color' */
     --section-uni-code-bg-color: #e0ded7;

exampleSite/content/homepage/opener.md

@@ -11,4 +11,4 @@ You can also delegate lengthier, less important or more sizeable content to [ded
 
 > The belly rules the mind. --- spanish proverb
 
-By the way this welcome section won't show up in the top/left navigation menu.
+By the way this welcome section won't show in the cover menu.

exampleSite/layouts/partials/custom_head.html

@@ -1,50 +1,23 @@
 <!-- A partial to be overwritten by the user.
      Its content will appear before the closing </head>-tag -->
 
+
 <!-- Custom CSS via inline styles
      You may use this template to add custom CSS to your site like so: -->
+<!--
+<style>
+:root {
+    /* see variables.scss for more variables*/
 
-<!-- <style>
+    /*
-     /* Links */
+    --section-light-text-color: #3a4145!important;
-     a:hover {
+    --section-light-bg-color: #ffdb8c!important;
-         color: #b6b84c;
+    --section-dark-bg-color: #035e00!important;
-     }
+    */
+}
+</style>
+-->
 
-     /* Header Buttons on Startpage */
-     a.btn {
-         color: white;
-          background-color: #ced067;
-     }
-     a.btn:hover {
-          background-color: #b6b84c;
-     }
-
-     /* Scroll Menu on Startpage */
-     a.fn-item.active {
-          color: #b6b84c;
-     }
-     a.fn-item:hover {
-          color: #ced067;
-     }
-
-     /* Content / Sections */
-     .post-holder.odd {
-          background: #B80135;
-          color: white;
-     }
-     .post-holder {
-          background: #f2efe8;
-     }
-     body {
-          color: #3A4145;
-     }
-
-     /* Footer */
-     .site-footer {
-          color: #BBC7CC;
-          background-color: #22343A;
-     }
-</style> -->
 
 <!-- Custom CSS via "custom.css"-file
      If you would rather place your custom CSS into
@@ -61,6 +34,7 @@
 <!-- Custom link-tags for different icons
      Generated via https://favicon.io/favicon-generator/ -->
 
+<!--
 <link
   rel="apple-touch-icon"
   sizes="180x180"
@@ -78,3 +52,4 @@
   sizes="16x16"
   href="{{ "images/favicon-16x16.png" | absURL }}"
 />
+-->