penguin/AstroJS

botanjs/src/Astro/Blog/Components/Entry/Block.css

raw · 2683 bytes

.bk_block {
	float: left;

	width: 225px;
	height: 325px;

	margin: 1em;

	position: relative;
	overflow: hidden;

	color: #666;
	background-color: white;
	border: 1px solid #D4D7C9;

	display: block;
}

.bk_block:hover {
	text-decoration: none;
}

.bk_SlideWrapper {
	position: absolute;
	overflow: hidden;
	top: 0.5em;
	width: 100%;
	height: 100%;
}

.bk_date {
	font-size: 0.8em;
	text-align: right;
}

.bk_title {
	font-size: 1.2em;
	max-height: 2.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #444;
}

.bk_content {
	text-overflow: ellipsis;
	overflow: hidden;
}

.bk_author {
	color: crimson;
	text-align: right;
}

.bk_cCount {
	position: absolute;
	bottom: 1em;
	left: 0.5em;

	font-size: 0.8em;
	font-family: sans-serif;
	color: orangered;
}


.bk_blockSlide {
	position: absolute;
	width: 100%;
	height: 150%;

	top: 0;
}

.bk_blockSlide:after {
	content: attr(data-content);

	position: absolute;

	top: 100%;

	width: 100%;
	height: 50%;

	padding: 0 0.5em;

	font-size: 0.8em;
	font-family: custom-serif;

	color: #EEE;
	background: purple;

	overflow: hidden;
	text-overflow: ellipsis;

	-webkit-box-shadow: inset 0px 15px 15px -15px black;
	-moz-box-sizing: inset 0px 15px 15px -15px black;
	box-shadow: inset 0px 15px 15px -15px black;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-ms-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	transition: all 500ms 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 */
}

.bk_blockSlide:hover:after {
	top: 62.5%;
	padding: 0.5em;
}

.bk_blockSlide:hover {
	top: -50%;
}

.bk_blockFront {
	position: absolute;
	background: white;

	width: 100%;
	height: 100%;
}

.bk_blockWrapper {
	position: relative;
	padding: 0 0.5em;
}

.bk_banner {
	width: 50%;
	padding: 50%;

	background-image: url(http://file.astropenguin.net/blog/layout-images/featured.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: white;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}