.post-list { text-align: center; } .post-list .wrapper { display: inline-block; margin: 0 auto; } .post-list .search { margin-bottom: 1em; } .post-list .search input { max-width: 20em; } .post-list ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; } .post-small a { display: inline-block; margin: 0.4em; border: 1px solid #999; z-index: 1; position: relative; } .post-small img { display: block; border: 0; background: white; } .post-small a:focus, .post-small a:hover { background: #afe; border-color: #5da; box-shadow: 0 0 0 2px #5da; outline: 0; } .post-small a:focus img, .post-small a:hover img { opacity: .9; } .post-small a .info { display: none; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; background: #5da; color: black; } .post-small a .info ul { list-style-type: none; padding: 0; margin: 0; } .post-small a .info li { display: inline-block; margin: 0.1em 0.5em; padding: 0; } .post-small a:focus .info, .post-small a:hover .info { display: block; } .post-small:not(.post-type-image) a:before { display: block; content: ''; z-index: 2; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; } .post-small:not(.post-type-image) a:after { display: block; content: '...'; z-index: 3; position: absolute; top: -35px; /* 50 * sqrt(2) / 2 */ right: -35px; width: 71px; /* 50 * sqrt(2) */ height: 71px; line-height: 122px; /* 71 * 2 - 11 (font-size) - padding */ transform: rotate(45deg); color: white; font-size: 15px; } .post-small.post-type-youtube a:after { font-size: 13px; content: 'youtube'; } .post-small.post-type-video a:after { content: 'video'; } .post-small.post-type-flash a:after { content: 'flash'; }