From 1e27dd42f5c68597f6f5ca628d7a61adfa682009 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Thu, 31 Dec 2020 12:33:00 +0100
Subject: [PATCH] feat: add preview style

Fixes #2
---
 category.php                   |  2 +-
 components/preview-list.php    | 27 +++++++++++++++++++++++++++
 scss/_typography.scss          |  3 +++
 scss/components/_previews.scss |  1 +
 style.css                      |  6 +++++-
 tag.php                        |  2 +-
 6 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 components/preview-list.php

diff --git a/category.php b/category.php
index 4dfae77..3ade783 100644
--- a/category.php
+++ b/category.php
@@ -4,7 +4,7 @@
     $category = get_category( get_query_var( 'cat' ) );
     $cat_id = $category->cat_ID; ?>
 
-  <?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
+  <?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
 
 </main>
 
diff --git a/components/preview-list.php b/components/preview-list.php
new file mode 100644
index 0000000..306717a
--- /dev/null
+++ b/components/preview-list.php
@@ -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; ?>
diff --git a/scss/_typography.scss b/scss/_typography.scss
index ceabbfb..9978ea6 100644
--- a/scss/_typography.scss
+++ b/scss/_typography.scss
@@ -244,6 +244,9 @@ code {
   margin-bottom: 3rem;
 }
 
+.small-text {
+  font-size: 0.9em;
+}
 
 
 /* 2.6 - Special styling */
diff --git a/scss/components/_previews.scss b/scss/components/_previews.scss
index b583b30..20dc9df 100644
--- a/scss/components/_previews.scss
+++ b/scss/components/_previews.scss
@@ -156,6 +156,7 @@ $preview-height: 8*$lineheight;
     justify-content:space-between;
     padding-left: $lineheight/2;
     padding-right: $lineheight/2;
+    font-size:0.9em;
   }
 }
 
diff --git a/style.css b/style.css
index 83af975..e7b9f9f 100644
--- a/style.css
+++ b/style.css
@@ -497,6 +497,9 @@ code {
   margin: auto;
   margin-bottom: 3rem; }
 
+.small-text {
+  font-size: 0.9em; }
+
 /* 2.6 - Special styling */
 mark {
   border-radius: 0.2em;
@@ -1841,7 +1844,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     display: flex;
     justify-content: space-between;
     padding-left: 0.75rem;
-    padding-right: 0.75rem; }
+    padding-right: 0.75rem;
+    font-size: 0.9em; }
 
 .card-preview.card-info .comment-text {
   position: relative;
diff --git a/tag.php b/tag.php
index 573708c..b2434dc 100644
--- a/tag.php
+++ b/tag.php
@@ -3,7 +3,7 @@
     <?php $tag = get_category( get_query_var( 'tag' ) );
     $tag_id = $tag->ID;?>
 
-    <?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
+    <?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
 </main>
 <!-- Sidebar custom pour contenir la description -->
 <aside class="sidebar">