leecat.art/css/nav.css

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

/* Header links */
header 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;
	padding-right: .35rem;
	/* click animation handling */
	position: relative;
	top: 0;
	left: 0;
	transition: top .05s ease-in, left .05s ease-in;
}

header 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 {
		color: var(--color-bg);
		border-color: var(--color-pink);
		background-color: var(--color-pink);
	}
}

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

	@media (any-hover: hover) {
		.site-header a:hover {
			outline-offset: .125rem;
			outline: .125rem solid;
		}
	}
}

/* Click animation */
header 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 */
header i {
	color: var(--color-teal);
	padding-left: .25rem;
}

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

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

@media (any-hover: hover) {
	header a:hover i,
	header a[aria-current="page"]: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;
}

@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;
}

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

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);
}