imporvement: better layout
This commit is contained in:
Kazhnuz
parent
edf7b90b72
commit
6f5b37029d
13 changed files with 232 additions and 278 deletions
8
components/preview-grid.php
Normal file
8
components/preview-grid.php
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?php if(have_posts()) : ?>
|
||||
<div class="previews-section preview-grid">
|
||||
<?php include(TEMPLATEPATH . '/components/previews.php'); ?>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<?php the_posts_pagination(); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
@ -1,32 +1,6 @@
|
|||
<?php if(have_posts()) : ?>
|
||||
<div class="previews-section">
|
||||
<?php while(have_posts()) : the_post(); ?>
|
||||
<article class="card card-preview head-primary">
|
||||
<a href="<?php the_permalink(); ?>" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header"><?php the_title(); ?></h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="metadata-pills">
|
||||
<div><?php
|
||||
if (!has_category('chapters')) {
|
||||
$category = get_the_category();
|
||||
echo"<span class='btn-small btn-info small-text'>" . $category[0]->cat_name . "</span>";
|
||||
} else {
|
||||
$romans = get_the_terms($post->ID, 'roman');
|
||||
echo"<span class='btn-small btn-info small-text'>" . $romans[0]->name . "</span>";
|
||||
}
|
||||
?></div>
|
||||
<div><time><span class="btn-small btn-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
|
||||
</div>
|
||||
<div class="comment-text"><?php comments_number('Pas de commentaire', 'Un commentaire', '% commentaires' );?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
<div class="previews-section preview-list">
|
||||
<?php include(TEMPLATEPATH . '/components/previews.php'); ?>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<?php the_posts_pagination(); ?>
|
||||
|
|
|
|||
27
components/previews.php
Normal file
27
components/previews.php
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?php while(have_posts()) : the_post(); ?>
|
||||
<div class="preview">
|
||||
<div class="preview-thumbnail">
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<?php the_post_thumbnail( ); ?>
|
||||
</a>
|
||||
</div>
|
||||
<div class="preview-text">
|
||||
<h2><a href="<?php the_permalink(); ?>" class="preview-title-link m-0 p-0"><?php the_title(); ?></a></h2>
|
||||
|
||||
<div class="flex-that">
|
||||
<div>
|
||||
<?php
|
||||
if (!has_category('chapters')) {
|
||||
$category = get_the_category();
|
||||
echo"<span class='badge bg-primary small-text m-0'>" . $category[0]->cat_name . "</span>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div>
|
||||
<time><span class="badge bg-primary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endwhile; ?>
|
||||
2
home.php
2
home.php
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
?>
|
||||
<h1 class="page-title">Publications</h1>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
|
||||
|
||||
</main>
|
||||
<?php get_footer(); ?>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<?php get_header(); ?>
|
||||
<main>
|
||||
<h1 class="page-title">Publications</h1>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
|
||||
</main>
|
||||
<?php get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
|
|
|
|||
|
|
@ -13,5 +13,5 @@
|
|||
@import 'components/menus';
|
||||
@import 'components/toasts';
|
||||
@import 'components/tables';
|
||||
@import 'components/previews';
|
||||
//@import 'components/previews';
|
||||
@import 'components/sidebar';
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
* Styles that are custom to this particular theme
|
||||
**/
|
||||
|
||||
@import 'custom/global';
|
||||
@import 'custom/global';
|
||||
@import 'custom/previews';
|
||||
|
|
@ -8,20 +8,24 @@ $preview-content-height:165px;
|
|||
$comment-peek-height:0px;
|
||||
$comment-height:30px;
|
||||
|
||||
.previews-section {
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include xl() {
|
||||
|
||||
@include md() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
@mixin container-big() {
|
||||
padding-left: $lineheight;
|
||||
padding-right: $lineheight;
|
||||
max-width: 1600px;
|
||||
max-width: $container-size;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ header h1 {
|
|||
font-style:oblique;
|
||||
padding:1.5rem;
|
||||
line-height: 1rem;
|
||||
max-width: 1600px;
|
||||
max-width: $container-size;
|
||||
margin: auto;
|
||||
text-align:center;
|
||||
|
||||
|
|
@ -98,7 +98,7 @@ header h1 {
|
|||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
@include xl() {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
|
|
@ -216,8 +216,3 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-article {
|
||||
margin:auto;
|
||||
width:800px;
|
||||
}
|
||||
|
|
|
|||
79
scss/custom/_previews.scss
Normal file
79
scss/custom/_previews.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include md() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
@include sm() {
|
||||
.preview-thumbnail a {
|
||||
width: 240px;
|
||||
margin-right: $lineheight /2;
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
}
|
||||
@include lg() {
|
||||
.preview-thumbnail a {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.preview-thumbnail a {
|
||||
display:block;
|
||||
width: 100%;
|
||||
background-color:transparent;
|
||||
margin:auto;
|
||||
object-fit: cover;
|
||||
padding:0;
|
||||
line-height:0;
|
||||
img {
|
||||
width:100%;
|
||||
object-fit: cover;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: $card-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.preview h2 {
|
||||
font-size:1.25rem;
|
||||
line-height: 1.5rem;
|
||||
font-family: $titlefont;
|
||||
font-weight: 800;
|
||||
height:3rem;
|
||||
a {
|
||||
background-color:transparent!important;
|
||||
color:$color-font;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-excerpt {
|
||||
margin-top: $lineheight / 2;
|
||||
font-size:0.8rem;
|
||||
line-height:1.25rem;
|
||||
color:transparentize($color-font, 0.2);
|
||||
}
|
||||
|
|
@ -30,5 +30,5 @@ $screen-xl-min: 1200px;
|
|||
$screen-xxl-min: 1600px;
|
||||
|
||||
// Containers size
|
||||
$container-size: $screen-xxl-min;
|
||||
$container-size: $screen-xl-min;
|
||||
$container-size-large: $screen-xxl-min;
|
||||
|
|
|
|||
|
|
@ -48,14 +48,14 @@
|
|||
|
||||
.m {
|
||||
@include addmargins("half", $lineheight * .5);
|
||||
@for $i from 1 through 4 {
|
||||
@for $i from 0 through 4 {
|
||||
@include addmargins($i, $lineheight*$i)
|
||||
}
|
||||
}
|
||||
|
||||
.p {
|
||||
@include addpaddings("half", $lineheight * .5);
|
||||
@for $i from 1 through 4 {
|
||||
@for $i from 0 through 4 {
|
||||
@include addpaddings($i, $lineheight*$i)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
328
style.css
328
style.css
|
|
@ -537,7 +537,7 @@ code {
|
|||
.container, .container-onecolumn {
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
max-width: 1600px;
|
||||
max-width: 1200px;
|
||||
margin: auto; }
|
||||
|
||||
.columns {
|
||||
|
|
@ -1501,228 +1501,6 @@ th, td {
|
|||
th {
|
||||
font-weight: 800; }
|
||||
|
||||
/*
|
||||
* 4. Previews
|
||||
* Special style for previews cards
|
||||
*
|
||||
*/
|
||||
.previews-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 1.6rem;
|
||||
padding-bottom: 1.6rem; }
|
||||
@media (min-width: 1200px) {
|
||||
.previews-section {
|
||||
grid-template-columns: 1fr 1fr; } }
|
||||
@media (min-width: 1600px) {
|
||||
.previews-section {
|
||||
grid-template-columns: 1fr 1fr 1fr; } }
|
||||
.preview-container {
|
||||
width: 100%; }
|
||||
|
||||
@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: 0px 2px 4px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); }
|
||||
|
||||
.preview-link {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
margin: 0 !important; }
|
||||
|
||||
.preview-item {
|
||||
height: 12.8rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6rem !important;
|
||||
text-align: justify;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: rgba(33, 37, 41, 0.4);
|
||||
position: relative;
|
||||
display: flex;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
justify-content: center; }
|
||||
.preview-item .preview-overlay {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding-top: 0px;
|
||||
backdrop-filter: none;
|
||||
transition: background-color 0.3s;
|
||||
border-radius: 8px 8px 8px 8px; }
|
||||
.preview-item .preview-overlay h1, .preview-item .preview-overlay h2, .preview-item .preview-overlay h3, .preview-item .preview-overlay h4, .preview-item .preview-overlay h5, .preview-item .preview-overlay h6 {
|
||||
color: #fefefe;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6rem;
|
||||
font-weight: 300; }
|
||||
.preview-item .preview-overlay .card-header {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
padding: 0.4rem;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
padding-bottom: 0.4rem !important;
|
||||
margin: 0px;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-top: 0.8rem;
|
||||
line-height: 1.6rem;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
border: 0px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
background-color: #e33d22;
|
||||
color: #fefefe;
|
||||
font-weight: 300;
|
||||
margin-top: 0px; }
|
||||
.preview-item .preview-overlay .card-header:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px; }
|
||||
.preview-item .preview-overlay .card-header:last-child {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px; }
|
||||
.preview-item .preview-overlay .card-header h1, .preview-item .preview-overlay .card-header h2, .preview-item .preview-overlay .card-header h3, .preview-item .preview-overlay .card-header h4, .preview-item .preview-overlay .card-header h5, .preview-item .preview-overlay .card-header h6, .preview-item .preview-overlay .card-header h7, .preview-item .preview-overlay .card-header h8, .preview-item .preview-overlay .card-header h9, .preview-item .preview-overlay .card-header h10 {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 1rem;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
color: #fefefe;
|
||||
font-weight: 300;
|
||||
line-height: 1.6rem; }
|
||||
.preview-item:hover .preview-overlay {
|
||||
backdrop-filter: blur(2px);
|
||||
background-color: rgba(0, 0, 0, 0.4); }
|
||||
.preview-item:hover .preview-overlay .metadata-pills {
|
||||
opacity: .9;
|
||||
transition: opacity .5s, height .5s;
|
||||
height: 135px; }
|
||||
|
||||
.preview-content {
|
||||
max-height: 12.8rem;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.25rem; }
|
||||
.preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 {
|
||||
margin-bottom: 0px;
|
||||
max-width: 100%;
|
||||
display: none; }
|
||||
.preview-content > p {
|
||||
width: 100%;
|
||||
margin: auto; }
|
||||
.preview-content > p > img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
text-align: center; }
|
||||
.preview-content > p.p-img {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding: auto;
|
||||
display: block;
|
||||
width: 100%; }
|
||||
|
||||
.preview-metadata {
|
||||
color: #fefefe;
|
||||
height: 165px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px 8px 8px 8px; }
|
||||
.preview-metadata .metadata-pills {
|
||||
height: 165px;
|
||||
opacity: 0;
|
||||
transition: opacity .3s, height .3s;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.8rem;
|
||||
font-size: 0.9em; }
|
||||
|
||||
.card-preview.head-info .comment-text {
|
||||
background-color: #343a40; }
|
||||
|
||||
.card-preview.card-grey .comment-text {
|
||||
background-color: #adb5bd; }
|
||||
|
||||
.comment-text {
|
||||
color: #fefefe;
|
||||
background-color: #e33d22;
|
||||
text-align: center; }
|
||||
|
||||
.card-preview time {
|
||||
margin-bottom: 0.4em;
|
||||
display: block; }
|
||||
|
||||
.author-area {
|
||||
display: flex; }
|
||||
.author-area img.author-avatar, .author-area img.avatar {
|
||||
display: block;
|
||||
height: 4.8rem;
|
||||
width: auto;
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-right: 1.6rem; }
|
||||
.author-area .author-metadata {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start; }
|
||||
.author-area .author-date {
|
||||
font-style: italic; }
|
||||
.author-area:not(:last-child) {
|
||||
margin-bottom: 1.6rem; }
|
||||
|
||||
.pigimg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: auto; }
|
||||
|
||||
.avatar {
|
||||
background: transparent; }
|
||||
|
||||
.mwarea {
|
||||
padding-bottom: 1.6rem; }
|
||||
.mwarea .avatar {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto; }
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px 8px 8px 8px; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.roman {
|
||||
width: 80%;
|
||||
position: relative;
|
||||
top: -240px;
|
||||
margin: auto; } }
|
||||
|
||||
.sidebar-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
|
|
@ -2565,6 +2343,21 @@ th {
|
|||
.mt-half {
|
||||
margin-top: 0.8rem; }
|
||||
|
||||
.m-0 {
|
||||
margin: 0rem; }
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0rem; }
|
||||
|
||||
.mr-0 {
|
||||
margin-right: 0rem; }
|
||||
|
||||
.ml-0 {
|
||||
margin-left: 0rem; }
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0rem; }
|
||||
|
||||
.m-1 {
|
||||
margin: 1.6rem; }
|
||||
|
||||
|
|
@ -2640,6 +2433,21 @@ th {
|
|||
.pt-half {
|
||||
padding-top: 0.8rem; }
|
||||
|
||||
.p-0 {
|
||||
padding: 0rem; }
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0rem; }
|
||||
|
||||
.pr-0 {
|
||||
padding-right: 0rem; }
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0rem; }
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0rem; }
|
||||
|
||||
.p-1 {
|
||||
padding: 1.6rem; }
|
||||
|
||||
|
|
@ -2759,7 +2567,7 @@ header h1 {
|
|||
font-style: oblique;
|
||||
padding: 1.5rem;
|
||||
line-height: 1rem;
|
||||
max-width: 1600px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
text-align: center; }
|
||||
header h1 img {
|
||||
|
|
@ -2793,13 +2601,13 @@ header h1 {
|
|||
.container-big {
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
max-width: 1600px;
|
||||
max-width: 1200px;
|
||||
margin: auto; }
|
||||
|
||||
.container-blog {
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
max-width: 1600px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -2807,7 +2615,7 @@ header h1 {
|
|||
row-gap: 1.6rem;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas: "main" "side"; }
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 1200px) {
|
||||
.container-blog {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-areas: "main side"; } }
|
||||
|
|
@ -2830,7 +2638,7 @@ ul.tag-list {
|
|||
.container-preview {
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
max-width: 1600px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -2850,7 +2658,7 @@ ul.tag-list {
|
|||
.container-personnage {
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
max-width: 1600px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
|
|
@ -2906,6 +2714,64 @@ footer {
|
|||
footer .columns a:visited:visited {
|
||||
color: #fefefe; }
|
||||
|
||||
.container-article {
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 1.6rem;
|
||||
padding-bottom: 1.6rem; }
|
||||
@media (min-width: 768px) {
|
||||
.preview-grid {
|
||||
grid-template-columns: 1fr 1fr; } }
|
||||
@media (min-width: 1200px) {
|
||||
.preview-grid {
|
||||
grid-template-columns: 1fr 1fr 1fr; } }
|
||||
@media (min-width: 1600px) {
|
||||
.preview-grid {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr; } }
|
||||
@media (min-width: 576px) {
|
||||
.preview-list .preview-thumbnail a {
|
||||
width: 240px;
|
||||
margin-right: 0.8rem; }
|
||||
.preview-list .preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.6rem; } }
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.preview-list .preview-thumbnail a {
|
||||
width: 320px; } }
|
||||
|
||||
.preview {
|
||||
font-size: 0.8rem; }
|
||||
|
||||
.preview-thumbnail a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
margin: auto;
|
||||
width: 800px; }
|
||||
object-fit: cover;
|
||||
padding: 0;
|
||||
line-height: 0; }
|
||||
.preview-thumbnail a img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: 8px; }
|
||||
|
||||
.preview h2 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5rem;
|
||||
font-family: Teko, sans-serif;
|
||||
font-weight: 800;
|
||||
height: 3rem; }
|
||||
.preview h2 a {
|
||||
background-color: transparent !important;
|
||||
color: #212529; }
|
||||
|
||||
.preview-excerpt {
|
||||
margin-top: 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgba(33, 37, 41, 0.8); }
|
||||
|
|
|
|||
Reference in a new issue