From 82684f203c44b4531b2ff9136fc73b0840f1afdb Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Wed, 31 Jan 2024 13:58:56 +0800
Subject: [PATCH] [opt] style

---
 _config.yml                                   |  2 -
 .../_partial/main/navbar/article_banner.ejs   |  8 ++--
 .../_partial/main/navbar/article_top_area.ejs |  2 +-
 .../_partial/main/navbar/breadcrumb/blog.ejs  |  6 ---
 layout/_partial/main/navbar/dateinfo.ejs      | 15 +++++---
 source/css/_layout/md.styl                    | 38 ++++---------------
 .../css/_layout/partial/article-banner.styl   | 29 ++++++++++++--
 source/css/_layout/partial/bread-nav.styl     | 18 ++++-----
 source/css/_layout/sidebar/sidebar.styl       |  2 +-
 source/css/_layout/tag-plugins/banner.styl    |  2 +-
 source/css/_layout/tag-plugins/tabs.styl      |  2 +-
 11 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/_config.yml b/_config.yml
index 0be5bbd..1bd35b4 100755
--- a/_config.yml
+++ b/_config.yml
@@ -499,8 +499,6 @@ style:
     link: 'hsl(207 90% 54%)' # 超链接颜色
     button: 'hsl(192 98% 55%)' # 按钮颜色
     hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
-  link:
-    underline: true # true / false
   animated_avatar:
     animate: auto # auto, always
     background: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/rainbow64@3x.webp
diff --git a/layout/_partial/main/navbar/article_banner.ejs b/layout/_partial/main/navbar/article_banner.ejs
index 6fa4bff..3a24d0c 100644
--- a/layout/_partial/main/navbar/article_banner.ejs
+++ b/layout/_partial/main/navbar/article_banner.ejs
@@ -32,14 +32,14 @@ function layoutDiv() {
   if (top.trim().length == 0 && bottom.length == 0) {
     return ``
   }
+  var style = ``
   var el = ``
   el += `<div class="article banner top">`
   if (banner_url.length > 0) {
     el += `<img class="bg" src="${banner_url}">`
-  }
-  var style = ``
-  if (page.poster?.color) {
-    style += ' style="--text-banner:' + page.poster?.color + '"'
+    if (page.poster?.color) {
+      style += ' style="--text-banner:' + page.poster?.color + '"'
+    }
   }
   el += `
   <div class="content"${style}>
diff --git a/layout/_partial/main/navbar/article_top_area.ejs b/layout/_partial/main/navbar/article_top_area.ejs
index 5c5d303..58ff1ae 100644
--- a/layout/_partial/main/navbar/article_top_area.ejs
+++ b/layout/_partial/main/navbar/article_top_area.ejs
@@ -9,7 +9,7 @@ function layoutDiv() {
   // 2.left
   el += `<div class="left">`
   // 3.left.top: 面包屑导航
-  el += `<div id="breadcrumb">`
+  el += `<div class="flex-row" id="breadcrumb">`
     // 首页
     el += `<a class="cap breadcrumb" href="${url_for(config.root)}">${__("btn.home")}</a>`
     if (theme.wiki.tree[page.wiki]) {
diff --git a/layout/_partial/main/navbar/breadcrumb/blog.ejs b/layout/_partial/main/navbar/breadcrumb/blog.ejs
index 03d0bd7..9ca8c4e 100644
--- a/layout/_partial/main/navbar/breadcrumb/blog.ejs
+++ b/layout/_partial/main/navbar/breadcrumb/blog.ejs
@@ -28,12 +28,6 @@ function layoutDiv() {
         })
     }
   }
-  const author = theme.authors ? (theme.authors[page.author] || theme.default_author) : null
-  if (author) {
-    el += `<span class="dot"></span>`
-    const link = `<a href="${url_for(author.path)}">${author.name}</a>`
-    el += `<span class="author">${link}</span>`
-  }
   return el
 }
 %>
diff --git a/layout/_partial/main/navbar/dateinfo.ejs b/layout/_partial/main/navbar/dateinfo.ejs
index 59a037c..d7d5bae 100644
--- a/layout/_partial/main/navbar/dateinfo.ejs
+++ b/layout/_partial/main/navbar/dateinfo.ejs
@@ -2,19 +2,24 @@
 function layoutDiv() {
   // 作者
   var el = ''
-  el += `<div id="post-meta">`
+  el += `<div class="flex-row" id="post-meta">`
   if (page.wiki) {
-    el += `<span class="created">${__("meta.updated") + __("symbol.colon")}</span>`
+    el += `<span class="text created">${__("meta.updated") + __("symbol.colon")}`
     el += `<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time>`
     el += `</span>`
   } else {
+    const author = theme.authors ? (theme.authors[page.author] || theme.default_author) : null
+    if (author) {
+      el += `<a class="author" href="${url_for(author.path)}">${author.name}</a>`
+      el += `<span class="sep"></span>`
+    }
     // 发布日期
-    el += `<span class="created">${__("meta.created") + __("symbol.colon")}</span>`
+    el += `<span class="text created">${__("meta.created") + __("symbol.colon")}`
     el += `<time datetime="${date_xml(page.date)}">${date(page.date, config.date_format)}</time>`
     el += `</span>`
     // 更新日期
-    el += `<span class="updated">`
-    el += `<span class="dot"></span>`
+    el += `<span class="sep updated"></span>`
+    el += `<span class="text updated">`
     el += `${__("meta.updated") + __("symbol.colon")}`
     el += `<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time>`
     el += `</span>`
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index 0a43e55..d0b72be 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -116,35 +116,13 @@
 .md-text 
   p:not([class]), li:not([class])
     a:not([class])
-      position: relative
-      padding: 2px 0
-      text-decoration: none
-      line-height: 1.2
-      &:before
-        content: ''
-        position: absolute
-        border-radius: 2px
-        bottom: 0
-        left: 0
-        right: 0
-        height: 1px
-        if hexo-config('style.link.underline') == true
-          opacity: 0.8
-        else
-          opacity: 0
-        background: var(--theme-link)
-        trans1: all
+      padding: 0 2px
+      margin: 0 -2px
+      border-radius: 2px
+      trans1 all
+      text-decoration: underline
       &:hover
-        border-bottom: none
-        color: var(--theme-link)
-        z-index 0
-        &:before
-          height: 100%
-          opacity: 0.2
-          z-index -1
-          bottom: 0
-          left: -2px
-          right: -2px
+        color: $color-hover
       &:has(img)
-        &:before
-          content: none
+        text-decoration: none
+        padding: 0
diff --git a/source/css/_layout/partial/article-banner.styl b/source/css/_layout/partial/article-banner.styl
index 2f6af50..a85c729 100644
--- a/source/css/_layout/partial/article-banner.styl
+++ b/source/css/_layout/partial/article-banner.styl
@@ -1,6 +1,6 @@
 .article.banner
   --text-banner: var(--text-p0)
-  --hover-bg: rgba(black, 0.08)
+  --button-hover-bg: rgba(black, 0.08)
   background: var(--block)
   margin: 0
   height: unset
@@ -8,7 +8,7 @@
 .article.banner
   .bg+.content
     --text-banner: white
-    --hover-bg: rgba(white, 0.2)
+    --button-hover-bg: rgba(white, 0.2)
     background: rgba(black, 0.1)
 
 .article.banner .content
@@ -18,6 +18,29 @@
   .title
     font-size: $fs-h1
     color: var(--text-banner)
+  .bottom
+    padding: 1.5rem 1rem
   h1
     line-height: 1.2
-    margin: 0
\ No newline at end of file
+    margin: 0
+  
+  
+  
+
+// 动画配置
+.article.banner
+  .bg+.content
+    trans1 all
+    --blur-bg: rgba(black, 0.1)
+    --blur-px: 0px
+    --blur-sat: 100%
+    background: var(--blur-bg)
+    @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
+      background: var(--blur-bg)
+      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+  &:hover
+    .bg+.content
+      --blur-bg: rgba(black, 0.2)
+      --blur-px: 20px
+      --blur-sat: 150%
diff --git a/source/css/_layout/partial/bread-nav.styl b/source/css/_layout/partial/bread-nav.styl
index b2ba078..4736650 100644
--- a/source/css/_layout/partial/bread-nav.styl
+++ b/source/css/_layout/partial/bread-nav.styl
@@ -3,7 +3,8 @@
   font-weight: 500
   display: flex
   justify-content: space-between
-  div#breadcrumb
+  color: var(--text-banner)
+  .flex-row
     display: flex
     align-items: baseline
     flex-direction: row
@@ -11,20 +12,19 @@
     color: var(--text-banner)
     padding: 4px
     border-radius: 2px
+    &:hover
+      background: var(--button-hover-bg)
   span 
     color: var(--text-banner)
   span.sep
     opacity 0.5
     margin: 0
-  span.dot:before
-    opacity 0.5
-    margin: 0 8px
-
-  a:hover
-    background: var(--hover-bg)
-  div#post-meta
+  span.text
     padding: 4px
-    color: var(--text-banner)
+
+  div#post-meta
+    span.sep:before
+      content: '|'
     span.updated
       visibility: hidden
   &:hover
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index 3fe4a7e..0e7726e 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -1,5 +1,5 @@
 .l_left
-  margin: 8px
+  margin-right: 8px
   height: 'calc(%s - 16px)' % 100vh
   border-radius: $border-card
   overflow: hidden
diff --git a/source/css/_layout/tag-plugins/banner.styl b/source/css/_layout/tag-plugins/banner.styl
index 89aec96..a2a2a5c 100644
--- a/source/css/_layout/tag-plugins/banner.styl
+++ b/source/css/_layout/tag-plugins/banner.styl
@@ -123,5 +123,5 @@
 @media screen and (max-width: $device-mobile-max)
   .banner.top
     border-radius: 0
-  .md-text.content .tag-plugin.banner:first-child
+  .md-text.content:first-child .tag-plugin.banner:first-child
     margin-top: 1rem
\ No newline at end of file
diff --git a/source/css/_layout/tag-plugins/tabs.styl b/source/css/_layout/tag-plugins/tabs.styl
index c78fef8..4fc2fbf 100644
--- a/source/css/_layout/tag-plugins/tabs.styl
+++ b/source/css/_layout/tag-plugins/tabs.styl
@@ -82,7 +82,7 @@
   .tab-content:has(.grid-box)
     width: 100%
 
-.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content p:not([class])
+.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
   text-indent: 'calc(%s * 2)' % var(--fs-p)
   a
     text-indent: 0
\ No newline at end of file