From 800b381f57a053391946c6ffbfdb9e9d2b780eca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=9F=E9=85=8C=20=E9=B5=AC=E5=85=84?= <tgckpg@gmail.com>
Date: Wed, 21 Oct 2015 02:23:10 +0800
Subject: [PATCH] New Entry style - Tile

---
 .../src/Astro/Blog/Components/Entry/Tile.css  | 90 +++++++++++++++++++
 .../src/Astro/Blog/Components/Entry/Tile.js   |  1 +
 2 files changed, 91 insertions(+)
 create mode 100644 botanjs/src/Astro/Blog/Components/Entry/Tile.css
 create mode 100644 botanjs/src/Astro/Blog/Components/Entry/Tile.js

diff --git a/botanjs/src/Astro/Blog/Components/Entry/Tile.css b/botanjs/src/Astro/Blog/Components/Entry/Tile.css
new file mode 100644
index 0000000..538dc45
--- /dev/null
+++ b/botanjs/src/Astro/Blog/Components/Entry/Tile.css
@@ -0,0 +1,90 @@
+.tile-block {
+	float: left;
+
+	width: 150px;
+	height: 150px;
+	position: relative;
+	overflow: hidden;
+
+	display: inline-block;
+
+	background-image: linear-gradient(
+		135deg, transparent 40%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.2) 60%, transparent 60%
+	)
+	, linear-gradient(
+		225deg, transparent 40%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.2) 60%, transparent 60%
+	)
+	, linear-gradient( 45deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
+	, linear-gradient( 135deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
+	, linear-gradient( 225deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
+	, linear-gradient( 315deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
+	;
+	background-size: 100px 100px;
+	background-color: white;
+
+	border: 1px solid #d4d7c9;
+}
+
+
+.tile-block .banner {
+	background-repeat: no-repeat;
+	background-position: center center;
+	opacity: 0.9;
+	background-color:white;
+}
+
+.tile-block .banner, .tile-block .link {
+	width: 100%;
+	height: 100%;
+
+	position: absolute;
+
+	top: 0;
+	left: 0;
+}
+
+.tile-block .link {
+	background-color: black;
+	color: white;
+	opacity: 0;
+	text-align: center;
+	text-decoration: none;
+
+	padding-top: 55%;
+
+	background-image: linear-gradient(
+		135deg, transparent 40%, rgba(255,255,255,.1) 40%, rgba(255,255,255,.1) 60%, transparent 60%
+	)
+	, linear-gradient(
+		225deg, transparent 40%, rgba(255,255,255,.1) 40%, rgba(255,255,255,.1) 60%, transparent 60%
+	)
+	, linear-gradient( 45deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
+	, linear-gradient( 135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
+	, linear-gradient( 225deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
+	, linear-gradient( 315deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
+	;
+
+	background-size: 100px 100px;
+	background-position: 100% 0;
+
+    -webkit-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -moz-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -ms-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -o-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
+
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
+}
+
+.tile-block .link:hover {
+	padding-top: 50%;
+	opacity: 1;
+}
+
+.tile-block .title {
+	margin-top: -0.5em;
+}
diff --git a/botanjs/src/Astro/Blog/Components/Entry/Tile.js b/botanjs/src/Astro/Blog/Components/Entry/Tile.js
new file mode 100644
index 0000000..f87bdea
--- /dev/null
+++ b/botanjs/src/Astro/Blog/Components/Entry/Tile.js
@@ -0,0 +1 @@
+// __namespace( "Astro.Blog.Components.Entry.Tile" );