New Entry style - Tile

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;
+}

botanjs/src/Astro/Blog/Components/Entry/Tile.js

@@ -0,0 +1 @@
+// __namespace( "Astro.Blog.Components.Entry.Tile" );