overriding CSS variables documented

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

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 */
-     a:hover {
-         color: #b6b84c;
-     }
+    /*
+    --section-light-text-color: #3a4145!important;
+    --section-light-bg-color: #ffdb8c!important;
+    --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 }}"
 />
+-->