Preface

I’ve not hidden the fact I find the latest Mastodon 4.0.x UI a lesson in terrible UX and reduced accessibility. This post is everything I’ve managed to put together to make the latest Mastodon UI more usable. Please borrow whatever you need from the below.

Please note: these tweaks are also valid server CSS tweaks

Stylus browser Plugin Required

Small Tweaks

Misc

https://github.com/psydwannabe/mastodon-snippets/tree/master/CSS

Hide the e2e fear mongering notice

/* Hide the e2e fear mongering notice */
.follow_requests-unlocked_explanation {
	display: none;
}
/* Underline links */
a.status-link:not(.mention) {
	text-decoration: underline;
}

Adjust fonts

/* Adjust fonts */
.account__header,
.search__input,
.status__content__text,
.status__content,
p,
form {
	font-family: "Atkinson Hyperlegible", Atkinson-Hyperlegible, AtkinsonHyperlegible, "Open Dyslexic", Open-Dyslexic, OpenDyslexic, sans-serif;
}

Bring Back Toot!

/* Bring back toot! */
.compose-form__publish-button-wrapper button {
	text-indent: -9999px;
	line-height: 0;
	/* Collapse the original line */
}

.compose-form__publish-button-wrapper button:after {
	content: 'Toot!';
	text-indent: 0;
	display: block;
	line-height: initial;
	/* New content takes up original line height */
}

a[href="/publish"] {
	text-indent: -9999px;
	line-height: 0;
}

a[href="/publish"]:after {
	content: 'Toot!';
	text-indent: 0;
	display: block;
	line-height: initial;
}

Big Tweaks

Compact UI
https://userstyles.world/style/7065/compact-er-mastodon
Larger UI
https://userstyles.world/style/4743/spacious-mastodon
Blackout Theme
https://userstyles.world/style/4511/hackers-black-out-beta

Resources used to create this setup

[redacted]

I do not have permission to publish mames from some humans who helped and some of the humans who helped prefer to be unnamed.

See also