Skip to content

Single Post

Laurel edited this page Jan 12, 2024 · 6 revisions

Index

Make single post title smaller

.single .entry-title {
 font-size: 1.6em;
}

@media only screen and (min-width: 600px) {
  .single .entry-title {
    font-size: 1.8em;
  }
}

@media only screen and (min-width: 782px) {
  .single .entry-title {
    font-size: 2.0em;
  }
}

@media only screen and (min-width: 1168px) {
  .single .entry-title {
    font-size: 2.4em;
  }
}


Make category smaller

.single .entry-header .cat-links {
  font-size: 0.7rem;
}

Move sidebar next to content

/* Single - Move sidebar up next to title */
@media (min-width: 782px) {
  .single.post-template-default .featured-image-above .post-thumbnail {
    margin: 2rem 0 0;
    max-width: 100%;
    width: 780px;
  }
	
  .single.post-template-default .featured-image-above figcaption {
    max-width: 100%;
    width: 780px;
  }
	
  .single.post-template-default .featured-image-above .entry-header {
    margin-top: 2rem;
  }
    
  /* Make sure classic contents fit! */
  .single:not(.has-large-featured-image).has-sidebar .entry-content > figure.wp-caption.alignnone[style*='width'],
  .page:not(.has-large-featured-image).has-sidebar .entry-content > figure.wp-caption.alignnone[style*='width'],
  .single:not(.has-large-featured-image).has-sidebar .tiled-gallery,
  .page:not(.has-large-featured-image).has-sidebar .tiled-gallery {
    max-width: 780px;
  }
	
  .single:not(.has-large-featured-image).has-sidebar #main,
  .page:not(.has-large-featured-image).has-sidebar #main {
    display: grid;
    grid-template-columns: 62.5% 32.5%;
    grid-template-rows: fit-content(1%) fit-content(1%) 1fr;
    column-gap: 5%;
  }
    
  .single:not(.has-large-featured-image).has-sidebar .entry-header,
  .page:not(.has-large-featured-image).has-sidebar .entry-header {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
	
  .single:not(.has-large-featured-image).has-sidebar .main-content,
  .page:not(.has-large-featured-image).has-sidebar .main-content {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    width: 100%;
  }
    
  .single:not(.has-large-featured-image).has-sidebar #secondary,
  .page:not(.has-large-featured-image).has-sidebar #secondary {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    width: 100%;
  }
	
  .single:not(.has-large-featured-image).has-sidebar .main-content > .post-thumbnail:first-child {
    margin-top: 0;
    margin-bottom: 16px;
  }
	
  .single:not(.has-large-featured-image) #secondary {
    padding-top: 0;
  }
	
  /* Hidden featured image */
  .single:not(.has-large-featured-image):not(.has-featured-image).has-sidebar .main-content {
    grid-row: 2 / 4;
  }
	
	
  /* Featured image above */
  .single-featured-image-above.has-sidebar .featured-image-above {
    display: contents;
  }
	
  .single.single-featured-image-above.has-sidebar .featured-image-above .post-thumbnail {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
	
  .single.single-featured-image-above.has-sidebar .entry-header {
    grid-row: 2 / 3;
  }
	
  .single.single-featured-image-above.has-sidebar .main-content {
    grid-row: 3 / 4;
  }
	
  /* One column template */
  .post-template-single-feature .featured-image-above .post-thumbnail,
  .post-template-single-feature .featured-image-above,
  .featured-image-above figcaption{
    width: 780px;
  }
	
  .post-template-single-feature .featured-image-above {
    margin-left: auto;
    margin-right: auto;
  }
	
  .post-template-single-feature .featured-image-above .post-thumbnail {
    margin: 2rem 0 1.5rem;
  }
}
/* Single - END Move sidebar up next to title */