drone build Sun Sep 20 15:08:31 PDT 2026
This commit is contained in:
+124
-16
@@ -40,7 +40,80 @@
|
||||
|
||||
|
||||
|
||||
<style>.post-metadata {
|
||||
<style>#toc {
|
||||
float: right;
|
||||
margin: 1rem 0 1.5rem 1.5rem;
|
||||
width: min(calc(100% - 1.5rem), 23rem);
|
||||
/* 23rem is the width of the words 'table of contents' in my header font */
|
||||
/* yes, it's a bit hacky */
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
#toc {
|
||||
float: unset;
|
||||
margin-top: 2rem;
|
||||
margin-left: .5rem;
|
||||
width: calc(100% - .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
#toc details {
|
||||
border: thick solid var(--color-pink);
|
||||
border-radius: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#toc summary {
|
||||
position: relative;
|
||||
top: -1.5rem;
|
||||
left: -.75rem;
|
||||
width: fit-content;
|
||||
background: var(--color-bg);
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
#toc summary:focus-visible {
|
||||
outline: .15rem solid var(--color-teal);
|
||||
}
|
||||
|
||||
#toc summary::marker {
|
||||
font-size: 2.35rem;
|
||||
}
|
||||
|
||||
#toc h2 {
|
||||
margin-top: 0;
|
||||
display: inline;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#toc nav {
|
||||
position: relative;
|
||||
top: -1.25rem;
|
||||
}
|
||||
|
||||
#toc li {
|
||||
margin-block: .45rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
#toc nav > ol {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* basically we want to style this `ol` as a `ul` */
|
||||
#toc ol > li {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li > ol > li {
|
||||
list-style: square;
|
||||
}
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
|
||||
color-scheme: light dark;
|
||||
|
||||
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
|
||||
/* if you change the header font, go to post-toc.css and fuck about with the width
|
||||
of the table of contents */
|
||||
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
|
||||
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
|
||||
|
||||
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article data-pagefind-body="">
|
||||
<h1 id="moving-images">moving images</h1>
|
||||
<h1>moving images</h1>
|
||||
|
||||
<div class="post-metadata">
|
||||
<p>
|
||||
@@ -1843,8 +1917,41 @@ switch (currentThemeValue) {
|
||||
<img class="hero" src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
|
||||
<h2 id="problem-statement">problem statement</h2>
|
||||
<p>today I decided to finally clean up the <code>assets/img</code> directory for this site. Since 2022, when I started this project, I've just been adding images directly to that directory with no further segmentation - messy of me, I know! It's gotten unwieldy and I'm starting to get worried about generic names leading to duplicates at some point, particularly for the non-gallery images where I have a tendency to <a href="/stationery-exchange">use</a> <a href="/favorite-git-flag">lots</a> <a href="/trans-networks">of</a> <a href="/no-politics">mushroom</a> <a href="/domain-and-site-setup">images</a>.</p>
|
||||
|
||||
|
||||
<aside id="toc">
|
||||
<details>
|
||||
<summary><h2>table of contents</h2></summary>
|
||||
<nav class="toc">
|
||||
<ol>
|
||||
|
||||
<li><a href="#problem-statement">problem statement</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#find">find</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#grep">grep</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#cut">cut</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#sed">sed</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#mving-and-shaking">mving and shaking</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#result">result</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<h2 id="problem-statement">problem statement</h2>
|
||||
<p>today I decided to finally clean up the <code>assets/img</code> directory for this site. Since 2022, when I started this project, I've just been adding images directly to that directory with no further segmentation - messy of me, I know! It's gotten unwieldy and I'm starting to get worried about generic names leading to duplicates at some point, particularly for the non-gallery posts where I have a tendency to <a href="/stationery-exchange">use</a> <a href="/my-favorite-git-flag">lots</a> <a href="/networks-of-trans-care">of</a> <a href="/no-politics-wip">mushroom</a> <a href="/domain-and-site-setup">images</a>.</p>
|
||||
<p>so it's time to move them into year-based folders. Let's talk about how I did that. <code>bash</code> away!</p>
|
||||
<p>(want to <a href="#result">skip right to the completed script?</a>)</p>
|
||||
<h2 id="find"><code>find</code></h2>
|
||||
@@ -1917,6 +2024,7 @@ switch (currentThemeValue) {
|
||||
<span class="token keyword">done</span></code></pre>
|
||||
<p>questions? errors? <a href="/contact">ping me!</a></p>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
@@ -1954,28 +2062,26 @@ switch (currentThemeValue) {
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<h2 data-ha-exclude="">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
|
||||
<a class="postlink" href="/backend-accessibility/">
|
||||
<h2 data-ha-exclude="">backend accessibility </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gender-in-data-models/">
|
||||
<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models </h2>
|
||||
<h2 data-ha-exclude="">gender in data models </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1992,15 +2098,17 @@ switch (currentThemeValue) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/my-favorite-git-flag/">
|
||||
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </h2>
|
||||
<a class="postlink" href="/azure-locations-and-file-crawling/">
|
||||
<h2 data-ha-exclude="">azure locations and file crawling </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy." loading="lazy" decoding="async" width="1000" height="827">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -2057,6 +2165,6 @@ switch (currentThemeValue) {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/moving-images/` was built on 2026-09-20T00:40:39.763Z -->
|
||||
<!-- This page `/moving-images/` was built on 2026-09-20T22:08:14.587Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
