all but posts omg

css/lists.css

@@ -0,0 +1,219 @@
+#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;
+}
+