From 62bcd601fcadc602c81672b1d4b937231396c3c0 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 6 Sep 2023 00:13:10 +0800 Subject: [PATCH] feat(ui): redesign the pagination button on home page --- _includes/post-paginator.html | 162 +++++++++++++++-------------- _sass/addon/commons.scss | 2 +- _sass/colors/typography-dark.scss | 10 +- _sass/colors/typography-light.scss | 2 - _sass/layout/home.scss | 43 +++----- 5 files changed, 103 insertions(+), 116 deletions(-) diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html index 668b49f..c74e978 100644 --- a/_includes/post-paginator.html +++ b/_includes/post-paginator.html @@ -1,89 +1,91 @@ - + diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 2be59c7..2a67dd1 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -604,7 +604,7 @@ i { } .btn-box-shadow { - box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important; + box-shadow: var(--card-shadow); } /* overwrite bootstrap muted */ diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss index ff55628..f43f17c 100644 --- a/_sass/colors/typography-dark.scss +++ b/_sass/colors/typography-dark.scss @@ -17,10 +17,10 @@ --blockquote-text-color: #868686; --link-color: rgb(138, 180, 248); --link-underline-color: rgb(82, 108, 150); - --button-bg: rgb(39, 40, 43); - --btn-border-color: rgb(63, 65, 68); + --button-bg: #1e1e1e; + --btn-border-color: #2e2f31; --btn-backtotop-color: var(--text-color); - --btn-backtotop-border-color: var(--btn-border-color); + --btn-backtotop-border-color: #212122; --btn-box-shadow: var(--main-bg); --card-header-bg: #292929; --checkbox-color: rgb(118, 120, 121); @@ -55,9 +55,7 @@ /* Home page */ --post-list-text-color: rgb(175, 176, 177); --btn-patinator-text-color: var(--text-color); - --btn-paginator-hover-color: rgb(64, 65, 66); - --btn-paginator-border-color: var(--btn-border-color); - --btn-text-color: var(--text-color); + --btn-paginator-hover-color: #2e2e2e; /* Posts */ --toc-highlight: rgb(116, 178, 243); diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss index f0cd983..f7037a0 100644 --- a/_sass/colors/typography-light.scss +++ b/_sass/colors/typography-light.scss @@ -59,8 +59,6 @@ --post-list-text-color: dimgray; --btn-patinator-text-color: #555555; --btn-paginator-hover-color: var(--sidebar-bg); - --btn-paginator-border-color: var(--sidebar-bg); - --btn-text-color: #676666; /* Posts */ --toc-highlight: #0550ae; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 499de47..bca2ca4 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -89,8 +89,9 @@ } /* #post-list */ .pagination { - color: var(--btn-patinator-text-color); + color: var(--text-color); font-family: Lato, sans-serif; + justify-content: space-evenly; a:hover { text-decoration: none; @@ -98,26 +99,27 @@ .page-item { .page-link { - color: inherit; - width: 2.5rem; - height: 2.5rem; - padding: 0; + color: var(--btn-patinator-text-color); + padding: 0 0.6rem; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; - border-radius: 50%; - border: 1px solid var(--btn-paginator-border-color); - background-color: var(--button-bg); - - &:hover { - background-color: var(--btn-paginator-hover-color); - } + border-radius: 0.5rem; + border: 0; + background-color: inherit; } &.active { .page-link { background-color: var(--btn-paginator-hover-color); - color: var(--btn-text-color); + } + } + + &:not(.active) { + .page-link { + &:hover { + box-shadow: inset var(--btn-border-color) 0 0 0 1px; + } } } @@ -126,15 +128,8 @@ .page-link { color: rgba(108, 117, 125, 0.57); - border-color: var(--btn-paginator-border-color); - background-color: var(--button-bg); } } - - &:first-child .page-link, - &:last-child .page-link { - border-radius: 50%; - } } /* .page-item */ } /* .pagination */ @@ -175,8 +170,6 @@ /* Hide SideBar and TOC */ @media all and (max-width: 830px) { .pagination { - justify-content: space-evenly; - .page-item { &:not(:first-child):not(:last-child) { display: none; @@ -193,16 +186,12 @@ .pagination { font-size: 0.85rem; + justify-content: center; .page-item { &:not(:last-child) { margin-right: 0.7rem; } - - .page-link { - width: 2rem; - height: 2rem; - } } .page-index {