From e96092c0b4fffe987d314e17c3894c1cde2a0ed3 Mon Sep 17 00:00:00 2001
From: Doge <guiqiqi187@gmail.com>
Date: Sun, 9 May 2021 14:24:21 +0800
Subject: Complete index list
---
layout/index.ejs | 187 ++++++++++++++++++++++++++++++++-------------------
source/css/style.css | 3 +
2 files changed, 120 insertions(+), 70 deletions(-)
diff --git a/layout/index.ejs b/layout/index.ejs
index 64db0da..78fc04e 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -1,76 +1,123 @@
-<section class="posts">
- <% page.posts.each(function (post) { %>
- <article class="post">
- <!-- Post thumbnail with lazayload support -->
- <% if (post.thumbnail) { %>
- <% if (theme.lazyload === true) { %>
- <div class="post-thumbnail lazy" data-bg="<%= post.thumbnail %>"></div>
- <% } else { %>
- <div class="post-thumbnail" style="background-image: url('<%= post.thumbnail %>');"></div>
- <% } %>
- <% } %>
+<section class="hero">
+ <div class="hero-body">
+ <div class="container">
+ <% page.posts.each(function (post) { %>
+ <div class="columns">
+ <div class="column is-8 is-offset-2">
+ <div class="card">
- <!-- Post title and excerpt -->
- <h1 class="post-title">
- <a class="post-link" href="<%- url_for(post.path) %>">
- <%= post.title %>
- </a>
- </h1>
- <% if (post.excerpt) { %>
- <div class="post-excerpt"><%- post.excerpt %></div>
- <% } else { %>
- <div class="post-content"><%- post.content %></div>
- <% } %>
+ <!-- Post thumbnail with lazayload support -->
+ <% if (post.thumbnail) { %>
+ <div class="card-iamge">
+ <figure class="image is-16by9">
+ <% if (post.thumbnail) { %>
+ <% if (theme.lazyload === true) { %>
+ <img class="lazy" data-src="<%= post.thumbnail %>" />
+ <% } else { %>
+ <img src="<%= post.thumbnail %>" />
+ <% } %>
+ <% } %>
+ </figure>
+ <% } %>
+ <div class="card-content">
- <!-- Post meta -->
- <div class="post-meta">
- <% if (post.podcast && theme.podcast) { %>
- <%
- const duration = post.podcast.duration;
- const hour = Math.floor(duration / 3600);
- const minute = Math.floor((duration / 60) % 60);
- const second = Math.floor(duration % 60);
- const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
- %>
- <div class="post-duration"><%- viewstr %></div>
- <% } %>
- <div class="post-time">
- <%- date(post.date, theme.timeformat) %>
- </div>
- <% if (post.tags) { %>
- <div class="post-tags">
- <% (post.tags).forEach(function(item) { %>
- <span class="post-tag"><%= item.name %></span>
- <% }); %>
- </div>
- <% } %>
- </div>
- </article>
- <% }) %>
+ <!-- Post title -->
+ <p class="title is-4">
+ <%= post.title %>
+ </p>
- <!-- Page navigation -->
- <% if (page.prev || page.next) { %>
- <div class="nav">
- <% if (page.prev) { %>
- <div class="nav-prev">
- <a href="<%- url_for(page.prev_link) %>" class="nav-link">
- <span class="nav-label">
- Prev
- <i class="fa fa-chevron-left"></i>
- </span>
- </a>
- </div>
- <% } %>
- <% if (page.next) { %>
- <div class="nav-next">
- <a href="<%- url_for(page.next_link) %>" class="nav-link">
- <span class="nav-label">
- Next
- <i class="fa fa-chevron-right"></i>
- </span>
- </a>
+ <!-- Post meta info -->
+ <div class="level">
+ <div class="level-left">
+ <div class="level-item">
+
+ <!-- Podcast duration with post date -->
+ <% if (post.podcast && theme.podcast) { %>
+ <div class="tags has-addons">
+ <%
+ const duration = post.podcast.duration;
+ const hour = Math.floor(duration / 3600);
+ const minute = Math.floor((duration / 60) % 60);
+ const second = Math.floor(duration % 60);
+ const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
+ %>
+ <span class="tag is-danger"><%- viewstr %></span>
+ <span class="tag"><%- date(post.date, theme.timeformat) %></span>
+ </div>
+ <% } else { %>
+ <div class="tags">
+ <span class="tag is-danger">
+ <%- date(post.date, theme.timeformat) %>
+ </span>
+ </div>
+ <% } %>
+ </div>
+
+ <!-- Post tags -->
+ <div class="level-item">
+ <% if (post.tags) { %>
+ <div class="tags">
+ <% (post.tags).forEach(function(item) { %>
+ <span class="tag"><%= item.name %></span>
+ <% }); %>
+ </div>
+ <% } %>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- Post content or excerpt -->
+ <section class="content has-text-weight-light is-size-6">
+ <% if (post.excerpt) { %>
+ <p><%- post.excerpt %></p>
+ <% } else { %>
+ <p><%- post.content %></p>
+ <% } %>
+ </section>
+
+ </div>
+ <div class="card-footer">
+ <a href="<%- url_for(post.path) %>" class="card-footer-item has-text-danger has-text-weight-medium is-uppercase">
+ <% if (post.podcast && theme.podcast) { %>
+ Listen Now
+ <% } else { %>
+ Continue Read
+ <% } %>
+ </a>
+ </div>
+ </div>
+ </div>
</div>
- <% } %>
+ <% }); %>
</div>
- <% } %>
+ </div>
+</section>
+
+<!-- Page navigation -->
+<!-- <% if (page.prev || page.next) { %>
+ <div class="nav">
+ <% if (page.prev) { %>
+ <div class="nav-prev">
+ <a href="<%- url_for(page.prev_link) %>" class="nav-link">
+ <span class="nav-label">
+ Prev
+ <i class="fa fa-chevron-left"></i>
+ </span>
+ </a>
+ </div>
+ <% } %>
+ <% if (page.next) { %>
+ <div class="nav-next">
+ <a href="<%- url_for(page.next_link) %>" class="nav-link">
+ <span class="nav-label">
+ Next
+ <i class="fa fa-chevron-right"></i>
+ </span>
+ </a>
+ </div>
+ <% } %>
+ </div>
+<% } %> -->
+
</section>
\ No newline at end of file
diff --git a/source/css/style.css b/source/css/style.css
index 8ce9927..a5c5377 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -6,6 +6,9 @@ pre {
* {
transition: backgourd-color 0.5s;
}
+ .card {
+ box-shadow: none !important;
+ }
}
@media screen and (max-width: 1023px) {
--
cgit v1.2.3