Fix: appearance of side/margin notes on small screens

[f--f]

I recently discovered this project and it looks pretty nifty. I just noticed a couple of issues when for mobile devices specifically (small widths) that I've tried to fix:

• Margin notes are not hidden by default, unlike regular sidenotes (i.e. .sidenote { display: none; }). Seems like this is a mistake and not intentional? (The original Tufte CSS project hides them similarly to numbered sidenotes.) I simply expanded the selector to include margin notes as well.
• Both types of notes can flow into subsequent blocks, as shown in these images (from the demo pages). In the first image, expanding the margin note causes it to flow into the blockquote:
• In the second, expanding the sidenote causes it to shift the H1 heading to the right:

I believe this occurs since the notes are floating elements and can "escape" their parent block. I've resolved it by simply adding overflow: hidden to paragraphs (e.g. as seen here) on small screens.

[apas]

Thanks, looks nice. Can't pull yet because it breaks figure captions and footer (see attached screenshots.) If you can fix it, I'll have another look.

vs

[f--f]

Oops, my bad :) I've added back the .marginnote { float: none; } rule to fix the alignment issues and made it so margin notes inside figures are visible.

[apas]

Figure captions still not rendered properly.

[f--f]

They're showing up for me in Chrome and Firefox. Did I overlook something?

[apas]

Safari 11.0.1 (High Sierra) is the culprit then.

[f--f]

I'm guessing the priority for the display property might be different then. Unfortunately I don't have any devices which I can use to test with Safari, but I think changing lines 353-354 from

figure .marginnote { display: inline; }
.sidenote, .marginnote { display: none; }

to

.sidenote, p .marginnote { display: none; }

(etc., for other elements where margin notes should be hidden) might work, if the problem is that the figure captions are still hidden.

I don't want to speculate without testing it though, so please feel free to take over if you'd like.

[apas]

I'll have a look and will report back, thanks.

[f--f]

I think I figured it out, seems like it's a Pandoc 1.x vs 2.x issue. I have Pandoc 2.x on my system, which generates marginnotes within a figure block, but 1.x appears to generate them in a div block with a figure class, so the selector wasn't working.

Hoping that resolves the issue!

[apas]

Tested on Safari with both Pandoc 1.19.x and 2.x; looks good to me, will merge. Thanks for the patch.