PieFed CSS

A few snippets in case you want to prevent yourself from accidentally voting on things or change your behavior with regard to being swayed by existing public opinion.

You can mix-and-match a few of these if you want to e.g. not allow any voting on posts but allow upvoting on comments or something:

/* Remove upvote and downvote buttons everywhere */  
.downvote_button, .upvote_button {  
  display: none !important;  
}  

/* Remove upvote and downvote buttons from comments */  
.comment_actions .downvote_button, .comment_actions .upvote_button {  
  display: none !important;  
}  

/* Remove upvote and downvote buttons from posts */  
.post_utilities_bar .downvote_button, .post_utilities_bar .upvote_button {  
  display: none !important;  
}  

/* Remove downvote buttons everywhere */  
.downvote_button {  
  display: none !important;  
}  

/* Remove downvote buttons from comments */  
.comment_actions .downvote_button {  
  display: none !important;  
}  

/* Remove downvote buttons from posts */  
.post_utilities_bar .downvote_button {  
  display: none !important;  
}  

And in another category, removing score counts:

/* Remove score displays everywhere */  
.score {  
  display: none !important;  
}  

/* Remove score displays from posts */  
.post_utilities_bar .score {  
  display: none !important;  
}  

/* Remove score displays from comments */  
.comment_actions .score {  
  display: none !important;  
}  

:root {  
	--bs-border-radius: 0;  
}  

.main_pane {  
	border-radius: 0;  
}  

.card {  
	border: solid 1px #ddd;  
	border-radius: 0;  
}  

.card-header {  
	border-radius: 0;  
}  

.post_list .post_teaser .thumbnail img, .post_teaser_image_preview img {  
	border-radius: 0;  
}  

.main_pane {  
	border-radius: 0;  
}  

.card {  
	border: solid 1px #ddd;  
	border-radius: 0;  
}  

.card-header {  
	border-radius: 0;  
}  

.post_list .post_teaser .thumbnail img, .post_teaser_image_preview img {  
	border-radius: 0;  
}  

The bars where a little too bright, thus the vote percentages weren't well readable. I changed the background of the bars to a darker grey with this line of css:

.post_poll ul li .vote_bar .vote_score { background-color: #333 }  

.navbar-brand img { animation: none }  

This stylesheet uses CSS grids to force a consistent look between link posts and image posts when using the compact layout option. There's probably a better way to accomplish this, but this is quick & dirty & it works.

It probably doesn't play nice with different page layouts triggered at smaller breakpoints.

.col.post_teaser_body {  
  display: grid;  
  grid-template-columns: auto 170px;  
}  

.col.post_teaser_body h3 {  
  grid-column: 1;  
  grid-row: 1;  
}  

.col.post_teaser_body .author {  
  grid-column: 1;  
  grid-row: 2;  
}  

.col.post_teaser_body .post_teaser_image_preview {  
  align-self: end;  
  margin-left: auto;  
  grid-column: 2;  
  grid-row: 1/3;  
  height: 90px;  
  width: 170px;  
  overflow: hidden;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link {  
  width: 100%;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link img {  
  object-fit: cover;  
  width: 100%;  
}  

.col.post_teaser_body .col_thumbnail.thumbnail {  
  grid-column: 2;  
  grid-row: 1/3;  
}  

.col.post_teaser_body .post_utilities_bar {  
  grid-row: 3;  
  grid-column: 1/3;  
}  

In your settings at https://piefed.social/user/settings there is a field 'Additional CSS' where you can put snippets of CSS code.

It is best to only use CSS you understand from sources you trust so this community should be the place.

.score {  
display: none;  
}