trip to a coffee shop redesign-2024-12

4 files changed, 262 insertions, 1 deletions

diff --git a/served/the-continuum/banners/2025-01-07/README.md b/served/the-continuum/banners/2025-01-07/README.md
new file mode 100644
index 0000000..49c34e5
--- /dev/null
+++ b/served/the-continuum/banners/2025-01-07/README.md
@@ -0,0 +1 @@
+these should be called sunrise, not sunset. woops.
diff --git a/served/the-continuum/banners/banners.html b/served/the-continuum/banners/banners.html
index 403abc7..aa55321 100644
--- a/served/the-continuum/banners/banners.html
+++ b/served/the-continuum/banners/banners.html
@@ -6,9 +6,210 @@ style=banners.css
 ---
 
 <section id="banners">
+	<!--
+	<p>
+		2025-02-DATE
+		<img src="2025-02-DATE/banner.gif"
+			alt="ALT_TEXT" />
+	</p>
+	-->
 	<p>
 		2025-01-01
 		<img src="2025-01-01/banner.gif"
 			alt="a metal sign reading &quot;no scrap value steel wire&quot; pinned and nailed over wire going up a telephone pole" />
 	</p>
+	<p>
+		2025-01-02
+		<img src="2025-01-02/banner.gif"
+			alt="a fire hydrant in front of a row of tall, greened-leafy trees. the ground is scattered in leaves and dead grass" />
+	</p>
+	<p>
+		2025-01-03
+		<img src="2025-01-03/banner.gif"
+			alt="genny's and a large dog's eyes are inline with one another. their heads face roughly the same direction, but genny looks at the camera and moose, the dog, off to the right" />
+	</p>
+	<p>
+		2025-01-04
+		<img src="2025-01-04/banner.gif"
+			alt="a parallel port &quot;gender changer&quot;. it has the text &quot;r.o.c. patent 64314 gender changer&quot; on it in all caps" />
+	</p>
+	<p>
+		2025-01-05
+		<img src="2025-01-05/banner.gif"
+			alt="a blue plug with 25 holes; a parallel port. the holes are numbered. there are two larger screw holes off to either side." />
+	</p>
+	<p>
+		2025-01-06
+		<img src="2025-01-06/banner.gif"
+			alt="a wooden floorboard in my parents house. the grain is very smooth and curved. it concentrates around a filled in darker patch, possibly where a limb once jutted off?" />
+	</p>
+	<p>
+		2025-01-07
+		<img src="2025-01-07/banner.gif"
+			alt="a sunrise in orange and yellow and gentle pink. there is a water tower off in the distance, small in the frame." />
+	</p>
+	<p>
+		2025-01-08
+		<img src="2025-01-08/banner.gif"
+			alt="a lighthouse on the shore of lake michigan. it's a bit before noon and the sky is full of clouds with a hint of orange." />
+	</p>
+	<p>
+		2025-01-09
+		<img src="2025-01-09/banner.gif" alt="The spine of Nevada by Imogen Binnie" />
+	</p>
+	<p>
+		2025-01-10
+		<img src="2025-01-10/banner.gif"
+			alt="A yagi style antenna behind some powerlines, pointing toward the camera and to the right. the entire image is only 3 colours; the image is 3 shades of gray." />
+	</p>
+	<p>
+		2025-01-11
+		<img src="2025-01-11/banner.gif"
+			alt="a snowy driveway, slopped upwards. there is praire grass on one side, and a dense thicket of small stick-like trees the other. a white car is off the road, perpendicular to it, into the thicket." />
+	</p>
+	<p>
+		2025-01-12 (miss)
+		<img src="2025-01-12/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-01-13
+		<img src="2025-01-13/banner.gif"
+			alt="the silhouette of a telephone pole with a transformer and supporting distribution components mounted to it" />
+	</p>
+	<p>
+		2025-01-14 (miss)
+		<img src="2025-01-14/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-01-15
+		<img src="2025-01-15/banner.gif"
+			alt="tall, long, golden grass with green trees in the background. the trees have golden fringes from the color quantization being very lenient with colour matching." />
+	</p>
+	<p>
+		2025-01-16 (miss)
+		<img src="2025-01-16/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-01-17
+		<img src="2025-01-17/banner.gif" alt="a traffic light arm with two left-turn signals lit in red." />
+	</p>
+	<p>
+		2025-01-18
+		<img src="2025-01-18/banner.gif"
+			alt="Lady, the one eyed orange cat, looking into the camera. she is laying on a red couch, but not much of it is visible." />
+	</p>
+	<p>
+		2025-01-19
+		<img src="2025-01-19/banner.gif"
+			alt="A dramatically lit photo of the seam-edge of a blackout curtain. you can see the inner, window side and the more colourful, room side." />
+	</p>
+	<p>
+		2025-01-20 (miss)
+		<img src="2025-01-20/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-01-21 (miss)
+		<img src="2025-01-21/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-01-22
+		<img src="2025-01-22/banner.gif"
+			alt="An orange cat curled up in a blanket. only the cat is in focus. she is looking at the camera, gently, without raising her head." />
+	</p>
+	<p>
+		2025-01-23
+		<img src="2025-01-23/banner.gif"
+			alt="Kiwi, a black tortoiseshell cat with yellow-brown spots, laying by a water dish, drinking. the front of her body is dipped in the water and her tongue is out." />
+	</p>
+	<p>
+		2025-01-24
+		<img src="2025-01-24/banner.gif"
+			alt="Prairie grass heads in and out of focus. They look fluffy and soft to the touch. The colours have been cut to shades of grey and golden-yellow. It looks ethereal." />
+	</p>
+	<p>
+		2025-01-25 (miss)
+		<img src="2025-01-21/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-01-26
+		<img src="2025-01-26/banner.gif" alt="the eyes of a cat! they are a yellow-green and are wide open." />
+	</p>
+	<p>
+		2025-01-27
+		<img src="2025-01-27/banner.gif"
+			alt="abstract shapes of orange, pink, blue, green, and purple with black outlines. they are all touching; there is nowhere uncoloured." />
+	</p>
+	<p>
+		2025-01-28
+		<img src="2025-01-28/banner.gif"
+			alt="The top of a soup can, partially opened, with the tab on top torn off. It is no longer easily openable, now." />
+	</p>
+	<p>
+		2025-01-29
+		<img src="2025-01-29/banner.gif" alt="A large, multi-meter wide parabolic antenna at night." />
+	</p>
+	<p>
+		2025-01-30 (miss)
+		<img src="2025-01-30/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-01-31 (miss)
+		<img src="2025-01-31/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-02-01
+		<img src="2025-02-01/banner.gif"
+			alt="A close up of two telephone poles standing close together. There is a small railroad tie sticking out of the one on the left." />
+	</p>
+	<p>
+		2025-02-02
+		<img src="2025-02-02/banner.gif"
+			alt="A traffic light pole with a sign reading 246th Ave. and a green lit traffic light. In the background there are multiple telephone poles with wires streaking through the frame" />
+	</p>
+	<p>
+		2025-02-03 (miss)
+		<img src="2025-02-03/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-02-04 (miss)
+		<img src="2025-02-04/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-02-05
+		<img src="2025-02-05/banner.gif"
+			alt="Four hazardous material placards on a truck. Two are of the flammable liquid variety, indicating Ethanol and Heptanes, another indicates &quot;miscellaneous hazardous liquids&quot;, and the last is empty." />
+	</p>
+	<p>
+		2025-02-06
+		<img src="2025-02-06/banner.gif"
+			alt="A downed log with rotted mostly in half, separating two ends. The bark is covered in green moss and there are dead leaves surrounding, and slightly burying, it." />
+	</p>
+	<p>
+		2025-02-07
+		<img src="2025-02-07/banner.gif"
+			alt="A photo from high above a forest of trees. It's winter and most of them are leafless except a short row of evergreen. In the distant background there is a pale blue lake." />
+	</p>
+	<p>
+		2025-02-08 (miss)
+		<img src="2025-02-08/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-02-09 (miss)
+		<img src="2025-02-09/banner.gif" alt="an entirely black image. this day was missed." />
+	</p>
+	<p>
+		2025-02-10
+		<img src="2025-02-10/banner.gif"
+			alt="a wide shot in the middle of a surface highway where the road dissolves into infinity. there is a long, very large cloud in the sky. it is just about the only one." />
+	</p>
+	<p>
+		2025-02-11
+		<img src="2025-02-11/banner.gif"
+			alt="A sign on a lightpole reading &quot;divided&quot; with an arrow going to the left. THe sign has been divided in half. There are tops of streetlights in the background." />
+	</p>
+	<p>
+		2025-02-12
+		<img src="2025-02-12/banner.gif"
+			alt="A telephone pole with a transformer mounted to it. The wires going from the arcing-across lines make it look quite busy. The sky behind it is clouded and looks like it wants to gently storm." />
+	</p>
 </section>
\ No newline at end of file
diff --git a/served/the-continuum/the-continuum.css b/served/the-continuum/the-continuum.css
index 5a0243b..80d49b1 100644
--- a/served/the-continuum/the-continuum.css
+++ b/served/the-continuum/the-continuum.css
@@ -11,4 +11,27 @@
 	#info {
 		grid-column: 1;
 	}
+}
+
+form {
+	width: fit-content;
+	float: right;
+	margin: 0 0 0.25rem 0.5rem;
+}
+
+fieldset {
+	border: 1px dashed var(--text-dim);
+	padding: 0.5rem 0.25rem;
+}
+
+@media (max-width: 58rem) {
+	form {
+		width: 100%;
+		margin: 0 0 1rem 0;
+	}
+
+	fieldset {
+		border-width: 1px 0 1px 0;
+		padding: 0.5rem 0;
+	}
 }
\ No newline at end of file
diff --git a/served/the-continuum/the-continuum.html b/served/the-continuum/the-continuum.html
index 685b672..77367f2 100644
--- a/served/the-continuum/the-continuum.html
+++ b/served/the-continuum/the-continuum.html
@@ -6,6 +6,26 @@ style=the-continuum.css
 ---
 [@paragraphs off]
 
+<script>
+	let domId = document.getElementById.bind(document);
+	window.addEventListener('DOMContentLoaded', () => {
+		domId('skipset').addEventListener('change', continuumSelect);
+		continuumSelect();
+	});
+
+	function continuumSelect() {
+		let dontskip = domId('dontskip').checked;
+		let skip = domId('skip').checked;
+
+		let src = "continuum.png";
+		if (skip) {
+			src = "skipmiss-continuum.png";
+		}
+
+		domId('continuum').src = src;
+	}
+</script>
+
 <section id="info">
 	<p>The Continuum takes the updated-daily banners from the home page, compresses
 		their height to 1 pixel tall, and adds them to an ever alive image.</p>
@@ -18,6 +38,22 @@ style=the-continuum.css
 	<p>I suspect since the images are not part of a larger work, like a movie, this
 		may devolve into chaos. I welcome chaos! It'd be neat to see seasonal changes,
 		though, or some kind of pattern emerge.</p>
+
+	<form>
+		<fieldset id="skipset">
+			<input type="radio" name="skipmiss" id="dontskip" value="dont" checked />
+			<label for="dontskip">don't skip misses</label>
+
+			<input type="radio" name="skipmiss" id="skip" value="skip" />
+			<label for="skip">skip misses</label>
+		</fieldset>
+	</form>
+
+	<p>Sometimes I miss a day, I'm only human. To view the image with missed days
+		as entirely black images, select the "don't skip misses" option. To not
+		include those days at all, select "skip misses".
+	</p>
 </section>
 
-<img src="continuum.png" alt="" />
\ No newline at end of file
+<img id="continuum" src="continuum.png"
+	alt="a chaotic, horizontally stripped image. each line has a sort of rough calmness to it, but mushed together it all looks very busy" />
\ No newline at end of file