penguin/AstroJS
1
0
Fork 0
forked from Botanical/BotanJS
Code Issues Pull Requests Projects Releases Wiki Activity

New Entry style - Tile

Browse Source
This commit is contained in:
斟酌 鵬兄 2015-10-21 02:23:10 +08:00
parent 2778e12f38
commit 800b381f57
2 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
botanjs/src/Astro/Blog/Components/Entry/Tile.css Normal file
View File

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

1
botanjs/src/Astro/Blog/Components/Entry/Tile.js Normal file
View File

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