YouTube: small style fixes

[kristinashu]

Main styling fixes:

• Story title should be 38px instead of 42px
• End the background gradient higher up on the page (so only the first story has some pink background but the rest of the stories are on white background so they're easier to read)
• Increase spacing between stories to about 80px (see screen cap below)
• Make the spacing above and below the story title the same (maybe about 24px) (see screen cap below)
• Decrease the amount of opacity even further for the images that haven't "passed" the text yet. Sometimes the overlap makes it hard to read (see screen cap below).
• Center the scroll icon (see screen cap below)

Screen cap from comp:

Screen cap from comp:

Screen cap from prod:

Screen cap from prod:

Nice-to-have circle updates:

• Would it be possible to increase the size of the photos? Currently they feel a bit small and makes the "tunnel" feel a little sparse
• Concentric circle 1: Can the size of the first circle be smaller, perhaps half the size it is now?
• Concentric circle 2: The spacing between the concentric circles seem to be different for each circle. Could we make it the same and increase the spacing? I would guess perhaps 2-3x the spacing we have now. What https://www.onfaitquoipourleclimat.be/ has for its circles is a good benchmark?
• Would it also be possible to blur both sides of the circles and increase the blur? Currently it looks like only one side is blurred?

[ankiiitraj]

I want to contribute to this fix. Can you assign me this?

[mmmavis]

Hey @anilkanji , thanks for offering help! This is not a ticket for contributors to pick up as our team is actively working on tickets related to this YouTube project.

[mmmavis]

@kristinashu Can we prioritize items on the above list? Non-animated intro related tweaks should be easy to do but tweaking anything in the intro actually takes more time and effort than they seem. For example, the circles are actually placed in a 3D space and positioned differently along the z-axis (depth). The spacing between each circle is actually exactly the same but 3D perception makes them seem different. https://www.onfaitquoipourleclimat.be/ only shows 2 rings at a time and the rings might be implemented in a 2D way. We can change the way rings appear into view but it really depends on how much more time we wanna spend on this project. As for blurring the rings... this is as much as we can do with using purely CSS to draw the circles, we can try using images with transparent background and see if they turn out better.

[kristinashu]

Ok @mmmavis, I've prioritized the list. The circle updates can be a nice-to-have or a maybe-later update.