Question: Temperature check on UI reworking

[djvs]

Question

So I put some work into restyling the UI via a bunch of CSS hacks via browser extension:

However it's really hacked together and needs to be an integrated effort. The main thing is that the HTML actually has to be properly marked up - a lot of critical elements have no meaningful classes and only single-property utility classes. See CSS changes here:

https://lemmy.world/post/87865

I would like to do a big PR with appropriate fixes for all this, but wanted to make sure it actually stood a chance of getting accepted.

[SleeplessOne1917]

If this is to get rid of the excess whitespace on larger monitors, I was planning on taking a swing at that one.

[djvs]

It's a bigger "style overhaul" deal, with a good amount of "add proper semantic HTML/classes to describe what elements are and allow future-proof styling/3rd party styles".

[SleeplessOne1917]

@djvs there was a PRs merged recently that made more use of semantic tags to simplify styling. See #1327.

[djvs]

Got it, this would be a furtherance of that effort (avoiding bare "divs" in general, etc.). I suppose style updates could be a second effort (you can see some pretty large difference if you apply the user styles in the link).

[djvs]

So the above PR handles the "marking up the HTML" bit of it. The remaining bit re: this issue would basically be incorporating the styles linked in the OP here as the main theme. I'm a fan of em (and noticed it got > 30 upvotes on lemmy.world) but up to you guys.

Long story short -

• Full width view
• Posts/comments a little more compact,
• More border differentiation

You can peek at how they're basically supposed to look using Stylus/UserStyles on an update to date instance, although they're a little hacky/not polished due to current limitations.

[Kache]

Surprised it's not been suggested to decouple "restyling" efforts from "marking up/structuring HTML well".

IMO the latter is more important b/c it allows users and 3rd parties to freely experiment & restyle, and b/c it's less likely to get delayed by any style bikeshedding.

[djvs]

@Kache #1421 was towards that end. Now that that's addressed I'd definitely like to tweak default styles a bit.

[djvs]

There's some baked in Bootstrap-centric theming, I'm not sure it really does the trick though, since a lot of these changes address layout which is baked into the Bootstrap class system, so the workaround would be to do !important etc. on top of those defined classes, at least until they do the rewrite they were mentioning.

[dessalines]

The rewrite will be in DaisyUI + tailwind, meaning it will be even more low-level and less customizeable than the current bootstrap is.

[m-gail]

Is a rewrite with DaisyUI and tailwind already in progress or is this just planned right now?

[djvs]

@dessalines It would be a great idea to separate style from HTML entirely IMO. Not sure doing an entire rewrite to basically end up back where you started would be advisable.

[SleeplessOne1917]

Not sure doing an entire rewrite to basically end up back where you started would be advisable.

The rewrite is desired more to move away from inferno than from bootstrap.

[baesik]

Is the wonky HTML and CSS a product of Inferno?

[djvs]

The HTML "excess tags" (row/column divs and such) and tags come from Bootstrap, it seems like Inferno isn't opinionated about that. I'm a little confused about how they're approaching this atm.

[baesik]

Thanks for clarifying. So confused as to why the CSS uses things like overflow:hidden to truncate text.

[djvs]

That's always case by case. Might make sense if it uses ellipsis and such.

[djvs]

OK, lemmy.world updated so I had a good chance to update my existing CSS. Current iteration is looking like this:

There's like 6 more classes I'd like to add and, more importantly, I'd like to get a sense on if it'd be welcome to merge this CSS into the main theme. More compact layout, 100% width, font sizes a bit more confined in range, padding/margin a bit more finely tuned, etc..