Consistent Compact Layout

submitted by
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;  
}
6
3

Log in to comment

Hot Top New Old
he/him

Looks good!

 reply
1
OP

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

This seems to work really well on desktop and mobile. Thanks for doing the work on this.

 reply
1

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

 reply
1
OP

The elements are positioned via the use of CSS grid. Horizontal position is set with the grid-column property. So if you set the grid-column for the previews to 1, and shift everything else’s column over, you should get the images on the left.

 reply
1

Thanks this is working really well!

 reply
1
Insert image

These files are not very private - stable.wjs018.xyz admins may review them occasionally.