Twenty Fourteen: Improve its responsive pattern

[iamtakashi]

Let's improve its responsive pattern!

The main thing is the main content area should not get wider than 474px and, by centring it with auto margins, we can simplify a lot of styles.

Also for the full-width layout (full-width page template and attachment page), we can utilise the side margins to show wider images for full-size, and move floated images (except thumbnail size) into the side margins in order to leave space as much as possible for wrapping texts.

[iamtakashi]

First pass for improving the responsive pattern.

[SergeyBiryukov]

3,6rem in line 121 looks like a typo. Should it be 3.6rem?

[iamtakashi]

Correct a typo in the previous patch

[iamtakashi]

Replying to SergeyBiryukov:

3,6rem in line 121 looks like a typo. Should it be 3.6rem?

Well spotted, thanks for pointing out! A corrected patch attached.

[iamtakashi]

A new patch made from WordPress root directory

[buffler]

I think this might belong on this ticket instead of in a new one -

Might be an edge case, but before.png (attached) shows a float issue that occurs when a featured image is much taller than the title and meta to its right. Could be a few ways to approach this, but it seemed to me like the best would be to add .hentry to the 'clearing' section of style.css. I've attached a patch that does this. The result of this patch can be seen in after.png (also attached).

[buffler]

shows float issue on narrow screens

[buffler]

fixes float issue on narrow screens

[iamtakashi]

Refreshed patch as the first pass at improving the responsive pattern

[lancewillett]

In 25519:

Twenty Fourteen: first pass at improving responsive patterns and allowing for a full-width layout when no secondary sidebar is present. Props iamtakashi, see #25332.

[lancewillett]

Closing, we can open new tickets for other issues.

[lancewillett]

Re-opening since RTL was missed in these changes. Please update RTL to match style.css, especially in the media queries.

[lancewillett]

In 25749:

Twenty Fourteen: merge recent stylesheet changes to RTL, and file miscellaneous CSS cleanup.

RTL still needs more responsive fixes, see #25332 -- and a11y menu fixes, see #25054.

[iamtakashi]

Thanks for the reminder. I'm working on CSS clean-up and I'm planning to update CSS for RTL after the clean-up.

[chriscct7]

The main thing is the main content area should not get wider than 474px

Does this also apply to the full-page (no sidebars) page templates?

[iamtakashi]

Replying to chriscct7:

The main thing is the main content area should not get wider than 474px

Does this also apply to the full-page (no sidebars) page templates?

For text, yes.

[lancewillett]

Closing as Takashi is going to work on RTL separately, later.