Complete index list

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) {