From 7c3c9d35c95c778077ab4601be2365750adb565c Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Fri, 27 Dec 2024 21:50:54 +0800
Subject: [PATCH] =?UTF-8?q?Style:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/_custom.scss                | 63 ++++++++++++++------------
 i18n/en.toml                           |  1 +
 i18n/zh-CN.toml                        |  1 +
 layouts/partials/custom/follow-me.html |  5 +-
 4 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/assets/css/_custom.scss b/assets/css/_custom.scss
index ab24432..5dc5f7b 100644
--- a/assets/css/_custom.scss
+++ b/assets/css/_custom.scss
@@ -45,6 +45,7 @@
 
             &::before {
               content: '#{$i}';
+              font-weight: 700;
             }
           }
         }
@@ -76,7 +77,9 @@
             50% {
               border-color: var(--timeline-circle-color);
               // 显示序号
-              // color: #358C3C;
+              background-color: var(--timeline-circle-color);
+              color: #fff;
+              // color: var(--timeline-circle-color);
             }
             100% {
               border-color: var(--timeline-color);
@@ -205,38 +208,25 @@
   }
 }
 
+.hr-edge-weak {
+  border: 0;
+  padding-top: 1px;
+  background: linear-gradient(to right, transparent, var(--hr-color, #d0d0d5), transparent);
+}
+
 #toc-auto {
   .follow-container {
     display: flex;
     align-items: center;
-    gap: 16px;
-    padding-bottom: 8px;
-    margin-bottom: 8px;
-    border-bottom: 1px solid $global-border-color;
-
-    [data-theme='dark'] & {
-      border-color: $global-border-color-dark;
-    }
+    justify-content: space-between;
+    gap: 10px;
+    padding-inline: 10px;
 
     .author-link {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 8px;
       font-weight: 500;
-      color: $single-link-color;
-
-      [data-theme='dark'] & {
-        color: $single-link-color-dark;
-      }
-
-      &:active,
-      &:hover {
-        color: $single-link-hover-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-hover-color-dark;
-        }
-      }
 
       .author-avatar {
         width: 34px;
@@ -249,14 +239,31 @@
       }
     }
     .follow-btn {
-      border: 1px solid #d1d9e0;
-      background-color: #f6f8fa;
+      border: 1px solid var(--follow-btn-border-color, #d1d9e0);
+      background-color: var(--follow-btn-bg-color, #f6f8fa);
       border-radius: 6px;
       padding: 4px 10px;
+      flex-shrink: 0;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--follow-btn-color, #25292e);
 
       [data-theme='dark'] & {
-        border-color: #3d444d;
-        background-color: #2a313c;
+        --follow-btn-color: #d1d7e0;
+        --follow-btn-border-color: #3d444d;
+        --follow-btn-bg-color: #2a313c;
+      }
+
+      &:active,
+      &:hover {
+        --follow-btn-border-color: #d1d9e0;
+        --follow-btn-bg-color: #eff2f5;
+        transition-duration: .1s;
+
+        [data-theme='dark'] & {
+          --follow-btn-border-color: #3d444d;
+          --follow-btn-bg-color: #2f3742;
+        }
       }
     }
   }
diff --git a/i18n/en.toml b/i18n/en.toml
index b58cb09..8a8e2f5 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -19,3 +19,4 @@ breadcrumbTitle = "Extended Syntax"
 
 [follow]
 other = "Follow"
+title = "Follow me on GitHub!"
diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
index 1f50c7f..6fabc5e 100644
--- a/i18n/zh-CN.toml
+++ b/i18n/zh-CN.toml
@@ -25,3 +25,4 @@ ban = "禁止"
 
 [follow]
 other = "关注"
+title = "关注我的 GitHub！"
\ No newline at end of file
diff --git a/layouts/partials/custom/follow-me.html b/layouts/partials/custom/follow-me.html
index 2b3db6b..2e5c417 100644
--- a/layouts/partials/custom/follow-me.html
+++ b/layouts/partials/custom/follow-me.html
@@ -9,8 +9,9 @@
     <a href="{{ $author.link }}" class="author-link" target="_blank">
       <img src="{{ $author.avatar }}" alt="{{ $author.name }}" class="author-avatar"> {{ $author.name }}
     </a>
-    <a href="https://github.com/{{ $author.name }}" class="follow-btn" target="_blank">
-      <i class="fa-brands fa-github fa-fw" aria-hidden="true"></i> {{ T "follow" }}
+    <a href="https://github.com/{{ $author.name }}" class="follow-btn" target="_blank" title="{{ T "follow.title" }}">
+      <i class="fa-brands fa-github fa-fw fa-beat" aria-hidden="true"></i> {{ T "follow" }}
     </a>
   </div>
+  <hr class="hr-edge-weak">
 {{- end -}}