Scratch-www: Offline editor download page: top paragraph not centered

[cwillisf]

When the download page is displayed in a wide window, the paragraph at the top of the page ("You can install the Scratch 2.0 editor....") is aligned left and wrapped to an unnecessarily narrow column width.

Note that this problem existed on the old page, but IMO stands out more on the new version of the page.

Screenshot:

[TheGrits]

@cwillisf

This was purposefully done to match the design of other newly migrated pages, such as the Educators and Developers pages.

Another option could be to implement the plainer design used by the info pages, such as the FAQ page.

[jwzimmer]

The Educators & Download pages seem to behave differently at smaller widths, and there seems to be padding to the left of the Scratch logo in the navbar that isn't present to the left of the text at the top of the Download page.

Educators page is centered at small-ish width:

Educators & Download pages at the same widths:

Lack of padding next to the text:

[TheGrits]

@jwzimmer Thank you, I understand the issue much more clearly now!

I don't have time to fix it at present, but may try to fix it at a later point.

Hey @St19Galla maybe you would be interested in tackling this help-wanted issue?

[mewtaylor]

@jwzimmer I feel like I'm seeing that padding misalignment on both pages, including Download – it looks like the logo is not being spaced out all the way to the edge of the box in all cases on that size of a screen.

As for the text on the download page taking up 100% – @carljbowman I think in our typography/global stylings we have text take up 100% on mobile. Should we consider standardizing a margin at that screen size, given that this is not the first time we're looking into this? Or do we just want to treat this as another exception to that rule?

[Sheshank-s]

I'll try this

[Sheshank-s]

Ok, created a pull request ^^

[thisandagain]

Agreed with @mewtaylor that we probably need to normalize / standardize the rules here regarding when to center and assigning a standard margin for mobile (rather than the awkward spacing we have now). Until this is decided I'm going to remove "help-wanted".

[DeleteThisAcount]

offtopic question, @cwillisf why is the navbar orange?

[kerrtravers]

I think it’s because it’s a testing/development version they’re using.

[chrisgarrity]

@DeleteThisAcount as @VutonDesign said - our testing environment has an orange navbar so we can easily see if we're on the staging server or the live site.