.post-list { text-align: center; } .post-list form button { margin-left: 0.25em; } .post-list .search { margin-bottom: 1em; text-align: left; } .post-list .search input { max-width: 20em; } .post-list .search .mass-tag-wrapper { float: right; } .post-list .search .mass-tag-wrapper p { display: inline; margin-right: 1em; } .post-list ul { display: flex; justify-content: center; align-content: center; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0; } .post-list ul.posts .post-small { margin: 0; padding: 0; } .post-small { position: relative; } .post-small a { display: block; margin: 0.2em; 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: #64C2ED; border-color: #64C2ED; box-shadow: 0 0 0 2px #64C2ED; outline: 0; } .post-small a:focus img, .post-small a:hover img { opacity: .8 !important; } .post-small a .info { display: none; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; background: #64C2ED; 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'; } .post-small .action { display: none; position: absolute; z-index: 3; left: 0; right: 0; top: 50%; bottom: 0; pointer-events: none; } .post-small .action button { padding: 0.5em 1em; height: 1em; line-height: 1em; display: block; margin: -1em auto 0 auto; box-sizing: content-box; opacity: .7; box-shadow: none; pointer-events: auto; } .post-small .action button:focus { box-shadow: 0 0 0 2px #64C2ED inset !important; } .tagged .action button, .untagged .action button { border: 1px solid black; font-weight: bold; text-shadow: none; } .untagged .action button::before { background: red; } .untagged .action button { color: white; } .tagged .action button::before { background: lime; } .tagged .action button { color: black; }