From 48cd9677952693006b867d17ba97c024c68312ab Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@chlore.net>
Date: Tue, 19 May 2020 16:55:05 +0200
Subject: [PATCH] improvement: make blog more like mockups

---
 .../themes/blog/layout/_partial/archive.ejs   |  4 +-
 .../blog/layout/_partial/article-preview.ejs  | 45 +++++++++++++++++++
 .../themes/blog/layout/_partial/article.ejs   | 29 +++++++-----
 src/scss/_drawing.scss                        |  2 +-
 4 files changed, 65 insertions(+), 15 deletions(-)
 create mode 100644 src/blog/themes/blog/layout/_partial/article-preview.ejs

diff --git a/src/blog/themes/blog/layout/_partial/archive.ejs b/src/blog/themes/blog/layout/_partial/archive.ejs
index f6cd056..24c48de 100644
--- a/src/blog/themes/blog/layout/_partial/archive.ejs
+++ b/src/blog/themes/blog/layout/_partial/archive.ejs
@@ -1,6 +1,6 @@
 <% if (pagination == 2){ %>
   <% page.posts.each(function(post){ %>
-    <%- partial('article', {post: post, index: true}) %>
+    <%- partial('article-preview', {post: post, index: true}) %>
   <% }) %>
 <% } else { %>
   <% var last; %>
@@ -17,7 +17,7 @@
         </div>
         <div class="archives">
     <% } %>
-    <%- partial('article', {post: post, index: true}) %>
+    <%- partial('article-preview', {post: post, index: true}) %>
   <% }) %>
   <% if (page.posts.length){ %>
     </div></section>
diff --git a/src/blog/themes/blog/layout/_partial/article-preview.ejs b/src/blog/themes/blog/layout/_partial/article-preview.ejs
new file mode 100644
index 0000000..0df71c9
--- /dev/null
+++ b/src/blog/themes/blog/layout/_partial/article-preview.ejs
@@ -0,0 +1,45 @@
+<article id="<%= post.layout %>-<%= post.slug %>" class="card card-primary article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
+  <div class="article-inner">
+    <%- partial('post/gallery') %>
+    <% if (post.link || post.title){ %>
+      <header class="article-header">
+        <%- partial('post/title', {class_name: 'article-title'}) %>
+      </header>
+    <% } %>
+    <div class="article-meta">
+      <%- partial('post/category') %>
+      <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
+    </div>
+    <div class="article-entry" itemprop="articleBody">
+      <% if (post.excerpt && index){ %>
+        <%- post.excerpt %>
+        <% if (theme.excerpt_link){ %>
+          <p class="article-more-link">
+            <a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
+          </p>
+        <% } %>
+      <% } else { %>
+        <%- post.content %>
+      <% } %>
+    </div>
+  </div>
+</article>
+
+<footer class="article-footer">
+  <% if (post.comments && config.disqus_shortname){ %>
+    <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
+  <% } %>
+  <%- partial('post/tag') %>
+</footer>
+
+<% if (!index){ %>
+  <%- partial('post/nav') %>
+<% } %>
+
+<% if (!index && post.comments && config.disqus_shortname){ %>
+<section id="comments">
+  <div id="disqus_thread">
+    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+  </div>
+</section>
+<% } %>
diff --git a/src/blog/themes/blog/layout/_partial/article.ejs b/src/blog/themes/blog/layout/_partial/article.ejs
index 0df71c9..6862498 100644
--- a/src/blog/themes/blog/layout/_partial/article.ejs
+++ b/src/blog/themes/blog/layout/_partial/article.ejs
@@ -1,15 +1,9 @@
-<article id="<%= post.layout %>-<%= post.slug %>" class="card card-primary article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
+<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> mb" itemscope itemprop="blogPost">
   <div class="article-inner">
     <%- partial('post/gallery') %>
     <% if (post.link || post.title){ %>
-      <header class="article-header">
-        <%- partial('post/title', {class_name: 'article-title'}) %>
-      </header>
+      <h1 class="page-title"><%= post.title %></h1>
     <% } %>
-    <div class="article-meta">
-      <%- partial('post/category') %>
-      <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
-    </div>
     <div class="article-entry" itemprop="articleBody">
       <% if (post.excerpt && index){ %>
         <%- post.excerpt %>
@@ -25,6 +19,21 @@
   </div>
 </article>
 
+<% if (!index){ %>
+  <%- partial('post/nav') %>
+<% } %>
+
+<section class="card card-noheader">
+  <div class="author-area">
+    <img src="/img/avatar.png" class="author-avatar" alt="avatar">
+    <div class="author-metadata">
+      <div class="author-pseudo">Écrit par <a href="https://kazhnuz.space">Kazhnuz</a></div>
+      <small class="author-date">Le <%= date(post.date, "dddd DD MMMM YYYY, hh:mm:ss") %></small>
+    </div>
+  </div>
+  <%- partial('post/category') %>
+</section>
+
 <footer class="article-footer">
   <% if (post.comments && config.disqus_shortname){ %>
     <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
@@ -32,10 +41,6 @@
   <%- partial('post/tag') %>
 </footer>
 
-<% if (!index){ %>
-  <%- partial('post/nav') %>
-<% } %>
-
 <% if (!index && post.comments && config.disqus_shortname){ %>
 <section id="comments">
   <div id="disqus_thread">
diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss
index df87107..10f9817 100644
--- a/src/scss/_drawing.scss
+++ b/src/scss/_drawing.scss
@@ -67,7 +67,7 @@ a.article-nav-link-wrap {
   }
 }
 
-.pigimg {
+.pigimg, .mb {
   padding-bottom:1.5rem;
 }