commit 800b381f57a053391946c6ffbfdb9e9d2b780eca
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2015-10-20T18:23:10Z |
|---|
| subject | New Entry style - Tile |
|---|
commit 800b381f57a053391946c6ffbfdb9e9d2b780eca
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2015-10-20T18:23:10Z
New Entry style - Tile
---
botanjs/src/Astro/Blog/Components/Entry/Tile.css | 90 ++++++++++++++++++++++++
botanjs/src/Astro/Blog/Components/Entry/Tile.js | 1 +
2 files changed, 91 insertions(+)
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" );