hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More visually interesting paginator, move paginator to article-list.html

Browse Source
This commit is contained in:
daudix
2024-09-22 06:06:09 +03:00
parent cfff21755b
commit 12b2961432
4 changed files with 92 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
sass/_article-list.scss
View File

@ -343,7 +343,7 @@
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.5rem;
gap: 0.25rem;
margin-block-start: 4rem;
#paginator-first,
@ -353,21 +353,12 @@
display: inline-block;
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: 999px;
border-radius: 1rem;
background-color: var(--fg-muted-1);
padding: 0.5rem;
color: var(--fg-muted-4);
line-height: 0;
&:hover {
background-color: var(--fg-muted-2);
color: var(--fg-muted-5);
}
&:active {
transform: var(--active);
}
.icon {
transition: var(--transition);
width: 1rem;
@ -379,6 +370,39 @@
}
}
a#paginator-first,
a#paginator-previous,
a#paginator-next,
a#paginator-last {
&:hover {
background-color: var(--fg-muted-2);
color: var(--fg-muted-5);
}
&:active {
transform: var(--active);
border-radius: 1rem;
}
}
span#paginator-first,
span#paginator-previous,
span#paginator-next,
span#paginator-last {
opacity: var(--disabled-opacity);
cursor: not-allowed;
}
#paginator-previous {
border-start-end-radius: var(--rounded-corner-small);
border-end-end-radius: var(--rounded-corner-small);
}
#paginator-next {
border-start-start-radius: var(--rounded-corner-small);
border-end-start-radius: var(--rounded-corner-small);
}
#paginator-first .icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 2v12h2V8.414l5.293 5.293a1 1 0 1 0 1.414-1.414L7.414 8l4.293-4.293a1 1 0 1 0-1.414-1.414L5 7.586V2zm0 0'/%3E%3C/svg%3E");
}
@ -395,29 +419,14 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M11 2v5.586L5.707 2.293a1 1 0 1 0-1.414 1.414L8.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L11 8.414V14h2V2zm0 0'/%3E%3C/svg%3E");
}
span {
&#paginator-first,
&#paginator-previous,
&#paginator-next,
&#paginator-last {
opacity: var(--disabled-opacity);
cursor: not-allowed;
&:hover {
background-color: var(--fg-muted-1);
color: var(--fg-muted-4);
}
&:active {
transform: none;
}
}
}
#paginator-counter {
display: inline-block;
margin: 0 0.5rem;
color: var(--fg-muted-5);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--accent-color-alpha);
padding: 0.5rem 0.625rem;
color: var(--accent-color);
font-weight: bold;
line-height: 1;
font-variant-numeric: tabular-nums;
}