I really like Piefed's pace of development, featureset, and the responsiveness of the dev team, but I find the main UI a little lacking. Thanks to custom CSS I was able to tweak in the following:

  • Use more screen real estate on larger viewports
  • Fix height of posts, regardless of whether there's an image/icon or not
  • Fix size of link images and thumbnails to always be the same
  • Anchor post options buttons to right and fix their order so you can quickly do a visual scan of replies and votes

I'm continually impressed by just how "flex" flexbox really is!

/* Use more width in larger viewports */  
.container-lg, .container-xl, .container-xxl {  
  max-width: 90% !important;  
}  

.col.post_teaser_body {  
  display: flex !important;  
  gap: 1rem !important;  
  align-items: flex-start !important;  
}  

/* Image in left column */  
.post_teaser_image_preview, .col_thumbnail {  
  order: -1 !important;  
  flex-shrink: 0 !important;  
  width: 160px !important;  
  height: 80px !important;  
  overflow: hidden !important;  
}  

/* New styles to anchor post_utilities_bar to the right */  
.post_utilities_bar {  
  display: flex !important;  
  flex-shrink: 0 !important;  
  justify-content: flex-end !important;  
  gap: 0 !important;  
  margin-left: auto !important;  
}  

/* Reorder the child elements */  
.cross_post_button { order: 1 !important; }  
.post_replies_link { order: 2 !important; }  
.voting_buttons_new { order: 3 !important; }  
.post_options_link { order: 4 !important; margin-left: auto !important; }  

/* Create a "virtual" right column using flex direction */  
.post_teaser_body > :not(.post_teaser_image_preview) {  
  flex: 1 !important;  
  min-width: 0 !important;  
  display: flex !important;  
  flex-direction: column !important;  
  gap: 0.3rem !important;  
  width: 100% !important;  
}  

/* Ensure the options dropdown stays properly aligned */  
.post_options_link.pull-right {  
  margin-left: 0 !important;  
}  
A screenshot of the PieFed interface with my custom CSS rules applied to make it look more like the Lemmy/Old Reddit interfaces.
you are viewing a single comment's thread
view the rest of the comments
[–] 1 point 10 months ago (2 children)

I've been thinking about moving the thumbnails to the left for a long time...

  • source
  • hideshow 2 child comments
  • [–] [S] 4 points 10 months ago

    I think the main thing for anyone who prefers an “old Reddit” interface is the consistency of posts. Same height, same element placement, use of placeholders when an element (like an image) isn’t present, etc. keep up the good work!

  • source
  • parent