Update micros and firehose page

DeclanChidlow · Feb 12, 2025 · 1bec8a1 · 1bec8a1
1 parent b4af399
commit 1bec8a1
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 49 deletions.
diff --git a/src/assets/styles/pages/firehose.css b/src/assets/styles/pages/firehose.css
@@ -41,17 +41,22 @@ article {
 	}
 
 	svg {
-		height: 1.25rem;
 		width: 1.25rem;
+		min-width: 1.25rem;
 	}
 }
 
 .pagination {
 	display: flex;
 	justify-content: space-between;
+	align-items: center;
 	max-width: 65ch;
 
 	a {
 		padding: 2rem;
 	}
+
+	@media (max-width: 24rem) {
+		flex-direction: column;
+	}
 }
diff --git a/src/assets/styles/pages/micro-individual.css b/src/assets/styles/pages/micro-individual.css
@@ -1,10 +1,23 @@
+@media (max-width: 45rem) {
+	#section {
+		display: none;
+	}
+}
+
 article header {
 	display: flex;
+	flex-grow: 1;
 	justify-content: space-between;
 	gap: 2rem;
 	padding-bottom: 0.5rem;
-	margin-bottom: 0.5rem;
+	margin-bottom: 1rem;
 	border-bottom: 2px solid var(--bright_grey);
+	max-width: 60ch;
+
+	h1 {
+		font-size: inherit;
+		line-height: inherit;
+	}
 }
 
 .socials {
@@ -16,11 +29,42 @@ article header {
 	}
 
 	svg {
-		height: 1.25rem;
 		width: 1.25rem;
+		min-width: 1.25rem;
+	}
+
+	@media (min-width: 65rem) {
+		&:is(div) {
+			display: none;
+		}
+	}
+
+	@media (max-width: 65rem) {
+		&:is(aside) {
+			display: none;
+		}
 	}
 }
 
-.readable-width {
-	max-width: 60ch;
+.micro-content {
+	display: flex;
+	flex-direction: row-reverse;
+	gap: 3rem;
+
+	aside {
+		flex-direction: column;
+		font-size: 0.9rem;
+		position: sticky;
+		top: 5rem;
+		height: fit-content;
+
+		a {
+			display: flex;
+			gap: 1rem;
+		}
+	}
+
+	.readable-width {
+		max-width: 60ch;
+	}
 }
diff --git a/src/micro_template.ori b/src/micro_template.ori
@@ -6,38 +6,71 @@
 	<span id="section" data-pagefind-ignore data-pagefind-filter="Content Type">Micros</span>	
 
 	<article class="h-entry">
-	<header data-pagefind-ignore>
-		<time datetime="${ micro/pub_time }" class="dt-published" title="Date of first publication." data-pagefind-meta="title">${ functions/pretty-date.js(micro/pub_time) } ${ functions/pretty-time.js(micro/pub_time) }</time>
-
-		<div class="socials">
-			${ micro/fedi_link ? `
-			<a href="${ micro/fedi_link }" title="Fediverse">
-				<svg fill="#F1007E" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-					<title>Fediverse</title>
-					<path d="M10.91 4.442L0 10.74v2.52L8.727 8.22v10.077l2.182 1.26zM6.545 12l-4.364 2.52 4.364 2.518zm6.545-2.52L17.455 12l-4.364 2.52zm0-5.038L24 10.74v2.52l-10.91 6.298v-2.52L21.819 12 13.091 6.96z"/>
-				</svg>
-			</a>` : '' }
-
-			${ micro/bsky_link ? `
-			<a href="${ micro/bsky_link }" title="Bluesky">
-				<svg fill="#0285FF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-					<title>Bluesky</title>
-					<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/>
-				</svg>
-			</a>` : '' }
-
-			${ micro/linkedin_link ? `
-			<a href="${ micro/linkedin_link }" title="LinkedIn">
-				<svg fill="#0A66C2" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-					<title>LinkedIn</title>
-					<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-				</svg>
-			</a>` : '' }
-		</div>
+		<header data-pagefind-ignore>
+			<h1>
+				<time datetime="${ micro/pub_time }" class="dt-published" title="Date of first publication." data-pagefind-meta="title">${ functions/pretty-date.js(micro/pub_time) } ${ functions/pretty-time.js(micro/pub_time) }</time>
+			</h1>
+
+			<div class="socials">
+				${ micro/fedi_link ? `
+				<a href="${ micro/fedi_link }" title="Fediverse">
+					<svg fill="#F1007E" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<title>Fediverse</title>
+						<path d="M10.91 4.442L0 10.74v2.52L8.727 8.22v10.077l2.182 1.26zM6.545 12l-4.364 2.52 4.364 2.518zm6.545-2.52L17.455 12l-4.364 2.52zm0-5.038L24 10.74v2.52l-10.91 6.298v-2.52L21.819 12 13.091 6.96z"/>
+					</svg>
+				</a>` : '' }
+
+				${ micro/bsky_link ? `
+				<a href="${ micro/bsky_link }" title="Bluesky">
+					<svg fill="#0285FF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<title>Bluesky</title>
+						<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/>
+					</svg>
+				</a>` : '' }
+
+				${ micro/linkedin_link ? `
+				<a href="${ micro/linkedin_link }" title="LinkedIn">
+					<svg fill="#0A66C2" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<title>LinkedIn</title>
+						<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+					</svg>
+				</a>` : '' }
+			</div>
 		</header>
 
-		<div class="readable-width e-content">
-			${ micro/@text }
+		<div class="micro-content">
+			<aside class="socials" data-pagefind-ignore>
+				${ micro/fedi_link ? `
+				<a href="${ micro/fedi_link }" title="Fediverse">
+					<svg fill="#F1007E" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<title>Fediverse</title>
+						<path d="M10.91 4.442L0 10.74v2.52L8.727 8.22v10.077l2.182 1.26zM6.545 12l-4.364 2.52 4.364 2.518zm6.545-2.52L17.455 12l-4.364 2.52zm0-5.038L24 10.74v2.52l-10.91 6.298v-2.52L21.819 12 13.091 6.96z"/>
+					</svg>
+				View on the Fediverse
+				</a>` : '' }
+
+				${ micro/bsky_link ? `
+				<a href="${ micro/bsky_link }" title="Bluesky">
+					<svg fill="#0285FF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<title>Bluesky</title>
+						<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/>
+					</svg>
+				View on Bluesky
+				</a>` : '' }
+
+				${ micro/linkedin_link ? `
+				<a href="${ micro/linkedin_link }" title="LinkedIn">
+					<svg fill="#0A66C2" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<title>LinkedIn</title>
+						<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+					</svg>
+				View on LinkedIn
+				</a>` : '' }
+			</aside>
+
+			<div class="readable-width e-content">
+				${ micro/@text }
+			</div>
 		</div>
 	</article>
 ` })
diff --git a/src/pages/firehose.ori b/src/pages/firehose.ori
@@ -1,13 +1,13 @@
 (paginated_firehose) => main_template.ori({
 	title: "Firehose",
-	description: "Every thought and web thing piped directly through at a million miles an hour. Micro posts, articles, etc. This is everything, all in one place, coming 'atcha!",
+	description: "Every thought and web thing piped directly through at a million miles an hour. Micro posts, articles, photography, etc. This is everything, all in one place, coming 'atcha!",
 	stylesheet: "pages/firehose.css"
 
 	@text: indent`
 	<h1 id="section" data-pagefind-ignore>Firehose</h1>
 
 	<div data-pagefind-ignore="all">
-		${ paginated_firehose/previousPage	? indent`` : `<p>This is everything, all in one place, coming 'atcha!<br><br> This firehose contains a record of all my micro posts, articles, and other web doings. If you'd like to subscribe to feeds to stay up-to-date with things, then you can do so via my <a href='/syndication'>syndication page</a>.</p>` }
+		${ paginated_firehose/previousPage	? indent`` : `<p>This is everything, all in one place, coming 'atcha!<br><br>This firehose contains a record of all my micro posts, articles, photography, and other web doings. If you'd like to subscribe to feeds to stay up-to-date with things, then you can do so via my <a href='/syndication'>syndication page</a>.</p>` }
 
 	    ${ map(paginated_firehose/items,
 	    (item, key) => indent`
@@ -99,21 +99,23 @@
 	    `)}
 
 	<div class="pagination">
-		  ${
+		${
 			paginated_firehose/previousPage
-			  ? indent`
-				<a class="next" href="/firehose/${ paginated_firehose/previousPage }">< Newer</a>
-			  `
-			  : "<span></span>"
-		  }
+			? indent`
+				<a href="/firehose/${ paginated_firehose/previousPage }"><span aria-hidden="true"><</span> Newer</a>
+			`
+			: "<span></span>"
+		}
 
-		  ${
+		<p>Page ${ paginated_firehose/pageNumber} of ${ paginated_firehose/pageCount}</p>
+
+		${
 			paginated_firehose/nextPage
-			  ? indent`
-				<a class="next" href="/firehose/${ paginated_firehose/nextPage }">Older ></a>
-			  `
-			  : "<span></span>"
-		  }
+			? indent`
+				<a href="/firehose/${ paginated_firehose/nextPage }">Older <span aria-hidden="true">></span></a>
+			`
+			: "<span></span>"
+		}
 		</div>
 	</div>
 	`