march 13th, 2024

this is what was published on the 10th, here.
https://amble.quest/notice/AfhzCKhLrynnNg5Qsi

10 files changed, 462 insertions, 0 deletions

diff --git a/served/bits/bits.css b/served/bits/bits.css
new file mode 100644
index 0000000..5e3000f
--- /dev/null
+++ b/served/bits/bits.css
@@ -0,0 +1,17 @@
+.list {
+	list-style-position: inside;
+	margin: 0;
+	padding: 0;
+}
+
+#two-up {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 1rem;
+}
+
+#two-up :nth-child(n) {
+	flex: 1 0 calc(var(--page-width) / 2 - 1rem);
+	max-width: 20rem;
+}
\ No newline at end of file
diff --git a/served/bits/bits.html b/served/bits/bits.html
new file mode 100644
index 0000000..0d94eec
--- /dev/null
+++ b/served/bits/bits.html
@@ -0,0 +1,48 @@
+---
+template=post
+title=Bits
+style=/styles/post.css
+style=poem.css
+style=bits.css
+---
+[@paragraphs off]
+<p>
+	Bits of my world presented as photos, poetry, or prose.
+</p>
+
+<ol class="list">
+	<li><a href="ramen-bowl.html">ramen-bowl.html</a> &mdash; a poem about my ramen noodel bowl</li>
+	<li><a href="touching-grass/">touching-grass.html</a> &mdash; a short video with an exciteable description</li>
+	<li><a href="smoems.html">smoems.html</a> &mdash; transplanted poems from twitter</li>
+</ol>
+
+<div id="two-up">
+	<section id="scrap">
+		<h2><a href="scrap/">scrap/</a></h2>
+		<img src="scrap/aeropostale-prehistory/dramatic_third.jpg" style="width: 100%">
+		<p>
+			bits of usually-metal that I find while walking around (or really just
+			happen upon). Collected and
+			photographed for your viewing pleasure :D
+		</p>
+	</section>
+
+	<section id="ramen-bowl">
+		<h2>Ramen Bowl</h2>
+		<pre>
+once daily, perchance twice
+i will have a ramen.
+flavoured beef, maybe chicken.
+
+in it goes tabasco, paprika.
+the packet of course.
+
+to wash the bowl takes so much.
+i do not wash the bowl.
+
+my ramens own a bowl.
+collecting flavour of the past!
+for the future now.
+	</pre>
+	</section>
+</div>
\ No newline at end of file
diff --git a/served/bits/poem.css b/served/bits/poem.css
new file mode 100644
index 0000000..9acade9
--- /dev/null
+++ b/served/bits/poem.css
@@ -0,0 +1,14 @@
+summary {
+	font-size: 2rem;
+}
+
+pre {
+	width: 100%;
+	white-space: break-spaces;
+	font-family: sans-serif;
+}
+
+pre.stacked {
+	border-top: 1px dashed var(--text-dim);
+	padding-top: 24px;
+}
\ No newline at end of file
diff --git a/served/bits/ramen-bowl.html b/served/bits/ramen-bowl.html
new file mode 100644
index 0000000..1820f74
--- /dev/null
+++ b/served/bits/ramen-bowl.html
@@ -0,0 +1,25 @@
+---
+template=post
+title=Ramen Bowl
+style=/styles/post.css
+style=poem.css
+publish=December 21st, 2023
+#Category poetry
+#Tags writing
+---
+[@paragraphs off]
+<pre>
+once daily, perchance twice
+i will have a ramen.
+flavoured beef, maybe chicken.
+
+in it goes tabasco, paprika.
+the packet of course.
+
+to wash the bowl takes so much.
+i do not wash the bowl.
+
+my ramens own a bowl.
+collecting flavour of the past!
+for the future now.
+</pre>
\ No newline at end of file
diff --git a/served/bits/scrap/scrap.css b/served/bits/scrap/scrap.css
new file mode 100644
index 0000000..c863c7b
--- /dev/null
+++ b/served/bits/scrap/scrap.css
@@ -0,0 +1,73 @@
+/* wide */
+@media (min-width: 44rem) {
+	.left {
+		float: left;
+		width: 50%;
+		margin: 0 16px 16px 0;
+	}
+
+	.right {
+		float: right;
+		width: 50%;
+		margin: 0 0 16px 16px;
+	}
+
+	.smright {
+		float: right;
+		width: 25%;
+		margin: 0 0 16px 16px;
+	}
+}
+
+/* narrow */
+@media (max-width: 44rem) {
+
+	.left,
+	.right {
+		display: block;
+		margin: 8px auto 16px auto;
+		width: min(50vh, 100%);
+	}
+
+	.smright {
+		float: right;
+		width: 96px;
+		margin: 0 0 16px 16px;
+	}
+}
+
+article {
+	overflow-y: auto;
+}
+
+article>header {
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	padding-bottom: 8px;
+	align-items: center;
+}
+
+header>h2 {
+	margin: 0;
+}
+
+header>time,
+header>p {
+	color: var(--text-dim);
+	height: min-content;
+}
+
+header>p {
+	font-style: italic;
+	margin: 0;
+}
+
+article>p {
+	margin-top: 0;
+	margin-bottom: 16px;
+}
+
+article>p:last-of-type {
+	margin-bottom: inherit;
+}
\ No newline at end of file
diff --git a/served/bits/scrap/scrap.html b/served/bits/scrap/scrap.html
new file mode 100644
index 0000000..0bf68ad
--- /dev/null
+++ b/served/bits/scrap/scrap.html
@@ -0,0 +1,95 @@
+---
+template=post
+title=Scrap
+style=scrap.css
+style=/styles/post.css
+---
+[@paragraphs off]
+
+<p>
+	I walk around a lot. Quite a bit, really! And I tend to notice weird little bits on the ground.
+	I pick these things up and cherish them.
+	And I'll catalog them here. My good little bits of scrap :D
+</p>
+
+<article id="wrench_2023-08-07">
+	<header>
+		<h2>Wrench</h2>
+		<time datetime="2023-08-07">Aug 7th, 2023</time>
+	</header>
+
+	<img src="wrench-2023-08-07/wrench_third.jpg" class="left" alt="a half-inch wrench sitting on an open palm." />
+	<p>
+		look at my wrench! I found it in a crack! Where a parking-lot-blacktop met the concrete transition
+		from the road. I'm quite surprised I saw it; It was very well hidden. While I was
+		walking over it I noticed a glimmer, kept walking, and then double-took with a
+		sort of "what was that?" And there it was!
+	</p>
+	<p>
+		It's of the half-inch variety, a crescent on one end and a box-head the other. Oh, it's just so good! A proper
+		spanner! This find elates me so.
+	</p>
+</article>
+
+<svg viewBox="0 0 1000 20" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"
+	style="height: 2em; width: 100%;" role="heading" aria-level="2" id="prehistory"> <!-- aria match h2 -->
+	<style>
+		.text {
+			font: italic 16px sans-serif;
+		}
+	</style>
+	<path d="M 0 11 L 1000 11" stroke="var(--text)" stroke-width="0.5"></path>
+	<rect x="462.5" y="0" width="77.5" height="20" fill="var(--background)" stroke="var(--background)" />
+	<text x="465" y="16" class="text" stroke="var(--text)" fill="var(--text)" stroke-width="0.1">prehistory</text>
+</svg>
+
+<article id="aeropostale-prehistory">
+	<header>
+		<h2>Belt Buckle</h2>
+		<p>time forgotten</p>
+	</header>
+
+	<img src="aeropostale-prehistory/dramatic_third.jpg" class="right"
+		alt="a belt buckle branded Aeropostale in cursive, stylized writing sitting on bricks." />
+	<p>
+		This little guy I found next to a brick, industrial building in Bensenville, Illinois. I was
+		very excited to find it! It's a belt buckle! That's so weird! How was it separated from
+		it's lengthy leather companion?
+	</p>
+	<p>
+		The body of the buckle seems to be some kind of stainless steel, but I can't be sure. It
+		has "Aéropostale" written on the frame where you might thread the belt material through.
+		The branding appears to be cast into it. The bar is very rusty and I would guess is a kind
+		of mild steel.
+	</p>
+</article>
+
+<article id="grace-prehistory">
+	<header>
+		<h2>Grace</h2>
+		<time datetime="2022-09">Sep, 2022</time>
+	</header>
+
+	<img src="grace-prehistory/top_third.jpg" class="left"
+		alt="a small, metal placard with the word grace written on it haphazardly in varying tones of grey. there is a color test chart in the top-left corner." />
+	<p>
+		I found this walking through an under-construction bike path. It was mysteriously lying in a mound of dirt along
+		the path.
+	</p>
+	<p>
+		The metal feels lighter than steel and it's not magnetic; it might be made of aluminum? The writing feels rough.
+		I think
+		it's an etching or engraving.
+	</p>
+	<img src="grace-prehistory/testchart_quarter.jpg" class="smright"
+		alt="The top-left corner of the placard cropped on the colour chart" />
+	<p>
+		The little colour test chart is very interesting. Along the top it's labelled A through D
+		and the side 1 through 6. Only sixteen of the positions appear to have a colour. Most are
+		shades of yellow or grey. A-2 is a very nice blue, C-5 a pleasing pink. They get darker as
+		the rows go down, the sixth being too dark to make out much hue.
+	</p>
+</article>
+
+<p style="font-style: italic; max-width: 20rem; margin: 0 auto">i have lots more prehistory to add as i go through my
+	little box and take photos</p>
\ No newline at end of file
diff --git a/served/bits/smoems.html b/served/bits/smoems.html
new file mode 100644
index 0000000..2c52476
--- /dev/null
+++ b/served/bits/smoems.html
@@ -0,0 +1,60 @@
+---
+template=post
+title=Small Poems
+style=/styles/post.css
+style=poem.css
+publish=June 16th, 2023
+#Category poetry
+#Tags writing
+---
+[@paragraphs off]
+<p>
+	small poems; here they are! i posted most of them before to twitter, but that's for the birds.
+</p>
+
+<hr />
+
+<!-- https://twitter.com/gennyble/status/1669872284360757249 -->
+<!-- in stillness -->
+<pre>
+too much walking
+made these feet real sore.
+but the stillness was mocking
+so i did a little more.
+
+just now a dull ache
+as 've worn away the pain
+we now all understand
+in stillness, there's no gain
+</pre>
+
+<hr />
+
+<!-- https://twitter.com/gennyble/status/1572451953111859203 -->
+<!-- running in the street -->
+<pre>
+i went for a walk tonight but
+	i walked too fast;
+i jogged down the middle of the street and
+	took a stride too big;
+i ran with arms pumping much too hard; i sprinted and
+i lost
+my legs.
+my breath
+left me.
+i hovered—
+i flew.
+</pre>
+
+<hr />
+
+<!-- https://twitter.com/gennyble/status/1648470625999273984 -->
+<pre>
+in which she drank two monster
+(and ten ounces coffee)
+in which she looks for her w-2.
+(well, is supposed to be).
+in which she's lost track of time
+(and her place therein).
+in which she types to you from her car.
+</pre>
\ No newline at end of file
diff --git a/served/bits/touching-grass/grass.vtt b/served/bits/touching-grass/grass.vtt
new file mode 100644
index 0000000..c77f0c3
--- /dev/null
+++ b/served/bits/touching-grass/grass.vtt
@@ -0,0 +1,5 @@
+WEBVTT
+
+1
+00:00:01.250 --> 00:00:02.750 line:85%
+[grass ripping]
\ No newline at end of file
diff --git a/served/bits/touching-grass/touching-grass.css b/served/bits/touching-grass/touching-grass.css
new file mode 100644
index 0000000..765d1ea
--- /dev/null
+++ b/served/bits/touching-grass/touching-grass.css
@@ -0,0 +1,45 @@
+.mark {
+	color: var(--color-a);
+	cursor: pointer;
+}
+
+.mark:before,
+.mark:after {
+	color: var(--text-dim);
+}
+
+.mark:before {
+	content: '[';
+}
+
+.mark:after {
+	content: ']';
+}
+
+a[download] {
+	color: var(--color-a-dim);
+}
+
+.small,
+a[download] {
+	font-size: 0.75rem;
+}
+
+ul {
+	display: flex;
+
+	padding: 0;
+	margin: 0;
+
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 8px;
+
+	align-items: baseline;
+
+	list-style: none;
+}
+
+#long {
+	flex-grow: 2;
+}
\ No newline at end of file
diff --git a/served/bits/touching-grass/touching-grass.html b/served/bits/touching-grass/touching-grass.html
new file mode 100644
index 0000000..a57cbd2
--- /dev/null
+++ b/served/bits/touching-grass/touching-grass.html
@@ -0,0 +1,80 @@
+---
+template=post
+title=Touching Grass
+style=touching-grass.css
+style=/styles/post.css
+#Publish 2023-07-29 17:46 -0500
+#Category video
+#Tags writing
+#QuarkedUp
+---
+[@paragraphs off]
+<section style="width: 100%; text-align: right; padding: 8px 0">
+	<video id="grass" controls width="100%" poster="grass_poster.jpg" preload="metadata" loop>
+		<source src="grass_720p.mp4" type="video/mp4" />
+		<track default src="grass.vtt" />
+	</video>
+	<ul>
+		<li class="small">download</li>
+		<li><a href="grass.mp4" download>[1080p | 7.1MB]</a></li>
+		<li><a href="grass_720p.mp4" download>[720p | 1.9MB]</a></li>
+		<li id="long"></li>
+		<li><input type="checkbox" checked id="loop"><label> loop video?</label></input></li>
+	</ul>
+</section>
+
+<script>
+	document.addEventListener("DOMContentLoaded", setup);
+
+	const video = document.getElementById("grass");
+	function setup() {
+		let marks = document.getElementsByClassName("mark");
+		for (let i = 0; i < marks.length; ++i) {
+			marks[i].addEventListener('click', markClick)
+		}
+		console.log(marks);
+
+		let loop = document.getElementById('loop');
+		loop.addEventListener('change', loopChanged)
+
+		// Fire once with a fake event so we aren't desynced
+		loopChanged({ 'target': loop });
+	}
+
+	function markClick(event) {
+		let target = event.target;
+		let time = parseFloat(target.getAttribute('data-time'));
+		console.log(`seeking to ${time}`)
+		video.currentTime = time;
+	}
+
+	function loopChanged(event) {
+		let target = event.target;
+		let checked = target.checked;
+		console.log(`video looping: ${checked}`);
+		video.loop = checked;
+	}
+</script>
+[@paragraphs on]
+
+I took this short video to send to a friend one day and accidentally
+made a 106 frame masterpiece. Well, that's hyperbolic, but there's a
+lot I enjoy about it.
+
+[#the-colours]
+The contrast between my orange painted nails and the surprisingly
+green grass is pretty pleasing. I think the gentle brown of the brick
+in the bottom-left corner helps keep from an overwhelming greenery.
+Thanks bricks :)
+
+[#the-composition]
+The accidental camera movement is nice, too. I like the angle the camera is at and the way it wobbles.
+It's clearly hand-held. At <span class="mark" data-time="1.3">1.3-ish-seconds</span>
+you can see I gently sway forward, but seem to be less wobbly. <i>I'm braced;
+I'm stable! I have-three-points-of-contact-with-the-ground!</i> Then, at roughly
+<span class="mark" data-time="1.9">2&nbsp;seconds</span> when the grass finally
+yields, I get rocked back and wobbles resume.
+
+[#the-sound]
+The sound! And the sound. The ripping of the grass. That planty matter finally giving way. The fibrous tearing.
+I just like it; I enjoy it! I greatly appreciate it.