feat: add preview style

Fixes #2
This commit is contained in:
Kazhnuz 2020-12-31 12:33:00 +01:00
parent 7690aa2bd3
commit 1e27dd42f5
6 changed files with 38 additions and 3 deletions

View file

@ -4,7 +4,7 @@
$category = get_category( get_query_var( 'cat' ) ); $category = get_category( get_query_var( 'cat' ) );
$cat_id = $category->cat_ID; ?> $cat_id = $category->cat_ID; ?>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?> <?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main> </main>

View file

@ -0,0 +1,27 @@
<?php if(have_posts()) : ?>
<div class="previews-section">
<?php while(have_posts()) : the_post(); ?>
<article class="card card-preview card-primary">
<a href="<?php the_permalink(); ?>" class="preview-link">
<div class="preview-item">
<div class="preview-content"><?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 $category = get_the_category();
echo"<span class='btn-small btn-info small-text'>" . $category[0]->cat_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>
<div class="navigation">
<?php the_posts_pagination(); ?>
</div>
<?php endif; ?>

View file

@ -244,6 +244,9 @@ code {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.small-text {
font-size: 0.9em;
}
/* 2.6 - Special styling */ /* 2.6 - Special styling */

View file

@ -156,6 +156,7 @@ $preview-height: 8*$lineheight;
justify-content:space-between; justify-content:space-between;
padding-left: $lineheight/2; padding-left: $lineheight/2;
padding-right: $lineheight/2; padding-right: $lineheight/2;
font-size:0.9em;
} }
} }

View file

@ -497,6 +497,9 @@ code {
margin: auto; margin: auto;
margin-bottom: 3rem; } margin-bottom: 3rem; }
.small-text {
font-size: 0.9em; }
/* 2.6 - Special styling */ /* 2.6 - Special styling */
mark { mark {
border-radius: 0.2em; border-radius: 0.2em;
@ -1841,7 +1844,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; } padding-right: 0.75rem;
font-size: 0.9em; }
.card-preview.card-info .comment-text { .card-preview.card-info .comment-text {
position: relative; position: relative;

View file

@ -3,7 +3,7 @@
<?php $tag = get_category( get_query_var( 'tag' ) ); <?php $tag = get_category( get_query_var( 'tag' ) );
$tag_id = $tag->ID;?> $tag_id = $tag->ID;?>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?> <?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main> </main>
<!-- Sidebar custom pour contenir la description --> <!-- Sidebar custom pour contenir la description -->
<aside class="sidebar"> <aside class="sidebar">