Article headers are hard to read sometimes #650

Open
opened 2019-08-23 09:44:50 +00:00 by elegaanz · 6 comments
elegaanz commented 2019-08-23 09:44:50 +00:00 (Migrated from github.com)

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

image

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

  • Plume version: a6c84daa1a
  • Operating system: Mac OS X (but probably others too)
  • Web Browser: Safari I think (but probably others too)
With some specific screen resolutions, the shadow that should make the article metadata readable is too short to be useful: ![image](https://user-images.githubusercontent.com/16254623/63583340-1dad2500-c59b-11e9-95a1-70dd49d6832d.png) (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 commented 2019-08-23 13:09:55 +00:00 (Migrated from github.com)

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.

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 commented 2019-08-23 14:30:43 +00:00 (Migrated from github.com)

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.

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 commented 2019-08-23 15:39:26 +00:00 (Migrated from github.com)

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?

> 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 commented 2019-08-23 20:29:31 +00:00 (Migrated from github.com)

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.

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 commented 2019-08-24 02:09:46 +00:00 (Migrated from github.com)

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

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 commented 2019-08-24 10:45:16 +00:00 (Migrated from github.com)

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).

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).
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: Plume/Plume#650
No description provided.