Look & Feel

Tags: #<Tag:0x00007fa4a3851408>

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. :smile:

To my taste the threads are still too heavy*, but for pure readability having by-line information inbetween replies hampers scanning.

  • computer administrative detritus, or whatever the phrase-du-jour is

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.

How does this look?

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

  • Bring back the round mask on the avatar
  • Lose the grey background to the name and type
  • Make line spacing on the name+type+time trio align with the message text block (ie. reduce)
1 Like

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

1 Like

Yeah, white bg for meta looks fine.
In replying by email, you’ve just created another meta item that needs tidying up :smile:

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 :smiley:

nav.post-controls {
zoom: .85;
}

Cheers @unknowndomain - a nice simple fix.

Getting there:

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