Update firehose styling

DeclanChidlow · Feb 7, 2025 · b54d3cf · b54d3cf
1 parent f7f8e54
commit b54d3cf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/src/assets/styles/pages/firehose.css b/src/assets/styles/pages/firehose.css
@@ -1,18 +1,35 @@
 article {
 	max-width: 65ch;
 	padding: 2rem 1rem;
-	border-bottom: 2px solid var(--bright_grey);
+	margin: 1rem 0;
 
 	header {
 		display: flex;
 		justify-content: space-between;
 		gap: 2rem;
 		margin-bottom: 1rem;
+
+		div {
+			display: flex;
+			gap: 1ch;
+		}
+	}
+}
+
+.post {
+	background: oklch(from var(--cyan) l c h / calc(alpha - 0.9));
+}
+
+.photo {
+	background: oklch(from var(--green) l c h / calc(alpha - 0.9));
+
+	p {
+		margin-bottom: 1rem;
 	}
 }
 
-.photo p {
-	margin-bottom: 1rem;
+.micro {
+	background: oklch(from var(--blue) l c h / calc(alpha - 0.9));
 }
 
 .socials {

diff --git a/src/pages/firehose.ori b/src/pages/firehose.ori
@@ -15,7 +15,10 @@
 			// if post
 				`<article class="post">
 					<header>
-						<a href="/posts/${ basename(key) }"><time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) }</time></a>
+						<div>
+							<span class="icons">article</span>
+							<a href="/posts/${ basename(key) }"><time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) }</time></a>
+						</div>
 					</header>
 
 					<p>
@@ -32,7 +35,10 @@
 			// if photo
 				`<article class="photo">
 					<header>
-						<a href="/photography/${ basename(key) }"><time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) }</time></a>
+						<div>
+							<span class="icons">photo_camera</span>
+							<a href="/photography/${ basename(key) }"><time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) }</time></a>
+						</div>
 
 						<div class="socials">
 							${ item/unsplash_link ? `
@@ -53,7 +59,10 @@
 			// if micro (not post or photo)
 				`<article class="micro">
 					<header>
-						<a href="/micros/${ basename(key) }"><time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) }</time></a>
+						<div>
+							<span class="icons">stylus_note</span>
+							<a href="/micros/${ basename(key) }"><time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) } ${ functions/pretty-time.js(item/pub_time) }</time></a>
+						</div>
 
 						<div class="socials">
 							${ item/fedi_link ? `