.post { padding: 20px 0 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .home .post, .archive .post { padding: 20px 0; border-bottom: 1px solid #e9edef; } .post-content { position: relative; &:after { content: ''; display: block; clear: both; } .post-img-link { height: 0; width: 35%; padding-bottom: 22%; position: relative; float: left; display: block; padding-right: 20px; background-color: rgba(243,243,243,0.5); &::before { content: none; } } .wp-post-image { -o-object-fit: cover; object-fit: cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .post-info { width: 65%; background: none; position: relative; left: 0; top: 0; right: auto; bottom: auto; float: left; padding: 0 20px; overflow: visible; } .post-title { margin: auto; a { position: relative; text-decoration: none; &::before { content: ''; position: absolute; bottom: 0; display: inline-block; height: 2px; width: 0; background-color: $main-color; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; } &:hover::before, &:focus::before { width: 100%; } } } .post-categories { overflow: hidden; list-style: none; padding: 0; margin: 0 0 0.5em; font-size: 0.9em; li { float: left; text-transform: uppercase; &:after { content: ' \00d7 '; margin: 0 7px 0 4px; } &:last-child:after { content: ''; } a { color: #000; text-decoration: none; &::before { background-color: #000; height: 1px; } } } } .post-text { min-height: 113px; padding: 15px 0; p { margin: 0; } } .date { float: right; margin-top: 13px; font-size: 0.9em; a { color: #000; &::before { background-color: #000; height: 1px; } } } } .sticky { background-color: #FDFDFD; } @media screen and (max-width: 1240px) { .infinite-scroll { margin: 30px 20px 0; } } @media screen and (min-width: 768px) and (max-width: 940px) { .post-content .post-img-link { width: 30%; } .post-content .post-info { width: 70%; .post-title { margin-bottom: 0; } } } @media screen and (max-width: 767px) { .post-title { margin-bottom: 0; } .post-content .post-text { min-height: 10px; } } @media screen and (max-width: 640px) { .has-post-thumbnail .post-content .post-img-link { margin: 0 0 10px; } .post-content .post-img-link { background: #fff; width: 100%; height: auto; padding: 0; max-height: 300px; overflow: hidden; } .post-content .wp-post-image { position: relative; height: auto; } .post-content .post-info { width: 100%; padding: 0; .post-title { font-size: 1.75em; margin-bottom: 0; } } .post-content .post-text { min-height: 10px; } } @media screen and (max-width: 374px) { .post-meta a.button { width: 100%; max-width: 100%; } }