init
This commit is contained in:
349
static/Vvvebjs/demo/landing/scss/blog.scss
Normal file
349
static/Vvvebjs/demo/landing/scss/blog.scss
Normal file
@@ -0,0 +1,349 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user