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
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 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
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 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.
-
-
-
-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!
-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