From 150cac9bb193afff7339bfb867b81b0c0d3e2aa1 Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Sun, 12 Dec 2021 16:24:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E6=96=87=E7=AB=A0=E5=B0=81=E9=9D=A2+?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=A8=AA=E5=B9=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/_partial/cover/index.ejs               | 12 ++++
 layout/_partial/cover/post_cover.ejs          | 26 +++++++++
 .../{main/article => cover}/wiki_cover.ejs    |  5 +-
 layout/_partial/main/post_list/post_card.ejs  | 34 +++++++++--
 layout/_partial/main/post_list/wiki_card.ejs  |  2 +
 layout/index.ejs                              |  7 ++-
 layout/layout.ejs                             |  2 +-
 layout/post.ejs                               |  3 +
 source/css/_custom.styl                       |  6 +-
 source/css/_layout/list.styl                  | 57 +++++++++----------
 source/css/_layout/md.styl                    | 11 ++--
 source/css/_layout/partial/cover.styl         | 46 +++++++++++----
 12 files changed, 150 insertions(+), 61 deletions(-)
 create mode 100644 layout/_partial/cover/index.ejs
 create mode 100644 layout/_partial/cover/post_cover.ejs
 rename layout/_partial/{main/article => cover}/wiki_cover.ejs (92%)

diff --git a/layout/_partial/cover/index.ejs b/layout/_partial/cover/index.ejs
new file mode 100644
index 0000000..b63c82b
--- /dev/null
+++ b/layout/_partial/cover/index.ejs
@@ -0,0 +1,12 @@
+<%
+function layoutCover() {
+  if (page.layout == 'wiki') {
+    return partial('wiki_cover');
+  }
+  if (page.layout == 'post') {
+    return partial('post_cover');
+  }
+  return '';
+}
+%>
+<%- layoutCover() %>
diff --git a/layout/_partial/cover/post_cover.ejs b/layout/_partial/cover/post_cover.ejs
new file mode 100644
index 0000000..425c214
--- /dev/null
+++ b/layout/_partial/cover/post_cover.ejs
@@ -0,0 +1,26 @@
+<%
+function div() {
+  var el = '';
+  if (page.banner == undefined || page.banner == false) {
+    return el;
+  }
+  el += '<div class="l_cover post' + scrollreveal() + '">';
+  el += '<div class="cover">';
+  if (theme.plugins.lazyload && theme.plugins.lazyload.enable) {
+    el += '<div class="lazy img bg" data-bg="' + page.banner + '"></div>';
+  } else {
+    el += '<div class="lazy img bg" style="background-image:url(&quot;' + page.banner + '&quot;)"></div>';
+  }
+  el += '</div>';
+  if (page.title) {
+    el += '<div class="cover-wrap md">';
+    el += '<h1 class="article-title">';
+    el += page.title;
+    el += '</h1>';
+    el += '</div>';
+  }
+  el += '</div>';
+  return el;
+}
+%>
+<%- div() %>
diff --git a/layout/_partial/main/article/wiki_cover.ejs b/layout/_partial/cover/wiki_cover.ejs
similarity index 92%
rename from layout/_partial/main/article/wiki_cover.ejs
rename to layout/_partial/cover/wiki_cover.ejs
index a4c30bc..cc399f6 100644
--- a/layout/_partial/main/article/wiki_cover.ejs
+++ b/layout/_partial/cover/wiki_cover.ejs
@@ -1,9 +1,6 @@
 <%
 function layoutWikiCover() {
   var el = '';
-  if (page.layout !== 'wiki') {
-    return el;
-  }
   let proj = theme.wiki.projects[page.wiki];
   if (proj == undefined) {
     return el;
@@ -21,7 +18,7 @@ function layoutWikiCover() {
   if (cover === true) {
     cover = ['logo', 'title', 'description'];
   }
-  el += '<div class="l_cover' + scrollreveal() + '">';
+  el += '<div class="l_cover wiki' + scrollreveal() + '">';
   el += '<article class="cover-wrap md">';
 
   if (logo && logo.src && cover.includes('logo')) {
diff --git a/layout/_partial/main/post_list/post_card.ejs b/layout/_partial/main/post_list/post_card.ejs
index 5d32216..416e4fc 100755
--- a/layout/_partial/main/post_list/post_card.ejs
+++ b/layout/_partial/main/post_list/post_card.ejs
@@ -1,7 +1,7 @@
 <%
-function layoutDiv() {
+function div_default() {
   var el = '';
-
+  el += '<article class="md">';
   // 标题
   el += '<h2 class="post-title">';
   el += (post.title || post.seo_title) ? (post.title || post.seo_title) : date(post.date, config.date_format);
@@ -43,12 +43,36 @@ function layoutDiv() {
       }
     }
   }
+  el += '</div>';
   if (post.pin) {
     el += '<span class="pin"><img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/badge/3279dd441df8b.svg"/></span>';
   }
-  el += '<div>';
-
+  el += '</article>';
   return el;
 }
+function div_photo() {
+  var el = '';
+  el += '<div class="cover">';
+  el += '<img src="' + post.cover + '"/>';
+  el += '<div class="meta cap">';
+  el += '<span class="cap" id="post-meta">';
+  el += __("meta.created") + '&nbsp;' + '<time datetime="' + date_xml(post.date) + '">' + date(post.date, config.date_format) + '</time>';
+  el += '</span>';
+  el += '</div>';
+  el += '</div>';
+
+  el += '<article class="md">';
+  el += '<h2 class="post-title">';
+  el += post.title;
+  el += '</h2>';
+  el += '</article>';
+  return el;
+}
+function div() {
+  if (post.cover && post.cover.length > 0) {
+    return div_photo();
+  }
+  return div_default();
+}
 %>
-<%- layoutDiv() %>
+<%- div() %>
diff --git a/layout/_partial/main/post_list/wiki_card.ejs b/layout/_partial/main/post_list/wiki_card.ejs
index 96303af..456f33b 100644
--- a/layout/_partial/main/post_list/wiki_card.ejs
+++ b/layout/_partial/main/post_list/wiki_card.ejs
@@ -1,6 +1,7 @@
 <%
 function layoutDiv() {
   var el = '';
+  el += '<article class="md">';
   if (proj.logo && proj.logo.src) {
     el += '<div class="preview">';
     el += '<img src="' + proj.logo.src + '" alt="logo"';
@@ -20,6 +21,7 @@ function layoutDiv() {
     el += '<p>' + proj.description + '</p>';
   }
   el += '</div>';
+  el += '</article>';
   return el;
 }
 %>
diff --git a/layout/index.ejs b/layout/index.ejs
index 33c6424..3e6373c 100755
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -12,10 +12,13 @@ if (page.title && page.wiki) {
 
 function layout_post_card(layout, post, content) {
   var el = '';
+  var layout = layout;
+  if (layout == 'post' && post.cover != undefined) {
+    layout += ' photo';
+  }
   el += '<a class="post-card ' + layout + ' ' + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">';
-  el += '<article class="md">';
   el += content;
-  el += '</article></a>';
+  el += '</a>';
   return el;
 }
 
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 5e7199c..1e1e36b 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -2,7 +2,7 @@
 <html lang='<%- page.lang %>'>
 <%- partial('_partial/head') %>
 <body>
-  <%- partial('_partial/main/article/wiki_cover') %>
+  <%- partial('_partial/cover/index') %>
   <div class='l_body' id='start'>
     <aside class='l_left' layout='<%- page.layout %>'>
     <%- partial('_partial/sidebar/index') %>
diff --git a/layout/post.ejs b/layout/post.ejs
index 3c8e48e..798bc84 100755
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -6,6 +6,9 @@ if (page.header == undefined) {
   page.header = false;
 }
 function layoutTitle() {
+  if (page.layout == 'post' && page.banner && page.title) {
+    return '';
+  }
   const title = page.h1 || page.title;
   if (title && title.length > 0) {
     return '<h1 class="article-title"><span>' + title + '</span></h1>';
diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index ee9d7d5..982b9a2 100644
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@@ -47,7 +47,7 @@ $fs-14 = .875rem
 $fs-13 = .8125rem
 $fs-12 = .75rem
 
-$fs-h1   = 2rem   // 32px
+$fs-h1   = 1.75rem   // 32px
 $fs-h2   = 1.5rem // 24px
 $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
@@ -63,14 +63,14 @@ $border-image = 6px
 // 可以动态变化的属性
 :root
   --width-left: 256px
-  --width-main: 680px
+  --width-main: 720px
   --gap-l: 16px
   --gap-p: 1.25rem // gap for paragraph
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
     --width-left: 320px
-    --width-main: 740px
+    --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
     --width-main: 860px
diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl
index 345ebec..a9b4223 100644
--- a/source/css/_layout/list.styl
+++ b/source/css/_layout/list.styl
@@ -11,10 +11,12 @@
   trans1 box-shadow
   overflow: hidden
   background: var(--card)
+  position: relative
   .excerpt
     margin: 1rem 0
     >p
       margin: 1rem 0
+      line-height: 1.5
   .meta.cap
     display: flex
     flex-wrap: wrap
@@ -28,7 +30,7 @@
         object-fit: contain
         height: 1.5em
 .post-list .post-card:hover
-  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.08), 0 2px 8px 0px rgba(0, 0, 0, 0.06), 0 4px 16px 0px rgba(0, 0, 0, 0.04)
+  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
 
 
 // common article
@@ -39,38 +41,31 @@
 .post-list .post-card
   .post-cover
     overflow: hidden
-    margin-left: -1rem
-    margin-top: -1rem
-    margin-right: -1rem
+    position: absolute
+    width: 100%
+    border-radius: 0
+    &:not(.lazy)
+      trans1: transform 1s
+
+.post-list .post-card.post.photo
+  .cover
+    position: relative
+    line-height: 0
     img
-      object-fit: cover
       width: 100%
-      border-radius: 0
-      height: 280px
-      @media screen and (max-width: 900px)
-        height: 240px
-      @media screen and (max-width: $device-tablet)
-        height: 280px
-      @media screen and (max-width: $device-mobile)
-        height: 240px
-      @media screen and (max-width: $device-mobile-425)
-        height: 220px
-      @media screen and (max-width: $device-mobile-375)
-        height: 180px
-      &:not(.lazy)
-        trans1: transform 1s
-.post-list .post-card.post.photo .post-cover img
-  height: 400px
-  @media screen and (max-width: 900px)
-    height: 320px
-  @media screen and (max-width: $device-tablet)
-    height: 400px
-  @media screen and (max-width: $device-mobile)
-    height: 320px
-  @media screen and (max-width: $device-mobile-425)
-    height: 280px
-  @media screen and (max-width: $device-mobile-375)
-    height: 240px
+    .meta
+      margin: 0 1rem
+      position: absolute
+      line-height: 1
+      bottom: 1rem
+      width: 'calc(100% - %s * 2)' % 1rem
+      justify-content: flex-end
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
+      .cap
+        color: white
+  h2
+    margin: .25rem 0
+    font-size: $fs-h4
 
 
 // wiki
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index 70598fb..0ed0d86 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -10,16 +10,17 @@ article.md.excerpt
     font-size: $fs-14
     margin: 1em 0
 
+h1.article-title
+  margin-top: .5em
+  margin-bottom: 1em
+  line-height: 1.2
+  color: var(--text-p0)
+
 article.md.content
   position: relative
   margin-bottom: 2rem
   >:first-child
     margin-top: 0
-  h1.article-title
-    margin-top: .5em
-    margin-bottom: 1em
-    line-height: 1.2
-    color: var(--text-p0)
   h1:not(:first-child)
     margin-top: 2em
   h2:first-child
diff --git a/source/css/_layout/partial/cover.styl b/source/css/_layout/partial/cover.styl
index 769441b..3e4dba2 100644
--- a/source/css/_layout/partial/cover.styl
+++ b/source/css/_layout/partial/cover.styl
@@ -5,9 +5,45 @@
   flex-direction: column
   justify-content: center
   align-items: center
+  position: relative
+  &.post
+    height: inherit
+
 
 .l_cover .cover-wrap
   margin-bottom: 0
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .cover-title
+    font-weight: 700
+    font-size: 1.5rem
+    margin: 1rem 0
+    line-height: 1.2
+  .description
+    margin: 1rem 0
+  .start-wrap
+    margin: 2rem 0
+    flex-shrink: 0
+    a.start
+      display: inline-block
+
+.l_cover.post
+  .cover
+    width: 100%
+    height: 35vh
+    z-index: -1
+
+.l_cover.post .cover-wrap
+  z-index: 1
+  .article-title
+    text-align: center
+    padding: 1rem
+    margin: 1em 0
+
+
+.l_cover.wiki .cover-wrap
   max-width: $device-mobile
   .preview
     margin-bottom: 2rem
@@ -18,15 +54,5 @@
       @media screen and (max-width: $device-mobile)
         max-width: 60%
   .cover-title
-    font-weight: 700
-    font-size: 1.5rem
-    margin: 1rem 0
     &:first-child
       font-size: 3rem
-  .description
-    margin: 1rem 0
-  .start-wrap
-    margin: 2rem 0
-    flex-shrink: 0
-    a.start
-      display: inline-block