This repository has been archived on 2024-04-03. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-wordpress-theme/scss/components/_previews.scss

290 lines
4.9 KiB
SCSS
Raw Normal View History

2020-12-30 19:11:12 +01:00
/*
* 4. Previews
* Special style for previews cards
*
*/
$preview-height: 8*$lineheight;
$preview-content-height:165px;
$comment-peek-height:0px;
2020-12-30 19:11:12 +01:00
.preview-grid {
2020-12-30 19:11:12 +01:00
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include md() {
2020-12-30 19:11:12 +01:00
grid-template-columns: 1fr 1fr;
}
}
2020-12-30 19:11:12 +01:00
.preview-grid-3 {
@include xl() {
2020-12-30 19:11:12 +01:00
grid-template-columns: 1fr 1fr 1fr;
}
2020-12-30 19:11:12 +01:00
}
.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;
2023-10-04 13:35:36 +02:00
max-width:360px;
2020-12-30 19:11:12 +01:00
}
.preview-link {
padding:0;
background-color: transparent;
margin:0!important;
text-decoration: none;
position:relative;
height: $preview-height;
.card-header {
font-family: $basefont;
font-size: 1em;
@include panel-header($lineheight_half);
@include colorize-shape($color-primary);
color: getTextColorFromBackground($color-primary);
font-weight: $fontweight_bold;
position:absolute;
margin:0;
top:0.5rem;
z-index:1;
min-height:2.8rem;
display:flex;
flex-direction: column;
justify-content: center;
}
2020-12-30 19:11:12 +01:00
}
.preview-content {
2020-12-30 19:11:12 +01:00
font-size:0.9rem;
height: 100%;
width: 100%;
2020-12-30 19:11:12 +01:00
line-height: $lineheight !important;
text-align:justify;
background-color:rgba(0,0,0,0.00);
2023-05-20 14:48:22 +02:00
color: transparentize($color-font, 0.3);
2020-12-30 19:11:12 +01:00
position: relative;
overflow:hidden;
2020-12-30 19:11:12 +01:00
.preview-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding-top: $card-header-vmargin/2;
2020-12-30 19:11:12 +01:00
backdrop-filter: none;
transition: background-color 0.3s, backdrop-filter 0.3s;
@include border-radius($card-radius);
2020-12-30 19:11:12 +01:00
}
&:hover {
.preview-overlay {
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4);
.metadata-pills {
opacity: .9;
transition: opacity .5s, height .5s;
}
.comment-text {
bottom:0px;
2020-12-30 19:11:12 +01:00
}
}
}
}
.preview-exerpt {
2020-12-30 19:11:12 +01:00
max-height: $preview-height;
overflow:hidden;
background-size: cover;
min-height:100%;
min-width:100%;
@include border-radius($card-radius);
font-size:0.85rem;
line-height:1.25rem;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
2020-12-30 19:11:12 +01:00
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
max-width:100%;
display:none;
}
& > p {
width:100%;
margin:auto;
2023-05-20 14:48:22 +02:00
&:not(.p-img) {
position:absolute;
top:3rem;
padding:0.5rem;
}
2020-12-30 19:11:12 +01:00
& > 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;
2020-12-30 19:11:12 +01:00
width:100%;
}
}
}
.preview-metadata {
color: $color-font-light;
height:100%;
2020-12-30 19:11:12 +01:00
overflow: hidden;
@include border-radius($card-radius);
2020-12-30 19:11:12 +01:00
.metadata-pills {
opacity: 0;
transition: opacity .3s, height .3s;
display:flex;
justify-content:space-between;
padding-left: $lineheight/2;
padding-right: $lineheight/2;
2020-12-31 12:33:00 +01:00
font-size:0.9em;
padding-top:3rem;
2020-12-30 19:11:12 +01:00
}
}
.card-preview.head-info {
2020-12-30 19:11:12 +01:00
.comment-text {
@include angled-edge('outside top', 'upper left', $color-secondary, 16);
background-color:$color-secondary;
2020-12-30 19:11:12 +01:00
}
}
.card-preview.card-grey {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-muted, 16);
background-color:$color-muted;
2020-12-30 19:11:12 +01:00
}
}
.comment-text {
color: $color-font-light;
background-color:$color-primary;
@include angled-edge('outside top', 'upper left', $color-primary, 16);
2020-12-30 19:11:12 +01:00
text-align: center;
position:absolute;
bottom:-$lineheight;
width:100%;
transition: bottom 0.3s;
2020-12-30 19:11:12 +01:00
}
.card-preview time {
margin-bottom:0.4em;
display:block;
}
// Author area
.author-area {
display:flex;
img.author-avatar, img.avatar {
2020-12-30 19:11:12 +01:00
display:block;
height: $lineheight*3;
2020-12-30 19:11:12 +01:00
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;
}
.avatar {
background: transparent;
2020-12-30 19:11:12 +01:00
}
.mwarea {
padding-bottom: $lineheight;
.avatar {
width:80%;
height:auto;
display:block;
margin:auto;
}
2020-12-30 19:11:12 +01:00
}
.cover {
width:100%;
height:auto;
@include border-radius($card-radius);
2020-12-30 19:11:12 +01:00
}
.roman {
@include md() {
width:80%;
position:relative;
top:-240px;
margin:auto;
}
}