docs: add labs lowdown videos and small material animation to thumbnails #1288
Conversation
|
A live preview of this PR will be available at the URL(s) below. https://pr1288-d9174c7---lit-dev-5ftespv5na-uc.a.run.app/ |
There was a problem hiding this comment.
The thumbnail animation is cute and I love it!
I don't know about the thumbnails for the lowdown videos though. The off center gradient with no discernible border is messing with my eyes. Ahh I realized those are the actual thumbnails from the youtube videos. Would it be bad if we made different thumbnails for these?
It also would be lovely if we could add video length metadata for these cards like we have for tutorials.
There was a problem hiding this comment.
Thank you! This is awesome.
The new thumbnails blend in with the page background and the gradient is mis-aligning. I wonder if it's worth somehow separating the thumbnails from the background. We can either update the thumbnails, or add some contrast, maybe with shadow, or border, or applying a filter that changes their color.
|
I've added backgrounds to the sections. do you think it looks too "heavy"? I can also add borders to the images, but if I do that without the bg, it seems odd https://pr1288-2f3008f---lit-dev-5ftespv5na-uc.a.run.app/learn/
Will fix failing tests once we choose one |
|
only problem with border is that it seems there's a small issue with overflow + our aspect ratio enforcement |
|
added durations:
|
|
also my position on this is that it's a hassle manually generating the thumbnails. I'd rather have a fix that doesn't require custom thumbnail generation. Currently experimenting with BG and border. Long term solution would be a server-side auto-generation of thumbnail 1x + 2x sizes |
|
Yeah. I agree we shouldn't manually generate thumbnails for videos if we can avoid it. It's just unfortunate for those series of videos. They also look bad on youtube.com in light mode. The background makes those look tolerable but then makes the lit 3 launch video thumbnail and the light blue background thumbnails weird. :( It's not perfect but I'm no better at design so I'm okay with how it is. Durations are awesome, thanks! |
There was a problem hiding this comment.
Nice!
I similarly wonder if there is a better option than the gray background, but I am also not a designer so don't want to block on that. Everything else is awesome!
Also agree that thumbnails should be automatically generated. The script would:
- Fetch from youtube using video id.
- Process the images into the right sizes and locations.
|
@AndrewJakubowicz I think there is, but we currently don't have a precedent for a lighter bg color on the site. Dark mode is such a TODO, but it requires tokenizing all of our colors in order to create a systematized background that is accessible |
|
Also @augustjk FWIW, Material Design doesn't really have anything to create contrast between a non-fullbleed image and a card https://m3.material.io/components/cards/guidelines#b1f0df76-3c86-4b32-982a-43102374e091 |
uses standard material cubic bezier animation