Blogcard for Wordpress - CSS

blogcard_for_wp.css

/* 外部＆内部(wp)リンク対応ブログカード マテリアルデザイン風 */
.blogcard {
	font-size: 14px;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	line-height: 1.45em;
	position: relative;
	overflow: hidden;
	height: 147px;
	max-height: 160px;
	margin: 0 auto 1.6%;
	transition: height 0.3s ease;
	border-radius: 3px;
	background: #ffffff;
	box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
	transition: 1.5s;
	-webkit-transition: 1.5s;
	-moz-transition: 1.5s;
	-o-transition: 1.5s;
}

.blogcard .photo :hover {
	opacity:0.7;
}

.blogcard .photo {
	position: relative;
	float: left;
	width: 40%;
	height: 100%;
	padding: 5px;
}

.blogcard img {
	max-width: 100%;
	height:auto;
}

.blogcard .description {
	position: relative;
	z-index: 0;
	float: left;
	width: 60%;
	padding: 5px 5px 5px 0px;
}

.more.blogcard::before {
	position: absolute;
	font-family: 'Quicksand','Avenir','Arial',sans-serif,'Font Awesome 5 Free';
	content:'記事を読む >>';
	font-weight: bold;
	right:10px;
	bottom: 8px;
	padding:1px 10px;
	background:#43676b;
	color:#fff;
	font-size: .8em;
	border-radius:2px;
}

.bottom-url {
	position: relative;
	z-index: 0;
	float: left;
	left: 10px;
  color:#43676b;
}

.blogcard-title {
	padding:5px 5px 3px 5px;
	font-size:130%;
  line-height: 1.4em;
  color:#43676b;
	border-bottom:initial;
	font-weight:bolder;
}

.blogcard-description {
	color:#000;
	margin:0 10px 0px;
  line-height: 1.5em;
	border-bottom:initial;
	font-weight:initial;
}

@media only screen and (max-width: 767px) {
	.blogcard {
		height: 160px;
	}

	.bottom-url {
		float: left;
		position: absolute;
		left: 10px;
		bottom: 8px;
	}
}

@media screen and (max-width: 480px) {
	.blogcard {
		height: 135px;
	}

	.blogcard .photo {
		padding: 5px 0 0 5px;
	}

	.blogcard-title {
		font-size:110%;
		font-weight:bolder;
	}

	.blogcard .description h1 {
		font-size: 1.0em;
		margin : 1em 0 0.8em 0 ;
	}

	.bottom-url {
		float: left;
		position: absolute;
		left: 5px;
		bottom: 5px;
	}
}
/* 外部＆内部(wp)リンク対応ブログカード マテリアルデザイン風 */