custom style and variables about contrast HOT 5 CLOSED

Hello Bahnfrei,

I'm glad you like my theme :-)

Your approach seems pretty straightforward, this is how I would have done it myself.

Could you tell me which variables are causing problems or give me an example where your approach works and where it doesn't?

from contrast.

Hi Niklas,

with the following code in assets/css/custom.sass

---
---

$link-color: #09c

@import anchor

body > header, article, body > footer
  padding: 1.5em calc(25% - 4.5rem)

article, body > footer
  border-top: 1px solid reduce(40)

body > header
  background: $link-color
  color: #fff

body > footer
  background: reduce(5)
  color: reduce(100)

Sometime links appear in the default color during page load or while switching between pages. So i did a quick search for the default color code and found the following in the build result:

$ find _site/ -name *css -type f -exec grep -H 68f {} \;
_site//assets/css/contrast.css:  background: #68f;
_site//assets/css/contrast.css:  box-shadow: 0 0 0 2px #68f inset;
_site//assets/css/contrast.css:  color: #68f; }
_site//assets/css/index.css:  color: #68f; }
_site//assets/css/index.css:  border-left: 4px solid #68f;
_site//assets/css/default.css:  background: #68f;
_site//assets/css/default.css:  box-shadow: 0 0 0 2px #68f inset;
_site//assets/css/default.css:  color: #68f; }

It's not there, if i change the color directly in _sass/variables.sass

Do you need additional information?

from contrast.

Hello Bahnfrei,

First of all, I noticed the flash of colour during page load myself some time ago. It started to appear at a time when I didn't change anything on the theme and I was only able to reproduce it on Chrome. So - I might be completely wrong here - but I suspect this could be a Chrome issue and has probably nothing to do with the variables issue.

Now the sass variables are scoped locally so setting a variable will only change the variable in this file, which usually is not a problem. The problem here is the weak separation between the core-theme (index.css and classes.css) and the decoration (default.css, contrast.css, custom.css - of which only one will be loaded). So there is now a different $link-color for index.css (affecting the color of links in an article and the color of the blockquote border) and custom.css (affecting the color of the read-more buttons).

This is clearly an issue on my side and I will look into it more deeply tomorrow, although I can't promise anything.

Best regards,

Niklas

from contrast.

Hi Niklas,

thank you very much for your support in this matter. of course you don't have to hurry to deal with the problem ;-)
i also thought about starting a fork to make all my adjustments available. for example i added a search, a photo gallery and the embedding of videos. maybe somebody's interested...

from contrast.

Hi Niklas,

it seems the latest changes fixed this issue. Thanks a lot!

from contrast.