// Blog Feed

.blog-feed
  margin-top global-margin * 3

.blog-feed__header
  margin-top global-margin * 2

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-feed__posts
  margin-top global-margin
  display flex
  flex-flow row wrap
  margin-left: -20px;
  margin-right: -20px;


// Blog Post

.blog-post
  flex 0 0 33.333333%
  padding 0 20px 40px

.blog-post__header
  text-decoration none

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-post__image
  height 165px
  overflow hidden
  margin-bottom 20px
  position relative

  img
    display block
    position absolute
    top 50%
    left 0
    transform translateY(-50%)
// Blog Feed

.blog-feed
  margin-top global-margin * 3

.blog-feed__header
  margin-top global-margin * 2

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-feed__posts
  margin-top global-margin
  display flex
  flex-flow row wrap
  margin-left: -20px;
  margin-right: -20px;


// Blog Post

.blog-post
  flex 0 0 33.333333%
  padding 0 20px 40px

  // Fix for unnecessary screen reader text for 'read more' link in blog feed
  .screen-reader-text
    display none

.blog-post__header
  text-decoration none

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-post__image
  height 220px
  overflow hidden
  margin-bottom 20px
  position relative

  img
    display block
    position absolute
    top 50%
    left 0
    transform translateY(-50%)

Fix display of recent blog posts after theme update
Fix display of recent blog posts after theme update

We've changed the WordPress theme on wikiedu.org, and this changed the format of the RSS feed that we use for blog posts, adding the 'screen-reader-text' span as part of the 'Read More' link. (The link also used to be called 'continued', and that link was not in a new paragraph tag.) This tweak hides the screen-reader-text span, and also makes the images a little taller. Not perfect, but looks good enough.
