cover

layout/_partial/main/post_list/post_card.ejs

@@ -1,11 +1,14 @@
 <%
-const obj = {
-  image: post['cover'],
-  title: post['cover-title'],
-  cat: post['cover-cat'],
-  subtitle: post['cover-subtitle'],
-  color: post['cover-text-color']
+const poster = post.poster;
+var obj = {
+  image: post.cover
 };
+if (poster) {
+  obj.headline = poster.headline;
+  obj.topic = poster.topic;
+  obj.caption = poster.caption;
+  obj.color = poster.color;
+}
 function div_default() {
   var el = '';
   el += '<article class="md">';
@@ -97,24 +100,24 @@ function div_photo() {
   var el = '';
   el += '<div class="cover">';
   el += '<img src="' + obj.image + '"/>';
-  if (obj.title || obj.cat || obj.subtitle) {
+  if (obj.headline || obj.topic || obj.caption) {
     el += '<div class="cover-info"';
     if (obj.color) {
       el += 'style="color:' + obj.color + '"';
     }
-    if (obj.cat) {
+    if (obj.topic) {
       el += 'position="top">';
     } else {
       el += 'position="bottom">';
     }
-    if (obj.cat) {
-      el += '<div class="cap">' + obj.cat + '</div>';
+    if (obj.topic) {
+      el += '<div class="cap">' + obj.topic + '</div>';
     }
-    if (obj.title) {
-      el += '<div class="title">' + obj.title + '</div>';
+    if (obj.headline) {
+      el += '<div class="title">' + obj.headline + '</div>';
     }
-    if (obj.subtitle) {
-      el += '<div class="cap">' + obj.subtitle + '</div>';
+    if (obj.caption) {
+      el += '<div class="cap">' + obj.caption + '</div>';
     }
     el += '</div>';
 
@@ -123,7 +126,7 @@ function div_photo() {
   return el;
 }
 function div() {
-  if (obj.image && obj.image.length > 0 && obj.title != undefined) {
+  if (obj.image && obj.image.length > 0 && obj.headline != undefined) {
     return div_photo();
   }
   return div_default();

layout/index.ejs

@@ -13,7 +13,7 @@ if (page.title && page.wiki) {
 function layout_post_card(layout, post, content) {
   var el = '';
   var layout = layout;
-  if (layout == 'post' && post['cover'] != undefined && post['cover-title'] != undefined) {
+  if (layout == 'post' && post.cover != undefined && post.poster != undefined) {
     layout += ' photo';
   }
   el += '<a class="post-card ' + layout + ' ' + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">';

source/css/_layout/list.styl

@@ -1,15 +1,13 @@
 // list
 .post-list
   margin: 1rem
-  .post-title
-    margin-top: 1.5rem
   .post-title:first-child
     margin-top: .5rem
 
 .post-list
   .post-title
     font-weight: 500
-    margin: .75rem 0
+    margin: 1.25rem 0 .75rem 0
     line-height: 1.2
     font-size: $fs-h3
     border-bottom: none
@@ -29,6 +27,7 @@
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.02)
   trans1 box-shadow
   overflow: hidden
+  z-index: 0
   background: var(--card)
   position: relative
   .excerpt
@@ -53,8 +52,12 @@
       img
         object-fit: contain
         height: 1.5em
+
 .post-list .post-card:hover
   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
+  img 
+    transform: scale(1.02)
+    filter: brightness(80%)
 
 
 // common article

source/css/_plugins/lazyload.styl

@@ -1,5 +1,5 @@
 trans-cover($p, $t = 0.28s)
-  trans2pro: transform 1s $p $t
+  trans2pro: transform 0.5s $p $t
 trans-site($p)
   trans2: box-shadow transform $p
 trans-user($p)