.blog-masthead
background-color: $blue
.blog-strap
font-family: sans-serif
.blog-wrapper
background-color: $white display: flex flex-wrap: wrap justify-content: space-between padding: 5vh 5vw
.post-title
background-color: rgba(0, 0, 0, .4) padding: 20px text-align: center
.post-title, .post-subtitle
font-weight: 300
.post-preview-wrapper
flex-basis: 100% padding-bottom: 5vh
.post-preview-img
background-position: center background-size: cover height: 40vh
.post-preview-text
background-color: $white border: solid 1px rgb(230, 232, 237) border-radius: 10px box-shadow: 0 0 6px rgba(0, 0, 0, .1) margin: 0 auto margin-top: -15vh max-width: 512px padding: 20px 0 transition: all 0.6s cubic-bezier(.2, .3, 0, 1) width: 90% h2, h3, p margin: 0 padding: 0 padding-bottom: 10px text-align: center
.post-preview-title, .post-meta li
color: $black transition: all .1s ease-in
// there must be a better way .post-preview-title:hover, .post-meta li:hover
color: $vivid-blue
.post-meta
display: inline-block font-size: .8rem margin: 0 auto i color: $soft-black
.post-tag
background-color: $light-grey border-radius: 6px display: inline-block font-size: .7rem margin: 0 5px padding: 4px 8px
.blog-content
margin: 10vh auto max-width: 768px width: 90% p font-size: 1.1rem line-height: 2rem a text-decoration: underline h1, h2, h3, h4, h5, h6 padding: 3rem 0 0 0
.blog-image
width: 100%
.theme-colors
height: 90px stroke: $soft-black stroke-width: 1px width: 90px
.theme-images
height: auto margin: auto max-height: 100px max-width: 300px padding: 15px 0 width: auto
.flex-display
align-items: center display: flex flex-wrap: wrap justify-content: center margin: auto padding: 40px 0
@media screen and ( min-width: 1024px )
.post-preview-wrapper flex-basis: 42.5vw height: 55vh max-width: 600px padding: 0 .theme-colors height: 120px width: 120px .post-preview-wrapper:hover .post-preview-text margin-top: -15.5vh box-shadow: 2px 4px 20px rgba(0, 0, 0, .1) .post-preview-text width: 80% .blog-wrapper padding: 10vh 5vw