index & scss/blog: support article listing

components/posts-list.php

@@ -0,0 +1,25 @@
+<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
+  <article class="list-article" id="post-<?php the_ID(); ?>">
+    <aside class="list-article-thumbnail">
+      <?php the_post_thumbnail( ); ?>
+    </aside>
+    
+    <div class="list-article-main">
+      <h2 class="list-article-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>""><?php the_title(); ?></a></h2>
+      <div class="list-article-metadata">
+        <p class="categories">
+          <?php $category = get_the_category();
+            echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='badge badge-blue badge-category'>" . $category[0]->cat_name . "</a>"; ?>
+        </p>
+        <p class="author-time"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
+      </div>
+      <div class="list-article-content"><?php the_excerpt(); ?></div>
+    </div>
+  </article>
+
+  <?php endwhile; ?>
+
+  <div class="navigation">
+    <?php the_posts_pagination(); ?>
+  </div>
+  <?php endif; ?>

index.php

@@ -1,6 +1,7 @@
 <?php get_header(); ?>
 <main class="col-md-9">
-
+  <h1 class="page-title"><i class="fa fa-fw fa-clock-o"></i> Articles récents</h1>
+	<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
 </main>
 <?php get_sidebar(); ?>
 <?php get_footer();  ?>

scss/_blog.scss

@@ -153,3 +153,39 @@
   margin-bottom:0.4em;
   display:block;
 }
+
+/* 2.1.1 - Article list */
+
+.list-article {
+  display: flex;
+  flex-direction: row;
+  &-thumbnail {
+    display: block;
+    padding-top: 0.35em;
+    max-width: 200px;
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+  
+  &-main {
+    padding-left:1em;
+  }
+  &-title {
+    font-family: Teko;
+    font-weight: 600;
+    margin-bottom: 0em;
+    a {
+      color: #444;
+    }
+  }
+  &-metadata {
+    display:flex;
+    justify-content: space-between;
+  }
+  
+  &-content {
+    font-style: italic;
+  }
+}

style.css

@@ -1307,3 +1307,28 @@ a.list-group-item:hover {
 .card-preview time {
   margin-bottom: 0.4em;
   display: block; }
+
+/* 2.1.1 - Article list */
+.list-article {
+  display: flex;
+  flex-direction: row; }
+  .list-article-thumbnail {
+    display: block;
+    padding-top: 0.35em;
+    max-width: 200px; }
+    .list-article-thumbnail img {
+      max-width: 100%;
+      height: auto; }
+  .list-article-main {
+    padding-left: 1em; }
+  .list-article-title {
+    font-family: Teko;
+    font-weight: 600;
+    margin-bottom: 0em; }
+    .list-article-title a {
+      color: #444; }
+  .list-article-metadata {
+    display: flex;
+    justify-content: space-between; }
+  .list-article-content {
+    font-style: italic; }