PieFed allows you to specity CSS in your settings so you can make it look however you like. What CSS do you use to improve your experience?
I whipped up some today to make the PWA better (for me) on mobile. It moves the post and comment action buttons to the right side, where your hand is (sorry lefties), puts the title below the preview for image/video posts, and makes previews full-width on mobile. Pretty minor, but it makes a big impact to me.
.post_utilities_bar .pull-right,
.comment_actions .pull-right {
margin: 0;
}
.post_utilities_bar .voting_buttons_new,
.comment_actions .voting_buttons_new {
order: -1;
}
.post_utilities_bar,
.comment .comment_actions {
justify-content: right !important;
flex-direction: row-reverse;
}
@media only screen and (max-width:990px) {
.post_teaser_image_preview,
.post_teaser_video_preview {
position: relative;
right: 13px;
width: 100vw;
}
.post_teaser_image_preview a,
.post_teaser_video_preview div {
border: none;
border-radius: 0;
max-width: 100vw;
max-height: 100vh;
}
.post_teaser_video_preview p {
margin-bottom: 0;
}
.post_teaser_body:has(.post_teaser_image_preview, .post_teaser_video_preview) {
display: flex;
flex-direction: column;
}
.post_teaser_body .post_teaser_image_preview,
.post_teaser_body .post_teaser_video_preview {
order: -1;
}
}

Sidenote, I think the css feature might be doing some xml encoding or something because > doesn't seem to work in selectors. I didn't mess around enough to prove that definitively.
8 Comments
rimu@piefed.social · 6 pts · 360d
Welcome to PieFed :)
Also pls see https://piefed.social/c/piefed_css there are many more CSS snippets.
I'll look into that > issue.
chisel@piefed.social · 1 pts · 360d
Oh, sweet, thanks! I'll check it out.
wjs018@crust.piefed.social · 2 pts · 360d
I learned this the other day when I was trying to troubleshoot some css. It gets html-encoded so it doesn't work anymore in the selector.
sga@piefed.social · 2 pts · 359d
rimu@piefed.social · 2 pts · 359d
I like it.
Can I use this to make a PieFed theme? I mean copy it into the PieFed code.
sga@piefed.social · 1 pts · 359d
rimu@piefed.social · 2 pts · 359d
Ahhh it's going to be more work to incorporate than I thought... Might save this for another day.
sga@piefed.social · 1 pts · 359d
rozodru@piefed.social · 2 pts · 359d
great choice in font, makes it almost relaxing in a way.
sga@piefed.social · 1 pts · 359d
Blaze@lemmy.zip · 1 pts · 359d
Feel free to crosspost on !piefed_css@piefed.social
sga@piefed.social · 1 pts · 359d
Blaze@lemmy.zip · 1 pts · 359d
Ah, missed that. Have you tried using it in the custom CSS personal settings? If it works there, I don't see why not
sga@piefed.social · 2 pts · 359d