From 0425b1058feee28eaf07e8d5a40a27b4af050fb6 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 29 Feb 2020 00:16:47 +0800 Subject: [PATCH] Optimize the typography. --- _includes/panel.html | 4 +- assets/css/_addon/module.scss | 17 +++++-- assets/css/_colors/dark-typography.scss | 2 +- assets/css/_colors/light-typography.scss | 2 +- assets/css/category-tag.scss | 2 + assets/css/main.scss | 56 ++++++++++-------------- assets/css/syntax.scss | 8 +++- 7 files changed, 50 insertions(+), 41 deletions(-) diff --git a/_includes/panel.html b/_includes/panel.html index 5a33e03..371ab37 100644 --- a/_includes/panel.html +++ b/_includes/panel.html @@ -23,7 +23,7 @@ {% endfor %} {% if lastmod_list.size > 0 %} -
+

{{- site.data.label.panel.lastmod -}}

@@ -57,7 +57,7 @@ {% if page.layout == 'post' and site.toc and page.toc %}
-

+

{{- site.data.label.panel.toc -}}

diff --git a/assets/css/_addon/module.scss b/assets/css/_addon/module.scss index cc28515..313a990 100644 --- a/assets/css/_addon/module.scss +++ b/assets/css/_addon/module.scss @@ -29,18 +29,27 @@ color: var(--link-color); } +%link-underline { + border-bottom: 1px solid var(--link-underline-color); +} + %no-bottom-border { border-bottom: none; } %section { - line-height: 1.2; - margin-bottom: 1rem; + #post-wrapper & { + line-height: 1.2; + margin-bottom: 1rem; + } } %anchor { - padding-top: 3.5rem; - margin-top: -2.5rem; + #post-wrapper &, + #page & { + padding-top: 3.5rem; + margin-top: -2.5rem; + } } %footer-content { diff --git a/assets/css/_colors/dark-typography.scss b/assets/css/_colors/dark-typography.scss index d974cbd..5c785c8 100644 --- a/assets/css/_colors/dark-typography.scss +++ b/assets/css/_colors/dark-typography.scss @@ -21,7 +21,7 @@ --text-color: rgb(175, 176, 177); --text-muted-color: rgb(107, 116, 124); --link-color: rgb(138, 180, 248); - --link-underline-color: rgb(99, 131, 182); + --link-underline-color: rgb(82, 108, 150); --main-border-color: rgb(44, 45, 45); --button-bg: rgb(39, 40, 33); --blockquote-border-color: rgb(66, 66, 66); diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss index a3f4a97..0930941 100644 --- a/assets/css/_colors/light-typography.scss +++ b/assets/css/_colors/light-typography.scss @@ -26,7 +26,7 @@ --link-color: #2a408e; - --link-underline-color: #c2c6cc; + --link-underline-color: #dee2e6; --text-muted-color: gray; diff --git a/assets/css/category-tag.scss b/assets/css/category-tag.scss index 6c72eb6..9fa01cb 100644 --- a/assets/css/category-tag.scss +++ b/assets/css/category-tag.scss @@ -7,6 +7,7 @@ © 2019 Cotes Chung MIT License */ +@import "_addon/module"; #page-category, #page-tag { ul>li { @@ -25,6 +26,7 @@ } >a { /* post's title */ font-size: 1.1rem; + @extend %no-bottom-border; } >span:last-child { white-space: nowrap; diff --git a/assets/css/main.scss b/assets/css/main.scss index 81e98b4..43a3be9 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -387,6 +387,7 @@ $tab-count: {{ site.data.tabs | size }}; margin: 0 1rem 1rem 0; &::before { content: "#"; + color: var(--text-muted-color); padding-right: .2rem; } } @@ -538,7 +539,7 @@ footer { transition: top 0.2s ease-in-out; margin-right: 1.5rem; margin-top: 3rem; - margin-bottom: 6rem; + margin-bottom: 4rem; color: #6c757d; &:only-child { position: -webkit-sticky; /* Safari */ @@ -550,8 +551,8 @@ footer { >div { padding-left: 1rem; border-left: 1px solid var(--main-border-color); - &:not(:first-child) { - margin-top: 4rem; + &:not(:last-child) { + margin-bottom: 4rem; } } h3 { @@ -648,7 +649,6 @@ h2 { @extend %section; @extend %anchor; font-size: 1.35rem; - font-weight: 400; } h3 { @@ -744,31 +744,17 @@ a { @extend %link-hover; } } - #page .categories & { - @extend %link-color; - @extend %no-bottom-border; - } - #tags & { - @extend %link-color; - } - #page-category & { - @extend %link-color; - @extend %no-bottom-border; - } - #page-tag & { - @extend %link-color; - @extend %no-bottom-border; - } + .categories &, + #page-category &, + #tags &, #archives & { - @extend %link-color; - @extend %no-bottom-border; + &:not(:hover) { + @extend %no-bottom-border; + } } .license-wrapper .license-text &:hover { @extend %link-hover; } - #page .post-content &:hover { - @extend %link-hover; - } } // a @@ -834,8 +820,8 @@ table { font-size: 0.85rem; word-spacing: 1px; a { - color: var(--link-color); - border-bottom: 1px dotted var(--link-underline-color); + @extend %link-color; + @extend %link-underline; &:not(:last-child) { margin-right: 2px; } @@ -847,17 +833,19 @@ table { .post-content { line-height: 1.8; - font-size: 1rem; margin-top: 2rem; overflow-wrap: break-word; word-wrap: break-word; a { @extend %link-color; - border-bottom: 1px dotted var(--link-underline-color); + @extend %link-underline; &:hover { @extend %link-hover; } } + p { + font-size: 1.08rem; + } } .tag:hover { @@ -889,6 +877,10 @@ table { border: 1px solid !important; padding: 0 3px 1px 3px; border-radius: 3px; + color: var(--link-color); + &:focus { + box-shadow: none; + } } /* --- Effects classes --- */ @@ -984,10 +976,6 @@ table { @include ml-mr(1.8rem); } - .post-content { - font-size: 1.08rem; - } - /* table text in small screens */ div>table, p~table { width: 100%; @@ -1287,6 +1275,10 @@ table { } } + .post-content p { + font-size: 1.03rem; + } + footer>div.d-felx { width: 85%; } diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index f88267a..4bf1fd1 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -107,7 +107,13 @@ code { padding: 2px 4px; margin: 0 .3rem; border-radius: 4px; - border: 1px solid var(--code-highlighter-rouge); //var(--highlight-pre-bg, #e9ecef); + border: 1px solid var(--code-highlighter-rouge); + } + @at-root a>&.highlighter-rouge { + padding-bottom: 0; // show link's underlinke + } + @at-root a:hover>&.highlighter-rouge { + border-bottom: none; } }