Shorten Posts: Update post height calculation

[marcustyphoon]

Description

This updates the Shorten Posts maximum post height calculation, which was based on the old tumblr layout with the horizontal nav bar across the top of the page and on (I assume?) an older, larger gap between posts.

Specifically, this makes posts as tall as possible given the limitation that:

• the "1x viewport height" option will display at least one entire post with gap
• the "0.5x viewport height" option will display at least two entire posts with gaps, etc

... whether the site is in the desktop layout (no header/16px gap), tablet layout (44px header/16px gap), or mobile phone layout (44px header/8px gap).

(Also, the reverted with-header layout—54px header, 16px gap, for those that use a user style that does so—will display the relevant number of posts in their entirety too; it's a bit tighter but I think that's fine).

We could, of course, use media queries to dial these in more precisely in different layouts, but I think adding to the layout jumps when you resize the page isn't worth it. It's not like we're creating some precise layout with these breakpoints, anyway; even when j/k scrolling there will be unshortened posts that mean the bottom edges of posts wouldn't have a consistent gap with/line up with the bottom of the page even if we precisely computed the height to do so. These are just approximate. They are, though, pretty far off in the short direction at the moment.

Resolves #1396.

Testing steps

• Confirm that shortened post heights seem reasonable in all three Tumblr viewport width ranges.

[AprilSylph]

1. We shouldn't combine numbers in calculations when their sources are separate. Note how the existing code 100vh - 54px - 20px is not written as 100vh - 74px.
   • Admittedly, both of those magic numbers should be their own variables, i.e.

     --header-height: 54px;
     --post-margin: 20px;
     --available-space: calc(
       100vh
       - var(--header-height)
       - var(--post-margin
     );

2. We can use media queries! We can test for desktop/tablet/mobile layouts instead of a one-size-fits-all best-guess.
   • I know, Peepr means the layout-specific best-guesses will in fact be wrong in some scenarios... I'm not saying we should accommodate that. At least, not in this PR.

[marcustyphoon]

We can use media queries!

Yep, it's definitely an option. As mentioned, I'm not sure whether it would feel more natural for the post size to change or to stay the same when going over a layout width boundary; I never tried implementing it. One of those try it and see things, I think.

I suggest we merge this and put investigating that on the to-do list as this is still an improvement.