inherentlee/leecat.art
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tag pages are structured out, most formatting is in place

Browse Source
This commit is contained in:
Lee Cattarin
2026-02-19 07:44:29 -08:00
parent f2face01a7
commit 1913d9c46e
22 changed files with 211 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
css/nav.css
View File

@ -8,8 +8,9 @@ header {
z-index: 10;
}
/* Header links */
header a {
/* Header links, pagination links */
header a,
.pagination a {
border-radius: 1rem;
border: .125rem solid var(--color-pink);
color: var(--color-pink);
@ -17,7 +18,6 @@ header a {
padding: 0 .25rem;
box-shadow: .15rem .15rem var(--color-shadow);
font-size: 1.2rem;
padding-right: .35rem;
/* Click animation handling */
position: relative;
top: 0;
@ -25,7 +25,17 @@ header a {
transition: top .05s ease-in, left .05s ease-in;
}
header a:focus-visible {
header a,
.pagination .older a {
padding-right: .35rem;
}
.pagination .newer a {
padding-left: .35rem;
}
header a:focus-visible,
.pagination a:focus-visible {
color: var(--color-bg);
border-color: var(--color-pink);
background-color: var(--color-pink);
@ -33,7 +43,8 @@ header a:focus-visible {
}
@media (any-hover: hover) {
header a:hover {
header a:hover,
.pagination a:hover {
color: var(--color-bg);
border-color: var(--color-pink);
background-color: var(--color-pink);
@ -41,13 +52,15 @@ header a:focus-visible {
}
@media (forced-colors: active) {
.site-header a:focus-visible {
header a:focus-visible,
.pagination a:focus-visible {
outline-offset: .125rem;
outline: .125rem solid;
}
@media (any-hover: hover) {
.site-header a:hover {
header a:hover,
.pagination a:hover {
outline-offset: .125rem;
outline: .125rem solid;
}
@ -55,7 +68,8 @@ header a:focus-visible {
}
/* Click animation */
header a:active {
header a:active,
.pagination a:active {
top: .1rem;
left: .1rem;
box-shadow: .05rem .05rem var(--color-shadow);
@ -81,9 +95,13 @@ header a[aria-current="page"]:focus-visible {
}
}
/* Header link icons */
header i {
/* Header link icons, pagination icons */
header i,
.pagination i {
color: var(--color-teal);
}
header i {
padding-left: .25rem;
}
@ -92,13 +110,15 @@ header a[aria-current="page"] i {
}
header a:focus-visible i,
a[aria-current="page"] a:focus-visible i {
a[aria-current="page"] a:focus-visible i,
.pagination a:focus-visible :in-range {
color: var(--color-bg);
}
@media (any-hover: hover) {
header a:hover i,
header a[aria-current="page"]:hover i {
header a[aria-current="page"]:hover i,
.pagination a:hover i {
color: var(--color-bg);
}
}
@ -194,3 +214,25 @@ footer a {
footer a:focus-visible {
outline-color: var(--color-pink);
}
/* Pagination */
.pagination {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "older newer";
list-style: none;
}
.pagination,
.pagination li {
margin: 0;
}
.pagination .older {
grid-area: older;
}
.pagination .newer {
grid-area: newer;
text-align: right;
}