improvement: make blog more like mockups

This commit is contained in:
Kazhnuz 2020-05-19 16:55:05 +02:00
parent 9b13b6544e
commit 48cd967795
4 changed files with 65 additions and 15 deletions

View file

@ -1,6 +1,6 @@
<% if (pagination == 2){ %> <% if (pagination == 2){ %>
<% page.posts.each(function(post){ %> <% page.posts.each(function(post){ %>
<%- partial('article', {post: post, index: true}) %> <%- partial('article-preview', {post: post, index: true}) %>
<% }) %> <% }) %>
<% } else { %> <% } else { %>
<% var last; %> <% var last; %>
@ -17,7 +17,7 @@
</div> </div>
<div class="archives"> <div class="archives">
<% } %> <% } %>
<%- partial('article', {post: post, index: true}) %> <%- partial('article-preview', {post: post, index: true}) %>
<% }) %> <% }) %>
<% if (page.posts.length){ %> <% if (page.posts.length){ %>
</div></section> </div></section>

View file

@ -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>
<% } %>

View file

@ -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"> <div class="article-inner">
<%- partial('post/gallery') %> <%- partial('post/gallery') %>
<% if (post.link || post.title){ %> <% if (post.link || post.title){ %>
<header class="article-header"> <h1 class="page-title"><%= post.title %></h1>
<%- 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"> <div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %> <% if (post.excerpt && index){ %>
<%- post.excerpt %> <%- post.excerpt %>
@ -25,6 +19,21 @@
</div> </div>
</article> </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"> <footer class="article-footer">
<% if (post.comments && config.disqus_shortname){ %> <% if (post.comments && config.disqus_shortname){ %>
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a> <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
@ -32,10 +41,6 @@
<%- partial('post/tag') %> <%- partial('post/tag') %>
</footer> </footer>
<% if (!index){ %>
<%- partial('post/nav') %>
<% } %>
<% if (!index && post.comments && config.disqus_shortname){ %> <% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments"> <section id="comments">
<div id="disqus_thread"> <div id="disqus_thread">

View file

@ -67,7 +67,7 @@ a.article-nav-link-wrap {
} }
} }
.pigimg { .pigimg, .mb {
padding-bottom:1.5rem; padding-bottom:1.5rem;
} }