From 6028eb5c2d82a5dc666c0b46e8f3b945c28a8e46 Mon Sep 17 00:00:00 2001 From: Jimmy Cai 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) {