From fa0155de6f915898066a3d761a3d458fd5e962f7 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Sep 2021 18:00:29 +0800 Subject: [PATCH 1/2] Lighten the light mode color scheme --- _sass/addon/commons.scss | 37 ++++++++++++++++-------------- _sass/addon/module.scss | 9 +++++--- _sass/addon/variables.scss | 2 +- _sass/colors/dark-typography.scss | 16 +++++++------ _sass/colors/light-typography.scss | 19 +++++++-------- _sass/layout/home.scss | 4 +--- _sass/layout/post.scss | 10 ++++++++ 7 files changed, 57 insertions(+), 40 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 44d0ccf..7b7b568 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -650,21 +650,20 @@ $sidebar-display: "sidebar-display"; &:hover { @include no-text-decoration; - color: #fff; + color: var(--sidebar-hover-color) !important; } } #avatar { - &:hover > a { - border-color: #fff; - } - > a { + &:hover { + border-color: white; + } display: block; width: 6rem; height: 6rem; border-radius: 50%; - border: 2px solid #b6b6b6; + border: 2px solid rgba(222, 222, 222, 0.7); overflow: hidden; transform: translateZ(0); // fixed the zoom in Safari -webkit-transition: border-color 0.35s ease-in-out; @@ -690,15 +689,18 @@ $sidebar-display: "sidebar-display"; .site-title { a { + @extend %clickable-transition; + font-weight: 900; font-size: 1.5rem; letter-spacing: 0.5px; + color: rgba(134, 133, 133, 99%); } } .site-subtitle { font-size: 95%; - color: #828282; + color: var(--sidebar-muted-color); line-height: 1.2rem; word-spacing: 1px; margin: 0.5rem 1.5rem 0.5rem 1.5rem; @@ -719,16 +721,16 @@ $sidebar-display: "sidebar-display"; text-align: center; display: table; height: $tab-height; - &:hover { - .nav-link { - color: #f8f9facf; - } - } + &.active { .nav-link { - color: #fcfcfc; + color: var(--sidebar-active-color); } } + + &:not(.active) > a { + @extend %clickable-transition; + } } ul { @@ -803,6 +805,7 @@ $sidebar-display: "sidebar-display"; a { @extend %icon; + @extend %clickable-transition; } #mode-toggle-wrapper { @@ -812,6 +815,7 @@ $sidebar-display: "sidebar-display"; @include sidebar-links; @extend %cursor-pointer; + @extend %clickable-transition; margin: 0; font-size: 1.05rem; @@ -823,7 +827,7 @@ $sidebar-display: "sidebar-display"; } .icon-border { - background-color: #525354; + background-color: var(--sidebar-muted-color); content: ""; width: 3px; height: 3px; @@ -834,7 +838,7 @@ $sidebar-display: "sidebar-display"; a:hover, #mode-toggle-wrapper i:hover { - color: #fff; + color: var(--sidebar-hover-color); } } // .sidebar-bottom @@ -875,7 +879,6 @@ $sidebar-display: "sidebar-display"; transition: top 0.2s ease-in-out; z-index: 50; border-bottom: 1px solid rgba(0, 0, 0, 0.07); - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05); background-color: var(--topbar-wrapper-bg); } @@ -913,7 +916,7 @@ $sidebar-display: "sidebar-display"; display: flex; width: 85%; border-radius: 1rem; - border: 1px solid var(--search-wrapper-bg); + border: 1px solid var(--search-wrapper-border-color); background: var(--search-wrapper-bg); padding: 0 0.5rem; diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index b5b9f8f..9d5d360 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -35,6 +35,10 @@ border-bottom: 1px solid var(--link-underline-color); } +%clickable-transition { + transition: color 0.35s ease-in-out; +} + %no-bottom-border { border-bottom: none; } @@ -61,9 +65,8 @@ text-decoration: none; } -@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) { - color: $color; - transition: color 0.35s ease-in-out; +@mixin sidebar-links { + color: rgba(117, 117, 117, 83%); user-select: none; } diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 26d0fcf..a181c86 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -14,7 +14,7 @@ $tab-count: 5 !default; // backward compatible (version <= 4.0.2) $tab-height: 3.2rem !default; $tab-cursor-height: 1.6rem !default; -$cursor-width: 3px !default; // the cursor width of the selected tab +$cursor-width: 2px !default; // the cursor width of the selected tab /* other framework sizes */ diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 651ecbb..6eb5588 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -30,13 +30,17 @@ --checkbox-checked-color: var(--link-color); /* Sidebar */ - --nav-cursor-color: rgb(183, 182, 182); --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); + --sidebar-muted-color: #6d6c6b; + --sidebar-hover-color: rgb(255 255 255 / 68%); + --sidebar-active-color: rgb(255 255 255 / 68%); + --nav-cursor-color: rgb(183, 182, 182); /* Topbar */ --topbar-text-color: var(--text-color); --topbar-wrapper-bg: rgb(39, 40, 43); --search-wrapper-bg: rgb(34, 34, 39); + --search-wrapper-border-color: rgb(34, 34, 39); --search-icon-color: rgb(100, 102, 105); --input-focus-border-color: rgb(112, 114, 115); @@ -44,11 +48,8 @@ --post-list-text-color: rgb(175, 176, 177); --btn-patinator-text-color: var(--text-color); --btn-paginator-hover-color: rgb(64, 65, 66); - --btn-active-bg: rgba(28, 52, 94, 1); - --btn-active-border-color: rgb(66, 94, 138); - --btn-text-color: var(--text-color); --btn-paginator-border-color: var(--btn-border-color); - --btn-paginator-shadow: var(--main-wrapper-bg); + --btn-text-color: var(--text-color); --pin-bg: rgb(34 35 37); --pin-color: inherit; @@ -98,12 +99,13 @@ nav[data-toggle=toc] .nav-link.active, nav[data-toggle=toc] .nav-link.active:focus, nav[data-toggle=toc] .nav-link.active:hover, - nav[data-toggle=toc] .nav > li > a:focus, - nav[data-toggle=toc] .nav > li > a:hover { + nav[data-toggle=toc] .nav>li>a:focus, + nav[data-toggle=toc] .nav>li>a:hover { color: var(--toc-highlight) !important; border-left-color: var(--toc-highlight) !important; } + /* categories */ .categories.card, .list-group-item { diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 7234de5..648de07 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -28,13 +28,17 @@ --checkbox-checked-color: #07a8f7; /* Sidebar */ - --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%); - --nav-cursor-color: #fcfcfc; + --sidebar-bg: #eeeeee; + --sidebar-muted-color: #a2a19f; + --sidebar-hover-color: #696868; + --sidebar-active-color: #455a64; + --nav-cursor-color: #455a64; /* Topbar */ --topbar-text-color: rgb(78, 78, 78); --topbar-wrapper-bg: white; - --search-wrapper-bg: #f5f5f5; + --search-wrapper-bg: rgb(245 245 245 / 50%); + --search-wrapper-border-color: rgb(245 245 245); --search-tag-bg: #f8f9fa; --search-icon-color: #c2c6cc; --input-focus-border-color: var(--btn-border-color); @@ -42,12 +46,9 @@ /* Home page */ --post-list-text-color: dimgray; --btn-patinator-text-color: #555555; - --btn-paginator-hover-color: #e9ecef; - --btn-active-bg: #2a408e; - --btn-active-border-color: #007bff; - --btn-text-color: #f8f8f8; - --btn-paginator-border-color: #f1f1f1; - --btn-paginator-shadow: #4b92d2; + --btn-paginator-hover-color: var(--sidebar-bg); + --btn-paginator-border-color: var(--sidebar-bg); + --btn-text-color: #676666; --pin-bg: #f5f5f5; --pin-color: #999fa4; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 28bf7c7..7a5b24f 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -28,9 +28,7 @@ } &.active { .page-link { - background-color: var(--btn-active-bg); - border-color: var(--btn-active-border-color); - box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important; + background-color: var(--btn-paginator-hover-color); color: var(--btn-text-color); } } diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 88ff230..bf34cb0 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -143,12 +143,22 @@ line-height: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; + font-size: 0.8rem; &.nav-link:not(.active) { color: inherit; } } +nav[data-toggle=toc] { + .nav { + .nav > li > a.active { + font-weight: 600 !important; + } + } +} + + /* --- Related Posts --- */ #related-posts { From 395b24736a9bbe75bbe8107751231b393e52bf34 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Sep 2021 22:37:28 +0800 Subject: [PATCH 2/2] Improve the layout of sidebar icons --- _data/contact.yml | 2 +- _includes/sidebar.html | 2 +- _sass/addon/commons.scss | 78 ++++++++++++------------------ _sass/addon/module.scss | 11 +---- _sass/addon/variables.scss | 2 +- _sass/colors/dark-typography.scss | 4 +- _sass/colors/light-typography.scss | 6 +-- _tabs/about.md | 2 +- _tabs/tags.md | 2 +- 9 files changed, 43 insertions(+), 66 deletions(-) diff --git a/_data/contact.yml b/_data/contact.yml index 1cd8496..05da2f2 100644 --- a/_data/contact.yml +++ b/_data/contact.yml @@ -2,7 +2,7 @@ - type: github - icon: 'fab fa-github-alt' + icon: 'fab fa-github' - type: twitter icon: 'fab fa-twitter' diff --git a/_includes/sidebar.html b/_includes/sidebar.html index c3a116a..4ab9f12 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -49,7 +49,7 @@ -
+
{% for entry in site.data.contact %} {% capture url %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 7b7b568..1bc8a0b 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -7,16 +7,9 @@ @if $dark-mode { @include dark-scheme; - .mode-toggle { - transform: rotateY(180deg); - } - } @else { @include light-scheme; - .mode-toggle { - transform: none; - } } } @@ -645,12 +638,12 @@ $sidebar-display: "sidebar-display"; scrollbar-width: none; /* Firefox */ a { - @include sidebar-links; + @extend %sidebar-links; &:hover { @include no-text-decoration; - color: var(--sidebar-hover-color) !important; + color: var(--sidebar-active-color) !important; } } @@ -808,20 +801,18 @@ $sidebar-display: "sidebar-display"; @extend %clickable-transition; } + i { + line-height: 1.75rem; // default line-height in body + vertical-align: middle; + } + #mode-toggle-wrapper { @extend %icon; i { - @include sidebar-links; - + @extend %sidebar-links; @extend %cursor-pointer; @extend %clickable-transition; - - margin: 0; - font-size: 1.05rem; - text-align: center; - position: relative; - bottom: 1px; } } @@ -832,13 +823,10 @@ $sidebar-display: "sidebar-display"; width: 3px; height: 3px; border-radius: 50%; - position: relative; - top: 12px; } - a:hover, - #mode-toggle-wrapper i:hover { - color: var(--sidebar-hover-color); + #mode-toggle-wrapper:hover > i { + color: var(--sidebar-active-color); } } // .sidebar-bottom @@ -1602,19 +1590,10 @@ $sidebar-display: "sidebar-display"; .nav-link { > span { - letter-spacing: 3px; + letter-spacing: 2px; } > i { - @include icon-round(1.65rem); - - line-height: 1.5rem; - font-size: 0.6rem; - padding-top: 1px; - padding-left: 1px; - position: relative; - bottom: 1px; - &.unloaded { display: inline-block !important; } @@ -1628,35 +1607,40 @@ $sidebar-display: "sidebar-display"; padding-left: 3.5rem; width: 100%; + $icon-block-size: 2rem; + &.justify-content-center { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } - a { - font-size: 1rem; - width: 3rem; + > span, + > a { + @include ml-mr(0.15rem); + + height: $icon-block-size; + margin-bottom: 0.5rem; // wrap line } i { - @include icon-round(2rem); + background-color: var(--sidebar-btn-bg); + font-size: 1rem; + width: $icon-block-size; + height: $icon-block-size; + border-radius: 50%; + position: relative; - padding-top: 0.44rem; - margin-top: .7rem; // multi line space - bottom: 0; - } - - #mode-toggle-wrapper { - width: 3rem; - - i { - top: 11px; + &::before { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } } .icon-border { - top: 26px; + top: 0.9rem; } } // .sidebar-bottom diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 9d5d360..15e8ea9 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -65,18 +65,11 @@ text-decoration: none; } -@mixin sidebar-links { - color: rgba(117, 117, 117, 83%); +%sidebar-links { + color: rgba(117, 117, 117, 0.9); user-select: none; } -@mixin icon-round($diameter) { - border: 1px solid; - border-radius: 50%; - width: $diameter; - height: $diameter; -} - @mixin ml-mr($value) { margin-left: $value; margin-right: $value; diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index a181c86..32b5f6c 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -11,7 +11,7 @@ $sidebar-width-large: 350px !default; // screen width: >= 1650px /* tabs of sidebar */ $tab-count: 5 !default; // backward compatible (version <= 4.0.2) -$tab-height: 3.2rem !default; +$tab-height: 3rem !default; $tab-cursor-height: 1.6rem !default; $cursor-width: 2px !default; // the cursor width of the selected tab diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 6eb5588..f5d8459 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -32,9 +32,9 @@ /* Sidebar */ --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); --sidebar-muted-color: #6d6c6b; - --sidebar-hover-color: rgb(255 255 255 / 68%); - --sidebar-active-color: rgb(255 255 255 / 68%); + --sidebar-active-color: rgb(255 255 255 / 80%); --nav-cursor-color: rgb(183, 182, 182); + --sidebar-btn-bg: rgb(117 116 116 / 20%); /* Topbar */ --topbar-text-color: var(--text-color); diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 648de07..7d8cada 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -30,9 +30,9 @@ /* Sidebar */ --sidebar-bg: #eeeeee; --sidebar-muted-color: #a2a19f; - --sidebar-hover-color: #696868; - --sidebar-active-color: #455a64; - --nav-cursor-color: #455a64; + --sidebar-active-color: #424242; + --nav-cursor-color: #757575; + --sidebar-btn-bg: white; /* Topbar */ --topbar-text-color: rgb(78, 78, 78); diff --git a/_tabs/about.md b/_tabs/about.md index a28ea05..b511014 100644 --- a/_tabs/about.md +++ b/_tabs/about.md @@ -1,6 +1,6 @@ --- title: About -icon: fas fa-info +icon: fas fa-info-circle order: 4 --- diff --git a/_tabs/tags.md b/_tabs/tags.md index 53abc94..2108d24 100644 --- a/_tabs/tags.md +++ b/_tabs/tags.md @@ -1,6 +1,6 @@ --- layout: tags title: Tags -icon: fas fa-tags +icon: fas fa-tag order: 2 ---