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] 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 ---