Responsive clean up: Extensions Page

kaaaaathy commented 5 years ago

For post-launch, it would be nice to clean up the style sheets on certain areas of the site. It would be great to put some love and extra padding into the extensions page.

responsive - extensions

There is a separate issue about the messaging we want add if a user is on an unsupported device, either for Scratch Desktop or Scratch Link. #2338

kaaaaathy commented 5 years ago

Proposed Changes

Leaving a couple notes here for our post launch work. These are approximate values and breakpoints, and we can finagle the numbers more when we make changes. This is also meant to be a guide for all extensions pages, including microbit, LEGO ev3, LEGO wedo2, though we might need to finetune individually later on.

So far everything at 1000 and above seems OK.

960px

Change:

add margin to left of all text (about 2rem)
text wrapping to fit illustration (width can be ~50% of screen width)

890px

Change:

text should remain left aligned
ideally, the illustration can be aligned with top of the paragraph element ("microbit is a tiny circuit board...")
images that wrap below text should be left-aligned with the list item above it ("Find the display hello block"... etc) Right now they are padded inwards
"Make sure no other computer..." and the heading below are randomly centered here, we should left-align them
padding between "3" and the image should be consistent with "1" and "2"

520px

Change:

we should inherit padding all the way from 960px, but by here it can be reduced, maybe 1rem?
"Requirements" list is wrapped unnecessarily soon, which pushes everything else down. We could probably have 2-3 list items floated in a row
the "Choose your OS" breaks. I think it'd be great to keep the string and the selectors ("Windows" and "MacOS") all on one line and reduce horizontal padding.
^ But if we need to wrap (e.g. translation cases), we should make sure selectors are evenly on the 2nd line and "Choose your OS" is on the 1st line.
the number marker ("1," "2," etc) for the steps should be aligned with the paragraph list item
Do we want to remove "Starter Projects" from smaller sizes entirely? If so, we should get rid of the heading too. (I think we probably should.) But if we don't, we should fix the fact that the whole section breaks into a series of... gray strokes...

320px onwards

Change:

the illustration would feel better centered aligned
add padding (2rem or so) between "Requirements" and illustration
headings and paragraphs should wrap (see "Troubleshooting") and not afford horizontal scrolling, ideally.
when you get to the footer of the page, because the page width scrolls beyond the window but the footer is narrow, you can see the blue bg of the page. We should make the footer at least 100% of the width or fill out the bg color with gray. See more about footer case here: https://github.com/LLK/scratch-www/issues/2321

kaaaaathy commented 5 years ago

Here's a more ideal spec for reference too:

ericrosenbaum commented 5 years ago

I haven't looked at this in detail, but please note that some extension landing pages will now have a video player instead of an image in the header, in case that affects the design.

scratchfoundation / scratch-www