Compare commits
4 Commits
3848af101b
...
9249a6e050
| Author | SHA1 | Date | |
|---|---|---|---|
| 9249a6e050 | |||
| 7d1fe776c7 | |||
| c4b549bc75 | |||
| 6203735ff8 |
@ -6,11 +6,50 @@ export default function(eleventyConfig) {
|
||||
return Object.keys(target);
|
||||
});
|
||||
|
||||
/* Exclude all posts with given URLs from a collection list */
|
||||
eleventyConfig.addFilter("excludeFromCollection", function (collection=[], urls=[this.ctx.page.url]) {
|
||||
return collection.filter(post => urls.indexOf(post.url) === -1);
|
||||
});
|
||||
|
||||
/* Filter a collection by a set of tags, returning any that share one or more tags */
|
||||
eleventyConfig.addFilter("filterByTags", function(collection=[], ...requiredTags) {
|
||||
return collection.filter(post => {
|
||||
return requiredTags.flat().some(tag => post.data.tags.includes(tag));
|
||||
});
|
||||
});
|
||||
|
||||
/* Return n elements from a list */
|
||||
eleventyConfig.addFilter("head", (collection=[], n) => {
|
||||
if(!Array.isArray(collection) || collection.length === 0) {
|
||||
return [];
|
||||
}
|
||||
if( n < 0 ) {
|
||||
return collection.slice(n);
|
||||
}
|
||||
|
||||
return collection.slice(0, n);
|
||||
});
|
||||
|
||||
|
||||
/* For <time> elements */
|
||||
eleventyConfig.addFilter("htmlDateString", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
|
||||
});
|
||||
|
||||
/* What it says on the tin */
|
||||
eleventyConfig.addFilter("randomize", function(array) {
|
||||
// Create a copy of the array to avoid modifying the original
|
||||
let shuffledArray = array.slice();
|
||||
|
||||
// Fisher-Yates shuffle algorithm
|
||||
for (let i = shuffledArray.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
|
||||
}
|
||||
|
||||
return shuffledArray;
|
||||
});
|
||||
|
||||
/* Human-readable dates */
|
||||
eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
|
||||
@ -22,12 +61,12 @@ export default function(eleventyConfig) {
|
||||
return tags.filter(tag => ["all", "posts", "gallery", "reference", "tagPagination"].indexOf(tag) === -1);
|
||||
});
|
||||
|
||||
/* What it says */
|
||||
/* What it says on the tin */
|
||||
eleventyConfig.addFilter("sortAlphabetically", strings =>
|
||||
(strings || []).sort((b, a) => b.localeCompare(a))
|
||||
);
|
||||
|
||||
/* Remove year from image filenames for OG metadata */
|
||||
/* Remove year from image filenames for OG metadata file path */
|
||||
eleventyConfig.addFilter("toOgFilename", (filename) => {
|
||||
return filename.split("/")[1];
|
||||
});
|
||||
|
||||
@ -41,8 +41,6 @@
|
||||
|
||||
<main id="main">
|
||||
{{ content | safe }}
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
{% include "footer.njk" %}
|
||||
|
||||
@ -3,6 +3,7 @@ layout: base.njk
|
||||
---
|
||||
{% css %}{% include "css/post.css" %}{% endcss %}
|
||||
{% css %}{% include "css/highlighting.css" %}{% endcss %}
|
||||
{% css %}{% include "css/lists.css" %}{% endcss %}
|
||||
{% js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
@ -43,4 +44,16 @@ layout: base.njk
|
||||
{% set newerTitle = newerPost.data.title %}
|
||||
{% set inPost = true %}
|
||||
{% include "pagination.njk" %}
|
||||
|
||||
<hr>
|
||||
|
||||
{% set relevantTags = tags | removeBasicTags %}
|
||||
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection([page.url, olderHref, newerHref]) | randomize | head(3) %}
|
||||
{% if postlist.length %}
|
||||
<section class="related-posts">
|
||||
<h2>related posts</h2>
|
||||
{% include "postlist.njk" %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,8 +1174,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1201,6 +1198,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/1/` was built on 2026-02-20T06:18:27.067Z -->
|
||||
<!-- This page `/1/` was built on 2026-02-20T16:35:29.525Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1197,8 +1196,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1223,6 +1220,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/10/` was built on 2026-02-20T06:18:30.751Z -->
|
||||
<!-- This page `/10/` was built on 2026-02-20T16:35:33.372Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1209,8 +1208,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1235,6 +1232,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/11/` was built on 2026-02-20T06:18:31.061Z -->
|
||||
<!-- This page `/11/` was built on 2026-02-20T16:35:33.595Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1203,8 +1202,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1229,6 +1226,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/12/` was built on 2026-02-20T06:18:31.250Z -->
|
||||
<!-- This page `/12/` was built on 2026-02-20T16:35:33.731Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1183,8 +1182,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1209,6 +1206,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/13/` was built on 2026-02-20T06:18:31.407Z -->
|
||||
<!-- This page `/13/` was built on 2026-02-20T16:35:33.964Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1091,8 +1090,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1117,6 +1114,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/14/` was built on 2026-02-20T06:18:31.534Z -->
|
||||
<!-- This page `/14/` was built on 2026-02-20T16:35:34.145Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1181,8 +1180,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1207,6 +1204,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/2/` was built on 2026-02-20T06:18:28.580Z -->
|
||||
<!-- This page `/2/` was built on 2026-02-20T16:35:31.046Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1189,8 +1188,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1215,6 +1212,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/3/` was built on 2026-02-20T06:18:28.943Z -->
|
||||
<!-- This page `/3/` was built on 2026-02-20T16:35:31.423Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1177,8 +1176,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1203,6 +1200,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/4/` was built on 2026-02-20T06:18:29.245Z -->
|
||||
<!-- This page `/4/` was built on 2026-02-20T16:35:31.754Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -80,8 +80,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -102,7 +100,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -121,7 +119,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -130,6 +127,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -291,13 +292,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -313,9 +310,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -508,6 +506,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -978,8 +977,6 @@ export { HeadingAnchors }</script>
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1004,6 +1001,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/404.html` was built on 2026-02-20T06:18:26.029Z -->
|
||||
<!-- This page `/404.html` was built on 2026-02-20T16:35:28.447Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1179,8 +1178,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1205,6 +1202,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/5/` was built on 2026-02-20T06:18:29.439Z -->
|
||||
<!-- This page `/5/` was built on 2026-02-20T16:35:32.028Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1185,8 +1184,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1211,6 +1208,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/6/` was built on 2026-02-20T06:18:29.756Z -->
|
||||
<!-- This page `/6/` was built on 2026-02-20T16:35:32.302Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1179,8 +1178,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1205,6 +1202,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/7/` was built on 2026-02-20T06:18:30.059Z -->
|
||||
<!-- This page `/7/` was built on 2026-02-20T16:35:32.618Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,8 +1174,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1201,6 +1198,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/8/` was built on 2026-02-20T06:18:30.289Z -->
|
||||
<!-- This page `/8/` was built on 2026-02-20T16:35:32.782Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1219,8 +1218,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1245,6 +1242,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/9/` was built on 2026-02-20T06:18:30.443Z -->
|
||||
<!-- This page `/9/` was built on 2026-02-20T16:35:33.069Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="aarons-mask">aaron's mask</h1>
|
||||
@ -1234,10 +1452,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/tooled-leather-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="tooled-leather-patches">tooled leather patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gradient-purse-strap/">
|
||||
|
||||
<img src="/img/gradient-purse-strap.jpg" alt="a coiled up purse strap in gradient cool colors - we can see green, teal, indigo, and a slightly pinkish purple. It has brass hardware and is stiched along its length with cream stitches." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="gradient-purse-strap">gradient purse strap</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/circle-bag/">
|
||||
|
||||
<img src="/img/circle-bag.jpg" alt="A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="circle-bag">circle bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1537,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/aarons-mask/` was built on 2026-02-20T06:18:26.058Z -->
|
||||
<!-- This page `/aarons-mask/` was built on 2026-02-20T16:35:28.482Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -80,8 +80,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -102,7 +100,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -121,7 +119,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -130,6 +127,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -291,13 +292,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -313,9 +310,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -508,6 +506,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1095,8 +1094,6 @@ export { HeadingAnchors }</script>
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1121,6 +1118,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/about/` was built on 2026-02-20T06:18:26.029Z -->
|
||||
<!-- This page `/about/` was built on 2026-02-20T16:35:28.447Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="acadia-coloring-journal">Acadia coloring journal</h1>
|
||||
@ -1250,10 +1468,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/green-memo-pad/">
|
||||
|
||||
<img src="/img/green-memo-pad.jpg" alt="A three panel collage showcasing a small green memo pad." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="green-memo-pad">green memo pad</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/square-watercolor-pad/">
|
||||
|
||||
<img src="/img/square-watercolor-pad.jpg" alt="A two panel collage showing a square book with a tan cover and blue and gold endpapers." loading="lazy" decoding="async" width="1000" height="1331">
|
||||
|
||||
<h2 id="square-watercolor-pad">square watercolor pad</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/flocked-notebook/">
|
||||
|
||||
<img src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
|
||||
|
||||
<h2 id="flocked-notebook">flocked notebook</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1278,6 +1551,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/acadia-coloring-journal/` was built on 2026-02-20T06:18:26.031Z -->
|
||||
<!-- This page `/acadia-coloring-journal/` was built on 2026-02-20T16:35:28.449Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="acadia-mitts">acadia mitts</h1>
|
||||
@ -1234,10 +1452,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/butch-hands-pattern/">
|
||||
|
||||
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="butch-hands-pattern">butch hands pattern</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/knit-shrimp/">
|
||||
|
||||
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="knit-shrimp">knit shrimp</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/sideways-canvas-shirt/">
|
||||
|
||||
<img src="/img/sideways-canvas.jpg" alt="someone's torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it's notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
|
||||
|
||||
<h2 id="sideways-canvas-shirt">sideways canvas shirt</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1537,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/acadia-mitts/` was built on 2026-02-20T06:18:26.066Z -->
|
||||
<!-- This page `/acadia-mitts/` was built on 2026-02-20T16:35:28.478Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="an-intro-to-git">an intro to git</h1>
|
||||
@ -1649,10 +1867,65 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/my-favorite-git-flag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="my-favorite-git-flag">my favorite git flag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/eleventy-lessons/">
|
||||
|
||||
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="eleventy-lessons">eleventy lessons</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/domain-and-site-setup/">
|
||||
|
||||
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="domain-and-site-setup">domain and site setup</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1677,6 +1950,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/an-intro-to-git/` was built on 2026-02-20T06:18:26.069Z -->
|
||||
<!-- This page `/an-intro-to-git/` was built on 2026-02-20T16:35:28.472Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="anarchy-autism">anarchy autism</h1>
|
||||
@ -1256,10 +1474,75 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/squarsh/">
|
||||
|
||||
<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="squarsh">squarsh</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/five-of-them/">
|
||||
|
||||
<img src="/img/five-of-them-print.jpg" alt="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing." loading="lazy" decoding="async" width="1000" height="594">
|
||||
|
||||
<h2 id="five-of-them">five of them</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/trans-wrongs-skull/">
|
||||
|
||||
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="trans-wrongs-skull">trans wrongs skull</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1284,6 +1567,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/anarchy-autism/` was built on 2026-02-20T06:18:26.046Z -->
|
||||
<!-- This page `/anarchy-autism/` was built on 2026-02-20T16:35:28.464Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="art-shows-and-events">art shows and events</h1>
|
||||
@ -1247,10 +1465,15 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1275,6 +1498,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/art-shows-and-events/` was built on 2026-02-20T06:18:26.065Z -->
|
||||
<!-- This page `/art-shows-and-events/` was built on 2026-02-20T16:35:28.477Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="artisans-cooperative-cards">artisans cooperative cards</h1>
|
||||
@ -1241,10 +1459,75 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/hummingbird-become-ungovernable/">
|
||||
|
||||
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads 'become ungovernable'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="hummingbird-become-ungovernable">hummingbird become ungovernable</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/slightly-weird-man-club/">
|
||||
|
||||
<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads 'slightly weird man club' in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="slightly-weird-man-club">slightly weird man club</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/flatfish/">
|
||||
|
||||
<img src="/img/flatfish-print.jpg" alt="A print of a simple flatfish design inked in sepia." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="flatfish">flatfish</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1269,6 +1552,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/artisans-cooperative-cards/` was built on 2026-02-20T06:18:26.044Z -->
|
||||
<!-- This page `/artisans-cooperative-cards/` was built on 2026-02-20T16:35:28.461Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="artisans-cooperative-shirts">artisans cooperative shirts</h1>
|
||||
@ -1242,10 +1460,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/euphorbia/">
|
||||
|
||||
<img src="/img/euphorbia-print.jpg" alt="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="euphorbia">euphorbia</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/become-unbutterable/">
|
||||
|
||||
<img src="/img/become-unbutterable.jpg" alt="3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, 'become unbutterable.'" loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="become-unbutterable">become unbutterable</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="pronoun-patches">pronoun patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1270,6 +1547,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-02-20T06:18:26.045Z -->
|
||||
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-02-20T16:35:28.463Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="artists-conk">artists conk!</h1>
|
||||
@ -1225,10 +1443,15 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1253,6 +1476,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/artists-conk/` was built on 2026-02-20T06:18:26.050Z -->
|
||||
<!-- This page `/artists-conk/` was built on 2026-02-20T16:35:28.467Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="azure-locations-and-file-crawling">azure locations and file crawling</h1>
|
||||
@ -1465,10 +1683,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handedness-toggle/">
|
||||
|
||||
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
|
||||
|
||||
<h2 id="handedness-toggle">handedness toggle</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/little-critter-pouch/">
|
||||
|
||||
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="little-critter-pouch">little critter pouch</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/textures-unite/">
|
||||
|
||||
<img src="/img/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
|
||||
|
||||
<h2 id="textures-unite">textures unite</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1493,6 +1770,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-02-20T06:18:26.065Z -->
|
||||
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-02-20T16:35:28.476Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="backend-accessibility">backend accessibility</h1>
|
||||
@ -1295,10 +1513,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/eleventy-lessons/">
|
||||
|
||||
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="eleventy-lessons">eleventy lessons</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/redirections/">
|
||||
|
||||
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
|
||||
|
||||
<h2 id="redirections">redirections</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1323,6 +1598,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/backend-accessibility/` was built on 2026-02-20T06:18:26.039Z -->
|
||||
<!-- This page `/backend-accessibility/` was built on 2026-02-20T16:35:28.455Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="bag-strap">bag strap</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/patchwork-wallet/">
|
||||
|
||||
<img src="/img/patchwork-wallet.jpg" alt="A collage showing a wallet in a patchwork style, with different colors of leather all stitched together to make up the exterior and the top interior pockets. Other pockets inside are dyed various colors." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="patchwork-wallet">patchwork wallet</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/vix-collar/">
|
||||
|
||||
<img src="/img/vix-collar.jpg" alt="A collar rests on a leather-wrapped lighter. It is lined with shearling and built of two other layers of leather - a wider mustard yellow layer and a thinner teal layer over that. the teal layer holds a heart shaped o-ring in place." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="vix-collar">vix collar</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/vertical-bifold/">
|
||||
|
||||
<img src="/img/vertical-bifold.jpg" alt="A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
<h2 id="vertical-bifold">vertical bifold</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bag-strap/` was built on 2026-02-20T06:18:26.050Z -->
|
||||
<!-- This page `/bag-strap/` was built on 2026-02-20T16:35:28.467Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="baseball-journal">baseball journal</h1>
|
||||
@ -1244,10 +1462,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/square-watercolor-pad/">
|
||||
|
||||
<img src="/img/square-watercolor-pad.jpg" alt="A two panel collage showing a square book with a tan cover and blue and gold endpapers." loading="lazy" decoding="async" width="1000" height="1331">
|
||||
|
||||
<h2 id="square-watercolor-pad">square watercolor pad</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/lined-notebook/">
|
||||
|
||||
<img src="/img/lined-notebook.jpg" alt="A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="lined-notebook">lined notebook</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/blue-and-brown-leather-journal/">
|
||||
|
||||
<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="blue-and-brown-leather-journal">blue and brown leather journal</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1272,6 +1545,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/baseball-journal/` was built on 2026-02-20T06:18:26.041Z -->
|
||||
<!-- This page `/baseball-journal/` was built on 2026-02-20T16:35:28.457Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="become-unbutterable">become unbutterable</h1>
|
||||
@ -1241,10 +1459,73 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/anarchy-autism/">
|
||||
|
||||
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="anarchy-autism">anarchy autism</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/luminescent/">
|
||||
|
||||
<img src="/img/luminescent-print.jpg" alt="A print of a tattooed woman in bright highlighter yellow underwear." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="luminescent">luminescent</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/seedling/">
|
||||
|
||||
<img src="/img/seedling-print.jpg" alt="A print of a 3-stage design of a green seedling barely open, starting to straighten up, and growing strong, with little piles of dirt beneath each one." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="seedling">seedling</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1269,6 +1550,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/become-unbutterable/` was built on 2026-02-20T06:18:26.031Z -->
|
||||
<!-- This page `/become-unbutterable/` was built on 2026-02-20T16:35:28.448Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="bfl-silk-handspun">BFL/silk handspun</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spinners-dream-handspun/">
|
||||
|
||||
<img src="/img/spinners-dream-handspun.jpg" alt="a skein of a lightly variegated grey yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="spinners-dream-handspun">spinner's dream handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/rambouillet-handspun/">
|
||||
|
||||
<img src="/img/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="rambouillet-handspun">rambouillet handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handcombed-jacobs-handspun/">
|
||||
|
||||
<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bfl-silk-handspun/` was built on 2026-02-20T06:18:26.069Z -->
|
||||
<!-- This page `/bfl-silk-handspun/` was built on 2026-02-20T16:35:28.473Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="big-pidge">big pidge</h1>
|
||||
@ -1251,10 +1469,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
|
||||
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="nonbinary-flag">nonbinary flag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/squarsh/">
|
||||
|
||||
<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="squarsh">squarsh</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/loon/">
|
||||
|
||||
<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="loon">loon</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1279,6 +1556,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/big-pidge/` was built on 2026-02-20T06:18:26.040Z -->
|
||||
<!-- This page `/big-pidge/` was built on 2026-02-20T16:35:28.456Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="block-printing-transfer-method">block printing transfer method</h1>
|
||||
@ -1265,10 +1483,15 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1293,6 +1516,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/block-printing-transfer-method/` was built on 2026-02-20T06:18:26.039Z -->
|
||||
<!-- This page `/block-printing-transfer-method/` was built on 2026-02-20T16:35:28.455Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="blue-and-brown-leather-journal">blue and brown leather journal</h1>
|
||||
@ -1250,10 +1468,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/orange-journal/">
|
||||
|
||||
<img src="/img/orange-journal.jpg" alt="A three panel collage showcasing a small book with foldout pages and a bright orange cover." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="orange-journal">orange journal</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/baseball-journal/">
|
||||
|
||||
<img src="/img/baseball-journal.jpg" alt="A 3-part collage of a leather-covered book with baseball-style stitching across the spine." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="baseball-journal">baseball journal</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/leather-long-stitch-journals/">
|
||||
|
||||
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="leather-long-stitch-journals">leather long-stitch journals</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1278,6 +1553,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-02-20T06:18:26.032Z -->
|
||||
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-02-20T16:35:28.449Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery)</h1>
|
||||
@ -1244,10 +1462,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/hummingbird-become-ungovernable/">
|
||||
|
||||
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads 'become ungovernable'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="hummingbird-become-ungovernable">hummingbird become ungovernable</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/loon/">
|
||||
|
||||
<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="loon">loon</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/networks-of-trans-care/">
|
||||
|
||||
<img src="/img/mushrooms-and-moss.jpg" alt="Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="networks-of-trans-care">networks of trans care</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1272,6 +1549,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-02-20T06:18:26.062Z -->
|
||||
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-02-20T16:35:28.486Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="bottom-growth">bottom growth</h1>
|
||||
@ -1239,10 +1457,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fd-signifier-and-oppositional-sexism/">
|
||||
|
||||
<img src="/img/sheep.jpg" alt="Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field." loading="lazy" decoding="async" width="1000" height="450">
|
||||
|
||||
<h2 id="fd-signifier-and-oppositional-sexism">fd signifier & oppositional sexism</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/on-pronouns/">
|
||||
|
||||
<img src="/img/starling.jpg" alt="Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="on-pronouns">on pronouns</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/trans-the-world/">
|
||||
|
||||
<img src="/img/trans-the-world-print.jpg" alt="A print that reads 'trans the world' surrounding an image of a globe and a trans symbol. It's in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="trans-the-world">trans the world</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1267,6 +1544,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bottom-growth/` was built on 2026-02-20T06:18:26.059Z -->
|
||||
<!-- This page `/bottom-growth/` was built on 2026-02-20T16:35:28.483Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="bowtie">bowtie</h1>
|
||||
@ -1234,10 +1452,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fishhook-pride-keychains/">
|
||||
|
||||
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="fishhook-pride-keychains">fishhook pride keychains</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/bag-strap/">
|
||||
|
||||
<img src="/img/bag-strap.jpg" alt="A nylon webbing shoulder strap in bright teal with clips on each end." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="bag-strap">bag strap</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/triangle-pouch/">
|
||||
|
||||
<img src="/img/triangle-pouch.jpg" alt="5 small triangular pouches made of leather in two sizes and various colors." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="triangle-pouch">triangle pouch</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1537,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bowtie/` was built on 2026-02-20T06:18:26.060Z -->
|
||||
<!-- This page `/bowtie/` was built on 2026-02-20T16:35:28.484Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="boypussy">boypussy</h1>
|
||||
@ -1261,10 +1479,73 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/flicker/">
|
||||
|
||||
<img src="/img/flicker-print.jpg" alt="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder)." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="flicker">flicker</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gender/">
|
||||
|
||||
<img src="/img/gender-notes.png" alt="A page of handwritten notes with some loosely drawn charts, described further in the post." loading="lazy" decoding="async" width="865" height="1080">
|
||||
|
||||
<h2 id="gender">gender?</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/coming-out/">
|
||||
|
||||
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading 'congrats on coming out of your shell'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="coming-out">coming out</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1289,6 +1570,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/boypussy/` was built on 2026-02-20T06:18:26.044Z -->
|
||||
<!-- This page `/boypussy/` was built on 2026-02-20T16:35:28.462Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="brookes-collar">brooke's collar</h1>
|
||||
@ -1234,10 +1452,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/snap-pouch/">
|
||||
|
||||
<img src="/img/snap-pouches.jpg" alt="4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="snap-pouch">snap pouch</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/moss-harness/">
|
||||
|
||||
<img src="/img/moss-harness.jpg" alt="A nylon webbing harness in bright teal laid out on a desk." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="moss-harness">moss harness</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/dragon-mask/">
|
||||
|
||||
<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
|
||||
|
||||
<h2 id="dragon-mask">dragon mask</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1537,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-collar/` was built on 2026-02-20T06:18:26.050Z -->
|
||||
<!-- This page `/brookes-collar/` was built on 2026-02-20T16:35:28.468Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="brookes-cuff-bracelets">brooke's cuff bracelets</h1>
|
||||
@ -1234,10 +1452,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/soras-collar/">
|
||||
|
||||
<img src="/img/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It's fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="soras-collar">sora's collar</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/little-critter-pouch/">
|
||||
|
||||
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="little-critter-pouch">little critter pouch</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1539,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-02-20T06:18:26.058Z -->
|
||||
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-02-20T16:35:28.482Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="brookes-notebook">brooke's notebook</h1>
|
||||
@ -1249,10 +1467,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/blue-and-brown-leather-journal/">
|
||||
|
||||
<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="blue-and-brown-leather-journal">blue and brown leather journal</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/little-critter-pouch/">
|
||||
|
||||
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="little-critter-pouch">little critter pouch</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/green-memo-pad/">
|
||||
|
||||
<img src="/img/green-memo-pad.jpg" alt="A three panel collage showcasing a small green memo pad." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="green-memo-pad">green memo pad</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1277,6 +1552,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-notebook/` was built on 2026-02-20T06:18:26.034Z -->
|
||||
<!-- This page `/brookes-notebook/` was built on 2026-02-20T16:35:28.451Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="brookes-scarf">brooke's scarf</h1>
|
||||
@ -1241,10 +1459,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/textures-unite/">
|
||||
|
||||
<img src="/img/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
|
||||
|
||||
<h2 id="textures-unite">textures unite</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/sideways-canvas-shirt/">
|
||||
|
||||
<img src="/img/sideways-canvas.jpg" alt="someone's torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it's notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
|
||||
|
||||
<h2 id="sideways-canvas-shirt">sideways canvas shirt</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/butch-hands-pattern/">
|
||||
|
||||
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="butch-hands-pattern">butch hands pattern</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1269,6 +1546,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-scarf/` was built on 2026-02-20T06:18:26.067Z -->
|
||||
<!-- This page `/brookes-scarf/` was built on 2026-02-20T16:35:28.479Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="brookes-socks">brooke's socks</h1>
|
||||
@ -1234,10 +1452,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pride-dice-bags/">
|
||||
|
||||
<img src="/img/pride-dice-bags.jpg" alt="Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside." loading="lazy" decoding="async" width="1000" height="500">
|
||||
|
||||
<h2 id="pride-dice-bags">pride dice bags</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/knit-shrimp/">
|
||||
|
||||
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="knit-shrimp">knit shrimp</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/on-the-shoulders-of-giants/">
|
||||
|
||||
<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it's called 'on the shoulders of giants' and it's about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="on-the-shoulders-of-giants">on the shoulders of giants</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1539,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-socks/` was built on 2026-02-20T06:18:26.033Z -->
|
||||
<!-- This page `/brookes-socks/` was built on 2026-02-20T16:35:28.451Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="brookes-suspenders">brooke's suspenders</h1>
|
||||
@ -1234,10 +1452,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pinatex-wallet-with-zipper/">
|
||||
|
||||
<img src="/img/pinatex-ten-pocket-bifold.jpg" alt="A two-picture collage showing the inside and outside of a wallet made with piñatex, a leather alternative made from pineapple leaves. It is two tone blue with a pink accent and has a zippered pocket built in." loading="lazy" decoding="async" width="1000" height="1331">
|
||||
|
||||
<h2 id="pinatex-wallet-with-zipper">piñatex wallet with zipper</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/leather-keychains/">
|
||||
|
||||
<img src="/img/leather-keychains.jpg" alt="A picture of multiple leather keychains sitting on a wood table. Many of them are simple rectangle shapes with stitching around the edge; a few are odd wavy or geometric shapes. A few say things like 'MOM' or 'EGG'." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="leather-keychains">leather keychains</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/tooled-leather-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="tooled-leather-patches">tooled leather patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1537,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-suspenders/` was built on 2026-02-20T06:18:26.066Z -->
|
||||
<!-- This page `/brookes-suspenders/` was built on 2026-02-20T16:35:28.478Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="brown-creeper">brown creeper</h1>
|
||||
@ -1235,10 +1453,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="pronoun-patches">pronoun patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/printmaking-paper-notes/">
|
||||
|
||||
<img src="/img/killdeer.jpg" alt="Image unrelated to post. A very fluffed up killdeer stands on a rocky beach." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="printmaking-paper-notes">printmaking paper notes</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/tiny-portraits/">
|
||||
|
||||
<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="tiny-portraits">tiny portraits</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1263,6 +1540,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brown-creeper/` was built on 2026-02-20T06:18:26.064Z -->
|
||||
<!-- This page `/brown-creeper/` was built on 2026-02-20T16:35:28.488Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="butch-hands-pattern">butch hands pattern</h1>
|
||||
@ -1316,10 +1534,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/kestrel-zine/">
|
||||
|
||||
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="kestrel-zine">kestrel zine</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/knit-shrimp/">
|
||||
|
||||
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="knit-shrimp">knit shrimp</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-socks/">
|
||||
|
||||
<img src="/img/brooke-socks.jpg" alt="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="brookes-socks">brooke's socks</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1344,6 +1621,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/butch-hands-pattern/` was built on 2026-02-20T06:18:26.034Z -->
|
||||
<!-- This page `/butch-hands-pattern/` was built on 2026-02-20T16:35:28.452Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="chanterelle">chanterelle</h1>
|
||||
@ -1246,10 +1464,71 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/rope-one/">
|
||||
|
||||
<img src="/img/rope-print-1.jpg" alt="A print of a nude trans woman in an asymmetrical rope harness." loading="lazy" decoding="async" width="1000" height="1242">
|
||||
|
||||
<h2 id="rope-one">rope (one)</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/quorbs/">
|
||||
|
||||
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="quorbs">quorbs</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/slightly-weird-man-club/">
|
||||
|
||||
<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads 'slightly weird man club' in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="slightly-weird-man-club">slightly weird man club</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1274,6 +1553,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/chanterelle/` was built on 2026-02-20T06:18:26.035Z -->
|
||||
<!-- This page `/chanterelle/` was built on 2026-02-20T16:35:28.452Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="charlie-the-alpaca-handspun">charlie the alpaca handspun</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/petrichor-handspun/">
|
||||
|
||||
<img src="/img/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="petrichor-handspun">petrichor handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/coral-reef-handspun/">
|
||||
|
||||
<img src="/img/coral-reef-handspun.jpg" alt="2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="coral-reef-handspun">coral reef handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handcombed-jacobs-handspun/">
|
||||
|
||||
<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-02-20T06:18:26.070Z -->
|
||||
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-02-20T16:35:28.475Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="circle-bag">circle bag</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/soras-collar/">
|
||||
|
||||
<img src="/img/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It's fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="soras-collar">sora's collar</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-cuff-bracelets/">
|
||||
|
||||
<img src="/img/brooke-cuffs.jpg" alt="Olive green leather cuffs with silver spikes and a shearling lining." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="brookes-cuff-bracelets">brooke's cuff bracelets</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/aarons-mask/">
|
||||
|
||||
<img src="/img/aaron-mask.jpg" alt="A brown/grey leather mask of a long snouted dog with visible teeth and red detailing." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="aarons-mask">aaron's mask</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/circle-bag/` was built on 2026-02-20T06:18:26.053Z -->
|
||||
<!-- This page `/circle-bag/` was built on 2026-02-20T16:35:28.469Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -80,8 +80,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -102,7 +100,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -121,7 +119,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -130,6 +127,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -291,13 +292,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -313,9 +310,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -508,6 +506,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -986,8 +985,6 @@ export { HeadingAnchors }</script>
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1012,6 +1009,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/colophon/` was built on 2026-02-20T06:18:26.030Z -->
|
||||
<!-- This page `/colophon/` was built on 2026-02-20T16:35:28.447Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="coming-out">coming out</h1>
|
||||
@ -1250,10 +1468,71 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/congrats-on-the-gay/">
|
||||
|
||||
<img src="/img/congrats-on-the-gay.jpg" alt="A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="congrats-on-the-gay">congrats on the gay</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spotted-towhee/">
|
||||
|
||||
<img src="/img/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="spotted-towhee">spotted towhee</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/tiny-mushrooms/">
|
||||
|
||||
<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch's hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="tiny-mushrooms">tiny mushrooms</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1278,6 +1557,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/coming-out/` was built on 2026-02-20T06:18:26.044Z -->
|
||||
<!-- This page `/coming-out/` was built on 2026-02-20T16:35:28.461Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="comparing-text-editors">comparing text editors</h1>
|
||||
@ -1456,10 +1674,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/domain-and-site-setup/">
|
||||
|
||||
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="domain-and-site-setup">domain and site setup</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/intro-to-wireframing/">
|
||||
|
||||
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
|
||||
|
||||
<h2 id="intro-to-wireframing">intro to wireframing</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1484,6 +1759,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/comparing-text-editors/` was built on 2026-02-20T06:18:26.069Z -->
|
||||
<!-- This page `/comparing-text-editors/` was built on 2026-02-20T16:35:28.473Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="congrats-on-the-autism-adhd">congrats on the autism/adhd</h1>
|
||||
@ -1247,10 +1465,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/luminescent/">
|
||||
|
||||
<img src="/img/luminescent-print.jpg" alt="A print of a tattooed woman in bright highlighter yellow underwear." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="luminescent">luminescent</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
|
||||
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="nonbinary-flag">nonbinary flag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/kniphofia/">
|
||||
|
||||
<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="kniphofia">kniphofia</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1275,6 +1552,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-02-20T06:18:26.031Z -->
|
||||
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-02-20T16:35:28.449Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="congrats-on-the-gay">congrats on the gay</h1>
|
||||
@ -1253,10 +1471,75 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="pronoun-patches">pronoun patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/five-of-them/">
|
||||
|
||||
<img src="/img/five-of-them-print.jpg" alt="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing." loading="lazy" decoding="async" width="1000" height="594">
|
||||
|
||||
<h2 id="five-of-them">five of them</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/hummingbird-become-ungovernable/">
|
||||
|
||||
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads 'become ungovernable'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="hummingbird-become-ungovernable">hummingbird become ungovernable</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1281,6 +1564,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/congrats-on-the-gay/` was built on 2026-02-20T06:18:26.034Z -->
|
||||
<!-- This page `/congrats-on-the-gay/` was built on 2026-02-20T16:35:28.452Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -80,8 +80,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -102,7 +100,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -121,7 +119,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -130,6 +127,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -291,13 +292,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -313,9 +310,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -508,6 +506,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1069,8 +1068,6 @@ export { HeadingAnchors }</script>
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1095,6 +1092,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/contact/` was built on 2026-02-20T06:18:26.030Z -->
|
||||
<!-- This page `/contact/` was built on 2026-02-20T16:35:28.448Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="coral-reef-handspun">coral reef handspun</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handcombed-jacobs-handspun/">
|
||||
|
||||
<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/icelandic-lamb-handspun/">
|
||||
|
||||
<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="icelandic-lamb-handspun">icelandic lamb handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/ruby-the-alpaca-handspun/">
|
||||
|
||||
<img src="/img/ruby-alpaca-handspun.jpg" alt="one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="ruby-the-alpaca-handspun">ruby the alpaca handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/coral-reef-handspun/` was built on 2026-02-20T06:18:26.069Z -->
|
||||
<!-- This page `/coral-reef-handspun/` was built on 2026-02-20T16:35:28.473Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="crow">crow</h1>
|
||||
@ -1233,10 +1451,71 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/printmaking-paper-notes/">
|
||||
|
||||
<img src="/img/killdeer.jpg" alt="Image unrelated to post. A very fluffed up killdeer stands on a rocky beach." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="printmaking-paper-notes">printmaking paper notes</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="pronoun-patches">pronoun patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/quorbs/">
|
||||
|
||||
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="quorbs">quorbs</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1261,6 +1540,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/crow/` was built on 2026-02-20T06:18:26.071Z -->
|
||||
<!-- This page `/crow/` was built on 2026-02-20T16:35:28.475Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="designing-a-bag">designing a bag</h1>
|
||||
@ -1250,10 +1468,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/makers-mark-keychain/">
|
||||
|
||||
<img src="/img/makers-mark-keychain.jpg" alt="A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="makers-mark-keychain">maker's mark keychain</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/mom-bag/">
|
||||
|
||||
<img src="/img/mom-bag.jpg" alt="A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="mom-bag">mom bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/long-zipper-bifold/">
|
||||
|
||||
<img src="/img/long-zipper-bifold.jpg" alt="A collage showing an orange leather wallet with a long zipper running the length of the outside." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="long-zipper-bifold">long zipper bifold</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1278,6 +1551,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/designing-a-bag/` was built on 2026-02-20T06:18:26.066Z -->
|
||||
<!-- This page `/designing-a-bag/` was built on 2026-02-20T16:35:28.479Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="domain-and-site-setup">domain and site setup</h1>
|
||||
@ -1285,10 +1503,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/screen-reader-optimizations/">
|
||||
|
||||
<img src="/img/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="screen-reader-optimizations">screen reader optimizations</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/intro-to-wireframing/">
|
||||
|
||||
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
|
||||
|
||||
<h2 id="intro-to-wireframing">intro to wireframing</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1313,6 +1588,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/domain-and-site-setup/` was built on 2026-02-20T06:18:26.049Z -->
|
||||
<!-- This page `/domain-and-site-setup/` was built on 2026-02-20T16:35:28.467Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="double-bill-pocket-bifold">double bill pocket bifold</h1>
|
||||
@ -1234,10 +1452,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/long-zipper-bifold/">
|
||||
|
||||
<img src="/img/long-zipper-bifold.jpg" alt="A collage showing an orange leather wallet with a long zipper running the length of the outside." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="long-zipper-bifold">long zipper bifold</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-cuff-bracelets/">
|
||||
|
||||
<img src="/img/brooke-cuffs.jpg" alt="Olive green leather cuffs with silver spikes and a shearling lining." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="brookes-cuff-bracelets">brooke's cuff bracelets</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1537,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-02-20T06:18:26.047Z -->
|
||||
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-02-20T16:35:28.465Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="dragon-mask">dragon mask</h1>
|
||||
@ -1239,10 +1457,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/snap-pouch/">
|
||||
|
||||
<img src="/img/snap-pouches.jpg" alt="4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="snap-pouch">snap pouch</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/happy-solstice-2025/">
|
||||
|
||||
<img src="/img/solstice-2025.jpg" alt="front and back of our solstice card from this year, designed in postcard format. long alt incoming... front - 4 picture collage. 1 - i'm standing in the woods, looking to one side, wearing an elaborate knit scarf. 2 - silhouetted thistle-like flowers in front of a pink-purple sky. 3 - my wife brooke crouches down to draw a heart in charcoal on a beach log, with 'L + B' written inside. 4 - brooke stands on a driftwood-covered beach looking hella cool in mirrored shades. our dog kes stands in front of her and looks off to one side eagerly. overlaid is the words 'happy solstice' in cursive. back - split down the center like the back of a postcard. on the left side, a 5 picture collage. 1 - i stand on a rock at the edge of a calm alpine lake. overlaid is the words 'lee, brooke, kestrel, & the flock' in print lettering. 2 - an early spring fern curl. 3 - our six ducks, all facing to the left, not in a row but still very organized. 4 - brooke grins at the camera while hugging kestrel's head. kestrel looks maybe a bit distraught. 5 - silhouette of a heron in flight across an early morning blue sky. on the address side, i've added a dahlia to represent the stamp, and written 'you!' in the field that would normally hold the mailing address." loading="lazy" decoding="async" width="1000" height="1346">
|
||||
|
||||
<h2 id="happy-solstice-2025">happy solstice 2025</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1267,6 +1542,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/dragon-mask/` was built on 2026-02-20T06:18:26.067Z -->
|
||||
<!-- This page `/dragon-mask/` was built on 2026-02-20T16:35:28.479Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="dyeing-fiber">dyeing fiber</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handcombed-jacobs-handspun/">
|
||||
|
||||
<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/petrichor-handspun/">
|
||||
|
||||
<img src="/img/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="petrichor-handspun">petrichor handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spinners-dream-handspun/">
|
||||
|
||||
<img src="/img/spinners-dream-handspun.jpg" alt="a skein of a lightly variegated grey yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="spinners-dream-handspun">spinner's dream handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/dyeing-fiber/` was built on 2026-02-20T06:18:26.069Z -->
|
||||
<!-- This page `/dyeing-fiber/` was built on 2026-02-20T16:35:28.474Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="ecommerce-options">ecommerce options</h1>
|
||||
@ -1266,10 +1484,15 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1294,6 +1517,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/ecommerce-options/` was built on 2026-02-20T06:18:26.046Z -->
|
||||
<!-- This page `/ecommerce-options/` was built on 2026-02-20T16:35:28.463Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="eight-pocket-bifold">eight pocket bifold</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-collar/">
|
||||
|
||||
<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="brookes-collar">brooke's collar</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/x-acto-knife-sheath/">
|
||||
|
||||
<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There's a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="x-acto-knife-sheath">x-acto knife sheath</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/swoop-wallet/">
|
||||
|
||||
<img src="/img/swoop-wallet.jpg" alt="A collage showing 3 pictures of a red and brown leather card wallet. The red pocket separator folds around to the back to become a fetching curlicue." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
<h2 id="swoop-wallet">swoop wallet</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/eight-pocket-bifold/` was built on 2026-02-20T06:18:26.047Z -->
|
||||
<!-- This page `/eight-pocket-bifold/` was built on 2026-02-20T16:35:28.465Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="eleventy-lessons">eleventy lessons</h1>
|
||||
@ -1202,7 +1420,7 @@ export { HeadingAnchors }</script>
|
||||
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
|
||||
<p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
|
||||
<p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
|
||||
<p>I've compiled some of the things I've learned in a standalone site: <a href="https://inherentlee.codeberg.page/lessons/" target="_blank" rel="external">11ty Lessons</a>.</p>
|
||||
<p>however, since I don't know how much I'll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I'll skip the intro to Markdown content. I'm also going to update them where I've learned more or to better match what's represented on this site.</p>
|
||||
<p>this will comprise of 4 parts: <a href="#related-posts">related posts</a>, <a href="#featured-images">featured images</a>, <a href="#pagination">pagination</a>, and <a href="#tag-image-preview">tag image preview</a>. Feel free to jump ahead, as none depend on the others.</p>
|
||||
@ -1211,15 +1429,16 @@ export { HeadingAnchors }</script>
|
||||
<p>by default, the <a href="github.com/11ty/eleventy-base-blog" target="_blank" rel="external">Eleventy base blog</a> comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.</p>
|
||||
<p>while that is useful for <em>this</em> site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.</p>
|
||||
<p>I started by referring to <a href="https://github.com/11ty/eleventy/discussions/2534" target="_blank rel=external"">this GitHub issue about related posts</a>. I had to fix a few errors that arose from the suggested code.</p>
|
||||
<p>I also wanted to make two changes:</p>
|
||||
<p>I also wanted to make three changes:</p>
|
||||
<ol>
|
||||
<li>I didn't want to just see posts that shared <em>all</em> tags, but rather posts that shared <em>any</em> tag</li>
|
||||
<li>I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order</li>
|
||||
<li>I wanted to exclude the posts that I could reach with between-post pagination</li>
|
||||
</ol>
|
||||
<h3 id="filters-js">filters.js</h3>
|
||||
<p>after adjusting for those needs, I had the following in <code>filters.js</code>:</p>
|
||||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksFilter</span><span class="token punctuation">(</span><span class="token string">"excludeFromCollection"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pageUrl<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>url <span class="token operator">!==</span> pageUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"excludeFromCollection"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> urls<span class="token operator">=</span><span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> urls<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>post<span class="token punctuation">.</span>url<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterByTags"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span>requiredTags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -1243,7 +1462,12 @@ eleventyConfig<span class="token punctuation">.</span><span class="token functio
|
||||
<h3 id="post-njk">post.njk</h3>
|
||||
<p>I used this in my post layout. <code>filterTagList</code> comes with the base blog by default, and removes the tags "posts" and "all." <code>head</code> also comes with the base blog. <code>postlist.njk</code> is my modified-from-the-base-blog post layout.</p>
|
||||
<pre class="language-html"><code class="language-html">{% set relevantTags = tags | filterTagList %}
|
||||
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(page.url) | randomize | head(2) %}
|
||||
|
||||
{% set olderPost = collections.posts | getPreviousCollectionItem %}
|
||||
{% set newerPost = collections.posts | getNextCollectionItem %}
|
||||
{% set urlsToExclude = [page.url, olderPost.url, newerPost.url]}
|
||||
|
||||
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(urlsToExclude) | randomize | head(3) %}
|
||||
{% if postlist.length %}
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>related-posts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>related posts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
|
||||
@ -1514,10 +1738,67 @@ eleventyExcludeFromCollections: true
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts-2">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/domain-and-site-setup/">
|
||||
|
||||
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="domain-and-site-setup">domain and site setup</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<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">
|
||||
|
||||
<h2 id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/intro-to-wireframing/">
|
||||
|
||||
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
|
||||
|
||||
<h2 id="intro-to-wireframing">intro to wireframing</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1542,6 +1823,6 @@ eleventyExcludeFromCollections: true
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/eleventy-lessons/` was built on 2026-02-20T06:18:26.071Z -->
|
||||
<!-- This page `/eleventy-lessons/` was built on 2026-02-20T16:35:28.475Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="euphorbia">euphorbia</h1>
|
||||
@ -1234,10 +1452,75 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/foxgloves/">
|
||||
|
||||
<img src="/img/foxgloves-print.jpg" alt="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="foxgloves">foxgloves</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/lupine/">
|
||||
|
||||
<img src="/img/lupine-prints.jpg" alt="6 versions of a print of lupine flowers with the leaves inked in light green and the blossoms inked in a variety of blues, purples, and pinks." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="lupine">lupine</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/five-of-them/">
|
||||
|
||||
<img src="/img/five-of-them-print.jpg" alt="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing." loading="lazy" decoding="async" width="1000" height="594">
|
||||
|
||||
<h2 id="five-of-them">five of them</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1545,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/euphorbia/` was built on 2026-02-20T06:18:26.062Z -->
|
||||
<!-- This page `/euphorbia/` was built on 2026-02-20T16:35:28.486Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="fat-raccoon">fat raccoon</h1>
|
||||
@ -1251,10 +1469,77 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/printmaking-paper-notes/">
|
||||
|
||||
<img src="/img/killdeer.jpg" alt="Image unrelated to post. A very fluffed up killdeer stands on a rocky beach." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="printmaking-paper-notes">printmaking paper notes</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/girldick/">
|
||||
|
||||
<img src="/img/girldick-shirt.jpg" alt="A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="girldick">girldick</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/foxgloves/">
|
||||
|
||||
<img src="/img/foxgloves-print.jpg" alt="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="foxgloves">foxgloves</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1279,6 +1564,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fat-raccoon/` was built on 2026-02-20T06:18:26.040Z -->
|
||||
<!-- This page `/fat-raccoon/` was built on 2026-02-20T16:35:28.456Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="fd-signifier-and-oppositional-sexism">fd signifier & oppositional sexism</h1>
|
||||
@ -1268,10 +1486,77 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/happy-bihrtday/">
|
||||
|
||||
<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="happy-bihrtday">happy biHRTday</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="pronoun-patches">pronoun patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
|
||||
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="nonbinary-flag">nonbinary flag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1296,6 +1581,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-02-20T06:18:26.061Z -->
|
||||
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-02-20T16:35:28.485Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="fedizinefest-2025">fediZineFest 2025</h1>
|
||||
@ -1234,10 +1452,73 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/kestrel-zine/">
|
||||
|
||||
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="kestrel-zine">kestrel zine</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gender-as-a-proxy-variable/">
|
||||
|
||||
<img src="/img/gender-zine-cover.png" alt="Part of a scan of the cover of my zine, Gender as a Proxy Variable. It shows the title and a bit of handsewn binding." loading="lazy" decoding="async" width="1000" height="444">
|
||||
|
||||
<h2 id="gender-as-a-proxy-variable">gender as a proxy variable</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/on-the-shoulders-of-giants/">
|
||||
|
||||
<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it's called 'on the shoulders of giants' and it's about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="on-the-shoulders-of-giants">on the shoulders of giants</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1543,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fedizinefest-2025/` was built on 2026-02-20T06:18:26.063Z -->
|
||||
<!-- This page `/fedizinefest-2025/` was built on 2026-02-20T16:35:28.487Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -15,7 +15,7 @@
|
||||
<link href="https://leecat.art/eleventy-lessons/" />
|
||||
<updated>2026-02-19T00:00:00Z</updated>
|
||||
<id>https://leecat.art/eleventy-lessons/</id>
|
||||
<content type="html"><p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
|
||||
<content type="html"><p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
|
||||
<p>I've compiled some of the things I've learned in a standalone site: <a href="https://inherentlee.codeberg.page/lessons/" target="_blank" rel="external">11ty Lessons</a>.</p>
|
||||
<p>however, since I don't know how much I'll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I'll skip the intro to Markdown content. I'm also going to update them where I've learned more or to better match what's represented on this site.</p>
|
||||
<p>this will comprise of 4 parts: <a href="https://leecat.art/eleventy-lessons/#related-posts">related posts</a>, <a href="https://leecat.art/eleventy-lessons/#featured-images">featured images</a>, <a href="https://leecat.art/eleventy-lessons/#pagination">pagination</a>, and <a href="https://leecat.art/eleventy-lessons/#tag-image-preview">tag image preview</a>. Feel free to jump ahead, as none depend on the others.</p>
|
||||
@ -24,15 +24,16 @@
|
||||
<p>by default, the <a href="https://leecat.art/eleventy-lessons/github.com/11ty/eleventy-base-blog" target="_blank" rel="external">Eleventy base blog</a> comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.</p>
|
||||
<p>while that is useful for <em>this</em> site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.</p>
|
||||
<p>I started by referring to <a href="https://github.com/11ty/eleventy/discussions/2534" target="_blank rel=external&quot;">this GitHub issue about related posts</a>. I had to fix a few errors that arose from the suggested code.</p>
|
||||
<p>I also wanted to make two changes:</p>
|
||||
<p>I also wanted to make three changes:</p>
|
||||
<ol>
|
||||
<li>I didn't want to just see posts that shared <em>all</em> tags, but rather posts that shared <em>any</em> tag</li>
|
||||
<li>I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order</li>
|
||||
<li>I wanted to exclude the posts that I could reach with between-post pagination</li>
|
||||
</ol>
|
||||
<h3 id="filters-js">filters.js</h3>
|
||||
<p>after adjusting for those needs, I had the following in <code>filters.js</code>:</p>
|
||||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksFilter</span><span class="token punctuation">(</span><span class="token string">"excludeFromCollection"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> pageUrl<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>url <span class="token operator">!==</span> pageUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"excludeFromCollection"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> urls<span class="token operator">=</span><span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> urls<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>post<span class="token punctuation">.</span>url<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterByTags"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span>requiredTags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -56,7 +57,12 @@ eleventyConfig<span class="token punctuation">.</span><
|
||||
<h3 id="post-njk">post.njk</h3>
|
||||
<p>I used this in my post layout. <code>filterTagList</code> comes with the base blog by default, and removes the tags &quot;posts&quot; and &quot;all.&quot; <code>head</code> also comes with the base blog. <code>postlist.njk</code> is my modified-from-the-base-blog post layout.</p>
|
||||
<pre class="language-html"><code class="language-html">{% set relevantTags = tags | filterTagList %}
|
||||
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(page.url) | randomize | head(2) %}
|
||||
|
||||
{% set olderPost = collections.posts | getPreviousCollectionItem %}
|
||||
{% set newerPost = collections.posts | getNextCollectionItem %}
|
||||
{% set urlsToExclude = [page.url, olderPost.url, newerPost.url]}
|
||||
|
||||
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(urlsToExclude) | randomize | head(3) %}
|
||||
{% if postlist.length %}
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>related-posts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>related posts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="fire-and-ice-handspun">fire & ice handspun</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handcombed-jacobs-handspun/">
|
||||
|
||||
<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/icelandic-lamb-handspun/">
|
||||
|
||||
<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="icelandic-lamb-handspun">icelandic lamb handspun</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
|
||||
|
||||
<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="handspun-yarn-in-party-mix-and-orange-gold">handspun yarn in party mix and orange-gold</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fire-and-ice-handspun/` was built on 2026-02-20T06:18:26.070Z -->
|
||||
<!-- This page `/fire-and-ice-handspun/` was built on 2026-02-20T16:35:28.474Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="fishhook-pride-keychains">fishhook pride keychains</h1>
|
||||
@ -1239,10 +1457,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/vertical-zipper-card-wallet/">
|
||||
|
||||
<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="vertical-zipper-card-wallet">vertical zipper card wallet</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/proud-dad-wallet/">
|
||||
|
||||
<img src="/img/proud-dad-wallet.jpg" alt="A brown leather wallet with a subtle trans flag stitching across the top." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="proud-dad-wallet">proud dad wallet</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/rachels-bracelets/">
|
||||
|
||||
<img src="/img/rachel-bracelets.jpg" alt="Two pink leather bracelets with stainless steel hardware and aqua stitching." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="rachels-bracelets">rachel's bracelets</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1267,6 +1542,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fishhook-pride-keychains/` was built on 2026-02-20T06:18:26.053Z -->
|
||||
<!-- This page `/fishhook-pride-keychains/` was built on 2026-02-20T16:35:28.470Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="five-of-them">five of them</h1>
|
||||
@ -1246,10 +1464,79 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/greeting-quorbs/">
|
||||
|
||||
<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="greeting-quorbs">greeting quorbs</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/girldick/">
|
||||
|
||||
<img src="/img/girldick-shirt.jpg" alt="A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="girldick">girldick</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/foxgloves/">
|
||||
|
||||
<img src="/img/foxgloves-print.jpg" alt="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="foxgloves">foxgloves</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1274,6 +1561,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/five-of-them/` was built on 2026-02-20T06:18:26.043Z -->
|
||||
<!-- This page `/five-of-them/` was built on 2026-02-20T16:35:28.459Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="fix-your-hearts">fix your hearts</h1>
|
||||
@ -1233,10 +1451,77 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/stellars-jay/">
|
||||
|
||||
<img src="/img/stellars-jay-print.jpg" alt="A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="stellars-jay">stellar's jay</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/boypussy/">
|
||||
|
||||
<img src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." loading="lazy" decoding="async" width="1000" height="1250">
|
||||
|
||||
<h2 id="boypussy">boypussy</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/printmaking-paper-notes/">
|
||||
|
||||
<img src="/img/killdeer.jpg" alt="Image unrelated to post. A very fluffed up killdeer stands on a rocky beach." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="printmaking-paper-notes">printmaking paper notes</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1261,6 +1546,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fix-your-hearts/` was built on 2026-02-20T06:18:26.065Z -->
|
||||
<!-- This page `/fix-your-hearts/` was built on 2026-02-20T16:35:28.476Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="flatfish">flatfish</h1>
|
||||
@ -1246,10 +1464,69 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/foxgloves/">
|
||||
|
||||
<img src="/img/foxgloves-print.jpg" alt="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="foxgloves">foxgloves</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/crow/">
|
||||
|
||||
<img src="/img/crow-print.jpg" alt="a block print in dark indigo ink on white paper depicting a perched crow looking over one shoulder. one side of the crow is lit with fine feather detail, and the other side is almost entirely in shadow." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="crow">crow</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/squarsh/">
|
||||
|
||||
<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="squarsh">squarsh</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1274,6 +1551,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/flatfish/` was built on 2026-02-20T06:18:26.035Z -->
|
||||
<!-- This page `/flatfish/` was built on 2026-02-20T16:35:28.453Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="flicker">flicker</h1>
|
||||
@ -1251,10 +1469,75 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fat-raccoon/">
|
||||
|
||||
<img src="/img/fat-raccoon-print.jpg" alt="A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="fat-raccoon">fat raccoon</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/geese-trans-wrongs/">
|
||||
|
||||
<img src="/img/trans-wrongs-geese-print.jpg" alt="Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over towards them and HONKS! Both have speech bubbles; the calm goose says 'trans rights!' while the honking goose says 'trans wrongs!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="geese-trans-wrongs">geese/trans wrongs</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spotted-towhee/">
|
||||
|
||||
<img src="/img/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="spotted-towhee">spotted towhee</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1279,6 +1562,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/flicker/` was built on 2026-02-20T06:18:26.038Z -->
|
||||
<!-- This page `/flicker/` was built on 2026-02-20T16:35:28.454Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="flocked-notebook">flocked notebook</h1>
|
||||
@ -1247,10 +1465,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/orange-journal/">
|
||||
|
||||
<img src="/img/orange-journal.jpg" alt="A three panel collage showcasing a small book with foldout pages and a bright orange cover." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="orange-journal">orange journal</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/leather-long-stitch-journals/">
|
||||
|
||||
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="leather-long-stitch-journals">leather long-stitch journals</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/striped-journal/">
|
||||
|
||||
<img src="/img/striped-journal.jpg" alt="A three panel collage showcasing a journal with a striped cover." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
<h2 id="striped-journal">striped journal</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1275,6 +1550,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/flocked-notebook/` was built on 2026-02-20T06:18:26.034Z -->
|
||||
<!-- This page `/flocked-notebook/` was built on 2026-02-20T16:35:28.451Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="foldy-wallet-with-thumb-slide">foldy wallet with thumb slide</h1>
|
||||
@ -1234,10 +1452,67 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/little-critter-pouch/">
|
||||
|
||||
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="little-critter-pouch">little critter pouch</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/stephanie-collar/">
|
||||
|
||||
<img src="/img/stephanie-collar.jpg" alt="A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring." loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="stephanie-collar">stephanie collar</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/rachels-bracelets/">
|
||||
|
||||
<img src="/img/rachel-bracelets.jpg" alt="Two pink leather bracelets with stainless steel hardware and aqua stitching." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="rachels-bracelets">rachel's bracelets</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1537,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-02-20T06:18:26.058Z -->
|
||||
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-02-20T16:35:28.482Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="foldy-wallet">foldy wallet</h1>
|
||||
@ -1234,10 +1452,65 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/leather-chest-harness/">
|
||||
|
||||
<img src="/img/leather-chest-harness.jpg" alt="Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="leather-chest-harness">leather chest harness</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/long-zipper-bifold/">
|
||||
|
||||
<img src="/img/long-zipper-bifold.jpg" alt="A collage showing an orange leather wallet with a long zipper running the length of the outside." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="long-zipper-bifold">long zipper bifold</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/lobstah/">
|
||||
|
||||
<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="lobstah">lobstah</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1262,6 +1535,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/foldy-wallet/` was built on 2026-02-20T06:18:26.057Z -->
|
||||
<!-- This page `/foldy-wallet/` was built on 2026-02-20T16:35:28.482Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="fountain-pen-friendly-stationery">fountain pen-friendly stationery</h1>
|
||||
@ -1249,10 +1467,51 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/siblinghood-of-the-traveling-greeting-card/">
|
||||
|
||||
<img src="/img/rockery.jpg" alt="Image unrelated to post. A surprisingly neat pile of rounded beach rocks, mainly speckly grey-white-bluish ones, with trees in the background." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="siblinghood-of-the-traveling-greeting-card">siblinghood of the traveling greeting card</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>stationery</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/stationery-exchange/">
|
||||
|
||||
<img src="/img/clustered-brown-mushrooms.jpg" alt="Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="stationery-exchange">stationery exchange</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>stationery</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1277,6 +1536,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-02-20T06:18:26.064Z -->
|
||||
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-02-20T16:35:28.488Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="foxgloves">foxgloves</h1>
|
||||
@ -1250,10 +1468,75 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/hair/">
|
||||
|
||||
<img src="/img/hair-print.jpg" alt="A print in black ink of belly hair." loading="lazy" decoding="async" width="1000" height="710">
|
||||
|
||||
<h2 id="hair">hair</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/congrats-on-the-gay/">
|
||||
|
||||
<img src="/img/congrats-on-the-gay.jpg" alt="A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="congrats-on-the-gay">congrats on the gay</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/big-pidge/">
|
||||
|
||||
<img src="/img/big-pidge-print.jpg" alt="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="big-pidge">big pidge</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1278,6 +1561,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/foxgloves/` was built on 2026-02-20T06:18:26.044Z -->
|
||||
<!-- This page `/foxgloves/` was built on 2026-02-20T16:35:28.461Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1183,8 +1182,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1209,6 +1206,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/1/` was built on 2026-02-20T06:18:27.037Z -->
|
||||
<!-- This page `/gallery/1/` was built on 2026-02-20T16:35:29.488Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1187,8 +1186,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1213,6 +1210,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/10/` was built on 2026-02-20T06:18:30.861Z -->
|
||||
<!-- This page `/gallery/10/` was built on 2026-02-20T16:35:33.200Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1065,8 +1064,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1091,6 +1088,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/11/` was built on 2026-02-20T06:18:31.156Z -->
|
||||
<!-- This page `/gallery/11/` was built on 2026-02-20T16:35:33.481Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1197,8 +1196,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1223,6 +1220,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/2/` was built on 2026-02-20T06:18:28.492Z -->
|
||||
<!-- This page `/gallery/2/` was built on 2026-02-20T16:35:30.953Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1179,8 +1178,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1205,6 +1202,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/3/` was built on 2026-02-20T06:18:28.844Z -->
|
||||
<!-- This page `/gallery/3/` was built on 2026-02-20T16:35:31.323Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1187,8 +1186,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1213,6 +1210,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/4/` was built on 2026-02-20T06:18:29.082Z -->
|
||||
<!-- This page `/gallery/4/` was built on 2026-02-20T16:35:31.557Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1181,8 +1180,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1207,6 +1204,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/5/` was built on 2026-02-20T06:18:29.350Z -->
|
||||
<!-- This page `/gallery/5/` was built on 2026-02-20T16:35:31.840Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1185,8 +1184,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1211,6 +1208,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/6/` was built on 2026-02-20T06:18:29.669Z -->
|
||||
<!-- This page `/gallery/6/` was built on 2026-02-20T16:35:32.124Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1229,8 +1228,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1255,6 +1252,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/7/` was built on 2026-02-20T06:18:29.981Z -->
|
||||
<!-- This page `/gallery/7/` was built on 2026-02-20T16:35:32.415Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1211,8 +1210,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1237,6 +1234,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/8/` was built on 2026-02-20T06:18:30.296Z -->
|
||||
<!-- This page `/gallery/8/` was built on 2026-02-20T16:35:32.719Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1213,8 +1212,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1239,6 +1236,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/9/` was built on 2026-02-20T06:18:30.553Z -->
|
||||
<!-- This page `/gallery/9/` was built on 2026-02-20T16:35:32.858Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -298,8 +298,6 @@
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -320,7 +318,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -339,7 +337,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -348,6 +345,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -509,13 +510,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -531,9 +528,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -726,6 +724,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1171,8 +1170,6 @@ footer a:focus-visible {
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1197,6 +1194,6 @@ footer a:focus-visible {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/` was built on 2026-02-20T06:18:26.027Z -->
|
||||
<!-- This page `/gallery/` was built on 2026-02-20T16:35:28.445Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="geese-trans-wrongs">geese/trans wrongs</h1>
|
||||
@ -1251,10 +1469,77 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/chanterelle/">
|
||||
|
||||
<img src="/img/chanterelle-print.jpg" alt="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="chanterelle">chanterelle</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/anarchy-autism/">
|
||||
|
||||
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="anarchy-autism">anarchy autism</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/stellars-jay/">
|
||||
|
||||
<img src="/img/stellars-jay-print.jpg" alt="A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="stellars-jay">stellar's jay</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1279,6 +1564,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/geese-trans-wrongs/` was built on 2026-02-20T06:18:26.040Z -->
|
||||
<!-- This page `/geese-trans-wrongs/` was built on 2026-02-20T16:35:28.457Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="geese">geese</h1>
|
||||
@ -1251,10 +1469,71 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
|
||||
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="nonbinary-flag">nonbinary flag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/kniphofia/">
|
||||
|
||||
<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="kniphofia">kniphofia</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/artisans-cooperative-cards/">
|
||||
|
||||
<img src="/img/artisans-coop-cards.jpg" alt="2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
<h2 id="artisans-cooperative-cards">artisans cooperative cards</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1279,6 +1558,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/geese/` was built on 2026-02-20T06:18:26.040Z -->
|
||||
<!-- This page `/geese/` was built on 2026-02-20T16:35:28.456Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="gender-as-a-proxy-variable">gender as a proxy variable</h1>
|
||||
@ -1423,10 +1641,85 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
|
||||
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="nonbinary-flag">nonbinary flag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/queer/">
|
||||
|
||||
<img src="/img/queer-print.jpg" alt="A print of the word queer in black ink. The letters are rounded with elongated oval negative space." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="queer">queer</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/trans-wrongs-skull/">
|
||||
|
||||
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="trans-wrongs-skull">trans wrongs skull</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1451,6 +1744,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gender-as-a-proxy-variable/` was built on 2026-02-20T06:18:26.061Z -->
|
||||
<!-- This page `/gender-as-a-proxy-variable/` was built on 2026-02-20T16:35:28.484Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="gender-in-data-models">gender in data models</h1>
|
||||
@ -1473,10 +1691,69 @@ This may also be expanded to a multi-step approach, with questions covering some
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/in-the-news/">
|
||||
|
||||
<img src="/img/shrimp-knitting.jpg" alt="Picture unrelated to post. Lee, sitting in a chair and seen in profile, looks up and smiles. Ze is holding and working on a partially knit shrimp." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 id="in-the-news">in the news</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handedness-toggle/">
|
||||
|
||||
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
|
||||
|
||||
<h2 id="handedness-toggle">handedness toggle</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
|
||||
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
<h2 id="pronoun-patches">pronoun patches</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1501,6 +1778,6 @@ This may also be expanded to a multi-step approach, with questions covering some
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gender-in-data-models/` was built on 2026-02-20T06:18:26.043Z -->
|
||||
<!-- This page `/gender-in-data-models/` was built on 2026-02-20T16:35:28.460Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user
