Consistent Compact Layout

Syndicated from the fediverse. Read and engage on the original instance.

Consistent Compact Layout

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;  
}

View original on piefed.social

Comments1

1 reply

brandon

piefed.social

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;  
}