display one entry centered vertically

[pixellated]

hi! here's what i'm trying to achieve: i want my journal's main page to display one entry (the most recent one), and i want that entry to be vertically centered, so that the distance from the top of the entry to the navstrip is the same as the distance from the bottom of the entry to the bottom of the page. here is a quick mockup of what i have in mind:


click here for fullsize
i've tried using margin: auto for this, but it didn't work; googling around leads me to believe that that's because the entry container is an inline element and thus doesn't have a specified height, which you need for that to work. i thought about using a flexbox inside the entry with three elements arranged in a column, with the middle element holding the actual contents of the entry and the top and bottom elements growing/shrinking to provide padding, to achieve something visually similar, but i don't think that would work either for the same reason (no specified height).

is there any way to do this? the theme i'm currently using is blanket, but i'm not married to it, so if there is a different theme that allows me to do this, i will happily switch.

thank you!

Comments

[momijizukamori]

Vertical centering is such a pain in the ass in CSS unfortunately - I will poke tomorrow and see if I can pull any of the old tricks out of my brain, but I wanted to compliment you on your amazing icon before I forgot ;)

[baisemain]

Looks like you're trying to do a splash page? The way I've handled it is to have a stickied entry with the following code:
<lj-raw><div class="splash"><div class="vertical-center"> <div class="content"> </lj-raw>CONTENTS<lj-raw> </div> </div></div></lj-raw>
and then in the CSS I have this:

/*---------- SPLASH PAGE ----------*/ .page-recent { height:100vh; width:100vw; overflow:hidden; } .page-recent .splash { position:fixed; top:0; left:0; right:0; bottom:0; z-index:10; background-color:#FFFFFF; color:#111111; } .vertical-center { height:100%; width:100%; display:flex; align-items:center; justify-content:center; } .page-recent .splash .content { background-color:#FFFFFF; color:#111111; padding:20px; max-width:500px; width:100%; min-height:250px; text-align:center; } /* delete this line to hide the control strip */ .page-recent #lj_controlstrip { z-index:20; }
Is that enough to get you started?

[pixellated]

that is what i'm trying to do, yeah! sorry to nitpick, but if i leave the navstrip on, that means it will obscure part of the empty space above the contents of the splash page, so it won't look like it's actually vertically centered :( but thank you, i appreciate your response a lot, because this is the neatest splash page code i've ever seen!

[pixellated]

it sure is 😔 and hehehe thank you! right back at you, this is one of my favourite recurring expressions in gintama :D

[baisemain]

Okay, my suggestion would be to add a padding-top:48px; (or whatever the height of your navstrip is) to .page-recent .splash to make room for the navstrip? It's not perfect because the navstrip is usually taller than that on mobile, but it's closer to what you want.

[pixellated]

that's a good workaround, thank you! now i'm wondering if it would be possible to do this not as a static padding number but as a div that has no contents but goes underneath the navstrip and behaves like it (by which i mean, wraps the same way as the navstrip) so it has the same height as it and forces the rest of the page to be centered underneath it... but that's a very roundabout way and i feel like at that point i might as well just learn S2 HAHA. either way, thank you very much!

[baisemain]

I wonder if you could do this with flexboxes...? Let me think on this and I'll get back to you. Are you still using the Blanket layout?

Okay, here's my other incredibly hacky solution:
html, body { height:100%; } body.page-recent { display:flex; flex-flow:column; } .page-recent #canvas { height:100%; margin:0; padding:0; overflow:hidden; display:flex; flex-flow:column; justify-content:center; } .page-recent #entries .entry { margin:0; } /* hide all but first entry */ .page-recent #entries .entry-wrapper:not(:nth-of-type(2)) { display:none; } /* hide everything else */ .page-recent #header, .page-recent #footer, .page-recent #secondary, .page-recent #tertiary, .page-recent #content-footer, .page-recent #invisible-separator, .page-recent .navigation { display:none; } .page-recent .entry .header, .page-recent .entry .footer, .page-recent .entry .userpic, .page-recent .entry .poster { display:none; }
I believe this would be compatible with any layout you picked, but lmk if there's issues. I have a ton of display:none; in there to hide elements except for the contents of your very first entry.

[pixellated]

you are actually a genius holy shit, thank you so much! this is conceptually a lot like what i wanted to do at first, but i had no idea it was actually possible to force the layout into a flexbox. i appreciate this a ton, thank you again <3