leecat.art/css/postlist.css

#postlist {
	list-style: none;
	margin: 0;
}

.post {
	margin: 0;
}

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

/* Even-numbered post layout/coloration */
.post:nth-child(even) .postlink {
	grid-template-areas:
		'h2 img'
		'tags 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 {
		grid-template-areas:
			'img'
			'h2'
			'tags';
		grid-template-columns: auto;
	}
}

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

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

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

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

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

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

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

/* h2 */
.post 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 {
	text-align: right;
}

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

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

/* Image */
.post img {
	grid-area: img;
}

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

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

.post:nth-child(odd) .posttags {
	justify-content: flex-start;
}

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

.postlink:focus-visible .posttags li {
	background-color: var(--color-bg);
	color: var(--color-primary);
}

@media (any-hover: hover) {
	.postlink:hover .posttags li {
		background-color: var(--color-bg);
		color: var(--color-primary);
	}
}