From 5fd261578064dc2e078b89ffc341986ad07bf185 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Tue, 23 Sep 2014 08:27:34 +0200
Subject: [PATCH] Added content type indicators to post list

---
 TODO                          |  1 -
 public_html/css/post-list.css | 41 +++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/TODO b/TODO
index 3558f366..325c5b57 100644
--- a/TODO
+++ b/TODO
@@ -49,7 +49,6 @@ everything related to posts:
 
     - post listing
         - better thumbnail loading
-        - content type indicators (try to use CSS)
         - fav count
         - score
         - comment count
diff --git a/public_html/css/post-list.css b/public_html/css/post-list.css
index d71e87f7..612150ec 100644
--- a/public_html/css/post-list.css
+++ b/public_html/css/post-list.css
@@ -20,6 +20,8 @@
 	display: block;
 	margin: 0.4em;
 	border: 1px solid #999;
+	z-index: 1;
+	position: relative;
 }
 #post-list .posts li img {
 	display: block;
@@ -37,3 +39,42 @@
 #post-list .posts li a:hover img {
 	opacity: .9;
 }
+
+#post-list .posts li: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-list .posts li: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-list .posts li.post-type-youtube a:after {
+	font-size: 13px;
+	content: 'youtube';
+}
+#post-list .posts li.post-type-video a:after {
+	content: 'video';
+}
+#post-list .posts li.post-type-flash a:after {
+	content: 'flash';
+}