Topic: Compact post page

I like to use Fit (Vertical) for media. The problem with that is that navigation, i.e. header pushes the media outside of viewport despite max-height: calc(100vh - 5rem); being applied to the image; 5rem isn't enough and this isn't flexible.

To be clear, by "pushing outside of viewport" I meant that the bottom gets cut off, requiring me to scroll every time I open a post page.

My only quick and dirty fix at the moment is to hide/shrink navigation and nav links on top of the media (add to Custom CSS ):

/* Hide top navigation (site header) */
body.c-posts nav.navigation {
    display: none;
}

/* Shrink query/pool navigation above media */
body.c-posts #nav-links-top {
    max-height: 4.5em; /* Seems to be enough */
    overflow: hidden;
}

/* Unshrink on hover */
body.c-posts #nav-links-top:hover {
    max-height: unset;
}

Nav links are very tall, and thus a problem, on submissions that belong to multiple pools, such as this:

https://e621.net/posts/5358746?q=id:5358746

I would appreciate a feature like this to be added proper, either officially or to re621, as being limited to CSS limits this to a hack like this (and I suck at JS too much to make a userscript or contribute to e621ng).

If I'm understanding you correctly, you're wanting to remove the top navbar(s)? If so, you can do that on the Themes page, which can be accessed down at the bottom of this page. There, you can set the Navbar to appear only at the Top (default), at the Bottom of a post, on Both top and bottom, as well as Off (which isn't recommended, but still may be useful just in case).

If I'm not understanding you correctly, then don't mind me.

clawstripe said:
If I'm understanding you correctly, you're wanting to remove the top navbar(s)? If so, you can do that on the Themes page, which can be accessed down at the bottom of this page. There, you can set the Navbar to appear only at the Top (default), at the Bottom of a post, on Both top and bottom, as well as Off (which isn't recommended, but still may be useful just in case).

If I'm not understanding you correctly, then don't mind me.

It does help a fair bit, thanks for pointing it out!

I still decided to keep the CSS rule to hide site header as it causes the media to ever so slightly get cut off on the bottom, so the last piece of the puzzle would be the ability to alter the placement/visibility of the header without using custom CSS rules.

Or, perhaps, something I'm not aware of could be done about max-height that makes doing any of this unnecessary, but anything works, really.

if you want the site header smaller and/or less intrusive I've got this:

@media only screen and (max-width: 50rem) {
/*make main site background visible behind header*/
#nav-toggle, .nav-logo, .nav-controls, .nav-controls .nav-tools-login { background: none; }

/*make header way shorter*/
.nav-toggled body { padding-top: 2rem; }
.navigation, .nav-logo, .nav-logo-link { height: 2rem; }
.nav-toggled .navigation { height: 100%; }
.nav-controls { padding: 0; }
.nav-logo-link { width: 2rem; }
.navigation, .nav-logo, .nav-controls.desktop { pointer-events: none; }
.navigation :not(.nav-logo) *, .nav-logo-link, .mobile { pointer-events: auto; }
.nav-logo { z-index: 20 }
.simple-avatar .avatar-name { padding: 0; padding-right: .25rem; }
.nav-controls > a > span, .simple-avatar .avatar-image { min-width: unset; padding: 0; background: none; }
.nav-controls > a > span, .simple-avatar .avatar-image, .simple-avatar img { height: 2rem; width: 2rem; }
nav.navigation .nav-controls > a { padding: 0; margin-left: .5rem }
@media (min-width: 32rem) {
.simple-avatar .avatar-image { margin-right: 5.5rem; }
}
}

this might also be useful to make the SVG icons more visible with the background being invisible:

svg, .nav-logo a.nav-logo-link { filter: drop-shadow(var(--color-section) .66px .66px 0) drop-shadow(var(--color-section) .66px -.66px 0) drop-shadow(var(--color-section) -.66px .66px 0) drop-shadow(var(--color-section) -.66px -.66px 0); }