White Cover Image Becoming Gray

google / docsy

A set of Hugo doc templates for launching open source content.

https://docsy.dev

Apache License 2.0

2.59k stars 894 forks source link

White Cover Image Becoming Gray #943

Open snakers4 opened 2 years ago

snakers4 commented 2 years ago

Hi,

I am trying customize Docsy by following the standard "happy-path", i.e. just clone the example project and then modify it.

I noticed that if you upload a bright (or white) hero image, it becomes gray, for example:

This is displayed when I have a completely white (i.e. #ffffff) hero image uploaded:

featured-background

I cannot find any information about this behaviour, can you please help, this is very frustrating, because I cannot really start making adding real content.

LukeTimeWalker commented 2 years ago

I think this behavior is to prevent the title and heading from becoming "invisible". If you want to disable this behavior, you can do one of the following options:

override /layouts/shortcodes/blocks/cover.html and remove the td-overlay--dark class from the section element https://github.com/google/docsy/blob/02df04c0f2d495104316ce426948069f9a98bd99/layouts/shortcodes/blocks/cover.html#L27
override the styles within /assets/scss/_styles_project.scss (you might create this file first)
```
.td-overlay--dark::after {
background-color: transparent;
}
```

Hope it helps

snakers4 commented 2 years ago

.td-overlay--dark::after {
    background-color: transparent;
}

Many thanks, this works! Is there any way to make this image not cropped or zoomed, because by default it looks a bit mushy?