truckin along, we got a postlist now

2026-02-18 16:29:21 -08:00
parent 42ce6ceb6f
commit ca8d4a31cd
17 changed files with 526 additions and 69 deletions
--- a/css/postlist.css
+++ b/css/postlist.css
@ -0,0 +1,168 @@
+#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);
+	}
+}