• File: _post.scss
  • Full Path: /home/chassiw/www/wp-content/themes/indutri/sass/template/_post.scss
  • File size: 10.41 KB
  • MIME-type: text/plain
  • Charset: utf-8
.post-block{
	margin-bottom: 30px;
	transition: all 0.35s;
	.entry-meta{
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 500;
		box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
		padding: 6px 15px;
		top: -20px;
		position: relative;
		background: $white; 
		line-height: 30px;
		.line{
			display: inline-block;
			padding: 0 10px 0 8px;
		}
		.entry-date{
			color: $theme-color;
		}
	}
	.post-thumbnail{
		position: relative;
		text-align: center;
 		iframe{
 			width: 100%;
 			min-height: 350px;
 		}
 		.overlay{
 			position: absolute;
 			@include size(100%, 100%);
 			top: 0;
 			left: 0;
 			z-index: 11;
 		}
 	}
 	.entry-content{
 		padding: 0 30px 0;
 		position: relative;
 		border: 1px solid $border-color;
 		background: $white;
 		@include media-breakpoint-down(lg){
 			padding: 0 20px 0;
 		}
 		.content-inner{
 			max-width: 300px;
 			margin: 0 auto;
	 		-ms-word-wrap: break-word;
			word-wrap: break-word;
			margin: 0 auto;
			position: relative;
			padding: 0 0 20px;
			text-align: center;
			.entry-title{
				font-size: 24px;
				-ms-word-wrap: break-word;
		    	word-wrap: break-word;
		    	line-height: 36px;
		    	text-transform: none;
		    	margin: 10px 0 15px;
		    	letter-spacing: -0.5px;
		    	@include media-breakpoint-down(lg){
			    	font-size: 20px;
			    	line-height: 32px;
			   }
			}
			.entry-description{
				-ms-word-wrap: break-word;
		    	word-wrap: break-word;
		    	padding-top: 30px;
			}
	 	}
 	}
 	.tag-links{
 		margin-top: 20px;
 		display: block;
 		> a{
 			border: 1px solid $border-color;
 			padding: 4px 16px;
 			font-weight: 400;
 			font-size: 13px;
 			margin-right: 8px;
 			margin-bottom: 8px;
 			display: inline-block;
 			background: $white;
 			font-family: $headings-font-family;
 			&:hover{
 				background: $theme-color;
 				color: $white;
 			}
 		}
 	}
}

.post-style-1{
	.post-thumbnail{
		min-height: 20px;
	}
}

.post-style-2{
	margin-bottom: 30px;
	border: 1px solid $border-color;
	box-shadow: none;
	position: relative;
	overflow: hidden; 
	.link-overlay{
		@include size(100%, 100%);
		position: absolute;
		top: 0;
		left: 0; 
		z-index: 11;
	}
	.post-thumbnail{
		position: absolute;
		top: 0;
		left: 0;
		@include size(100%, 100%);
		z-index: 1;
		background-size: cover;
		background-position: center center;
		&:before{
			content: '';
			background: $black;
			opacity: 0.6;
			@include size(100%, 100%);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			transition: all 0.35s;
		}
		&:after{
			content: '';
			background: $white;
			@include size(100%, 100%);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
			transition: all 0.35s;
		}
	}
	.entry-content{
		padding: 60px 30px 45px;
 		border-top: 0;
 		position: relative;
 		z-index: 11;
 		transition: all 0.35s;
 		background: none;
 		@include media-breakpoint-down(lg){
 			padding: 30px;
 		}
 		.content-inner{
 			padding-bottom: 0;
 			max-width: 275px;
 			.entry-title{
				font-size: 22px;
				margin: 20px 0 10px;
				-ms-word-wrap: break-word;
		    	word-wrap: break-word;
		    	line-height: 38px;
		    	text-align: left;
		    	padding: 0;
		    	a{
		    		transition: all 0.35s;
		    	} 
			}
 		}
		.entry-meta{
			font-size: 14px;
			margin-bottom: 35px;
			background: none;
			box-shadow: none;
			padding: 0;
			top: 0;
			.left{
				@include size(52px, 52px);
				float: left;
				border: 4px solid $theme-color-2;
			}
			.right{
				padding-left: 72px;
				text-align: left;
				position: relative;
				top: -5px;
				span{
					display: block;
					width: 100%;
				}
				i{
					color: $theme-color;
					margin-right: 6px;
				}
			}
		}
		.read-more{
			max-width: 250px;
			margin: 30px auto 0;
			svg{
				width: 24px;
				height: auto;
				fill: $theme-color;
			}
		}
	}
	&:hover{
		.post-thumbnail{
			&:after{
				top: 100%;
			}
		}
		.entry-content{
			color: $white;
			.entry-meta{
				.left{
					border-color: $theme-color;
				}
				.right{
					i{
						color: $white;
					}
				}
			}
			.entry-title{
				a{
					color: $white;
				}
			}
			.read-more{
				svg{
					fill: $white;
					animation: beat 1.5s ease 0s infinite;
				}
			}
		}
	}
}

.post-block-list{
	@include clearfix();
	margin-bottom: 30px;
	@media(max-width: 400px){
		max-width: 220px;
		margin: 0 auto;
	}
	.post-content{
		.post-thumbnail{
			width: 170px;
			float: left;
			@media(max-width: 400px){
				width: 100%;
				margin-bottom: 20px;
			}
		}
		.content-inner{
			padding-left: 200px;
			@media(max-width: 900px){
				padding-left: 190px;
			}
			@media(max-width: 400px){
				padding-left: 0;
			}
			.entry-meta{
				margin-bottom: 5px;
			}
			.entry-title{
				margin: 0;
				@media(max-width: 500px){
					font-size: 18px;
					line-height: 30px;
				}
			}
		}
	}
}

.post-block-small{
	@include clearfix();
	margin-bottom: 20px;
	.post-content{
		.post-thumbnail{
			width: 90px;
			float: left;
		}
		.content-inner{
			padding-left: 108px;
			.entry-meta{
				margin-bottom: 0;
				background: none;
				padding: 0;
				top: -5px;
				.post-comment, .line{
					display: none;
				}
			}
			.entry-title{
				margin: 0;
				font-size: 16px;
				line-height: 26px;
				font-weight: 700;
				text-transform: none;
			}
		}
	}
}

.posts-grids{
	.lg-block-grid-1{
		.post{
			@include box-shadow(none);
			.entry-content{
				padding-bottom: 45px;
				.content-top{
					
				}
				.content-inner{
					font-size: 16px;
					max-width: 620px;
					margin: 0 auto;
					.entry-title{
						font-size: 24px;
						margin: 15px 0 20px;
					}
					.read-more{
						margin-top: 10px;
						display: block!important;
						visibility: visible!important;
					}
				}
			}
		}
	}
}


div[class*="col-md-6"], div[class*="col-md-4"]{
	.post-thumbnail{
 		iframe{
 			min-height: 235px;
 			height: 235px;
 		}	
 	}
}

.post-items{
	.post{
		margin-bottom: 30px;
	}
	.entry-title{
		font-size: 18px;
		text-transform: none;
		margin-top: 10px;
    	margin-bottom: 12px;
	}
	.entry-meta{
		margin: 0px 0 10px;
		color: #999999; 	
	}
	&.layout-sticky-on{
		.posts-child{
			.post{
				border-bottom: none;
				margin-bottom: 0;
				.entry-title{
					font-size: 20px;
				}
			}		
		}		
	}
}

//Single Post
.single.single-post{
	.main-page-content{
		margin: 90px 0 60px;
	}
	#wp-content{
	 	> article.post{
	 		box-shadow: none;
	 		.entry-content{
	 			padding: 0;
	 			border: 0;
	 			background: none;
	 			.content-inner{
	 				max-width: 100%;
	 				padding-bottom: 10px;
	 			}
	 		}
	 		.entry-meta-inner{
	 			text-align: center;
	 			.entry-meta{
					font-size: 12px;
					text-transform: uppercase;
					font-weight: 400;
					letter-spacing: 1px;
					box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
					padding: 6px 30px;
					top: -20px;
					position: relative;
					background: $white; 
					line-height: 30px;
					display: inline-block;
					margin: 0 auto;
					.cat-links{
						display: inline-block!important;
						i{
							margin-right: 6px;
						}
						a{
							color: $body-color;
							&:hover{
								color: $theme-color;
							}
						}
					}
					.line{
						display: inline-block;
						padding: 0 10px 0 10px;
					}
					.entry-date{
						color: $theme-color;
					}
				}
			}
		 	.entry-title{
				font-size: 42px;
				letter-spacing: 0;
				color: $black;
				text-transform: none;
		 		margin: 5px 0 30px;
				position: relative;
				-ms-word-wrap: break-word;
    			word-wrap: break-word;
				@include media-breakpoint-down(lg){
					font-size: 38px;
				}
				@include media-breakpoint-down(md){
					font-size: 32px;
				}
				@include media-breakpoint-down(sm){
					font-size: 28px;
				}
			}
			.dpsp-content-wrapper{
				padding: 0;
				margin: 0;
				width: 100%;
				float: left;
				display: block;
				margin: 15px 0 0;
				padding: 10px 20px;
				background: #f2f2f2;
				position: relative;
				ul{
					li{
						margin-bottom: 5px;
						margin-top: 5px;
					}
				}
				.dpsp-total-share-wrapper{
					right: 20px;
					top: 40px;
				}
			}
			.entry-footer{
				float: left;
				width: 100%;
				margin-top: 10px;

				.tag-links{
			 		margin-top: 20px;
			 		display: block;
			 		> a{
			 			border: 1px solid $border-color;
			 			padding: 2px 15px;
			 			font-weight: 400;
			 			font-size: 14px;
			 			margin-right: 8px;
			 			margin-bottom: 8px;
			 			display: inline-block;
			 			background: $white;
			 			&:hover{
			 				background: $theme-color;
			 				color: $white;
			 			}
			 		}
			 	}
			}
			.post-content{
				strong img{
					margin-right: 10px;
				}
				.wp-caption{
					max-width: 100%;
				}
				input[type="text"], 
				input[type="tel"],
				input[type="password"],
				input[type="email"]{
					padding: 0 8px;
				}
				input[type="submit"]{
					background: $theme-color;
					color: $white;
					text-transform: uppercase;
					font-size: 12px;
					@include transition(all 0.35s);
					border: none;
					@include box-shadow(none);
					padding: 3px 10px;
					&:hover{
						background: $black;
					}
				}
			}
			&:not(.has-post-thumbnail){
				.entry-meta-inner{
					text-align: left!important;
					.entry-meta{
						border: 1px solid $border-color;
						margin: 0 0 20px!important;
						top: 0!important
					}
				}
			}
		}
	}
}

.post-navigation{
	width: 100%;
	float: left;
	margin-top: 30px;
	padding-top: 40px;
	margin-bottom: 30px;
	border-top: 1px solid $border-color;
	a{
		display: inline-block;
		font-weight: 600;
		border: 2px solid $border-color;
		padding: 10px 20px;
		@include border-radius(6px);
		@include transition(all 0.35s);
		span{
			@include transition(all 0.35s);
		}
		&:hover{
			background: $theme-color;
			color: $white;
			span{
				color: $white!important;
			}
		}
		&[rel *= "next"]{
			float: right;
			text-align: right;
		}
		span{
			display: block;
			&.meta-nav{
				font-size: 14px;
				color: #888888;
				i{
					font-size: 10px;
				}
				&.next i{
					margin-left: 8px;
					margin-top: 1px;
				}
				&.prev i{
					margin-right: 8px;
					margin-top: 1px;
				}
			}
		}
	}

}