File Manager

X7ROOT File Manager

Current Path: /home/notabjze/boatingnight.com/wp-content/themes/yachbat/assets/scss/base

home / notabjze / boatingnight.com / wp-content / themes / yachbat / assets / scss / base /

ðŸ“ ..
ðŸ“„ _404.scss(2.13 KB)
ðŸ“„ _block.scss(5.58 KB)
ðŸ“„ _blog.scss(10.18 KB)
ðŸ“„ _brand.scss(300 B)
ðŸ“„ _breadcrumbs.scss(842 B)
ðŸ“„ _caption.scss(425 B)
ðŸ“„ _comments.scss(5.27 KB)
ðŸ“„ _embed.scss(119 B)
ðŸ“„ _footer.scss(153 B)
ðŸ“„ _form.scss(2.72 KB)
ðŸ“„ _galleries.scss(804 B)
ðŸ“„ _header.scss(226 B)
ðŸ“„ _img.scss(699 B)
ðŸ“„ _layout.scss(1.67 KB)
ðŸ“„ _menu.scss(10.55 KB)
ðŸ“„ _page.scss(47 B)
ðŸ“„ _pagination.scss(2.71 KB)
ðŸ“„ _sticky.scss(410 B)
ðŸ“„ _table.scss(1.02 KB)
ðŸ“„ _toup.scss(438 B)
ðŸ“„ _typography.scss(3.67 KB)
ðŸ“„ _widgets.scss(7.43 KB)

Editing: _blog.scss

/* Blog General  ****************************************************/
article.post-wrap{
	
	margin-bottom: 70px;

&.sticky{
		background: #f9f9f9;
		padding: 30px;
		border-top: 5px solid;
		border-color: var(--primary);

.post-excerpt{ 
			text-align: justify;
		}
		
	}

.post-title{
		margin: 0px 0px 10px 0px;
		padding: 0;
		line-height: 1.3em;
		font-weight: bold;
		
		color: var(--heading);
		-webkit-hyphens: unset;
	    -moz-hyphens: unset;
	    -ms-hyphens: unset;
	    hyphens: unset;
	    word-break: break-word;
		&:hover{
			color: var(--primary);
		}
	}

.post-media{
		margin-bottom: 30px;
	}

ul.post-meta{
		list-style-type: none;
		margin: 0 0px 25px 0px;
		padding: 0;
		display: inline-block;
		li{
			display: inline-block;
			margin: 0 10px 0px 0;
			color: var(--text);
			opacity: 0.8;

&:hover{
				opacity: 1;
			}
			i{
				font-size: 0.8em;
				color: var(--primary);
				padding-right: 3px;
			}
			a{
				color: var(--text);
				opacity: 0.8;
				&:hover{
					color: var(--primary);
					opacity: 1;
				}
			}
		}	
	}

.post-excerpt{
		& > p{
			margin-top: 0px;
			margin-bottom: 25px;
		}
	}
		
	a.readmore{
		clear: both;
		background-color: var(--primary);
		border-color: var(--primary);
		border: 1px solid;
		color: #fff;
	    font-size: 1em;
	    text-transform: none;
	    font-weight: 600;
	    box-shadow: none;
	    display: inline-block;
	    @include transaction( all, 0.2s, linear );
	    i {
	    	margin-left: 6px;
	    	vertical-align: middle;
	    }
	    &:hover{
			color: var(--primary);
			border-color: var(--primary);
			background-color: #fff;
		}	
	}

}

/* Blog Default ****************************************************/
.blog_default{
	.post-title{
		font-weight: normal;
	}

.post-excerpt{
		font-size: 1em;
	}

.date{
		font-size: 1em;
	}
}

.layout_1c{
	.blog_default{
		max-width: 1000px;
		margin: 0 auto;
	}
}

/*Blog Listing ***************************************************/
.blog_listing{

.blog-heading {
		margin: 0 0 35px 0;
        font-weight: 700;
		font-size: 48px;
		line-height: 1.2;
	}

article.post-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30px;
		margin-bottom: 40px;
		@media screen and (max-width: 1024px) {
			grid-template-columns: 1fr;
		}

.post-media{
    		position: relative;
			margin-bottom: 0;
			img {
				height: 392px;
				object-fit: cover;
			}
			.date {
	            position: absolute;
	            border-top: 3px solid var(--secondary);
	            background-color: #ffffff;
	            left: 30px;
	            top: 30px;
	            .post-date{        
	                font-style: normal;
	                font-weight: 400;
	                font-size: 14px;
	                line-height: 1;
	                text-align: center;
	                color: var(--text); 
	                padding: 10px 20px;
                    span{
                    	display: block; 
                        font-style: normal;
                    }
                    .right-f,
                    .right-y{
                        color: var(--text);
                        font-weight: 400;
                        font-size: 14px;
                         line-height: 1;
                    }
                    .right-j{
                        font-weight: 700;
                        font-size: 32px;
                        line-height: 1;
                        color: var(--primary);
                    }      
	            }
			}
		}

.post-content {
			margin: auto 0;
			ul.post-meta {
				margin: 0 0 7px 0;
				li {
					a {
						opacity: 1;
                        color: var(--secondary);  
                        &:hover {
                        	color: var(--primary);
                        } 
					}
				}
			}
		}	
	    
	}

}

.layout_2l, .layout_2r{
	.blog_grid{
		grid-template-columns: repeat(2, 1fr);
		 @media( max-width: 767px ){
	    	grid-template-columns: repeat(1, 1fr);
	    }
	}
}

/*Blog Grid ***************************************************/
.blog_grid{
	
	display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);

@media( max-width: $desktop - 1 ){
		grid-template-columns: repeat(2, 1fr);    	
    }
    @media( max-width: 767px ){
    	grid-template-columns: repeat(1, 1fr);
    }

article.post-wrap{
    	.post-media{
			margin-bottom: 15px;
		}

.post-title{
			font-size: 22px;
		}

.post-excerpt{
			font-size: 1em;
		}
		
		ul.post-meta{
			margin-bottom: 15px;
			.date{
				font-size: 1em;
			}		
		}
		
    }

}

.layout_2l, .layout_2r{
	.blog_grid{
		grid-template-columns: repeat(2, 1fr);
		 @media( max-width: 767px ){
	    	grid-template-columns: repeat(1, 1fr);
	    }
	}
}

/* Blog masonry ***************************************************/
.blog_masonry{
	margin-left: -15px;
	margin-right: -15px;
	article{
		width: 33.3%;

@media(max-width: 1200px){
			width: 50%;
		}
		@media( max-width: 767px ){
			width: 100%;
		}
	}
	.content{
		display: block;
		margin: 0px 15px;
		position: relative;
		min-height: 100px;
		
		.post-media{
			margin-bottom: 15px;
		}

.post-title{
			font-size: 22px;
		}

.post-excerpt{
			font-size: 1em;
		}
		
		ul.post-meta{
			margin-bottom: 15px;
			.date{
				font-size: 1em;
			}		
		}

a.readmore{
			clear: both;
			background-color: transparent;
			border-color: var(--primary);
			border: 1px solid;
			color: var(--primary);
		    
		    @include transaction( all, 0.2s, linear );
		    &:hover{
				color: #fff;
				border-color: var(--primary);
				background-color: var(--primary);
			}	
		}

}

.layout_2l, .layout_2r{
	.blog_masonry{
		article{
			width: 50%;
			min-height: 200px;
			@media( max-width: 767px ){
				width: 100%;
			}
		}
	}
}

/* Detail ***************************************************/
.single{
	article.post-wrap{
		.post-title{
			-webkit-hyphens: unset;
		    -moz-hyphens: unset;
		    -ms-hyphens: unset;
		    hyphens: unset;
		    word-break: break-word;
		}

ul.post-meta{
			list-style-type: none;
			padding: 0;
			display: block;
			text-transform: uppercase;
		}

.post-content{
			&:before,
			&:after{
				clear: both;
				content: '';
    			display: table;
			}
		}
		
		.post-tags{
			clear: both;
			margin-top: 50px;
			padding-top: 50px;
		    border-top: 1px solid #f3f3f3;
			a{
				text-transform: capitalize;
				margin: 0px 5px 5px 0px;
				display: inline-block;
				margin-right: 5px;
				
				@include tag;
				
			}	
		}

.share-social-icons {
			margin: 60px 0;
			.share-social {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				row-gap: 30px;
				list-style: none;
			    padding: 0;
			    li {
			    	@include transaction( all, 0.2s, linear );
			    	display: inline-block;
			    	mix-blend-mode: normal;
			    	&:hover {
			    		@include transaction( all, 0.2s, linear );
			    		mix-blend-mode: luminosity;
			    	}
			    	a {
			    		font-family: var(--secondary-font);
			    		font-weight: 400;
						font-size: 16px;
						line-height: 1.2;
						font-feature-settings: 'pnum' on, 'lnum' on, 'ordn' on;	
			    		color: #fff;
			    		background-color: var(--primary); 
					    padding: 12px 40px;
					    margin-bottom: 0;
					    display: inline-flex;
					    justify-content: center;
					    align-items: center;
					    &.ico-twitter {
					    	background-color: #26c4f1; 
					    }
					    &.ico-pinterest {
					    	background-color: #e82b2d; 
					    }
					    i {
				    		margin-right: 9px;
				    	}
			    	}
			    }
			}
		}

.ova-next-pre-post {
			padding: 40px 0;
			border-width: 1px 0px;
			border-style: solid;
			border-color: #e8e7e7;
			@media (max-width: 767px) {
				flex-direction: column;
			}
			&:after{
				content: '';
				display: block;
				clear: both;
			}
			.pre{
				float: left;
				.num-2 {
					.title {
						margin-left: -16px;
					}
				}
			}
	
			.next {
				float: right;
				.num-2 {
					.title {
						margin-right: -16px;
					}
				}
			}

.pre, .next {
				display: flex;
				width: calc(50% - 25px);;
				@media (max-width: 767px) {
					width: 100%;
				}
				&:hover{
					.num-1 {
						.icon {
							i {
								color: #fff;
							}
						}
					}
				}
				.num-1 {
					margin-right: 5px;
					i {
						display: inline-flex;
						line-height: 1;
						color: var(--text);
						font-size: 16px;
					}	
				}
				.num-2 {
					span.text-label {
						font-size: 14px;
						line-height: 1.4;
						letter-spacing: 0.2px;
						color: var(--text);
						font-weight: 400;
						display: inline-block;
						margin-bottom: 5px;
					}
					.title {
						font-family: var(--primary-font);
						display: block;
						font-size: 18px;
						line-height: 1.5;
						font-weight: 700;
						color: var(--heading);
						word-break: break-word;
					}
				}
			}
		
			.pre {
				padding-right: 15px;
				@media(max-width: 767px){
					padding-right: 0px;
				}
			}
			.next {
				flex-direction: row-reverse;
				padding-left: 15px;
				@media (max-width: 767px) {
					flex-direction: row;
					margin-top: 60px;
					padding-left: 0px;
				}
				.num-1 {
					margin: 0px;
					margin-left: 5px;
					@media (max-width: 767px) {
						margin-left: 0px;
						margin-right: 5px;
					}
				}
				.num-2 {
					text-align: right;
					@media (max-width: 767px) {
						text-align: left;
					}
				}
			}
			a {
				display: flex;
				align-items: flex-start;	
			}
		}

&.sticky{
			.post-tags{
				border-top: 1px solid #e1e1e1;
			}
		}
	}

&.layout_1c{
		article.post-wrap{
			.post-title{
				max-width: 850px;
	            margin: 0 auto;
	            margin-bottom: 10px;
			}

ul.post-meta{
				margin: 0 auto;
				max-width: 850px;
				margin-bottom: 50px;	
			}

.post-content{
				max-width: 850px;
				margin: 0 auto;
			}
		}

#main-content{
			max-width: 1000px;
			margin: 0 auto;
			#comments {
				max-width: 850px;
	            margin: 0 auto;
			}
		}
	}
	
}

/*Page Title ***************************************************/

h1.page-title{
	margin-top: 0;
	-webkit-hyphens: unset;
    -moz-hyphens: unset;
    -ms-hyphens: unset;
    hyphens: unset;
}

.search{
	.page-header{
		.page-title{
			margin-bottom: 60px;
			border-bottom: 1px solid #e1e1e1;
    		padding-bottom: 15px;
			span{
				color: var(--primary);
			}
		}
	}

}

X7ROOT File Manager

Editing: _blog.scss

Upload File

Create Folder