.post-list { text-align: center; } .post-list form input, .post-list form button { font-size: 15px; } .post-list .wrapper { display: inline-block; margin: 0 auto; } .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 .posts { 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: #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'; } .post-small .action { display: none; position: absolute; z-index: 3; left: 0; right: 0; top: 50%; bottom: 0; } .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; } .tagged .action button, .untagged .action button { border: 1px solid black; font-weight: bold; box-shadow: none; } .untagged .action button { background: red; color: white; } .tagged .action button { background: lime; color: black; } .untagged .post-small img, .tagged .post-small img { opacity: .85; }