1
0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00

feat(ui): redesign the pagination button on home page

This commit is contained in:
Cotes Chung
2023-09-06 00:13:10 +08:00
parent 414b8f97ce
commit 62bcd601fc
5 changed files with 103 additions and 116 deletions

View File

@@ -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 {