Reset section > ul width on mobile

[jez]

It looks like the fix for #91 introduced a selector section > ul which is more specific than @media(...) { ul {} }. This means that lists on mobile don't get their width reset to take up the full screen.

In particular, checkout this line. You could probably just change this to

1. section > ul {...}, or
2. ul, section > ul {...} if you wanted to be defensive about things.

(Though I wonder: the current behavior might mean that the same issue from #91 still applies to lists on mobile. If this hunch is right, then you almost definitely want option 1).

Steps to reproduce

<!-- insert tufte.css boilerplate -->

<section>
<ul>
    <li>This item is long enough that it would have to wrap when displayed on a mobile screen, because phone screens are small.</li>
</ul>
</section>

1. Load that on a mobile phone, or a desktop browser with a screen narrow enough to trigger the CSS media query breakpoint.

2. Observe that the list item takes up about half the screen, instead of the full mobile width.

[daveliepmann]

Sorry for the long wait on this. You were absolutely right. Good catch, and I appreciate the well-written ticket. 💯