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.
qdouze2-wordpress-theme/scss/custom/_previews.scss

95 lines
1.8 KiB
SCSS
Raw Permalink Normal View History

#featured-articles, .preview-grid {
2022-12-18 13:48:49 +01:00
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight / 3;
margin: -$lineheight / 3;
2022-12-18 13:48:49 +01:00
padding-bottom: $lineheight;
@include sm() {
2022-12-18 13:48:49 +01:00
grid-template-columns: 1fr 1fr;
}
@include lg() {
2022-12-18 13:48:49 +01:00
grid-template-columns: 1fr 1fr 1fr;
}
}
2022-12-18 13:48:49 +01:00
.preview-grid {
@include xl() {
2022-12-18 13:48:49 +01:00
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.preview-list {
.preview {
display: block;
}
2022-12-18 13:48:49 +01:00
@include sm() {
2023-05-03 10:28:39 +02:00
.preview-thumbnail {
width: min-content;
img {
width: 240px;
margin-right: $lineheight /2;
}
2022-12-18 13:48:49 +01:00
}
.preview {
display: flex;
align-items: start;
2022-12-18 13:48:49 +01:00
margin-bottom: $lineheight;
}
}
2022-12-18 16:41:18 +01:00
@include xl() {
.preview-thumbnail img {
2022-12-18 13:48:49 +01:00
width: 320px;
}
}
}
.preview {
font-size: 0.8rem;
text-decoration: none;
padding: $lineheight / 3;
border-radius: $card-radius;
2022-12-18 13:48:49 +01:00
}
.preview-thumbnail {
2022-12-18 13:48:49 +01:00
display:block;
width: 100%;
background-color:transparent;
object-fit: cover;
padding:0;
line-height:0;
img {
width:100%;
object-fit: cover;
height: auto;
aspect-ratio: 16/9;
border-radius: $card-radius;
}
}
2022-12-18 15:17:25 +01:00
.preview h2, .preview-featured h2 {
2022-12-18 13:48:49 +01:00
font-size:1.25rem;
line-height: 1.5rem;
font-family: $titlefont;
font-weight: 800;
height:3rem;
color: $color-font;
2022-12-18 13:48:49 +01:00
a {
background-color:transparent!important;
color:$color-font;
}
}
.preview-featured h2 {
color: $color-font-light;
}
2022-12-18 13:48:49 +01:00
.preview-excerpt {
margin-top: $lineheight / 2;
font-size:0.8rem;
line-height:1.25rem;
color:transparentize($color-font, 0.2);
}