leecat.art/css/lists.css

#postlist,
#taglist {
	list-style: none;
}

#postlist, .post,
#taglist, .tag {
	margin: 0;
}

/* Odd-numbered posts & tag layout/coloration */
.post:nth-child(odd) .postlink,
.tag:nth-child(odd) .taglink {
	grid-template-areas:
		'img h2'
		'img info'
		'img .';
	grid-template-columns: 45% auto;;
	--color-primary: var(--color-teal);
	--color-accent: var(--color-pink);
}

/* Even-numbered posts & tags layout/coloration */
.post:nth-child(even) .postlink,
.tag:nth-child(even) .taglink {
	grid-template-areas:
		'h2 img'
		'info img'
		'. img';
	grid-template-columns: auto 45%;
	--color-primary: var(--color-pink);
	--color-accent: var(--color-teal);
}

/* Layout for all posts on mobile */
@media (max-width: 650px) {
	.post:nth-child(n) .postlink,
	.tag:nth-child(n) .taglink {
		grid-template-areas:
			'img'
			'h2'
			'info';
		grid-template-columns: auto;
	}
}

/* Link */
.postlink,
.taglink {
	display: grid;
	border: .25rem solid var(--color-primary);
	border-radius: 1.25rem;
	box-shadow: .35rem .35rem var(--color-shadow);
	margin: 2rem 0;
	text-decoration: none;
	/* Click animation handling */
	position: relative;
	top: 0;
	left: 0;
	transition: top .05s ease-in, left .05s ease-in;
}

.postlink:focus-visible,
.taglink:focus-visible {
	background-color: var(--color-primary);
	outline: none;
}

@media (any-hover: hover) {
	.postlink:hover,
	.taglink:hover {
		background-color: var(--color-primary);
	}
}

/* Forced colors */
@media (forced-colors: active) {
	.postlink:focus-visible,
	.taglink:focus-visible {
		outline-offset: .25rem;
		outline: .25rem solid;
	}

	@media (any-hover: hover) {
		.postlink:hover,
		.taglink:hover {
			outline-offset: .25rem;
			outline: .25rem solid;
		}
	}
}

/* Click animation */
.postlink:active,
.taglink:active {
	box-shadow: none;
	top: .2rem;
	left: .2rem;
	box-shadow: .15rem .15rem var(--color-shadow);
}

/* Post & tag elements */
.post h2, .post img,
.post ul, .post li,
.tag h2, .tag p,
.tag img {
	margin: 0;
}

.post h2,
.tag h2 {
	grid-area: h2;
	padding: .25rem .5rem;
	text-transform: uppercase;
	font-size: 1.5rem;
	color: var(--color-primary);
	border-radius: 1rem 1rem 0 0;
	border-bottom: .25rem solid var(--color-accent);
}

.post:nth-child(even) h2,
.tag:nth-child(even) h2 {
	text-align: right;
}

.postlink:focus-visible h2,
.taglink:focus-visible h2 {
	color: var(--color-bg);
	border-color: var(--color-bg);
}

@media (any-hover: hover) {
	.postlink:hover h2,
	.taglink:hover h2 {
		color: var(--color-bg);
		border-color: var(--color-bg);
	}
}

/* Images */
.post img,
.tag-imgs {
	grid-area: img;
}

.tag-imgs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .15rem;
}

.tag-imgs img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.missing-image {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: var(--color-bg-alt);
	border-radius: calc(1rem);
}

.taglink:focus-visible .missing-image {
	opacity: .7;
}

@media (any-hover: hover) {
	.taglink:hover .missing-image {
		opacity: .7;
	}
}

/* Post tags */
.postlist-tags {
	grid-area: info;
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	gap: .5rem;
	padding: .5rem;
}

.post:nth-child(odd) .postlist-tags {
	justify-content: flex-end;
}

.postlist-tags li,
.tagcount {
	background-color: var(--color-primary);
	color: var(--color-bg);
	padding: 0 .5rem;
	border-radius: 1rem;
}

.postlink:focus-visible .postlist-tags li,
.taglink:focus-visible .tagcount {
	background-color: var(--color-bg);
	color: var(--color-primary);
}

@media (any-hover: hover) {
	.postlink:hover .postlist-tags li,
	.taglink:hover .tagcount {
		background-color: var(--color-bg);
		color: var(--color-primary);
	}
}

/* Tag count */
.tag p {
	grid-area: info;
	padding: .5rem;
}

.tag:nth-child(odd) p {
	text-align: right;
}