Skip to content

Instantly share code, notes, and snippets.

@justmarkup
Last active November 8, 2022 09:03
Show Gist options
  • Save justmarkup/e4f6d52bef604e170815aaf44f459fbc to your computer and use it in GitHub Desktop.
Save justmarkup/e4f6d52bef604e170815aaf44f459fbc to your computer and use it in GitHub Desktop.
User stylesheet for Mastodon
/* Visually warn about inaccessible images in feed */
.status img:not([alt]),
.status img[alt=""] {
border-top: 2em solid red;
}
/* Highlight private toots, toots only mentioned people can see. From https://mastodon.social/@matuzo */
.status__wrapper-direct {
padding-inline-end: 20px;
}
.status__wrapper-direct::after {
content: "private";
background-color: #cbe7f0;
display: inline-block;
padding: 0rem 0.2rem;
position: absolute;
inset-inline-end: 0;
inset-block-start: 0;
writing-mode: vertical-rl;
height: 100%;
text-align: center;
}
/* Show profile header image in 16/9 format. From https://mastodon.social/@matuzo */
.account__header__image {
aspect-ratio: 16 / 9;
height: auto;
}
/* Hide trending now */
.getting-started__trends {
display: none;
}
/* Flip the right and left column on desktop. From https://mastodon.social/@matuzo */
.columns-area__panels {
flex-direction: row-reverse;
}
@nhoizey
Copy link

nhoizey commented Nov 4, 2022

@juanfernandes I think one 1fr is missing, isn't it?

I use it and changed the values to make the main column just 30 % larger than the others: grid-template-columns: 3fr 4fr 3fr 3fr 3fr

@juanfernandes
Copy link

@juanfernandes I think one 1fr is missing, isn't it?

I use it and changed the values to make the main column just 30 % larger than the others: grid-template-columns: 3fr 4fr 3fr 3fr 3fr

How many columns do you have on mastadon? I only have 4 🤔

@nhoizey
Copy link

nhoizey commented Nov 8, 2022

@juanfernandes I have 5

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment