This repository has been archived on 2023-11-30. You can view files and clone it, but cannot push or open issues or pull requests.
qdouze-wordpress-theme/scss/_blog.scss

156 lines
2.6 KiB
SCSS
Raw Normal View History

/*
* 6 - Blog Elements ( _blog.scss )
*
* All elements that are used for a blog (article previews, etc).
* "Commons" elements will be in other parts
*/
/* 1.1 - Comment area */
.comment {
margin-bottom: 1.333em;
}
/* 2.1 - Previews */
.previews-section {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
.preview-container {
margin-bottom:1em;
padding:0.4em;
width:100%
}
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
.prev-col-2 .preview-container {
width:50%;
}
.prev-col-3 .preview-container {
width:33%;
}
.prev-col-4 .preview-container {
width:25%;
}
}
.card-preview {
@include border-radius();
width:100%;
margin:auto;
box-shadow: $large-shadow, $inset-shadow;
}
.preview-link:hover {
text-decoration:none!important;
}
.preview-item {
height:200px;
overflow:hidden;
font-size:0.9em;
line-height: 1.5em !important;
padding:0.2em;
text-align:justify;
background-color:rgba(0,0,0,0.05);
color:rgba(0,0,0,0.4);
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
}
.preview-content {
max-height:200px;
}
.preview-content > p {
width:100%;
margin:auto;
}
.preview-content > p.p-img {
text-align:center;
margin:auto;
padding:auto;
display: block;
width:100%;
}
.preview-content > p > img {
max-width:100%;
height:auto;
vertical-align:middle;
margin:auto;
text-align:center;
}
.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
margin-bottom:0px;
max-width:100%;
display:none;
}
.preview-item h1 {
display:none;
}
.preview-overlay {
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity .5s;
color: #FFF;
background-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
backdrop-filter: none;
}
.preview-overlay h1 {
max-width:100%;
padding-top:0.3em;
margin:auto;
margin-bottom:0px;
text-align:center;
display:block;
font-size:2em;
color: white;
}
.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 {
color:white;
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
}
.preview-item:hover .preview-overlay {
opacity: .9;
transition: opacity .5s;
backdrop-filter: blur(2px);
}
.comment-text {
margin-top:0.8em;
}
.card-preview time {
margin-bottom:0.4em;
display:block;
}