diff options
Diffstat (limited to 'served/bits')
| -rw-r--r-- | served/bits/bits.css | 17 | ||||
| -rw-r--r-- | served/bits/bits.html | 48 | ||||
| -rw-r--r-- | served/bits/poem.css | 14 | ||||
| -rw-r--r-- | served/bits/ramen-bowl.html | 25 | ||||
| -rw-r--r-- | served/bits/scrap/scrap.css | 73 | ||||
| -rw-r--r-- | served/bits/scrap/scrap.html | 95 | ||||
| -rw-r--r-- | served/bits/smoems.html | 60 | ||||
| -rw-r--r-- | served/bits/touching-grass/grass.vtt | 5 | ||||
| -rw-r--r-- | served/bits/touching-grass/touching-grass.css | 45 | ||||
| -rw-r--r-- | served/bits/touching-grass/touching-grass.html | 80 |
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> — a poem about my ramen noodel bowl</li> + <li><a href="touching-grass/">touching-grass.html</a> — a short video with an exciteable description</li> + <li><a href="smoems.html">smoems.html</a> — 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 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. |