Improve preview

[jasmussen]

Overall looks good. The sidebar has been made useful with patterns and style variations. A few notes:

• Should we move the Wide, Medium, and Narrow buttons to the top, to match their placement for pattern resizing?
• Perhaps we should make the Download button slightly smaller (50px big button).
• Style variations and Patterns should both have the same heading style.
• Either we show the count for both variations and patterns, or neither. Either seems fine.

Finally, the download button is sticky at the bottom so it’s easy to see, that’s good. But it’s a long way to tab if you’re just using the keyboard, having to go through style variations and patterns first. Maybe we can move it to the top, right after the description? A bit like this sketch:

[ryelle]

Just FYI, I've moved this back to pending discussion & added the Needs Design Feedback label since there are still unanswered design questions here.

Should we move the Wide, Medium, and Narrow buttons to the top, to match their placement for pattern resizing?

We don't have the same resizing issue that we initially had with the toggles on Patterns, and this UI is very different from that one IMO. Plus, this selector is at the bottom of the sidebar on the old theme, so I would lean to leaving it at the bottom.

Style variations and Patterns should both have the same heading style.

Which one?

Perhaps we should make the Download button slightly smaller

Does the "small" variation work?

Maybe we can move it to the top, right after the description?

Sure, and styles/patterns would appear after that? Should there be any separator or extra space under the zip name?

[jasmussen]

We don't have the same resizing issue that we initially had with the toggles on Patterns, and this UI is very different from that one IMO. Plus, this selector is at the bottom of the sidebar on the old theme, so I would lean to leaving it at the bottom.

We can go with that, sure, can always revisit.

Style variations and Patterns should both have the same heading style.

Which one?

I opened a lot of issues yesterday, and thanks for diving in, I should've been more clear.

This EB Garamond heading style works well:

Works better than the paragraph style here:

So if it could be just a heading for style variations in similar style to Patterns, that would work well.

Does the "small" variation work?

Yes.

Sure, and styles/patterns would appear after that? Should there be any separator or extra space under the zip name?

Most likely. Here's a quick inspector sketch of how it could look, all of it coming together:

Note here the font size of the Style variations and Patterns headings is the H5 font size of 26px. Let me know if that works for you.