Here are some tweaks I am using for the show post page. I mainly browse with a tall window so I wanted to maximize the width of images. I only tested these with Microsoft Edge.
I started out by taking the sidebar tweak from the mobile CSS that moves the sidebar below the image. Next I put the contents of each section of the sidebar into columns. More columns are added as the browser window gets wider, and each section becomes shorter. I finished up by adding some gradient backgrounds to the section headers and making the Options and History links clickable along the full width of the column.
Show
/* Make more space for images by moving the sidebar below (from mobile CSS) */
div#c-posts div#a-show div.sidebar-container { flex-direction:column }
div#c-posts div#a-show section#content { order:1; padding-left:0 }
div#c-posts div#a-show aside#sidebar { order:2 }
/* Arrange sidebar sections into columns (reads top to bottom, left to right) */
div#c-posts div#a-show aside#sidebar ul { column-width:20em }
/* Add a background to sidebar headings to break up the sections visually */
div#c-posts div#a-show aside#sidebar h2 { background:linear-gradient(to right,
var(--subnav-menu-background-color), var(--body-background-color)) }
/* Make the options and history links clickable within the full column width */
div#c-posts div#a-show section#post-options a,
div#c-posts div#a-show section#post-history a {
display:inline-block; width:100% }
Now that the sidebar's gone, here's an ugly tweak I use to let the image element fill the entire width of the browser window.
Show
/* Move page margins to individual page elements, except the image element */
body.c-posts.a-show div#page { margin:0; padding:0 }
div#c-posts div#a-show div.sidebar-container > * > * {
margin-left:30px; margin-right:30px }
div#c-posts div#a-show section.image-container{ margin-left:0; margin-right:0 }
I prefer to have sample images upscaled even if they're a bit blurry. So I changed the image element to fill the width of the window. Now there's no need to download a 20 MB PNG just to get a fullscreen preview. Also, I noticed that the top and bottom margins on the image element don't collapse with the other margins. Their size changes quite a bit too because of the way notes are implemented, so I removed them since the other elements have margins anyway.
Show
/* Enable upscaling of sample images when using the resize to window function */
div#c-posts div#a-show #image.fit-width { width:100vw }
/* I disable image margins, which don't work as expected due to note scaling */
div#c-posts div#a-show section.image-container{ margin-top:0; margin-bottom:0 }
Last but not least, scroll snapping is a great way to scroll to top of the image without fiddling with the scrollbar. If you have trouble getting back to the top of the page, you can hit the Home key, or W if you have keyboard shortcuts enabled.
Show
/* Enable scroll snapping to the top of the image */
html { scroll-snap-type: y proximity }
div#c-posts div#a-show #image { scroll-snap-align: start }