199 lines
3.1 KiB
SCSS
199 lines
3.1 KiB
SCSS
/*
|
|
* 4. Previews
|
|
* Special style for previews cards
|
|
*
|
|
*/
|
|
$preview-height: 8*$lineheight;
|
|
|
|
.previews-section {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: auto;
|
|
grid-gap: $lineheight;
|
|
padding-bottom: $lineheight;
|
|
}
|
|
|
|
.preview-container {
|
|
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 {
|
|
padding:0;
|
|
width:100%;
|
|
margin:auto;
|
|
box-shadow: $large-shadow, $inset-shadow;
|
|
}
|
|
|
|
.preview-link:hover {
|
|
text-decoration:none!important;
|
|
}
|
|
|
|
.preview-item {
|
|
height: $preview-height;
|
|
font-size:0.9rem;
|
|
line-height: $lineheight !important;
|
|
padding:0.2em;
|
|
text-align:justify;
|
|
background-color:rgba(0,0,0,0.00);
|
|
color:rgba(0,0,0,0.4);
|
|
position: relative;
|
|
|
|
display: flex;
|
|
-ms-flex-align: center !important;
|
|
align-items: center !important;
|
|
justify-content: center;
|
|
|
|
.preview-overlay {
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
padding: $lineheight_half;
|
|
backdrop-filter: none;
|
|
transition: background 0.3s;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: $color-light;
|
|
font-size: 1rem;
|
|
line-height: $lineheight;
|
|
font-weight:$fontweight_big;
|
|
}
|
|
|
|
.card-header {
|
|
font-family: $basefont;
|
|
font-size: 1rem;
|
|
background-color: $color-primary;
|
|
@include card-header($lineheight_half);
|
|
font-weight: $fontweight_big;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.preview-overlay {
|
|
backdrop-filter: blur(2px);
|
|
background-color:rgba(0,0,0,0.4);
|
|
|
|
.preview-metadata {
|
|
opacity: .9;
|
|
transition: opacity .5s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.preview-content {
|
|
max-height: $preview-height;
|
|
overflow:hidden;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-bottom:0px;
|
|
max-width:100%;
|
|
display:none;
|
|
}
|
|
|
|
& > p {
|
|
width:100%;
|
|
margin:auto;
|
|
|
|
& > img {
|
|
max-width:100%;
|
|
height:auto;
|
|
vertical-align:middle;
|
|
margin:auto;
|
|
text-align:center;
|
|
}
|
|
|
|
&.p-img {
|
|
text-align:center;
|
|
margin:auto;
|
|
padding:auto;
|
|
display: block;
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.preview-metadata {
|
|
opacity: 0;
|
|
transition: opacity .3s;
|
|
color: $color-light;
|
|
}
|
|
|
|
.comment-text {
|
|
margin-top:0.8em;
|
|
}
|
|
|
|
.card-preview time {
|
|
margin-bottom:0.4em;
|
|
display:block;
|
|
}
|
|
|
|
// Author area
|
|
|
|
.author-area {
|
|
display:flex;
|
|
|
|
img.author-avatar {
|
|
display:block;
|
|
height: 4.5rem;
|
|
width:auto;
|
|
border-radius:100%;
|
|
padding:0;
|
|
margin:0;
|
|
margin-right:$lineheight;
|
|
}
|
|
|
|
.author-metadata {
|
|
align-items:center;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.author-date {
|
|
font-style:italic;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom:$lineheight;
|
|
}
|
|
}
|
|
|
|
.pigimg {
|
|
display:block;
|
|
max-width: 100%;
|
|
height:auto;
|
|
margin:auto;
|
|
}
|
|
|
|
.mwarea {
|
|
padding-bottom: $lineheight;
|
|
}
|
|
|
|
.mwaimg {
|
|
width:100%;
|
|
height:auto;
|
|
display:block;
|
|
margin:auto;
|
|
}
|