From 3aabeff06571990e418d97baff2ec39e6207110b Mon Sep 17 00:00:00 2001
From: xaoxuu <me@xaoxuu.com>
Date: Sat, 3 Jul 2021 22:33:52 +0800
Subject: [PATCH] sidebar

---
 layout/_partial/sidebar/index.ejs             |  2 +-
 source/css/_common/highlight.styl             |  2 +-
 source/css/_layout/sidebar/sidebar.styl       |  9 +---
 source/css/_layout/sidebar/toc_blog.styl      |  3 ++
 .../sidebar/{toc.styl => toc_common.styl}     | 38 ++--------------
 source/css/_layout/sidebar/toc_wiki.styl      | 45 +++++++++++++++++++
 source/css/_layout/tag-plugins/link.styl      | 10 +++--
 7 files changed, 62 insertions(+), 47 deletions(-)
 create mode 100644 source/css/_layout/sidebar/toc_blog.styl
 rename source/css/_layout/sidebar/{toc.styl => toc_common.styl} (53%)
 create mode 100644 source/css/_layout/sidebar/toc_wiki.styl

diff --git a/layout/_partial/sidebar/index.ejs b/layout/_partial/sidebar/index.ejs
index 921614a..7e4f482 100755
--- a/layout/_partial/sidebar/index.ejs
+++ b/layout/_partial/sidebar/index.ejs
@@ -11,7 +11,7 @@ if (page.sidebar == undefined) {
 }
 function layoutFooterDiv() {
   if (theme.footer.social && theme.footer.social.length > 0) {
-    var el = '<footer class="footer"><div class="social-wrap dis-select">';
+    var el = '<footer class="footer dis-select"><div class="social-wrap">';
     theme.footer.social.forEach(item => {
       if (item.icon && (item.url || item.onclick)) {
         el += '<a class="social"';
diff --git a/source/css/_common/highlight.styl b/source/css/_common/highlight.styl
index fc82f3f..ae9030b 100644
--- a/source/css/_common/highlight.styl
+++ b/source/css/_common/highlight.styl
@@ -48,9 +48,9 @@ article.md .highlight
     border-width: 0
     margin-left: 0
     // position: sticky // 如果希望行标固定请打开此行；但是如果想在较窄屏幕上拥有较好的阅读体验，建议让行标跟随滚动。
+    // background: var(--block) // 如果希望行标固定请打开此行；但是如果想在较窄屏幕上拥有较好的阅读体验，建议让行标跟随滚动。
     left: 0
     z-index: 1
-    background: var(--block)
     pre .line
       color: var(--text-p4)
   .code
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index f71a294..91ff9fd 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -74,9 +74,8 @@
   a.wiki-home
     margin-bottom: .75rem
     color: var(--text-p2)
-    img
-      height: .9em
-      margin-right: .5rem
+    svg
+      margin-right: 2px
     &:hover
       color: $color-hover
       filter: unset !important
@@ -192,7 +191,3 @@ nav.menu
 
 .l_left[layout='wiki'] .widgets
   margin-top: 0
-  .widget-wrap#toc
-    margin-top: 0
-    .widget-body
-      margin-top: 0
diff --git a/source/css/_layout/sidebar/toc_blog.styl b/source/css/_layout/sidebar/toc_blog.styl
new file mode 100644
index 0000000..12cb730
--- /dev/null
+++ b/source/css/_layout/sidebar/toc_blog.styl
@@ -0,0 +1,3 @@
+.l_left:not([layout='wiki']) .widget-wrap#toc
+  .widget-body .doc-tree.active>.toc
+    border-left: 2px solid var(--block-hover)
diff --git a/source/css/_layout/sidebar/toc.styl b/source/css/_layout/sidebar/toc_common.styl
similarity index 53%
rename from source/css/_layout/sidebar/toc.styl
rename to source/css/_layout/sidebar/toc_common.styl
index 11e8a56..48d7fb0 100644
--- a/source/css/_layout/sidebar/toc.styl
+++ b/source/css/_layout/sidebar/toc_common.styl
@@ -1,6 +1,5 @@
 // toc padding
 #toc .widget-body
-  border-left: 2px solid var(--block-hover)
   line-height: 1.2
   ul ul, ul ol
     padding-left: 0
@@ -11,27 +10,18 @@
     margin: 0
     padding-left: 0.25rem
     .toc-item .toc-link
-      padding: 0.5rem 0 0.5rem 1rem
+      padding: 0.5rem
       font-weight: 500
       font-size: $fs-13
       color: var(--text-p2)
     .toc-child .toc-item .toc-link
-      padding: 0.25rem 0 0.25rem 1.8rem
+      padding: 0.25rem 0.5rem 0.25rem 1.3rem
       font-weight: 400
       color: var(--text-p2)
     .toc-child .toc-child .toc-item .toc-link
-      padding-left: 2.6rem
+      padding-left: 2.1rem
       font-size: $fs-12
       color: var(--text-p3)
-    .toc-child .toc-child .toc-child .toc-item .toc-link
-      padding-left: 3.4rem
-  .toc:only-child
-    .toc-item .toc-link
-      padding-left: 0.5rem
-    .toc-child .toc-item .toc-link
-      padding-left: 1.3rem
-    .toc-child .toc-child .toc-item .toc-link
-      padding-left: 2.1rem
     .toc-child .toc-child .toc-child .toc-item .toc-link
       padding-left: 2.9rem
 
@@ -51,28 +41,8 @@
   display: block
   line-height: 1.2
   border-radius: 4px
+  position: relative
   &:hover
     background: var(--block-hover)
   &.active
     color: var(--theme-highlight) !important
-
-#toc .doc-tree
-  a.doc-tree-link
-    color: var(--text-p3)
-    padding: 0.5rem
-    display: block
-    border-top-right-radius: 4px
-    border-bottom-right-radius: 4px
-    font-size: $fs-12
-    font-weight: 500
-    position sticky
-    top: 0
-    &.active
-      color: var(--text-p2)
-      font-size: $fs-14
-    &:hover
-      background: var(--block-hover)
-  &.active
-    a.doc-tree-link
-      background: var(--block-hover)
-      margin: 2px 0
diff --git a/source/css/_layout/sidebar/toc_wiki.styl b/source/css/_layout/sidebar/toc_wiki.styl
new file mode 100644
index 0000000..e4a2d37
--- /dev/null
+++ b/source/css/_layout/sidebar/toc_wiki.styl
@@ -0,0 +1,45 @@
+.l_left[layout='wiki'] .widget-wrap#toc
+  margin-top: 0
+  .widget-body
+    margin-top: 0
+
+// 未激活的分页链接
+.l_left[layout='wiki'] .widget-wrap#toc .doc-tree
+  border-radius: 4px
+  margin: 4px 0
+  background: var(--block)
+  overflow: hidden
+  border: 1px solid var(--block-border)
+  a.doc-tree-link
+    color: var(--text-p2)
+    padding: 0.5rem
+    display: block
+    font-size: $fs-12
+    font-weight: 500
+    position: relative
+    &:after
+      position: absolute
+      right: .5rem
+    &.active
+      color: var(--text-p1)
+    &:hover
+      background: var(--block-hover)
+      &:after
+        content: '+'
+
+
+// 当前分页链接
+.l_left[layout='wiki'] .widget-wrap#toc .doc-tree.active
+  a.doc-tree-link
+    background: var(--block)
+    border-bottom: 1px solid var(--block-border)
+    &:hover
+      background: var(--block-hover)
+      &:after
+        content: ''
+
+  >.toc
+    padding: 4px
+    background: var(--card)
+    a.toc-link:hover
+      background: var(--block)
diff --git a/source/css/_layout/tag-plugins/link.styl b/source/css/_layout/tag-plugins/link.styl
index db0225a..0bc03b2 100644
--- a/source/css/_layout/tag-plugins/link.styl
+++ b/source/css/_layout/tag-plugins/link.styl
@@ -1,12 +1,13 @@
 .md .tag-plugin.link
-  margin-top: 1em
-  margin-bottom: 1em
+  // margin-top: 1em
+  // margin-bottom: 1em
   max-width: 360px
+  margin: 1em auto
   @media screen and (max-width: $device-mobile-375)
     width: 100%
 
 .md .link-card
-  margin-right: 1em
+  // margin-right: 1em
   background: var(--card)
   display: inline-flex
   justify-content: space-between
@@ -18,10 +19,11 @@
   @media screen and (max-width: $device-mobile-375)
     width: 100%
   box-shadow: $boxshadow-card
-  trans1 box-shadow
   border-radius: $border-widget
+  trans2: box-shadow transform
   &:hover
     box-shadow: $boxshadow-card-float
+    transform: translateY(-1px)
 
 
 .md .link-card