Follow

💥 Better Mastodon: A collection of layout and design tweaks for the Mastodon web app rmlewisuk.github.io/better-mas

I've been making some CSS changes to the Mastodon webapp at the behest of @joesteel and I've collected them all in once place.

Collapsed notifications is the most useful for me:

@rmlewisuk Right, another noob question then ... what do I do with that CSS to use it? :p

@rmlewisuk wow, smart! Thanks very much indeed. My eyes are being opened to so many things right now! lol

@rmlewisuk How do you use this with Safari? I know about setting a global stylesheet, but is there a way to restrict to a website?

@ianiv you might be able to prepend " " to the start of every rule which might work (I can look tomorrow)

@rmlewisuk Thanks. I decided to just use Fluid and added the stylesheet there

@rmlewisuk This is great stuff. Was going to do something like this myself when I had the time, but this saves me the effort.

Also, submitted a pull request to resolve conflicts when using both single-column and desktop styles at the same time! 😄

@VioletPixel Just merged it, thanks for doing that 👍 I'm sure that was working before but I guess I broke it at some point (and I haven't been using the single column stuff so I hadn't checked). Really appreciate the help in fixing it.

I've filed a feature request for getting a specific class on mentions in the web app so hopefully mentions can be highlighted in both the main feed and notifications.

github.com/tootsuite/mastodon/

@rmlewisuk @joesteel Hey there, thanks for that CSS! We've deployed all of it (except hide the elephant) on our instance, but had problems with the "desktop layout" on some window widths to the point where the compose box was 1 character wide.

Therefore, I have two proposals:
1) Split "move navigation to side, put ava on top" from "desktop layout".
2) Use my fixed desktop layout or provide it as alternative: pastebin.com/nj83qkrz (description follows).

/cc my Admin: @thegcat

@rmlewisuk @joesteel @thegcat Description of my Mastodon Web "Desktop Layout" CSS (pastebin.com/nj83qkrz):

- makes sure that the compose column is never smaller than 25em;
- all other columns are always between 25em and 40em wide;
- columns try to fit the window width, removing "half visible columns", leaving only a small part of the next column visible as a hint to scroll right.

Sign in to participate in the conversation
Mastodon

This instance is run by Robb Lewis for various Robb Lewis-related things.