yann/hugo-scroll
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

CSS variable names harmonized and extended

Browse source
This commit is contained in:
Zdenek K 2023-04-02 22:23:13 +02:00
parent f4ac2a0612
commit 5aa561ab8a
5 changed files with 149 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
assets/css/colors.scss
View file

@ -1,28 +1,41 @@
:root { :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 */ /* === Cover / Landing area === */
--color-background-main: #f2efe8; --cover-text-color: #37501a;
/** color-background : #f2efe8 defined elsewhere,why?*/ /* Used for Landing screen menu buttons, but potentially usable for highlighting other things */
--color-background-darker: #e0ded7; --highlight: #86c440;
/** Background color on odd sections*/ --highlight-contrast: var(--cover-text-color);
--color-background-alt: #b80135; /*iverse colors used for :hover */
--highlight-inverse: var(--cover-text-color);
--highlight-inverse-contrast: white;
/* Used for Landing screen menu buttons */ /* visual guard around title and description, when the feature is enabled */
--color-glow: #86c440; --cover-title-and-description-guard-bg-color: rgba(255, 255, 255, 0.6);
--color-glow-contrast: #37501a; --cover-title-text-shadow: white 0px 0px 7px;
--color-glow-dark: #37501a;
--color-glow-dark-contrast: white;
/** Primary color, e.g. for the main buttons */
--color-primary: #9fd067;
/** Color to be used for text on primary elements */ /* === sticky top/left navigation menus === */
--color-primary-text: black; --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;
} }

29
assets/css/content.scss
View file

@ -11,7 +11,7 @@ body {
font-family: "Roboto Slab", serif; font-family: "Roboto Slab", serif;
font-size: 2rem; font-size: 2rem;
line-height: 1.6em; line-height: 1.6em;
color: #3a4145; color: var(--section-light-text-color);
} }
::-moz-selection { ::-moz-selection {
@ -72,7 +72,7 @@ h6 {
font-size: 2rem; font-size: 2rem;
} }
p,{ p{
margin: 1em 0; margin: 1em 0;
} }
@ -84,7 +84,7 @@ a {
-moz-transition: all ease 0.3s; -moz-transition: all ease 0.3s;
&:hover { &:hover {
color: var(--color-primary); color: var(--sticky-menu-text-color);
} }
// Fix font awesome icons // Fix font awesome icons
@ -138,8 +138,7 @@ hr {
padding: 0; padding: 0;
} }
/** Helper to be inserted by JS before quotations /** Helper to be inserted by JS before quotations*/
//TODO is this used anywhere?*/
.quo { .quo {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
@ -151,7 +150,7 @@ blockquote {
box-sizing: border-box; box-sizing: border-box;
margin: 1em 0 1em -2.2em; margin: 1em 0 1em -2.2em;
padding: 0 0 0 1em; padding: 0 0 0 1em;
font-weight: lighter; color: var(--section-uni-quote);
p { p {
margin: 0.8em 0; margin: 0.8em 0;
@ -178,13 +177,13 @@ blockquote {
} }
mark { mark {
background-color: var(--color-primary); background-color: var(--sticky-menu-text-color);
filter: brightness(125%); filter: brightness(125%);
} }
code, tt { code, tt {
color: var(--color-text-lighter); color: var(--section-light-text-color);
background-color: var(--color-background-darker); background-color: var(--section-uni-code-bg-color);
border-radius: 3px; border-radius: 3px;
font-family: Inconsolata, monospace, sans-serif; font-family: Inconsolata, monospace, sans-serif;
font-size: 0.75em; font-size: 0.75em;
@ -192,8 +191,8 @@ code, tt {
} }
code { code {
color: var(--color-text-lighter); color: var(--section-light-text-color);
background-color: var(--color-background-darker); background-color: var(--section-uni-code-bg-color);
border-radius: 3px; border-radius: 3px;
font-family: Inconsolata, monospace, sans-serif; font-family: Inconsolata, monospace, sans-serif;
font-size: 0.75em; font-size: 0.75em;
@ -201,7 +200,7 @@ code {
} }
pre { pre {
background: #3a4145; background: var(--section-light-text-color);
color: #e2e2e2; color: #e2e2e2;
border: 1px solid #343434; border: 1px solid #343434;
border-radius: 3px; border-radius: 3px;
@ -227,9 +226,9 @@ pre {
} }
kbd { kbd {
color: var(--color-text-main); color: var(--section-light-text-color);
background: var(--color-background-darker); background: var(--section-uni-code-bg-color);
border: var(--color-text-lighter) 1px solid; border: var(--section-light-text-color) 1px solid;
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
font-size: 0.9em; font-size: 0.9em;

263
assets/css/theme.scss
View file

@ -1,52 +1,8 @@
body { body {
--color-text: var(--color-text-main); --color-text: var(--section-light-text-color);
--color-background: var(--color-background-main); --color-background: var(--section-light-bg-color);
}
.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;
}
} }
/* ===== Cover =======*/
#blog-logo { #blog-logo {
display: block; display: block;
@ -56,7 +12,6 @@ body {
line-height: 0; line-height: 0;
} }
/* Big cover image on the home page */
#site-head { #site-head {
position: relative; position: relative;
display: table; display: table;
@ -64,14 +19,14 @@ body {
height: 100%; height: 100%;
margin-bottom: 0rem; margin-bottom: 0rem;
text-align: center; text-align: center;
color: var(--color-text-cover); color: var(--cover-text-color);
background: var(--color-background-alt) no-repeat center center; background: var(--section-light-bg-color) no-repeat center center;
background-size: cover; background-size: cover;
.title-and-description-guard { .title-and-description-guard {
margin: auto; margin: auto;
padding: 0.6em; padding: 0.6em;
background-color: rgba(255, 255, 255, 0.6); background-color: var(--cover-title-and-description-guard-bg-color);
border-radius: 25px; border-radius: 25px;
width: fit-content; width: fit-content;
} }
@ -80,7 +35,7 @@ body {
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
font-size: 5rem; font-size: 5rem;
letter-spacing: -1px; letter-spacing: -1px;
text-shadow: white 0px 0px 7px; text-shadow: var(--cover-title-text-shadow);
} }
.blog-description { .blog-description {
@ -90,14 +45,14 @@ body {
font-weight: 400; font-weight: 400;
font-family: "Roboto Slab", serif; font-family: "Roboto Slab", serif;
letter-spacing: 0; letter-spacing: 0;
text-shadow: white 0px 0px 7px; text-shadow: var(--cover-title-text-shadow);
} }
// Landing screen menu // Landing screen menu
a.btn { a.btn {
text-decoration: none; text-decoration: none;
background-color: var(--color-glow); background-color: var(--highlight);
color: var(--color-glow-contrast); color: var(--highlight-contrast);
border-radius: 6px; border-radius: 6px;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
display: inline-block; display: inline-block;
@ -114,8 +69,8 @@ body {
font-weight: lighter; font-weight: lighter;
&:hover { &:hover {
color: var(--color-glow-dark-contrast);; color: var(--highlight-inverse-contrast);
background-color: var(--color-glow-dark); background-color: var(--highlight-inverse);
} }
} }
@ -140,56 +95,7 @@ body {
} }
} }
/** For single pages and 404 error page the "back" button */ // ========== Sticky menus ===========
#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;
}
.fixed-nav { .fixed-nav {
display: none; display: none;
opacity: 1; opacity: 1;
@ -204,7 +110,6 @@ body {
font-weight: bold; font-weight: bold;
} }
// Navigation items
a.fn-item { a.fn-item {
display: block; display: block;
cursor: pointer; cursor: pointer;
@ -213,7 +118,7 @@ a.fn-item {
&:hover, &:hover,
&.active { &.active {
color: var(--color-primary); color: var(--sticky-menu-text-color);
} }
&.active { &.active {
@ -221,6 +126,7 @@ a.fn-item {
} }
} }
/* ========= Content ==========*/
.post-title { .post-title {
margin: 0; margin: 0;
@ -229,46 +135,63 @@ a.fn-item {
} }
} }
/* UNUSED STYLES .post-holder {
.post-after { width: 100%;
position: absolute; height: 100%;
bottom: -40px; background-color: var(--color-background);
right: 6%; color: var(--color-text);
z-index: 1; position: relative;
width: 0;
height: 0; &.dark {
border-left: 60px solid transparent; // override variables for alternative style
border-right: 60px solid transparent; --color-text: var(--section-dark-text-color);
border-top: 50px solid #f2efe8; --color-background: var(--section-dark-bg-color);
border-radius: 25px;
} background-color: var(--section-dark-bg-color);
.post-after.light { color: var(--section-dark-text-color);
left: 6%;
// 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 { /* Every post, on every page, gets this style on its <article> tag
margin: 1.6rem 0 0 0; Not inside the post holder as this also applies for single pages
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;
}
*/ */
.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 =========== */ /* ======= Single pages =========== */
.post-template { .post-template {
@ -298,36 +221,26 @@ a.fn-item {
margin: 0 auto; margin: 0 auto;
} }
/* CSS tooltip saying "Subscribe!" - initially hidden */
.tooltip { /** ========== Site footer ============ */
opacity: 0; .site-footer {
display: inline-block; background: var(--footer-color-background);
padding: 4px 8px 5px 8px; color: var(--footer-color);
position: absolute; font-family: "Open Sans", sans-serif;
top: -23px; font-size: 1.3rem;
left: -23px; position: relative;
color: rgba(255, 255, 255, 0.9); margin: 0rem 0 0 0;
font-size: 1.1rem; padding: 1rem 0;
font-weight: bold;
line-height: 1em; line-height: 1.5em;
text-align: center; 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 */ .site-footer a {
.tooltip:after { color: var(--footer-color);
content: ""; text-decoration: underline;
border-width: 5px 5px 0 5px; }
border-style: solid;
border-color: #50585d transparent; .site-footer a:hover {
display: block; color: var(--sticky-menu-text-color);
position: absolute;
bottom: -4px;
left: 50%;
margin-left: -5px;
z-index: 220;
width: 0;
} }

10
exampleSite/content/homepage/opener.md
View file

@ -3,4 +3,12 @@ title: "Welcome"
weight: 1 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.

11
exampleSite/content/homepage/services.md
View file

@ -17,11 +17,8 @@ That is the important part, right? You want to know what I can do for you. This
### Nutrition Coaching ### 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. This is not an easy task.
You will likely have to pay money for this.
![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.
### Chef Consulting ### 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) ![Let us get started on a clean slate](images/woman-pouring-juice-on-glass-3184192.jpg)
Want to learn more about my services? Want to learn more about my services? See [dedicated page](services) with more details.
Check out [dedicated page](services) with more details.