The default courier font has way too light of a font weight and tall line height, making the page itself way longer than it needs to. It's too difficult to read. So I made a custom style for the Stylus browser extension and thought other people might find it useful.
Other changes I made:
- Darkened the sig's separator line.
- Moved the user's info to the left so your eyes aren't zigzagging while reading a thread.
- Made the avatars smaller for less wasted space.
- Made all buttons change the cursor icon to a pointer.
Moving the user info kind of breaks the mobile view, but it's unlikely anyone will ever use Stylus on anything besides desktop. The default layout is fine enough on mobile anyway.
The CSS:
/* More readable text font */
div.payload-richtext > p {
font-family: Verdana;
line-height: 1.05;
}
/* Darker signature separator */
.border-t-2 {
border-top-color: var(--color-mspa-2);
}
/* Move the author info box to the left */
.md\:flex-row {
flex-direction: row-reverse;
}
div.author {
margin-right: calc(var(--spacing)*2);
}
/* Smaller avatars */
div.author > img {
width: 120px;
height: auto;
}
/* This just feels way better, why's it not default wtf */
button {
cursor: pointer;
}
-Sincerely, Sharkalien
hi sharkalien, this looks baller
read my fanventure https://mspfa.com/?s=64659&p=1
Nice stuff! Really like to see others making custom themes.
I'm a person... Probably.
YOU THERE, YES YOU, LISTEN TO ME, PLEASE DON'T USE DISCORD LINKS FOR EMBEDS, THE LINK STOPS WORKING VERY FAST, USE A FILE HOSTING SERVICE LIKE file.garden!!!!!!!
oh hey shark. love this, obviously. good ideas all around.
i would like to argue for right-side avatars though. it is a little bit counterintuitive because a lot of social areas have left-side user information. this is good when you're focusing on the speaker immediately, but putting user information on the right makes them second-tier information relative to the content of the post itself. i think we're all a little bit guilty of seeing some person we preemptively dislike's post and immediately groaning and deciding against reading it thoroughly, and the reversed order helps with that.
SHAPED OR MOLDED FORMS appear to have been formed from a plastic material through directly applied force.
ABSTRACT FORMS are of uncertain origin.
> i think we're all a little bit guilty of seeing some person we preemptively dislike's post and immediately groaning and deciding against reading it thoroughly
I feel like the solution to that should just be trying to become better people, as opposed to making a forum the slightest bit less accessible. And knowing the speaker instantly is important in a lot of use cases, like forum adventures!
It's also inconsistent with the behavior on mobile. The user information is shown right before their post, not after.
-Sincerely, Sharkalien
this is awesome! i always look to the left to see who said what on forums so it being on the right here throws me off lol. very nice
The Profile info being on the right side is left over from my original mockup for the Forum Post view. I wanted to add the clipping effect we have on fan-works on the homepage to the PFPs as well. Styling posts in this way might be something I still take the time to do down the line but obviously something cosmetic like this isn't a priority.
This is also why the filename for default profile pictures is "brendan.png"
this rules !! thanks for making it clear what does what so i can pick & choose what i want. definitely makes the site easier on the eyes!
This is a nice site style :3 it's nice to see more people then just me making them too
