diff options
| -rw-r--r-- | layout/index.ejs | 187 | ||||
| -rw-r--r-- | 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) { |