I’m tinkering with the CSS to try and reduce the feeling of “clutter”
This includes adding some background colour to certain elements, so that the content is more easily distinguished from the UI
I’m tinkering with the CSS to try and reduce the feeling of “clutter”
This includes adding some background colour to certain elements, so that the content is more easily distinguished from the UI
I think I’ve improved the mobile view a bit.
EDIT: desktop too. A touch of grey across the top and less white space. Also hidden the most egregious UI fluff
Liking the clean look. When I first went on this it did look a bit messy.
To my taste the threads are still too heavy*, but for pure readability having by-line information inbetween replies hampers scanning.
It should be possible to have a more horizontal layout for each post. Will require some uglier CSS hacking than I’ve done so far, but can give it a go.
Shrinking the Reply button and associated components might be a little more tricky
Much better readability. Well done.
Not quite as pretty, but that can be finessed. I’d suggest
Good suggestions. I’ll have a play. Only concern is that the distinction between content and meta might get a bit blurred if it’s all white. Let’s see…
(From experience, matching line heights from a paragraph to multiple div’d items can be a royal pain, but I’ll give it a go.)
The meta can be faded right back. It’s largely superfluous (ie. compare with Slack), especially if the avatar / username links to a profile page or pop-up.
Do not be alarmed, I’m editing your post to increase the number of meta icons - tommen
Yeah, white bg for meta looks fine.
In replying by email, you’ve just created another meta item that needs tidying up
As for matching line heights, I’m having to grit my teeth and use -ve margin. Yuck. CSS is a huge mess of ugly hacks
nav.post-controls {
zoom: .85;
}
You should put a spot of padding above the posts, or a margin below.
Responsive design makes me cry. I have everything working and then find there’s overrides at 870, 850 and 768px window widths. Argh! Just pick one! (or even better - none)
Mobile, Tablet, Desktop.
Also the idea is you design for the mobile version and make modifications for the larger version.
I think I’m done.
A little bit of dancing page margins as you resize around the 1000px wide zone still to fix, but otherwise pretty good. The one-line replies have nicely centred avatar and user info. The width of the user info is fixed in px so things might get a little funky with very long usernames. None of the current ones break it.
Implemented
Writing this from my phone so can’t see in action, but… amazing