penguin/AstroJS

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

raw · 3078 bytes

.block-entries .block {
	float: left;

	width: 225px;
	height: 325px;

	margin: 1em;

	position: relative;

	color: #666;
	border: 2px solid transparent;

	display: block;
}

.block-entries .block:hover {
	border-width: 2px;
	border-color: purple;
}

.block-entries .slide-wrapper {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;

	border: 1px solid #D4D7C9;
	margin: -1px;
}

.block-entries .slide-wrapper:hover {
	border-color: purple;
}

.block-entries .date {
	font-size: 0.8em;
	text-align: right;
}

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

.block-entries .content {
	text-overflow: ellipsis;
	overflow: hidden;
}

.block-entries .author {
	color: crimson;
	text-align: right;
}

.block-entries .c-count {
	position: absolute;
	bottom: 1em;
	left: 0.5em;

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


.block-entries .slide {
	position: absolute;
	width: 100%;
	height: 150%;

	top: 0;
}

.block-entries .slide:after, .block-entries[on] .slide {
	content: attr(data-content);

	position: absolute;

	top: 100%;

	width: 100%;
	height: 50%;

	padding: 0 0.5em;

	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 */
}

.block-entries .slide:hover:after, .slide[on]:after {
	top: 62.5%;
	padding: 0.5em;
}

.block-entries .slide:hover, .slide[on] {
	top: -50%;
}

.block-entries .front {
	position: absolute;
	background: white;

	width: 100%;
	height: 100%;
}

.block-entries .block-wrapper {
	position: relative;
	background-image: repeating-linear-gradient(
		135deg
		, transparent, transparent 1px
		, rgba( 85, 85, 85, .1 ) 1px
		, rgba( 85, 85, 85, .1 ) 30px
	);
	background-color: black;
}

.block-entries .block-info {
	padding: 0.5em;
	background: white;
}

.block-entries .banner {
	width: 50%;
	padding: 50%;

	background-position: center;
	background-repeat: no-repeat;

	border-bottom: 1px solid #D4D7C9;

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