bevy-website
bevy-website copied to clipboard
bevyengine
Improve feature sections responsive behavior
- Improve features responsive behavior. Now it'll change the layout based on the width and orientation.
- Group classes under "feature" component
- Remove "reversed" classes in favor of
:nth-child(even)selector
This is another preparation PR for #315 Fixes #308
https://user-images.githubusercontent.com/188612/161916805-b31ab80b-ef63-4ab5-89bc-7f71a99b6a95.mp4
I was initially confused about the "BEM naming," but it seems logical.
Tested in MacOS Chrome/Firefox and iOS Chrome/Safari and looks good to me.
@rparrett for a static site like this, it gives you poor man's encapsulation for the CSS (less chances to pollute & be polluted by other CSS classes; less specificity issues…) and the HTML is kind-of self documenting. The downside is its verbosity… I like that though. ^_^
I do like that this is better at using available space, but I'd prefer it if we could maintain the aspect ratios of the image containers:
(left is main, right is this pr)
Not a huge fan of the "squashed" look.
Or at least, I'd like to do a side by side comparison where it uses available space and maintains aspect ratios. Its possible that maintaining aspect ratios and using available space will feel "too big".
I just noticed that the blender "whats new" feature overview is very similar to ours, and they manage to maintain aspect ratios, but they use a "wider" one than we currently do: https://www.blender.org/download/releases/3-1/
This one is tricky, making it fixed aspect-ratio in some cases (e.g. 2D Renderer) makes it look too big. In Blender they are using the landscape aspect ratio for all the images; I'm not sure if it applies in this case. So instead, I've changed how the background color behaves, for mobile, instead of taking all the width it shrinks to the image.
I don't know, I'm still not convinced. Maybe is better to leave it as it is in prod. 😓
https://user-images.githubusercontent.com/188612/162588290-76b84bee-eceb-4d55-b62e-50090ecb09f0.mp4