Article headers are hard to read sometimes

[elegaanz]

With some specific screen resolutions, the shadow that should make the article metadata readable is too short to be useful:

(example with an Apple Retina screen, that is equivalent to 1440×900)

• Plume version: a6c84daa1a242246ac01260eb9bc201dd6e47830
• Operating system: Mac OS X (but probably others too)
• Web Browser: Safari I think (but probably others too)

[marek-lach]

This issue is only apparent of white (or transparent) backgrounds. Also present on iPhone. Maybe some use of -webkit-linear-gradient in the theme's stylesheet files would solve it.

[elegaanz]

The linear-gradient/shadow is here as you can see, so I don't think it is a browser or platform specific issue, it is just that we should find a way to make sure it is big enough to cover all text, independently of screen size.

[marek-lach]

The linear-gradient/shadow is here as you can see, so I don't think it is a browser or platform specific issue, it is just that we should find a way to make sure it is big enough to cover all text, independently of screen size.

So... simply increasing the vh values in article.scss?

[elegaanz]

It could be a solution, but at the same time, it would hide the image too much I think. I need to do test to see if it fixes the issue for every screen ratio/size, and if it doesn't look too weird to have a shadow over the whole image.

[trwnh]

maybe a more general flat shadow? or adding the shadow to the text box instead of the whole header? or perhaps redesigning the header such that the entire article overlays it instead of just the article header?

for consideration: i polled about similar things some time ago here: https://mastodon.social/@trwnh/102313099026637673

[elegaanz]

Thanks for sharing this thread! The results will probably help a lot (and thanks for the suggestions too, I will experiment with different solutions to see what is best).