[UX] Banner images are all whited-out

[trentmc]

The problem

Banner (cover) image for each README is weirdly whited-out. This makes it feel poorer-quality, and inconsistent with images below which aren't whited-out or muted in some other fashion. AFAIK this is recent; it wasn't like that a couple months ago.

Some examples are below.

Root cause

(Found via 'inspect' in chrome): It's adding inside tag for the cover image: class="w-full object-cover object-center [mask-image:linear-gradient(rgba(0,0,0,1),_rgba(0,0,0,0.5))] block"

But gitbook doesn't make it easy to remove this. (Details in comment below.)

Possible solutions

Ideally: find a way to not have the whiteout

In lieu of that, other options per page are:

• don't have a cover image. Note: this is where main page is headed, see #1423
• have an inline image, vs cover image. Example: see Cand 0 in a #1423 comment.

Examples

Main

Discover

Developers

[trentmc]

Datapoints on whited-out image...

1. The png splash image is in .gitbook/assets/cover/docs_banner.png. It's not whited out. Here's a copy:

2. The gitbook "spaces page" rendering is not whited out either: https://app.gitbook.com/o/mTcjMqA4ylf55anucjH8/s/zQlpIJEeu8x5yl0OLuXn/

3. Recall that screenshots in the description (with whited-out) were on macos chrome. What about other browsers? Here's macos firefox. It's whited-out too.

4. Here's ios chrome. It's whited-out too.

5. Q: does the PR preview show whited-out? A: yes https://docs.oceanprotocol.com/~/revisions/sFqCS3PKcw0DBTcDVVfi

6. Q: is dark-mode whited-out? Experiment: Go to oceanprotocol.com, bottom-right, and toggle dark-mode. Result: not whited-out

Summary: whited out at (everywhere to users or staging) x lightmode.

[trentmc]

More on the whiteout: It's inserting this inside <image> tag for the cover image: class="w-full object-cover object-center [mask-image:linear-gradient(rgba(0,0,0,1),_rgba(0,0,0,0.5))] block"

But gitbook doesn't make it easy to remove this.

Details:

Via chrome inspection:

With chrome, we can locally remove this:

---

Here's the css code (on the right)

Q: Will gitbook let you change css? Answer 1 from searching docs: "no" across the board

Q: Will gitbook let you change css? Answer 2 from google search: "no" for cover images, "yes" for other images (ie inline images). Since we care about cover images, no? https://docs.gitbook.com/content-editor/blocks/insert-images