From 5aa561ab8a81f2935d79033f4284804d2806f46f Mon Sep 17 00:00:00 2001
From: Zdenek K <zdenek.kedaj@gmail.com>
Date: Sun, 2 Apr 2023 22:23:13 +0200
Subject: [PATCH] CSS variable names harmonized and extended

---
 assets/css/colors.scss                   |  57 +++--
 assets/css/content.scss                  |  29 ++-
 assets/css/theme.scss                    | 263 ++++++++---------------
 exampleSite/content/homepage/opener.md   |  10 +-
 exampleSite/content/homepage/services.md |  11 +-
 5 files changed, 149 insertions(+), 221 deletions(-)

diff --git a/assets/css/colors.scss b/assets/css/colors.scss
index d4a887b..557a0d5 100644
--- a/assets/css/colors.scss
+++ b/assets/css/colors.scss
@@ -1,28 +1,41 @@
 :root {
-    /** Main text color */
-    --color-text-main: #3a4145;
-    --color-text-lighter: #576161;
-    /** Text color on the cover image */
-    --color-text-cover: #37501a;
-    /** Text color on odd sections */
-    --color-text-alt: white;
 
-    /** Main background color */
-    --color-background-main: #f2efe8;
-    /** color-background : #f2efe8 defined elsewhere,why?*/
-    --color-background-darker: #e0ded7;
-    /** Background color on odd sections*/
-    --color-background-alt: #b80135;
+    /* === Cover / Landing area === */
+    --cover-text-color: #37501a;
+    /* Used for Landing screen menu buttons, but potentially usable for highlighting other things */
+    --highlight: #86c440;
+    --highlight-contrast: var(--cover-text-color);
+    /*iverse colors used for :hover */
+    --highlight-inverse: var(--cover-text-color);
+    --highlight-inverse-contrast: white;
 
-    /* Used for Landing screen menu buttons */
-    --color-glow: #86c440;
-    --color-glow-contrast: #37501a;
-    --color-glow-dark: #37501a;
-    --color-glow-dark-contrast: white;
+    /* visual guard around title and description, when the feature is enabled */
+    --cover-title-and-description-guard-bg-color: rgba(255, 255, 255, 0.6);
+    --cover-title-text-shadow: white 0px 0px 7px;
 
-    /** Primary color, e.g. for the main buttons */
-    --color-primary: #9fd067;
 
-    /** Color to be used for text on primary elements */
-    --color-primary-text: black;
+    /* === sticky top/left navigation menus === */
+    --sticky-menu-text-color: #9fd067;
+
+
+    /* === Alternating content (post) sections  === */
+    /* Light section - text color */
+    --section-light-text-color: #3a4145;
+    /* Light section - background color */
+    --section-light-bg-color: #f2efe8;
+
+    /* Dark section - text color */
+    --section-dark-text-color: var(--section-light-bg-color);
+    /* Dark section - background color */
+    --section-dark-bg-color: #b80135;
+
+    /* Light&Dark section >quote. Supressing 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;
+
+
+    /* === Footer === */
+    --footer-color-background: #22343a;
+    --footer-color: #bbc7cc;
 }
\ No newline at end of file
diff --git a/assets/css/content.scss b/assets/css/content.scss
index 0a945e1..3dc9825 100644
--- a/assets/css/content.scss
+++ b/assets/css/content.scss
@@ -11,7 +11,7 @@ body {
   font-family: "Roboto Slab", serif;
   font-size: 2rem;
   line-height: 1.6em;
-  color: #3a4145;
+  color: var(--section-light-text-color);
 }
 
 ::-moz-selection {
@@ -72,7 +72,7 @@ h6 {
   font-size: 2rem;
 }
 
-p,{
+p{
   margin: 1em 0;
 }
 
@@ -84,7 +84,7 @@ a {
     -moz-transition: all ease 0.3s;
 
     &:hover {
-        color: var(--color-primary);
+        color: var(--sticky-menu-text-color);
     }
 
     // Fix font awesome icons
@@ -138,8 +138,7 @@ hr {
     padding: 0;
 }
 
-/** Helper to be inserted by JS before quotations
-//TODO is this used anywhere?*/
+/** Helper to be inserted by JS before quotations*/
 .quo {
     margin-right: 10px;
     margin-left: 10px;
@@ -151,7 +150,7 @@ blockquote {
     box-sizing: border-box;
     margin: 1em 0 1em -2.2em;
     padding: 0 0 0 1em;
-    font-weight: lighter;
+    color: var(--section-uni-quote);
 
     p {
         margin: 0.8em 0;
@@ -178,13 +177,13 @@ blockquote {
 }
 
 mark {
-    background-color: var(--color-primary);
+    background-color: var(--sticky-menu-text-color);
     filter: brightness(125%);
 }
 
 code, tt {
-    color: var(--color-text-lighter);
-    background-color: var(--color-background-darker);
+    color: var(--section-light-text-color);
+    background-color: var(--section-uni-code-bg-color);
     border-radius: 3px;
     font-family: Inconsolata, monospace, sans-serif;
     font-size: 0.75em;
@@ -192,8 +191,8 @@ code, tt {
 }
 
 code {
-    color: var(--color-text-lighter);
-    background-color: var(--color-background-darker);
+    color: var(--section-light-text-color);
+    background-color: var(--section-uni-code-bg-color);
     border-radius: 3px;
     font-family: Inconsolata, monospace, sans-serif;
     font-size: 0.75em;
@@ -201,7 +200,7 @@ code {
 }
 
 pre {
-    background: #3a4145;
+    background: var(--section-light-text-color);
     color: #e2e2e2;
     border: 1px solid #343434;
     border-radius: 3px;
@@ -227,9 +226,9 @@ pre {
 }
 
 kbd {
-    color: var(--color-text-main);
-    background: var(--color-background-darker);
-    border: var(--color-text-lighter) 1px solid;
+    color: var(--section-light-text-color);
+    background: var(--section-uni-code-bg-color);
+    border: var(--section-light-text-color) 1px solid;
     border-radius: 4px;
     display: inline-block;
     font-size: 0.9em;
diff --git a/assets/css/theme.scss b/assets/css/theme.scss
index d38b7b2..53604eb 100644
--- a/assets/css/theme.scss
+++ b/assets/css/theme.scss
@@ -1,52 +1,8 @@
 body {
-  --color-text: var(--color-text-main);
-  --color-background: var(--color-background-main);
-}
-
-.post-holder {
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-background);
-  color: var(--color-text);
-  position: relative;
-
-  &.dark {
-    // override variables for alternative style
-    --color-text: var(--color-text-alt);
-    --color-background: var(--color-background-alt);
-
-    background-color: var(--color-background-alt);
-    color: var(--color-text-alt);
-
-    // Fix <hr> color
-    hr {
-      border-color: var(--color-text-alt);
-    }
-
-    // On alt posts move the triangle to the right and match the background the color
-    .post-after {
-      left: unset;
-      right: 6%;
-      border-top-color: var(--color-background-alt);
-    }
-  }
-
-  /**
-      The tri-angular parts between posts
-    */
-  .post-after {
-    position: absolute;
-    bottom: -40px;
-    z-index: 1;
-    left: 6%;
-    width: 0;
-    height: 0;
-    border-left: 60px solid transparent;
-    border-right: 60px solid transparent;
-    border-top: 50px solid var(--color-background);
-    border-radius: 25px;
-  }
+  --color-text: var(--section-light-text-color);
+  --color-background: var(--section-light-bg-color);
 }
+/* ===== Cover =======*/
 
 #blog-logo {
   display: block;
@@ -56,7 +12,6 @@ body {
   line-height: 0;
 }
 
-/* Big cover image on the home page */
 #site-head {
   position: relative;
   display: table;
@@ -64,14 +19,14 @@ body {
   height: 100%;
   margin-bottom: 0rem;
   text-align: center;
-  color: var(--color-text-cover);
-  background: var(--color-background-alt) no-repeat center center;
+  color: var(--cover-text-color);
+  background: var(--section-light-bg-color) no-repeat center center;
   background-size: cover;
 
   .title-and-description-guard {
     margin: auto;
     padding: 0.6em;
-    background-color: rgba(255, 255, 255, 0.6);
+    background-color: var(--cover-title-and-description-guard-bg-color);
     border-radius: 25px;
     width: fit-content;
   }
@@ -80,7 +35,7 @@ body {
     margin: 10px 0 10px 0;
     font-size: 5rem;
     letter-spacing: -1px;
-    text-shadow: white 0px 0px 7px;
+    text-shadow: var(--cover-title-text-shadow);
   }
 
   .blog-description {
@@ -90,14 +45,14 @@ body {
     font-weight: 400;
     font-family: "Roboto Slab", serif;
     letter-spacing: 0;
-    text-shadow: white 0px 0px 7px;
+    text-shadow: var(--cover-title-text-shadow);
   }
 
   // Landing screen menu
   a.btn {
     text-decoration: none;
-    background-color: var(--color-glow);
-    color: var(--color-glow-contrast);
+    background-color: var(--highlight);
+    color: var(--highlight-contrast);
     border-radius: 6px;
     -webkit-border-radius: 6px;
     display: inline-block;
@@ -114,8 +69,8 @@ body {
     font-weight: lighter;
 
     &:hover {
-      color: var(--color-glow-dark-contrast);;
-      background-color: var(--color-glow-dark);
+      color: var(--highlight-inverse-contrast);
+      background-color: var(--highlight-inverse);
     }
   }
 
@@ -140,56 +95,7 @@ body {
   }
 }
 
-/** For single pages and 404 error page the "back" button */
-#back {
-  color: rgba(0, 0, 0, 0.2);
-  position: fixed;
-  top: 8px;
-  left: 8px;
-  padding: 6px;
-  font-size: 16px;
-}
-
-/** ==========  Site footer ============ */
-.site-footer {
-  /*TODO extract footer colors to variables*/
-  background: #22343a;
-  color: #bbc7cc;
-  font-family: "Open Sans", sans-serif;
-  font-size: 1.3rem;
-  position: relative;
-  margin: 0rem 0 0 0;
-  padding: 1rem 0;
-
-  line-height: 1.5em;
-  text-align: center;
-}
-
-.site-footer a {
-  color: #bbc7cc;
-  text-decoration: underline;
-}
-
-.site-footer a:hover {
-  color: var(--color-primary);
-}
-
-/**
-  Every post, on every page, gets this style on its <article> tag
-  Not inside the post holder as this also applies for single pages
-*/
-.post {
-  position: relative;
-  width: 80%;
-  max-width: 700px;
-  margin: 0rem auto;
-  padding-bottom: 4rem;
-  padding-top: 4rem;
-  height: 70%;
-  word-break: break-word;
-  hyphens: auto;
-}
-
+// ========== Sticky menus ===========
 .fixed-nav {
   display: none;
   opacity: 1;
@@ -204,7 +110,6 @@ body {
   font-weight: bold;
 }
 
-// Navigation items
 a.fn-item {
   display: block;
   cursor: pointer;
@@ -213,7 +118,7 @@ a.fn-item {
 
   &:hover,
   &.active {
-    color: var(--color-primary);
+    color: var(--sticky-menu-text-color);
   }
 
   &.active {
@@ -221,6 +126,7 @@ a.fn-item {
   }
 }
 
+/* ========= Content ==========*/
 .post-title {
   margin: 0;
 
@@ -229,46 +135,63 @@ a.fn-item {
   }
 }
 
-/* UNUSED STYLES
-.post-after {
-  position: absolute;
-  bottom: -40px;
-  right: 6%;
-  z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 60px solid transparent;
-  border-right: 60px solid transparent;
-  border-top: 50px solid #f2efe8;
-  border-radius: 25px;
-}
-.post-after.light {
-  left: 6%;
+.post-holder {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  position: relative;
+
+  &.dark {
+    // override variables for alternative style
+    --color-text: var(--section-dark-text-color);
+    --color-background: var(--section-dark-bg-color);
+
+    background-color: var(--section-dark-bg-color);
+    color: var(--section-dark-text-color);
+
+    // Fix <hr> color
+    hr {
+      border-color: var(--section-dark-text-color);
+    }
+
+    // On alt posts move the triangle to the right and match the background the color
+    .post-after {
+      left: unset;
+      right: 6%;
+      border-top-color: var(--section-dark-bg-color);
+    }
+  }
+
+  /* The triangular parts between posts */
+  .post-after {
+    position: absolute;
+    bottom: -40px;
+    z-index: 1;
+    left: 6%;
+    width: 0;
+    height: 0;
+    border-left: 60px solid transparent;
+    border-right: 60px solid transparent;
+    border-top: 50px solid var(--color-background);
+    border-radius: 25px;
+  }
 }
 
-.post-excerpt p {
-  margin: 1.6rem 0 0 0;
-  font-size: 0.9em;
-  line-height: 1.6em;
-}
-
-.post-meta {
-  display: inline-block;
-  margin: 0 0 5px 0;
-  font-family: "Open Sans", sans-serif;
-  font-size: 1.5rem;
-  color: #9eabb3;
-}
-
-.post-meta a {
-  color: #9eabb3;
-  text-decoration: none;
-}
-
-.post-meta a:hover {
-  text-decoration: underline;
-}
+/* Every post, on every page, gets this style on its <article> tag
+  Not inside the post holder as this also applies for single pages
 */
+.post {
+  position: relative;
+  width: 80%;
+  max-width: 700px;
+  margin: 0rem auto;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+  height: 70%;
+  word-break: break-word;
+  hyphens: auto;
+}
 
 /* ======= Single pages =========== */
 .post-template {
@@ -298,36 +221,26 @@ a.fn-item {
   margin: 0 auto;
 }
 
-/* CSS tooltip saying "Subscribe!" - initially hidden */
-.tooltip {
-  opacity: 0;
-  display: inline-block;
-  padding: 4px 8px 5px 8px;
-  position: absolute;
-  top: -23px;
-  left: -23px;
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 1.1rem;
-  font-weight: bold;
-  line-height: 1em;
+
+/** ==========  Site footer ============ */
+.site-footer {
+  background: var(--footer-color-background);
+  color: var(--footer-color);
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.3rem;
+  position: relative;
+  margin: 0rem 0 0 0;
+  padding: 1rem 0;
+
+  line-height: 1.5em;
   text-align: center;
-  background: #50585d;
-  border-radius: 20px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  transition: opacity 0.3s ease, top 0.3s ease;
 }
 
-/* The little chiclet arrow under the tooltip, pointing down */
-.tooltip:after {
-  content: "";
-  border-width: 5px 5px 0 5px;
-  border-style: solid;
-  border-color: #50585d transparent;
-  display: block;
-  position: absolute;
-  bottom: -4px;
-  left: 50%;
-  margin-left: -5px;
-  z-index: 220;
-  width: 0;
+.site-footer a {
+  color: var(--footer-color);
+  text-decoration: underline;
+}
+
+.site-footer a:hover {
+  color: var(--sticky-menu-text-color);
 }
\ No newline at end of file
diff --git a/exampleSite/content/homepage/opener.md b/exampleSite/content/homepage/opener.md
index 75ea086..560313d 100644
--- a/exampleSite/content/homepage/opener.md
+++ b/exampleSite/content/homepage/opener.md
@@ -3,4 +3,12 @@ title: "Welcome"
 weight: 1
 ---
 
-Hi there. This section will not show up in the header menu above. Other than that, there's really not much to see here. I did however append some generated »Lorem ipsum«-paragraphs for you. Enjoy!
+`Hugo-Scroll` theme alternates colors of sections that are placed on single page. 
+The landing screen is meant to be visually striking.
+
+Single-page approach is oriented towards small to medium content length, that won't overwhelm the user. 
+You can also delegate lengthier, less important or more sizeable content to [dedicated pages](services).
+
+> The belly rules the mind. --- spanish proverb
+
+By the way this welcome section won't show up in the top/left navigation menu.
\ No newline at end of file
diff --git a/exampleSite/content/homepage/services.md b/exampleSite/content/homepage/services.md
index 87968ee..4b6b960 100644
--- a/exampleSite/content/homepage/services.md
+++ b/exampleSite/content/homepage/services.md
@@ -17,11 +17,8 @@ That is the important part, right? You want to know what I can do for you. This
 
 ### Nutrition Coaching
 
-This is not an easy task. You will likely have to pay money for this. You know what - let us look at a nice picture first.
-
-![Nice picture to make you pay me ;-)](images/selective-focus-photography-of-pasta-with-tomato-and-basil-1279330.jpg)
-
-Wow. That was nice, right? Well, call me and let us talk.
+This is not an easy task. 
+You will likely have to pay money for this.
 
 ### Chef Consulting
 
@@ -29,6 +26,4 @@ I can raise your table culture!
 
 ![Let us get started on a clean slate](images/woman-pouring-juice-on-glass-3184192.jpg)
 
-Want to learn more about my services?
-
-Check out [dedicated page](services) with more details.
+Want to learn more about my services? See [dedicated page](services) with more details.
\ No newline at end of file