Banner adjustments and text adjustments

[tlienart]

A banner can be fairly annoying to handle at all sorts of geometry, here's 840x400 for instance

--> unreadable

What you could do:

1. have all sorts of media rules to swap the colour of the text when you know there's overlap (this is the most painful route to do well)
2. add another div behind main which has a grey-ish colour background throughout (i.e. the whole page is a bit dark) and use light text for GPU4GEO and nav (this is what I'd recommend)
3. wash out the banner by reducing the opacity (you can also do this manually) so that dark text is fine even when it's over the image.

[luraess]

Thanks for flagging this @tlienart. At the tested resolution it is indeed hardly readable. I like indeed your suggestion 2. and tried to achieve something similar. However, the CSS being single line makes it hard to isolate the various bits. If you could point me to the text colour def it would be helpful 🙃

[tlienart]

I recommend using Firefox or Chromium's developer tools for this; you can point to objects and know exactly which property affects them.

In the case of the title (GPU4GEO, Frontier GPU...) it's a H1 and H2 inside a .about. More complete path path for the H1 is

body.colorscheme-light main.wrapper.landing main.wrapper div.content section.container.centered div.about h1

you'll probably be fine just with

.centered .about h1 { color: ... }

also note that there's a light/dark setting so you'll have to adjust accordingly (probably change the image in the dark setting as well).

For the navigation on the left and right respectively:

body.colorscheme-light main.wrapper.landing main.wrapper nav.navigation section.container a.navigation-title
body.colorscheme-light main.wrapper.landing main.wrapper nav.navigation section.container ul.navigation-list li.navigation-item

you'd probably be fine with

.navigation-title a { color: ... }
.navigation-item a {color : ... }

(same comment with light/dark mode).

[luraess]

Thanks for the dev workflow hints. After testing several options, it seems that the most robust approach that would necessitate less changes is to have two images, one for each mode. See https://github.com/PTsolvers/GPU4GEO/commit/c9988b091a0d5d8c23fc77742de19162a6674e8e.

[tlienart]

lgtm, well done