vvveb-cms/static/Vvvebjs/demo/landing/scss/blog.scss

$bg-body-secondary-gray: #f1f3f7 !default;
$max-width: 40rem !default;

@mixin quotes {
		&:before,  &:after {
			font-family: 'Line Awesome Free';
			font-weight: 900;
			font-style:normal;
		}
		
		&:before {
			content:"\f10d ";
		}
				
		&:after {
			content:" \f10e";
		}
}

blockquote {

	font-style: italic;
	padding-bottom: 3px;
	padding-right: 20px;
	padding-left: 20px;
	letter-spacing: .01rem;
	border-left: 4px solid $bg-body-secondary-gray;
	margin:0rem;
	//border-left: 4px solid var(--bs-light-gray);
	
	p {
		@include quotes();
	}
	
	i {
		font-size:2rem;
		color:var(--bs-gray);;
	}
}	

.post { 
	//margin-bottom:2rem;
	
	&.card {
	--bs-card-border-width: 0; 
	--bs-card-border-color: transparent;
	}

	@import "post-style";
	
	[data-v-post-image].narrow {
		max-width: $max-width;
	}

	.card-header {
		margin-bottom:0rem;
		background:transparent;
		border:none;
	}

	.card-footer {
		/* padding: 0.5rem 1rem; */
		//padding:0;
		//max-width: 35rem;
		//margin: 0 auto;
		background:transparent;
		border:none;
	} 
	
	.post-meta {
		list-style:none;
		text-align:center;
		padding: 0;
		margin-bottom:2rem;
		font-size:14px;

		li {
			margin-right: 1rem;
			display: inline-block;
			margin-top: 0.5rem;
			color:var(--bs-secondary-color);
			
			i {
				//font-size:1.4rem;
			}
			
			a {
				text-decoration:none;
				color:var(--bs-secondary-color);
				&:hover {
					text-decoration:underline;
				}
			}
		}
	}
}


.inner-page-hero
{
       position:relative;
       max-height: 150px;
       height: 180px;
       overflow: hidden;
	   //background:var(--bs-border-color);
	   //background-color:var(--bs-light-bg-subtle);
	   //background-color:rgba(var(--bs-body-color-rgb), 0.01);
	   //border-bottom:1px solid var(--bs-border-color);

       .title-container {
               position: absolute;
               width: 100%;
               height: 100%;
               display: flex;
               align-content: center;
               align-items: center;    
               text-align:center;
               z-index:1;
               /*
               ::before
               {
                       width: 100%;
                       height: 100%;
                       content: " ";
                       //background: rgba(var(--bs-body-bg-rgb),0.5);
                       top: 0px;
                       left: 0px;
                       position: absolute;
                       z-index: -1;
               }
               */
               h1
               {
				   width:100%;
				   z-index:1;
				   margin:0;
				   font-weight:700;
				   //font-size:3rem;
               }
               
               nav {
               --bs-link-color-rgb:var(--bs-body-color);
				display:inline-block;
               }
       }

		.breadcrumb {
			margin:0;
		}

       img
       {
               width: 100%;
               top: -30vw;
               position: absolute;
       }
}





.sidebar-sticky {
	//padding: 2rem 1rem;

	.card {
		border:none;
		--bs-card-bg:transparent;
	}
	
	.card-header {
		margin-bottom:0rem;
		background:transparent;
		border:none;
		//font-size:1.2rem;
	}

}	



.sidebar-sticky {
	position: -webkit-sticky;
	position: sticky;
	top:2.5rem;
	
	h5, h6 {
		
	}
	
	.card {
		//padding:0.3rem 0;
		margin-bottom: 1rem;
		--bs-card-cap-padding-x: 1rem;
		--bs-card-spacer-y: 1rem;
		--bs-card-cap-padding-y: 0;
		--bs-card-spacer-x: 1rem;
    		
		.card-header {
			//padding:0rem 1.1rem;
		}
		
		.card-body {
			//color:var(--bs-body-color);
			//padding:0rem 1rem 1rem;
		}
	}
}


.categories-widget, .archives-widget {
	ul {
		list-style:none;
		column-count: 2;
		padding-left:0;
	}
}

.archives-widget {
	ul {
		column-count: 2;	
	}
}


ul.tags {
	list-style:none;
	margin:0;
	padding:0;
	
	li {
		display:inline-block;
	}
	
	a {
		border:1px solid rgba(var(--bs-body-color-rgb), 0.035);
		background-color:rgba(var(--bs-body-color-rgb), 0.025);
		padding:0rem 0.5rem;
		margin:0.1rem;
		display:inline-block;
		border-radius:2px;
		font-size:85%;
	}
}

.img-fluid {
    border-radius: 4px;
}

/* comments */
.post-comments, .product-reviews, .product-questions {
	position:relative;
	
	a {
		//color:#212529;
		text-decoration:none;
	}
}

.author-avatar {
	position:absolute;
	left:-90px;
    min-width: 80px;
    min-height: 80px;
    
	display: flex;
    justify-content: center;
    align-items: center;

	&:empty, .empty {
		width: 80px;
		height: 80px;
		//background: var(--bs-secondary-bg);
		background: rgba(var(--bs-secondary-bg-rgb), 0.5);
	}
}

.review-list, .question-list {
	margin-left:5.5rem;
}

.comment, .review, .question {
	position:relative;
	
	&.level-1 {
		margin-left:1rem;
	}

	&.level-2 {
		margin-left:2rem;
	}

	&.level-3 {
		margin-left:3rem;
	}
}

.review-list {
	.user-image {
		display:inline-block;
		max-width:80px;
		margin-right:0.3rem;
		margin-bottom:0.3rem;
	}
}

.site-header {
	display:flex;
	flex-direction: column;
	position:relative;
	
	.background {
		position:absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		transform: none;

		img {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			object-fit: cover;
		}

		&:before {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			content: ""; 
			width: 100%;
			height: 100%;
			background-color: #000;
			background-color: var(--bs-body-bg);
			opacity: 0.7;
			z-index: 5;
		}
	}
	
	.title-container {
		position:relative;
		margin-top:auto;
		z-index:100;
	}
}