diff options
| -rw-r--r-- | layout/index.ejs | 198 | ||||
| -rw-r--r-- | layout/layout.ejs | 8 | ||||
| -rw-r--r-- | layout/post.ejs | 114 | ||||
| -rw-r--r-- | source/css/style.css | 12 |
4 files changed, 168 insertions, 164 deletions
diff --git a/layout/index.ejs b/layout/index.ejs index 7b91e49..cfb032a 100644 --- a/layout/index.ejs +++ b/layout/index.ejs @@ -1,117 +1,111 @@ -<section class="hero"> - <div class="hero-body"> - <div class="container"> - <% page.posts.each(function (post) { %> - <div class="columns post-entry"> - <div class="column is-8 is-offset-2"> - <div class="card"> - <!-- 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> +<% page.posts.each(function (post) { %> + <div class="columns "> + <div class="column is-8 is-offset-2"> + <div class="card post-entry"> + <!-- 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> + <% } %> - <div class="card-content"> - - <!-- Post title --> - <p class="title is-4"> - <%= post.title %> - </p> - - <!-- Post meta info --> - <div class="level"> - <div class="level-left"> - <div class="level-item"> + <div class="card-content"> + + <!-- Post title --> + <p class="title is-4"> + <%= post.title %> + </p> - <!-- 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> + <!-- 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> - </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> + <% } else { %> + <div class="tags"> + <span class="tag is-danger"> + <%- date(post.date, theme.timeformat) %> + </span> + </div> + <% } %> </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") %> - <% } else { %> - <%- __("read") %> - <% } %> - </a> + + <!-- 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> - <% }); %> - <!-- Page navigation --> - <% if (page.prev || page.next) { %> - <div class="columns pagination-bar"> - <div class="column is-8 is-offset-2"> - <nav class="pagination is-centered" role="navigation" aria-label="pagination"> - <% if (page.prev) { %> - <a class="button is-light" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a> - <% } else { %> - <a class="button is-disabled is-light" disabled><%- __("prev") %></a> - <% } %> - <% if (page.next) { %> - <a class="button is-light" href="<%- url_for(page.next_link) %>"><%- __("next") %></a> - <% } else { %> - <a class="button is-disabled is-light" disabled><%- __("next") %></a> - <% } %> - </nav> - </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") %> + <% } else { %> + <%- __("read") %> + <% } %> + </a> </div> - <% } %> + + </div> + </div> + </div> +<% }); %> + +<!-- Page navigation --> +<% if (page.prev || page.next) { %> + <div class="columns pagination-bar"> + <div class="column is-8 is-offset-2"> + <nav class="pagination is-centered" role="navigation" aria-label="pagination"> + <% if (page.prev) { %> + <a class="button is-light" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a> + <% } else { %> + <a class="button is-disabled is-light" disabled><%- __("prev") %></a> + <% } %> + <% if (page.next) { %> + <a class="button is-light" href="<%- url_for(page.next_link) %>"><%- __("next") %></a> + <% } else { %> + <a class="button is-disabled is-light" disabled><%- __("next") %></a> + <% } %> + </nav> </div> </div> -</section> +<% } %> diff --git a/layout/layout.ejs b/layout/layout.ejs index 96d7f6a..d204ff4 100644 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -4,7 +4,13 @@ <body> <%- partial('_partial/header') %> <div class="wrapper"> - <%- body %> + <section class="hero"> + <div class="hero-body"> + <div class="container"> + <%- body %> + </div> + </div> + </section> </div> <%- partial('_partial/footer') %> </body> diff --git a/layout/post.ejs b/layout/post.ejs index 6b8ba67..9c04e82 100644 --- a/layout/post.ejs +++ b/layout/post.ejs @@ -1,67 +1,61 @@ -<section class="hero"> - <div class="hero-body"> - <div class="container"> - <div class="columns"> - <div class="column is-8 is-offset-2"> - <div class="card"> - <% if (page.thumbnail) { %> - <div class="card-iamge"> - <figure class="image is-16by9"> - <% if (theme.lazyload === true) { %> - <img class="lazy" data-src="<%= page.thumbnail %>" /> - <% } else { %> - <img src="<%= page.thumbnail %>" /> - <% } %> - </figure> - </div> +<div class="columns"> + <div class="column is-8 is-offset-2"> + <div class="card post-card"> + <% if (page.thumbnail) { %> + <div class="card-iamge"> + <figure class="image is-16by9"> + <% if (theme.lazyload === true) { %> + <img class="lazy" data-src="<%= page.thumbnail %>" /> + <% } else { %> + <img src="<%= page.thumbnail %>" /> <% } %> - <div class="card-content"> - <section class="section"> - <h2 class="title has-text-centered"> - <%= page.title %> - </h2> - <% if (page.podcast) { %> - <div class="post-podcast-player"></div> - <script> - window.addEventListener("load", () => { - const player = new Shikwasa({ - container: () => document.querySelector('.post-podcast-player'), - audio: { - title: "<%= page.title %>", - artist: "<%= page.podcast.author %>", - cover: "<%= page.podcast.cover %>", - src: "<%= page.podcast.media %>" - }, - fixed: { - type: "auto", - position: "bottom" - }, - themeColor: "red" - }); - }, false); - </script> - <% } %> - <section class="content post-content is-size-6"> - <%- page.content %> - </section> - <div class="level"> - <div class="level-left"> - <div class="level-item"> - <% if (page.tags) { %> - <div class="tags"> - <% (page.tags).forEach(function(item) { %> - <span class="tag"># <%= item.name %></span> - <% }); %> - </div> - <% } %> - </div> + </figure> + </div> + <% } %> + <div class="card-content"> + <section class="section"> + <h2 class="title has-text-centered"> + <%= page.title %> + </h2> + <% if (page.podcast) { %> + <div class="post-podcast-player"></div> + <script> + window.addEventListener("load", () => { + const player = new Shikwasa({ + container: () => document.querySelector('.post-podcast-player'), + audio: { + title: "<%= page.title %>", + artist: "<%= page.podcast.author %>", + cover: "<%= page.podcast.cover %>", + src: "<%= page.podcast.media %>" + }, + fixed: { + type: "auto", + position: "bottom" + }, + themeColor: "red" + }); + }, false); + </script> + <% } %> + <section class="content post-content is-size-6"> + <%- page.content %> + </section> + <div class="level"> + <div class="level-left"> + <div class="level-item"> + <% if (page.tags) { %> + <div class="tags"> + <% (page.tags).forEach(function(item) { %> + <span class="tag"># <%= item.name %></span> + <% }); %> </div> - </div> - </section> + <% } %> + </div> </div> </div> - </div> + </section> </div> </div> </div> -</section>
\ No newline at end of file +</div>
\ No newline at end of file diff --git a/source/css/style.css b/source/css/style.css index 5596590..009e27b 100644 --- a/source/css/style.css +++ b/source/css/style.css @@ -22,7 +22,17 @@ pre { } .post-entry { - margin-bottom: 3rem !important; + margin-bottom: 1.5rem !important; + margin-top: 1.5rem !important; + transition: box-shadow 0.1s; +} + +.post-entry:hover { + box-shadow: 0 1em 2em -0.125em rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 2%); +} + +.post-card { + margin-top: 1.5rem !important; } .pagination-bar { |