2
Consistent Compact Layout (media.piefed.social)
submitted 1 year ago by to c/piefed_css@piefed.social
6 comments fedilink hide all child comments
 

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;  
}
Consistent Compact Layout
you are viewing a single comment's thread
view the rest of the comments
[–] [S] 1 point 10 months ago (4 children)

Slightly improved version:

div.post_teaser {  
  padding-top: 8px;  
  padding-bottom: 8px !important;  
}  

.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 {  
  margin-left: auto;  
  margin-top: 0;  
  grid-column: 2;  
  grid-row: 1/4;  
  height: 90px;  
  width: 170px;  
}  

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

.col.post_teaser_body .post_teaser_image_preview .post_link img {  
  object-fit: cover;  
  object-position: center;  
  width: 170px;  
  height: 100%;  
  border-radius: 5px;  
}  

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

.col.post_teaser_body .col_thumbnail.thumbnail {  
  grid-column: 2;  
  grid-row: 1/4;  
  height: 100%;  
}  

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

div.navbar {  
  min-height: 40px;  
}  

div.navbar a.navbar-brand {  
  line-height: 40px;  
  padding-top: 0;  
  padding-bottom: 0;  
}  

div.navbar .navbar-brand img {  
  width: 20px;  
  height: 20px;  
}
  • permalink
  • fedilink
  • source
  • hideshow 4 child comments
    •
  • [–] 1 point 10 months ago (1 child)

    how would you do this with thumbnails on the left instead of right? the center of my screen is empty space; it doesn't make sense for me to have the thumbnail on the right. gotta put it beside the start of the title so that you can eyeball the thumbnail and the title at the same time, instead of ping-ponging across the empty space after the end of the title but before the thumbnail

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •