From 6028eb5c2d82a5dc666c0b46e8f3b945c28a8e46 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Mon, 24 Aug 2020 13:09:20 +0200
Subject: [PATCH] feat(article): improve link style

---
 assets/scss/partials/layout/article.scss | 16 ++++++++--------
 assets/scss/variables.scss               | 11 +++++++++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 021b0e7..4ebcc9d 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -60,13 +60,8 @@
 
         .article-content {
             margin: var(--content-padding) 0;
-            line-height: 1.75;
             color: var(--card-text-color-main);
 
-            @media (max-width: $on-tablet) {
-                font-size: 1.6rem;
-            }
-
             img {
                 max-width: 100%;
                 height: auto;
@@ -198,6 +193,12 @@
 
 .article-content {
     font-family: var(--article-font-family);
+    font-size: 1.7rem;
+    line-height: 1.85;
+
+    @media (max-width: $on-tablet) {
+        font-size: 1.6rem;
+    }
 
     & > p {
         margin: 1.5em 0;
@@ -289,13 +290,12 @@
     }
 
     a.link {
-        box-shadow: 0px -2px 0px var(--accent-color) inset;
+        box-shadow: 0px -2px 0px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
 
         transition: all 0.3s ease;
 
         &:hover {
-            box-shadow: 0px -20px 0px var(--accent-color) inset;
-            color: var(--accent-color-text);
+            box-shadow: 0px -10px 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
         }
     }
 }
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index e8d0cbd..32e3422 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -4,8 +4,7 @@ $fallback-font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
     sans-serif;
 $base-font-family: "Lato", $fallback-font-family;
 
-$article-font-family: -apple-system, BlinkMacSystemFont, "noto-sans", "Segoe UI", "Droid Sans", "Helvetica Neue",
-    "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
+$article-font-family: $base-font-family;
 
 $code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 
@@ -28,6 +27,10 @@ $accent-color: #34495e;
 $accent-color-darker: #2c3e50;
 $accent-color-text: #fff;
 
+$link-background-color: 189, 195, 199;
+$link-background-opacity: 0.5;
+$link-background-opacity-hover: 0.7;
+
 $card-background: #fff;
 $card-background-selected: #eaeaea;
 
@@ -77,6 +80,10 @@ $tag-border-radius: 4px;
     @media (max-width: $on-tablet) {
         --content-padding: 20px;
     }
+
+    --link-background-color: #{$link-background-color};
+    --link-background-opacity: #{$link-background-opacity};
+    --link-background-opacity-hover: #{$link-background-opacity-hover};
 }
 
 @media (prefers-color-scheme: dark) {