leecat.art/css/nav.css

/* Header */
header {
	position: sticky;
	top: 0;
	background-color: var(--color-bg);
	padding: .75rem 0;
	z-index: 10;
	border-bottom: thick solid var(--color-teal);
	box-shadow: 0 .25rem .15rem var(--color-shadow);
}

/* Header links, pagination links */
header a,
.pagination a,
.webring ul a {
	border-radius: 1rem;
	border: .125rem solid var(--color-pink);
	color: var(--color-pink);
	text-decoration: none;
	padding: 0 .25rem;
	box-shadow: .15rem .15rem var(--color-shadow);
	font-size: 1.2rem;
	/* Click animation handling */
	position: relative;
	top: 0;
	left: 0;
	transition: top .05s ease-in, left .05s ease-in;
}

header a,
.pagination .older a,
.webring .prev a,
.webring .rand a {
	padding-right: .35rem;
}

.pagination .newer a,
.webring .next a,
.webring .rand a {
	padding-left: .35rem;
}

header a:focus-visible,
.pagination a:focus-visible,
.webring ul a:focus-visible {
	color: var(--color-bg);
	border-color: var(--color-pink);
	background-color: var(--color-pink);
	outline: none;
}

@media (any-hover: hover) {
	header a:hover,
	.pagination a:hover,
	.webring ul a:hover {
		color: var(--color-bg);
		border-color: var(--color-pink);
		background-color: var(--color-pink);
	}
}

@media (forced-colors: active) {
	header a:focus-visible,
	.pagination a:focus-visible,
	.webring ul a:focus-visible {
		outline-offset: .125rem;
		outline: .125rem solid;
	}

	@media (any-hover: hover) {
		header a:hover,
		.pagination a:hover,
		.webring ul a:hover {
			outline-offset: .125rem;
			outline: .125rem solid;
		}
	}
}

/* Click animation */
header a:active,
.pagination a:active,
.webring ul a:active {
	top: .1rem;
	left: .1rem;
	box-shadow: .05rem .05rem var(--color-shadow);
}

/* Current page */
header a[aria-current="page"] {
	border-color: var(--color-teal);
	color: var(--color-teal);
}

header a[aria-current="page"]:focus-visible {
	color: var(--color-bg);
	border-color: var(--color-teal);
	background-color: var(--color-teal);
}

@media (any-hover: hover) {
	header a[aria-current="page"]:hover {
		color: var(--color-bg);
		background-color: var(--color-teal);
		border-color: var(--color-teal);
	}
}

/* Header link icons, pagination icons */
header i,
.pagination i,
.webring ul i {
	color: var(--color-teal);
}

header i,
.pagination .older i,
.webring .prev i,
.webring .rand i:nth-child(1) {
	padding-left: .25rem;
}

.pagination .newer i,
.webring .next i,
.webring .rand i:nth-child(2) {
	padding-right: .25rem;
}

header a[aria-current="page"] i {
	color: var(--color-pink);
}

header a:focus-visible i,
a[aria-current="page"] a:focus-visible i,
.pagination a:focus-visible i,
.webring ul a:focus-visible i {
	color: var(--color-bg);
}

@media (any-hover: hover) {
	header a:hover i,
	header a[aria-current="page"]:hover i,
	.pagination a:hover i,
	.webring ul a:hover i {
		color: var(--color-bg);
	}
}

/* Skip link */
#skip {
	left: -999px;
	position: absolute;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -99;
}

#skip:focus-visible {
	display: inline-block;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	overflow: auto;
	margin: 0 10%;
	z-index: 999;
}

/* Nav */
header ul {
	display: flex;
	list-style: none;
	gap: 1rem;
	justify-content: center;
}

header ul,
header li {
	margin: 0;
}

@media (max-width: 650px) {
	.menu-text {
		display: none; /* Icons only on small screens */
	}

	header a {
		padding: .15rem .5rem;
	}

	header i {
		padding: 0;
	}
}

/* Footer */
footer {
	padding: 1rem 0;
	font-size: .9rem;
	border-top: thick solid var(--color-pink);
	margin-top: 2rem;
}

footer ul {
	display: flex;
	list-style: none;
	gap: .5rem;
	justify-content: center;
	margin: 0;
}

footer li {
	margin: 0;
}

footer li:nth-child(2)::before,
footer li:nth-child(2)::after {
	content: " ● " / "";
	color: var(--color-teal);
}

@media (max-width: 650px) {
	footer ul {
		flex-flow: column;
			text-align: center;
	}

	footer li:nth-child(2)::before,
	footer li:nth-child(2)::after {
		content: none;
	}
}

footer a {
	text-decoration-color: var(--color-pink);
}

footer a:focus-visible {
	outline-color: var(--color-pink);
}

/* color picker */
#theme {
	display: flex;
	justify-content: center;
	margin: .5rem auto 0;
	padding: 0 .75rem .5rem;
	width: fit-content;
	border: .125rem solid var(--color-teal);
	border-radius: 2rem;
}

#theme legend {
	margin: 0 auto;
	color: var(--color-teal);
}

footer label {
	cursor: pointer;
	border: .125rem solid var(--color-pink);
	padding: 0 .25rem;
	color: var(--color-pink);
	background-color: var(--color-bg); /* this stops the box shadows from showing through */
	box-shadow: .15em .15em var(--color-shadow);
	/* Click animation handling */
	position: relative;
	top: 0;
	left: 0;
	transition: top .05s ease-in, left .05s ease-in;
}

footer input:checked + label {
	color: var(--color-blue);
	border-color: var(--color-blue);
}

footer label i {
	color: var(--color-teal);
}

footer input:checked + label i {
	color: var(--color-pink);
}

@media (any-hover: hover) {
	footer label:hover,
	footer input:checked + label:hover,
	footer label:hover i,
	footer input:checked + label:hover i {
		color: var(--color-bg);
	}

	footer label:hover {
		background-color: var(--color-pink);
	}

	footer input:checked + label:hover {
		background-color: var(--color-teal);
	}
}

footer input:focus-visible + label,
footer input:focus-visible + label i {
	color: var(--color-bg);
	background-color: var(--color-pink);
	border-color: var(--color-pink);
}

footer input:checked:focus-visible + label,
footer input:checked:focus-visible + label i {
	color: var(--color-bg);
	background-color: var(--color-teal);
	border-color: var(--color-teal);
}

footer label:active {
	top: .09em;
	left: .09em;
	box-shadow: .05em .05em var(--color-shadow);
}

label.theme-light {
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
	border-right: none;
	padding-left: .35rem;
}

label.theme-auto {
}

label.theme-dark {
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	border-left: none;
	padding-right: .35rem;
}

footer input {
	/* To allow screen reader to still access these. */
	/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* Pagination */
.pagination,
.pagination li {
	margin: 0;
}

.pagination {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas: "older newer";
	list-style: none;
	margin-top: 3rem;
}

@media (max-width: 650px) {
	.post-pagination {
		grid-template-columns: 1fr;
		grid-template-areas:
			"older"
			"newer";
		gap: .75rem;
	}
}

.pagination .older {
	grid-area: older;
}

.pagination .newer {
	grid-area: newer;
	text-align: right;
}

/* webring navigation */
.webring {
	margin-bottom: 3rem;
}

.webring ul {
	display: flex;
	flex-flow: row wrap;
	list-style: none;
	justify-content: center;
	gap: .5rem;
}

.webring ul,
.webring li {
	margin-left: 0;
}