From fa310d319017f1b2dff98d55bfcdfc5ae32f9dc6 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 24 Dec 2020 19:37:33 +0800 Subject: [PATCH] Optimize typography - Set the table width to 100% on small screens - Optimize list style - Optimize image style - Make checkbox color lighter (light mode) - Reduce the space for inline code --- assets/css/_addon/fonts.scss | 7 -- assets/css/_addon/main.scss | 101 +++++++++++++++-------- assets/css/_addon/module.scss | 1 - assets/css/_addon/syntax.scss | 2 +- assets/css/_colors/light-typography.scss | 4 +- assets/css/archives.scss | 12 +-- assets/css/post.scss | 19 +---- 7 files changed, 76 insertions(+), 70 deletions(-) delete mode 100644 assets/css/_addon/fonts.scss diff --git a/assets/css/_addon/fonts.scss b/assets/css/_addon/fonts.scss deleted file mode 100644 index 0b87d81..0000000 --- a/assets/css/_addon/fonts.scss +++ /dev/null @@ -1,7 +0,0 @@ -/* - * The field 'font-display' is added for Google-fonts. - * - * See: - */ - -@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap'); diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss index 6fd57ab..a30722a 100644 --- a/assets/css/_addon/main.scss +++ b/assets/css/_addon/main.scss @@ -6,12 +6,13 @@ * MIT Licensed */ -@import "_addon/fonts"; @import "_addon/module"; @import "_addon/variables"; @import "_colors/light-typography"; @import "_colors/dark-typography"; +@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap'); + @mixin mode-toggle($dark-mode: false) { @if $dark-mode { @@ -362,6 +363,7 @@ $sidebar-display: "sidebar-display"; border-radius: 0; padding: 0.18rem 0.3rem; color: var(--text-color); + font-size: 95%; } #search-input { @@ -677,16 +679,17 @@ sup { } } -.footnotes ol { +.footnotes > ol { + padding-left: 2rem; margin-top: 0.5rem; > li { - padding-top: 0.2rem; - margin-top: -0.2rem; - > p { - padding-left: 0.2em; + + li { + margin-top: 0.3rem; } - &:not(:last-child) { - margin-bottom: -.8rem; + > p { + margin-left: 0.25em; + margin-top: 0; + margin-bottom: 0; } &:target > p { background-color: var(--footnote-target-bg); @@ -771,7 +774,7 @@ div.post-content .table-wrapper { overflow-x: auto; > table { - min-width: 60%; + min-width: 100%; overflow-x: auto; border-spacing: 0; margin-bottom: 1.5rem; @@ -830,16 +833,27 @@ div.post-content .table-wrapper { overflow-wrap: break-word; word-wrap: break-word; + img[data-src] { + margin: 0.5rem 0; + } + + @mixin img-caption { + + em { + display: block; + text-align: center; + font-style: normal; + font-size: 80%; + padding: 0; + color: #6d6c6c; + } + } + @mixin img($caption: false) { + > img[data-src] { - margin: 0.5rem 0; - &:not(.normal):not(.left):not(.right) { - @include align-center; - - @if $caption { - @include img-caption; - } + @if $caption { + @include img-caption; } &.left { @@ -855,17 +869,6 @@ div.post-content .table-wrapper { } } - @mixin img-caption { - + em { - display: block; - text-align: center; - font-style: normal; - font-size: 80%; - padding: 0; - color: #6d6c6c; - } - } - a { &:not(.img-hyperlink) { @extend %link-color; @@ -880,16 +883,18 @@ div.post-content .table-wrapper { } } + > p { + > img[data-src]:not(.normal):not(.left):not(.right) { + @include align-center; + } + } + p { font-size: 1.08rem; @include img(true); - }// p + } ul { - &.task-list, &:not([class]) { - padding-left: 2rem; - } - // attribute 'hide-bullet' was added by liquid .task-list-item[hide-bullet] { list-style-type: none; @@ -912,6 +917,32 @@ div.post-content .table-wrapper { } // ul + > ol, > ul { + padding-left: 2rem; + + li { + + li { + margin-top: 0.3rem; + } + + ol, ul { // sub list + padding-left: 2rem; + margin-top: 0.3rem; + } + } + + } + + > ol { + li { + padding-left: 0.25em; + } + } + + dl > dd { + margin-left: 1rem; + } + } // .post-content .tag:hover { @@ -1178,7 +1209,7 @@ div.post-content .table-wrapper { .footnotes ol > li { padding-top: 3.5rem; - margin-top: -4.3rem; + margin-top: -3.2rem !important; &:first-child { margin-top: -3.5rem; } @@ -1214,6 +1245,10 @@ div.post-content .table-wrapper { min-width: 150px; } + div.post-content .table-wrapper > table { + min-width: 70%; + } + /* button 'back-to-Top' position */ #back-to-top { bottom: 5.5rem; diff --git a/assets/css/_addon/module.scss b/assets/css/_addon/module.scss index eb61859..7292a37 100644 --- a/assets/css/_addon/module.scss +++ b/assets/css/_addon/module.scss @@ -96,7 +96,6 @@ color: $color; font-size: $font-size; font-weight: $font-weight; - font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif; } @mixin panel-label { diff --git a/assets/css/_addon/syntax.scss b/assets/css/_addon/syntax.scss index ec7ae87..bad170d 100644 --- a/assets/css/_addon/syntax.scss +++ b/assets/css/_addon/syntax.scss @@ -56,6 +56,7 @@ div > pre { @extend %code-snippet-radius; color: var(--highlighter-rouge-color); + margin-top: 0.5rem; margin-bottom: 1.2em; /* Override BS Inline-code style */ } @@ -111,7 +112,6 @@ code { &.highlighter-rouge { font-size: $code-font-size; padding: 3px 5px; - margin: 0 0.15rem; border-radius: 4px; background-color: var(--inline-code-bg); } diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss index 611c1fb..f1ec036 100644 --- a/assets/css/_colors/light-typography.scss +++ b/assets/css/_colors/light-typography.scss @@ -25,7 +25,7 @@ --btn-backtotop-color: #686868; --btn-backtotop-border-color: #f1f1f1; --btn-box-shadow: #eaeaea; - --checkbox-color: darkgrey; + --checkbox-color: #c5c5c5; --checkbox-checked-color: #07a8f7; /* Sidebar */ @@ -59,7 +59,7 @@ --btn-share-hover-color: var(--link-color); --card-border-color: #f1f1f1; --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922); - --label-color: #808080; + --label-color: #616161; --relate-post-date: rgba(30, 55, 70, 0.4); --tag-bg: rgba(0, 0, 0, 0.075); --tag-border: #dee2e6; diff --git a/assets/css/archives.scss b/assets/css/archives.scss index db6224a..0cad924 100644 --- a/assets/css/archives.scss +++ b/assets/css/archives.scss @@ -19,10 +19,6 @@ background-color: var(--timeline-color); } -%date-font { - font-family: 'Roboto Condensed', sans-serif; -} - #archives { letter-spacing: 0.03rem; li { @@ -42,7 +38,6 @@ span.lead { font-size: 1.5rem; - @extend %date-font; position: relative; left: 8px; @@ -54,8 +49,7 @@ } } - &::after { - /* Year dot */ + &::after { /* Year dot */ content: ""; display: block; position: relative; @@ -80,8 +74,8 @@ &.month { width: 1.4rem; text-align: center; - @extend %date-font; - ~a::before { + + ~ a::before { /* A dot for Month and Day */ content: ""; display: inline-block; diff --git a/assets/css/post.scss b/assets/css/post.scss index be45ab8..dcc57e4 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -49,21 +49,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; } .post-content { - > ol, > ul, > dl { - padding-left: 2rem; - li + li { - margin-top: 0.3rem; - } - } - li { - > ol, > ul, > dl { // sub list - padding-left: 2rem; - margin-top: 0.3rem; - } - > p { - margin: 1rem 0 0.8rem; - } - } .preview-img { margin-top: 0; margin-bottom: 2.5rem; @@ -182,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; @include label(1.1rem, 600); } .card { - border: 1px solid var(--card-border-color); + border-color: var(--card-border-color); background-color: var(--card-bg); box-shadow: 0 0 5px 0 var(--card-box-shadow); -webkit-transition: all 0.3s ease-in-out; @@ -194,7 +179,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; &:hover { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0); - box-shadow: 0 20px 35px -4px rgba(0, 0, 0, 0.15); + box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15); } }