help! my blog rework has me a bit stumped (CSS/HTML)

[CATBYTE]

hello! it's been a hot minute ^^;.
i wanted to ask for some more direct help and or opinions on how i could finish up my blog rework. it was one of the last things i was working on before my break and i'm finding myself a bit at odds on how to proceed.

here's how it looks currently, very rough to say the least.

here's a live preview of where i'm at with with the rework as well.

what i want help with is making it look more compact while retaining the scaling element is has. i'm not currently concerned with mobile compatibility but i would ideally like it to carry more consistency across various common screen sizes. it sorta does that now, but i feel it looks pretty odd.

i additionally would appreciate advice on how i could potentially append a pagedoll to one of the corners of the blog text block area that would be really neat too, i couldn't figure out how to do this without it breaking when the box stretched.

that's all for now. i am also very open to general opinions on how to approach visual appeal, but please keep in mind where it is at right now is a bit intentionally bare bones while i figure out the layout. thank you for your time!


edit: my roadblocks have been resolved! the link to the live preview will likely show whatever progress i'm currently at in the rework since i do most of my editing in the neocities ide lol

[xixxii]

oh, this is an interesting setup for a blog! that marquee at the top of the sidebar is a really nice touch, i like it a lot. i have some ideas for how to clean it up a bit; would it be alright if i tinker with it in a codepen and then link it here? i really enjoy that kind of poking at stuff. it looks like you have some css in the html and some in a stylesheet; what's goin on there? is one more current than the other?

in general: a decorative thing on the box should be doable by putting it inside the box and moving it with relative positioning, i think! making the blog entry boxes narrower and shorter should help with the "compact" feeling, but making the scrollbar and padding smaller can help a lot with achieving a compact feeling as well. i love a small scrollbar. giving the sidebar a border would help it feel less "open" and a bit more constrained and thus "smaller" (even if its the same size) i think, as well.

[CATBYTE]

oh, this is an interesting setup for a blog! that marquee at the top of the sidebar is a really nice touch, i like it a lot. i have some ideas for how to clean it up a bit; would it be alright if i tinker with it in a codepen and then link it here? i really enjoy that kind of poking at stuff.

thank you! and absolutely, that would be super helpful if you feel inclined!

it looks like you have some css in the html and some in a stylesheet; what's goin on there? is one more current than the other?

whatever is modified in the rework version's css in the html is the intended one. i will be honest i was just procrastinating on making a new version of the blog style sheet x.x, and then i left it like that.

in general: a decorative thing on the box should be doable by putting it inside the box and moving it with relative positioning, i think! making the blog entry boxes narrower and shorter should help with the "compact" feeling, but making the scrollbar and padding smaller can help a lot with achieving a compact feeling as well. i love a small scrollbar. giving the sidebar a border would help it feel less "open" and a bit more constrained and thus "smaller" (even if its the same size) i think, as well.

ooo that makes sense. and for the entry boxes yea that makes sense!
i also hadn't thought about the effect of borders here but i feel adding the border works as a good solution that'll also help with keeping the page design cohesive. it'll also make it feel a lot less bare.

thank you for your detailed response!!

edit: clarity

[xixxii]

okay, i'd forgotten how difficult it is to put a little guy on a box, lmfao. "i totally figured out how to do this, no prooooblem" -- me, a fool!

anyway, i consolidated and tidied up the css and html and tweaked some sizing! there was some inline css styling that i moved to css, and i deleted things that it seemed like you weren't using or weren't doing anything, so it looks a lot more different in the code than it actually is i think.

i made two slightly different versions with different implementations of a box guy in the top right corner of the blog box;

here is version one: in this version, the blog box can't have a fixed height because of the little man, but it can resize its width with the window. (this buddy is positioned relative to the box he's in; an overflow function traps him inside of the box instead of letting him float outside of it.) he'll stay at the top of the page when you scroll down.
https://codepen.io/xixxii/pen/qBzMPyY

and here's version two - in THIS version, the height is fixed but the width is also fixed, so it doesn't resize with the window. (this buddy is just absolute positioned with the page and so is the box he's on top of.)

https://codepen.io/xixxii/pen/yLdxzxV

hope this helps a bit and i didn't make everything super confusing by deleting and moving so many things in the code!

edit: the forum and codepen seem to be disagreeing about whether or not to embed links or codepen demos and i can't make it stop! sorry about the weird formatting in this post!!

[CATBYTE]

okay, i'd forgotten how difficult it is to put a little guy on a box, lmfao. "i totally figured out how to do this, no prooooblem" -- me, a fool!

anyway, i consolidated and tidied up the css and html and tweaked some sizing! there was some inline css styling that i moved to css, and i deleted things that it seemed like you weren't using or weren't doing anything, so it looks a lot more different in the code than it actually is i think.

i made two slightly different versions with different implementations of a box guy in the top right corner of the blog box;

here is version one: in this version, the blog box can't have a fixed height because of the little man, but it can resize its width with the window. (this buddy is positioned relative to the box he's in; an overflow function traps him inside of the box instead of letting him float outside of it.) he'll stay at the top of the page when you scroll down.
https://codepen.io/xixxii/pen/qBzMPyY

and here's version two - in THIS version, the height is fixed but the width is also fixed, so it doesn't resize with the window. (this buddy is just absolute positioned with the page and so is the box he's on top of.)

https://codepen.io/xixxii/pen/yLdxzxV

hope this helps a bit and i didn't make everything super confusing by deleting and moving so many things in the code!

edit: the forum and codepen seem to be disagreeing about whether or not to embed links or codepen demos and i can't make it stop! sorry about the weird formatting in this post!!

o wow this is super perfect, thank you so much for your time and explanations on this!! having everything consolidated makes it so much easier to proceed now so thank you for that :O !
i'm going to go with the resizable top corner version as it seems to provide the most flexibility.

on a side tangent, i noticed on my larger monitor (1440p) the side bar begins to "eat" (obstruct) the text box, so i think the answer here is to just keep the sidebar set to one consistent size as i don't believe making it stretch is worth any trouble as the smallest size looks good as is.
now to get to work with sprucing it up! 

i'll be sure to put a thank you with a link on my links page as well as the entry i'll make once i stylize and implement the final new design!! thank you again :D. i'll leave the topic open if anyone else wants to share input ^^, but my main roadblock is now resolved!