From 280efabd02dd386f0a680cc3555f1b4d9875fa60 Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Wed, 13 Apr 2022 17:23:43 +0800
Subject: [PATCH] tune link styles, add color to menu, content, footer links

---
 assets/css/common/footer.css      | 14 +++++----
 assets/css/common/header.css      |  9 ++++--
 assets/css/common/post-entry.css  |  2 +-
 assets/css/common/post-single.css | 49 +++++++++++++++++++++++--------
 assets/css/core/theme-vars.css    | 11 +++++++
 layouts/partials/header.html      | 11 ++++---
 6 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/assets/css/common/footer.css b/assets/css/common/footer.css
index b0dc264..cbfee41 100644
--- a/assets/css/common/footer.css
+++ b/assets/css/common/footer.css
@@ -22,12 +22,18 @@
 }
 
 .footer a {
+    font-weight: 500;
     color: inherit;
-    border-bottom: 1px solid var(--secondary);
+    box-shadow: var(--link-underline-shadow);
 }
 
 .footer a:hover {
-    border-bottom: 1px solid var(--primary);
+    color: var(--link-hover-color);
+    box-shadow: var(--link-hover-underline-shadow);
+}
+
+.top-link:hover {
+    color: var(--link-hover-color);
 }
 
 .top-link {
@@ -49,10 +55,6 @@
     filter: drop-shadow(0px 0px 0px var(--theme));
 }
 
-.footer a:hover,
-.top-link:hover {
-    color: var(--primary);
-}
 
 .top-link:focus,
 #theme-toggle:focus {
diff --git a/assets/css/common/header.css b/assets/css/common/header.css
index 4c8de8f..0805c56 100644
--- a/assets/css/common/header.css
+++ b/assets/css/common/header.css
@@ -8,7 +8,7 @@
     line-height: var(--header-height);
 }
 
-.nav a {
+.logo a {
     display: block;
 }
 
@@ -69,11 +69,16 @@ body:not(.dark) #sun {
     font-size: 16px;
     font-weight: 500;
     color: var(--secondary);
+    display: inline-block;
+    line-height: 1.5em;
+}
+#menu a:hover {
+    color: var(--link-hover-color);
 }
 
 #menu .active {
     color: var(--primary);
-    border-bottom: 2px solid currentColor;
+    box-shadow: 0 2px 0 var(--primary);
 }
 
 .lang-switch li,
diff --git a/assets/css/common/post-entry.css b/assets/css/common/post-entry.css
index 885aa2a..8c37127 100644
--- a/assets/css/common/post-entry.css
+++ b/assets/css/common/post-entry.css
@@ -44,7 +44,7 @@
 }
 
 .post-entry:active {
-    transform: scale(0.96);
+    transform: scale(0.97);
 }
 
 .tag-entry .entry-cover {
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 8730e88..cf6b5f5 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -70,7 +70,17 @@
 }
 
 .post-content a {
-    box-shadow: 0 1px 0;
+    font-weight: 500;
+    color: var(--primary);
+    box-shadow: var(--link-underline-shadow);
+}
+.post-content a:hover {
+    color: var(--link-hover-color);
+    box-shadow: var(--link-hover-underline-shadow);
+}
+.post-content a.anchor:hover {
+    color: var(--primary);
+    box-shadow: 0 -2px 0 var(--secondary) inset;
 }
 
 .post-content a code {
@@ -78,6 +88,31 @@
     border-radius: 0;
     box-shadow: 0 -1px 0 var(--primary) inset;
 }
+.post-content a:hover code {
+    box-shadow: 0 -1px 0 var(--link-hover-underline-color) inset, 0 1px 0 var(--link-hover-underline-color);
+}
+
+h1 .anchor,
+h2 .anchor,
+h3 .anchor,
+h4 .anchor,
+h5 .anchor,
+h6 .anchor {
+    box-shadow: none;
+    user-select: none;
+}
+
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+    color: var(--secondary);
+    margin-inline-start: 8px;
+    font-weight: 500;
+    display: inline-flex;
+}
 
 .post-content del {
     text-decoration: none;
@@ -366,18 +401,6 @@
     transform: scale(0.96);
 }
 
-h1:hover .anchor,
-h2:hover .anchor,
-h3:hover .anchor,
-h4:hover .anchor,
-h5:hover .anchor,
-h6:hover .anchor {
-    display: inline-flex;
-    color: var(--secondary);
-    margin-inline-start: 8px;
-    font-weight: 500;
-    user-select: none;
-}
 
 .post-content :not(table) ::-webkit-scrollbar-thumb {
     border: 2px solid var(--hljs-bg);
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
index 955b7e4..33eaebb 100644
--- a/assets/css/core/theme-vars.css
+++ b/assets/css/core/theme-vars.css
@@ -7,6 +7,7 @@
     --header-height: 60px;
     --footer-height: 60px;
     --radius: 8px;
+
     --theme: rgb(255, 255, 255);
     --entry: rgb(255, 255, 255);
     --primary: rgb(30, 30, 30);
@@ -16,6 +17,11 @@
     --hljs-bg: rgb(28, 29, 33);
     --code-bg: rgb(245, 245, 245);
     --border: rgb(238, 238, 238);
+    --link-color: var(--primary);
+    --link-hover-color: #573eaa;
+    --link-underline-shadow: 0 1px 0 var(--link-color);
+    --link-hover-underline-color: #573eaa;
+    --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
 }
 
 .dark {
@@ -28,6 +34,11 @@
     --hljs-bg: rgb(46, 46, 51);
     --code-bg: rgb(55, 56, 62);
     --border: rgb(51, 51, 51);
+    --link-color: var(--primary);
+    --link-hover-color: #876fd6;
+    --link-underline-shadow: 0 1px 0 var(--link-color);
+    --link-hover-underline-color: var(--link-hover-color);
+    --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
 }
 
 .list {
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f172b3b..a80249d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -126,12 +126,11 @@
             <li>
                 <a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
                 {{- if $is_search -}}data-no-instant{{- end -}}
-                {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}>
-                    <span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
-                        {{- .Pre }}
-                        {{- .Name -}}
-                        {{ .Post -}}
-                    </span>
+                {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}
+                {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
+                    {{- .Pre }}
+                    {{- .Name -}}
+                    {{ .Post -}}
                 </a>
             </li>
             {{- end }}