3 files changed, 130 insertions, 0 deletions
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.