diff --git a/_site/1/index.html b/_site/1/index.html index e3c96b8..90d427f 100644 --- a/_site/1/index.html +++ b/_site/1/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/10/index.html b/_site/10/index.html index 66988cc..bc87214 100644 --- a/_site/10/index.html +++ b/_site/10/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/11/index.html b/_site/11/index.html index 51795bd..c5f7f08 100644 --- a/_site/11/index.html +++ b/_site/11/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/12/index.html b/_site/12/index.html index 14e97ca..d895953 100644 --- a/_site/12/index.html +++ b/_site/12/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/13/index.html b/_site/13/index.html index 0a6b65e..bbf2674 100644 --- a/_site/13/index.html +++ b/_site/13/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/14/index.html b/_site/14/index.html index cb4ae29..eab4359 100644 --- a/_site/14/index.html +++ b/_site/14/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/2/index.html b/_site/2/index.html index c0a272a..ee975df 100644 --- a/_site/2/index.html +++ b/_site/2/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/3/index.html b/_site/3/index.html index 441495a..4be032d 100644 --- a/_site/3/index.html +++ b/_site/3/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/4/index.html b/_site/4/index.html index 3bcd2ec..665ec3f 100644 --- a/_site/4/index.html +++ b/_site/4/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/404.html b/_site/404.html index f247e85..931e61e 100644 --- a/_site/404.html +++ b/_site/404.html @@ -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 } - -
- + \ No newline at end of file diff --git a/_site/5/index.html b/_site/5/index.html index 3e846ac..05db8af 100644 --- a/_site/5/index.html +++ b/_site/5/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/6/index.html b/_site/6/index.html index 46d080b..f2a9b52 100644 --- a/_site/6/index.html +++ b/_site/6/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/7/index.html b/_site/7/index.html index d85fb82..82fe5e2 100644 --- a/_site/7/index.html +++ b/_site/7/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/8/index.html b/_site/8/index.html index d2d7f29..a6d56e4 100644 --- a/_site/8/index.html +++ b/_site/8/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/9/index.html b/_site/9/index.html index 5a5fa10..c7d293b 100644 --- a/_site/9/index.html +++ b/_site/9/index.html @@ -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 { - -
- + \ No newline at end of file diff --git a/_site/aarons-mask/index.html b/_site/aarons-mask/index.html index 2387f71..85a1a76 100644 --- a/_site/aarons-mask/index.html +++ b/_site/aarons-mask/index.html @@ -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 } +

aaron's mask

@@ -1234,10 +1452,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + +

    tooled leather patches

    +
      + +
    • leather
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    gradient purse strap

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + +

    circle bag

    +
      + +
    • leather
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/about/index.html b/_site/about/index.html index 214c89f..6826231 100644 --- a/_site/about/index.html +++ b/_site/about/index.html @@ -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 } - -
@@ -1121,6 +1118,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/acadia-coloring-journal/index.html b/_site/acadia-coloring-journal/index.html index 1213290..f3ec451 100644 --- a/_site/acadia-coloring-journal/index.html +++ b/_site/acadia-coloring-journal/index.html @@ -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 } +

Acadia coloring journal

@@ -1250,10 +1468,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A three panel collage showcasing a small green memo pad. + +

    green memo pad

    +
      + +
    • book
      • + +
    +     +
    2. + +
  2. + + + A two panel collage showing a square book with a tan cover and blue and gold endpapers. + +

    square watercolor pad

    +
      + +
    • book
      • + +
    +     +
    3. + +
  3. + + + A two panel collage showing the cover and endpapers of a thick notebook. + +

    flocked notebook

    +
      + +
    • book
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1278,6 +1551,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/acadia-mitts/index.html b/_site/acadia-mitts/index.html index 70daf04..581ed2b 100644 --- a/_site/acadia-mitts/index.html +++ b/_site/acadia-mitts/index.html @@ -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 } +

acadia mitts

@@ -1234,10 +1452,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + Hands wearing a pair of pink and grey gloves with convertable mitten tops. + +

    butch hands pattern

    +
      + +
    • knit
      • + +
    • highlight
      • + +
    +     +
    2. + +
  2. + + + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + +

    knit shrimp

    +
      + +
    • knit
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    sideways canvas shirt

    +
      + +
    • knit
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/an-intro-to-git/index.html b/_site/an-intro-to-git/index.html index 8a94eea..e81d24b 100644 --- a/_site/an-intro-to-git/index.html +++ b/_site/an-intro-to-git/index.html @@ -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 } +

an intro to git

@@ -1649,10 +1867,65 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push) + +
+ + + + +
+ +
    + +
  1. + + + Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk. + +

    my favorite git flag

    +
      + +
    • software
      • + +
    +     +
    2. + +
  2. + + + Image unrelated to post. Close up on a pale green hellebore flower. + +

    eleventy lessons

    +
      + +
    • software
      • + +
    +     +
    3. + +
  3. + + + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass. + +

    domain and site setup

    +
      + +
    • software
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1677,6 +1950,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)
- + \ No newline at end of file diff --git a/_site/anarchy-autism/index.html b/_site/anarchy-autism/index.html index 3e13969..0d33b64 100644 --- a/_site/anarchy-autism/index.html +++ b/_site/anarchy-autism/index.html @@ -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 } +

anarchy autism

@@ -1256,10 +1474,75 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    squarsh

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + +

    five of them

    +
      + +
    • print
      • + +
    • shirt
      • + +
    +     +
    3. + +
  3. + + + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + +

    trans wrongs skull

    +
      + +
    • print
      • + +
    • card
      • + +
    • sticker
      • + +
    • pin
      • + +
    • gender
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1284,6 +1567,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/art-shows-and-events/index.html b/_site/art-shows-and-events/index.html index 9e7f978..767fb40 100644 --- a/_site/art-shows-and-events/index.html +++ b/_site/art-shows-and-events/index.html @@ -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 } +

art shows and events

@@ -1247,10 +1465,15 @@ export { HeadingAnchors } + +
+ + + + + - -
@@ -1275,6 +1498,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/artisans-cooperative-cards/index.html b/_site/artisans-cooperative-cards/index.html index ab8f1ca..b9025bc 100644 --- a/_site/artisans-cooperative-cards/index.html +++ b/_site/artisans-cooperative-cards/index.html @@ -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 } +

artisans cooperative cards

@@ -1241,10 +1459,75 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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' + +

    hummingbird become ungovernable

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    2. + +
  2. + + + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient + +

    slightly weird man club

    +
      + +
    • print
      • + +
    • shirt
      • + +
    • gender
      • + +
    +     +
    3. + +
  3. + + + A print of a simple flatfish design inked in sepia. + +

    flatfish

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1269,6 +1552,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/artisans-cooperative-shirts/index.html b/_site/artisans-cooperative-shirts/index.html index 714b298..a3f611e 100644 --- a/_site/artisans-cooperative-shirts/index.html +++ b/_site/artisans-cooperative-shirts/index.html @@ -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 } +

artisans cooperative shirts

@@ -1242,10 +1460,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers. + +

    euphorbia

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + 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.' + +

    become unbutterable

    +
      + +
    • print
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    pronoun patches

    +
      + +
    • print
      • + +
    • patch
      • + +
    • gender
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1270,6 +1547,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/artists-conk/index.html b/_site/artists-conk/index.html index 7c8bd7c..255fe8a 100644 --- a/_site/artists-conk/index.html +++ b/_site/artists-conk/index.html @@ -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 } +

artists conk!

@@ -1225,10 +1443,15 @@ export { HeadingAnchors } + +
+ + + + + - -
@@ -1253,6 +1476,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/azure-locations-and-file-crawling/index.html b/_site/azure-locations-and-file-crawling/index.html index 58c8e22..010d7b2 100644 --- a/_site/azure-locations-and-file-crawling/index.html +++ b/_site/azure-locations-and-file-crawling/index.html @@ -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 } +

azure locations and file crawling

@@ -1465,10 +1683,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + +

    handedness toggle

    +
      + +
    • software
      • + +
    +     +
    2. + +
  2. + + + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. + +

    little critter pouch

    +
      + +
    • leather
      • + +
    • highlight
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    textures unite

    +
      + +
    • knit
      • + +
    • highlight
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1493,6 +1770,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/backend-accessibility/index.html b/_site/backend-accessibility/index.html index c0dfea2..5b3ac6e 100644 --- a/_site/backend-accessibility/index.html +++ b/_site/backend-accessibility/index.html @@ -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 } +

backend accessibility

@@ -1295,10 +1513,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + Image unrelated to post. Close up on a pale green hellebore flower. + +

    eleventy lessons

    +
      + +
    • software
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    designing a bag

    +
      + +
    • leather
      • + +
    • software
      • + +
    +     +
    3. + +
  3. + + + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets. + +

    redirections

    +
      + +
    • software
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1323,6 +1598,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/bag-strap/index.html b/_site/bag-strap/index.html index 021d29d..60aab8e 100644 --- a/_site/bag-strap/index.html +++ b/_site/bag-strap/index.html @@ -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 } +

bag strap

@@ -1234,10 +1452,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    patchwork wallet

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    vix collar

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket. + +

    vertical bifold

    +
      + +
    • leather
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/baseball-journal/index.html b/_site/baseball-journal/index.html index 8cd88ae..06f6768 100644 --- a/_site/baseball-journal/index.html +++ b/_site/baseball-journal/index.html @@ -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 } +

baseball journal

@@ -1244,10 +1462,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A two panel collage showing a square book with a tan cover and blue and gold endpapers. + +

    square watercolor pad

    +
      + +
    • book
      • + +
    +     +
    2. + +
  2. + + + A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. + +

    lined notebook

    +
      + +
    • book
      • + +
    +     +
    3. + +
  3. + + + A three panel collage showcasing a blue and brown leather-covered journal. + +

    blue and brown leather journal

    +
      + +
    • book
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1272,6 +1545,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/become-unbutterable/index.html b/_site/become-unbutterable/index.html index 8bac6f8..14ee01c 100644 --- a/_site/become-unbutterable/index.html +++ b/_site/become-unbutterable/index.html @@ -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 } +

become unbutterable

@@ -1241,10 +1459,73 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A print in rainbow ink that says autism with the anarchy A. + +

    anarchy autism

    +
      + +
    • print
      • + +
    • sticker
      • + +
    • shirt
      • + +
    • pin
      • + +
    +     +
    2. + +
  2. + + + A print of a tattooed woman in bright highlighter yellow underwear. + +

    luminescent

    +
      + +
    • print
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    seedling

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1269,6 +1550,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/bfl-silk-handspun/index.html b/_site/bfl-silk-handspun/index.html index 8f05533..e62fd7f 100644 --- a/_site/bfl-silk-handspun/index.html +++ b/_site/bfl-silk-handspun/index.html @@ -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 } +

BFL/silk handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + a skein of a lightly variegated grey yarn in about a sport or DK weight. + +

    spinner's dream handspun

    +
      + +
    • yarn
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    rambouillet handspun

    +
      + +
    • yarn
      • + +
    +     +
    3. + +
  3. + + + a skein of dark grey handspun yarn + +

    handcombed jacobs handspun

    +
      + +
    • yarn
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/big-pidge/index.html b/_site/big-pidge/index.html index b2636be..7e0c858 100644 --- a/_site/big-pidge/index.html +++ b/_site/big-pidge/index.html @@ -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 } +

big pidge

@@ -1251,10 +1469,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + +

    nonbinary flag

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    squarsh

    +
      + +
    • print
      • + +
    +     +
    3. + +
  3. + + + A print of a loon rearing up with wings spread + +

    loon

    +
      + +
    • print
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1279,6 +1556,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/block-printing-transfer-method/index.html b/_site/block-printing-transfer-method/index.html index 68544bf..c4c68c9 100644 --- a/_site/block-printing-transfer-method/index.html +++ b/_site/block-printing-transfer-method/index.html @@ -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 } +

block printing transfer method

@@ -1265,10 +1483,15 @@ export { HeadingAnchors } + +
+ + + + + - -
@@ -1293,6 +1516,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/blue-and-brown-leather-journal/index.html b/_site/blue-and-brown-leather-journal/index.html index 9c36db6..db88479 100644 --- a/_site/blue-and-brown-leather-journal/index.html +++ b/_site/blue-and-brown-leather-journal/index.html @@ -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 } +

blue and brown leather journal

@@ -1250,10 +1468,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A three panel collage showcasing a small book with foldout pages and a bright orange cover. + +

    orange journal

    +
      + +
    • book
      • + +
    +     +
    2. + +
  2. + + + A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + +

    baseball journal

    +
      + +
    • book
      • + +
    +     +
    3. + +
  3. + + + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + +

    leather long-stitch journals

    +
      + +
    • leather
      • + +
    • book
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1278,6 +1553,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/booby-congrats-on-the-top-surgery/index.html b/_site/booby-congrats-on-the-top-surgery/index.html index 1288fa8..9772cb8 100644 --- a/_site/booby-congrats-on-the-top-surgery/index.html +++ b/_site/booby-congrats-on-the-top-surgery/index.html @@ -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 } +

booby (congrats on the top surgery)

@@ -1244,10 +1462,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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' + +

    hummingbird become ungovernable

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    2. + +
  2. + + + A print of a loon rearing up with wings spread + +

    loon

    +
      + +
    • print
      • + +
    +     +
    3. + +
  3. + + + Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk. + +

    networks of trans care

    +
      + +
    • gender
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1272,6 +1549,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/bottom-growth/index.html b/_site/bottom-growth/index.html index 001f2a9..50ea6e9 100644 --- a/_site/bottom-growth/index.html +++ b/_site/bottom-growth/index.html @@ -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 } +

bottom growth

@@ -1239,10 +1457,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field. + +

    fd signifier & oppositional sexism

    +
      + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder. + +

    on pronouns

    +
      + +
    • gender
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    trans the world

    +
      + +
    • print
      • + +
    • shirt
      • + +
    • gender
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1267,6 +1544,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/bowtie/index.html b/_site/bowtie/index.html index a74ed63..e972ace 100644 --- a/_site/bowtie/index.html +++ b/_site/bowtie/index.html @@ -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 } +

bowtie

@@ -1234,10 +1452,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + +

    fishhook pride keychains

    +
      + +
    • leather
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + A nylon webbing shoulder strap in bright teal with clips on each end. + +

    bag strap

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + 5 small triangular pouches made of leather in two sizes and various colors. + +

    triangle pouch

    +
      + +
    • leather
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/boypussy/index.html b/_site/boypussy/index.html index 28f9870..6975182 100644 --- a/_site/boypussy/index.html +++ b/_site/boypussy/index.html @@ -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 } +

boypussy

@@ -1261,10 +1479,73 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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). + +

    flicker

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    2. + +
  2. + + + A page of handwritten notes with some loosely drawn charts, described further in the post. + +

    gender?

    +
      + +
    • gender
      • + +
    +     +
    3. + +
  3. + + + 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' + +

    coming out

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1289,6 +1570,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/brookes-collar/index.html b/_site/brookes-collar/index.html index e85d50a..d9c5f26 100644 --- a/_site/brookes-collar/index.html +++ b/_site/brookes-collar/index.html @@ -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 } +

brooke's collar

@@ -1234,10 +1452,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + +

    snap pouch

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + A nylon webbing harness in bright teal laid out on a desk. + +

    moss harness

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    dragon mask

    +
      + +
    • leather
      • + +
    • highlight
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/brookes-cuff-bracelets/index.html b/_site/brookes-cuff-bracelets/index.html index c30d8c0..a861c1e 100644 --- a/_site/brookes-cuff-bracelets/index.html +++ b/_site/brookes-cuff-bracelets/index.html @@ -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 } +

brooke's cuff bracelets

@@ -1234,10 +1452,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    sora's collar

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. + +

    little critter pouch

    +
      + +
    • leather
      • + +
    • highlight
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    designing a bag

    +
      + +
    • leather
      • + +
    • software
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1539,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/brookes-notebook/index.html b/_site/brookes-notebook/index.html index 0a716f2..6a3b4e0 100644 --- a/_site/brookes-notebook/index.html +++ b/_site/brookes-notebook/index.html @@ -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 } +

brooke's notebook

@@ -1249,10 +1467,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A three panel collage showcasing a blue and brown leather-covered journal. + +

    blue and brown leather journal

    +
      + +
    • book
      • + +
    +     +
    2. + +
  2. + + + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. + +

    little critter pouch

    +
      + +
    • leather
      • + +
    • highlight
      • + +
    +     +
    3. + +
  3. + + + A three panel collage showcasing a small green memo pad. + +

    green memo pad

    +
      + +
    • book
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1277,6 +1552,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/brookes-scarf/index.html b/_site/brookes-scarf/index.html index c56d1fe..d66c6a2 100644 --- a/_site/brookes-scarf/index.html +++ b/_site/brookes-scarf/index.html @@ -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 } +

brooke's scarf

@@ -1241,10 +1459,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    textures unite

    +
      + +
    • knit
      • + +
    • highlight
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    sideways canvas shirt

    +
      + +
    • knit
      • + +
    +     +
    3. + +
  3. + + + Hands wearing a pair of pink and grey gloves with convertable mitten tops. + +

    butch hands pattern

    +
      + +
    • knit
      • + +
    • highlight
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1269,6 +1546,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/brookes-socks/index.html b/_site/brookes-socks/index.html index 54f4e9c..2631e7d 100644 --- a/_site/brookes-socks/index.html +++ b/_site/brookes-socks/index.html @@ -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 } +

brooke's socks

@@ -1234,10 +1452,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    pride dice bags

    +
      + +
    • knit
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + +

    knit shrimp

    +
      + +
    • knit
      • + +
    +     +
    3. + +
  3. + + + 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 + +

    on the shoulders of giants

    +
      + +
    • zine
      • + +
    • knit
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1539,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/brookes-suspenders/index.html b/_site/brookes-suspenders/index.html index 760a8bc..3c0042c 100644 --- a/_site/brookes-suspenders/index.html +++ b/_site/brookes-suspenders/index.html @@ -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 } +

brooke's suspenders

@@ -1234,10 +1452,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    piñatex wallet with zipper

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + 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'. + +

    leather keychains

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + +

    tooled leather patches

    +
      + +
    • leather
      • + +
    • gender
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/brown-creeper/index.html b/_site/brown-creeper/index.html index eb1aeb6..158c02a 100644 --- a/_site/brown-creeper/index.html +++ b/_site/brown-creeper/index.html @@ -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 } +

brown creeper

@@ -1235,10 +1453,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    pronoun patches

    +
      + +
    • print
      • + +
    • patch
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + +

    printmaking paper notes

    +
      + +
    • print
      • + +
    +     +
    3. + +
  3. + + + A collage showing various small (around an inch) stamps that depict people or animals. + +

    tiny portraits

    +
      + +
    • print
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1263,6 +1540,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/butch-hands-pattern/index.html b/_site/butch-hands-pattern/index.html index 1522a37..3f82cff 100644 --- a/_site/butch-hands-pattern/index.html +++ b/_site/butch-hands-pattern/index.html @@ -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 } +

butch hands pattern

@@ -1316,10 +1534,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    kestrel zine

    +
      + +
    • print
      • + +
    • zine
      • + +
    • highlight
      • + +
    +     +
    2. + +
  2. + + + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + +

    knit shrimp

    +
      + +
    • knit
      • + +
    +     +
    3. + +
  3. + + + Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + +

    brooke's socks

    +
      + +
    • knit
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1344,6 +1621,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/chanterelle/index.html b/_site/chanterelle/index.html index 1f4d9fd..9c12a04 100644 --- a/_site/chanterelle/index.html +++ b/_site/chanterelle/index.html @@ -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 } +

chanterelle

@@ -1246,10 +1464,71 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A print of a nude trans woman in an asymmetrical rope harness. + +

    rope (one)

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    quorbs

    +
      + +
    • print
      • + +
    • highlight
      • + +
    +     +
    3. + +
  3. + + + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient + +

    slightly weird man club

    +
      + +
    • print
      • + +
    • shirt
      • + +
    • gender
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1274,6 +1553,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/charlie-the-alpaca-handspun/index.html b/_site/charlie-the-alpaca-handspun/index.html index b661ce9..7c1cf4f 100644 --- a/_site/charlie-the-alpaca-handspun/index.html +++ b/_site/charlie-the-alpaca-handspun/index.html @@ -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 } +

charlie the alpaca handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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 + +

    petrichor handspun

    +
      + +
    • yarn
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    coral reef handspun

    +
      + +
    • yarn
      • + +
    +     +
    3. + +
  3. + + + a skein of dark grey handspun yarn + +

    handcombed jacobs handspun

    +
      + +
    • yarn
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/circle-bag/index.html b/_site/circle-bag/index.html index 103a285..6ce855c 100644 --- a/_site/circle-bag/index.html +++ b/_site/circle-bag/index.html @@ -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 } +

circle bag

@@ -1234,10 +1452,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    sora's collar

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + Olive green leather cuffs with silver spikes and a shearling lining. + +

    brooke's cuff bracelets

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + +

    aaron's mask

    +
      + +
    • leather
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/colophon/index.html b/_site/colophon/index.html index 36f79c2..64a99cb 100644 --- a/_site/colophon/index.html +++ b/_site/colophon/index.html @@ -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 } - -
@@ -1012,6 +1009,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/coming-out/index.html b/_site/coming-out/index.html index c3b4a23..9a0135c 100644 --- a/_site/coming-out/index.html +++ b/_site/coming-out/index.html @@ -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 } +

coming out

@@ -1250,10 +1468,71 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + +

    congrats on the gay

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + A block print of a spotted towhee mid-leap. + +

    spotted towhee

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    tiny mushrooms

    +
      + +
    • print
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1278,6 +1557,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/comparing-text-editors/index.html b/_site/comparing-text-editors/index.html index 4b73580..6af0dd3 100644 --- a/_site/comparing-text-editors/index.html +++ b/_site/comparing-text-editors/index.html @@ -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 } +

comparing text editors

@@ -1456,10 +1674,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    designing a bag

    +
      + +
    • leather
      • + +
    • software
      • + +
    +     +
    2. + +
  2. + + + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass. + +

    domain and site setup

    +
      + +
    • software
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    intro to wireframing

    +
      + +
    • software
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1484,6 +1759,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/congrats-on-the-autism-adhd/index.html b/_site/congrats-on-the-autism-adhd/index.html index e2ef8e6..8bdff86 100644 --- a/_site/congrats-on-the-autism-adhd/index.html +++ b/_site/congrats-on-the-autism-adhd/index.html @@ -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 } +

congrats on the autism/adhd

@@ -1247,10 +1465,69 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A print of a tattooed woman in bright highlighter yellow underwear. + +

    luminescent

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + +

    nonbinary flag

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    3. + +
  3. + + + A print of a brightly colored flower in 4 layers of color + +

    kniphofia

    +
      + +
    • print
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1275,6 +1552,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/congrats-on-the-gay/index.html b/_site/congrats-on-the-gay/index.html index 548b823..27567ed 100644 --- a/_site/congrats-on-the-gay/index.html +++ b/_site/congrats-on-the-gay/index.html @@ -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 } +

congrats on the gay

@@ -1253,10 +1471,75 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    pronoun patches

    +
      + +
    • print
      • + +
    • patch
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + +

    five of them

    +
      + +
    • print
      • + +
    • shirt
      • + +
    +     +
    3. + +
  3. + + + 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' + +

    hummingbird become ungovernable

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1281,6 +1564,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/contact/index.html b/_site/contact/index.html index 57baf38..acd3af3 100644 --- a/_site/contact/index.html +++ b/_site/contact/index.html @@ -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 } - -
@@ -1095,6 +1092,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/coral-reef-handspun/index.html b/_site/coral-reef-handspun/index.html index 3c5e534..9f33e74 100644 --- a/_site/coral-reef-handspun/index.html +++ b/_site/coral-reef-handspun/index.html @@ -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 } +

coral reef handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + a skein of dark grey handspun yarn + +

    handcombed jacobs handspun

    +
      + +
    • yarn
      • + +
    +     +
    2. + +
  2. + + + a skein of black handspun yarn + +

    icelandic lamb handspun

    +
      + +
    • yarn
      • + +
    +     +
    3. + +
  3. + + + one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight + +

    ruby the alpaca handspun

    +
      + +
    • yarn
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/crow/index.html b/_site/crow/index.html index 0920ae0..f0aa24c 100644 --- a/_site/crow/index.html +++ b/_site/crow/index.html @@ -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 } +

crow

@@ -1233,10 +1451,71 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + +

    printmaking paper notes

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    pronoun patches

    +
      + +
    • print
      • + +
    • patch
      • + +
    • gender
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    quorbs

    +
      + +
    • print
      • + +
    • highlight
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1261,6 +1540,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/designing-a-bag/index.html b/_site/designing-a-bag/index.html index 7019e93..e2913d8 100644 --- a/_site/designing-a-bag/index.html +++ b/_site/designing-a-bag/index.html @@ -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 } +

designing a bag

@@ -1250,10 +1468,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it. + +

    maker's mark keychain

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + +

    mom bag

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + A collage showing an orange leather wallet with a long zipper running the length of the outside. + +

    long zipper bifold

    +
      + +
    • leather
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1278,6 +1551,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/domain-and-site-setup/index.html b/_site/domain-and-site-setup/index.html index 5dac140..1059022 100644 --- a/_site/domain-and-site-setup/index.html +++ b/_site/domain-and-site-setup/index.html @@ -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 } +

domain and site setup

@@ -1285,10 +1503,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    designing a bag

    +
      + +
    • leather
      • + +
    • software
      • + +
    +     +
    2. + +
  2. + + + Image unrelated to post. A crow poses on driftwood against a whitish sky. + +

    screen reader optimizations

    +
      + +
    • software
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    intro to wireframing

    +
      + +
    • software
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1313,6 +1588,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/double-bill-pocket-bifold/index.html b/_site/double-bill-pocket-bifold/index.html index 32f0a55..8832570 100644 --- a/_site/double-bill-pocket-bifold/index.html +++ b/_site/double-bill-pocket-bifold/index.html @@ -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 } +

double bill pocket bifold

@@ -1234,10 +1452,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    designing a bag

    +
      + +
    • leather
      • + +
    • software
      • + +
    +     +
    2. + +
  2. + + + A collage showing an orange leather wallet with a long zipper running the length of the outside. + +

    long zipper bifold

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + Olive green leather cuffs with silver spikes and a shearling lining. + +

    brooke's cuff bracelets

    +
      + +
    • leather
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/dragon-mask/index.html b/_site/dragon-mask/index.html index a0b8763..368b3c8 100644 --- a/_site/dragon-mask/index.html +++ b/_site/dragon-mask/index.html @@ -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 } +

dragon mask

@@ -1239,10 +1457,67 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + 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. + +

    designing a bag

    +
      + +
    • leather
      • + +
    • software
      • + +
    +     +
    2. + +
  2. + + + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + +

    snap pouch

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    happy solstice 2025

    +
      + +
    • highlight
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1267,6 +1542,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/dyeing-fiber/index.html b/_site/dyeing-fiber/index.html index 7d37e05..d8f9883 100644 --- a/_site/dyeing-fiber/index.html +++ b/_site/dyeing-fiber/index.html @@ -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 } +

dyeing fiber

@@ -1234,10 +1452,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + a skein of dark grey handspun yarn + +

    handcombed jacobs handspun

    +
      + +
    • yarn
      • + +
    +     +
    2. + +
  2. + + + 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 + +

    petrichor handspun

    +
      + +
    • yarn
      • + +
    +     +
    3. + +
  3. + + + a skein of a lightly variegated grey yarn in about a sport or DK weight. + +

    spinner's dream handspun

    +
      + +
    • yarn
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/ecommerce-options/index.html b/_site/ecommerce-options/index.html index b4509bf..af745f0 100644 --- a/_site/ecommerce-options/index.html +++ b/_site/ecommerce-options/index.html @@ -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 } +

ecommerce options

@@ -1266,10 +1484,15 @@ export { HeadingAnchors } + +
+ + + + + - -
@@ -1294,6 +1517,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/eight-pocket-bifold/index.html b/_site/eight-pocket-bifold/index.html index 4bbfe8f..cb90414 100644 --- a/_site/eight-pocket-bifold/index.html +++ b/_site/eight-pocket-bifold/index.html @@ -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 } +

eight pocket bifold

@@ -1234,10 +1452,65 @@ export { HeadingAnchors } + +
+ + + + +
+ +
    + +
  1. + + + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + +

    brooke's collar

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + 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. + +

    x-acto knife sheath

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + 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. + +

    swoop wallet

    +
      + +
    • leather
      • + +
    +     +
    4. + +
+ +
+ + - -
@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
- + \ No newline at end of file diff --git a/_site/eleventy-lessons/index.html b/_site/eleventy-lessons/index.html index 6d4240c..523a502 100644 --- a/_site/eleventy-lessons/index.html +++ b/_site/eleventy-lessons/index.html @@ -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 } +

eleventy lessons

@@ -1202,7 +1420,7 @@ export { HeadingAnchors } Image unrelated to post. Close up on a pale green hellebore flower. -

recently I wrote several sites using Eleventy (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 heckin.technology. See ya, GitHub. Won't miss ya.

+

recently I wrote several sites using Eleventy (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 heckin.technology. See ya, GitHub. Won't miss ya.

I've compiled some of the things I've learned in a standalone site: 11ty Lessons.

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.

this will comprise of 4 parts: related posts, featured images, pagination, and tag image preview. Feel free to jump ahead, as none depend on the others.

@@ -1211,15 +1429,16 @@ export { HeadingAnchors }

by default, the Eleventy base blog comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.

while that is useful for this site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.

I started by referring to this GitHub issue about related posts. I had to fix a few errors that arose from the suggested code.

-

I also wanted to make two changes:

+

I also wanted to make three changes:

  1. I didn't want to just see posts that shared all tags, but rather posts that shared any tag
  2. I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order
    3. +
  3. I wanted to exclude the posts that I could reach with between-post pagination

filters.js

after adjusting for those needs, I had the following in filters.js:

-
eleventyConfig.addNunjucksFilter("excludeFromCollection", function (collection=[], pageUrl=this.ctx.page.url) {
-  return collection.filter(post => post.url !== pageUrl);
+
eleventyConfig.addFilter("excludeFromCollection", function (collection=[], urls=[this.ctx.page.url]) {
+  return collection.filter(post => urls.indexOf(post.url) === -1);
 });
 
 eleventyConfig.addFilter("filterByTags", function(collection=[], ...requiredTags) {
@@ -1243,7 +1462,12 @@ eleventyConfig.post.njk
 
I used this in my post layout. filterTagList comes with the base blog by default, and removes the tags "posts" and "all." head also comes with the base blog. postlist.njk is my modified-from-the-base-blog post layout.

 
{% 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 %}
 <section class="related-posts">
 	<h2>related posts</h2>
@@ -1514,10 +1738,67 @@ eleventyExcludeFromCollections: true
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass.
+			
+			
    domain and site setup
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    designing a bag
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    intro to wireframing
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1542,6 +1823,6 @@ eleventyExcludeFromCollections: true
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/euphorbia/index.html b/_site/euphorbia/index.html
index 8852317..1f67422 100644
--- a/_site/euphorbia/index.html
+++ b/_site/euphorbia/index.html
@@ -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 }
 
 
 
+
 
   

     
euphorbia

@@ -1234,10 +1452,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
+			
+			
    foxgloves
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    lupine
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing.
+			
+			
    five of them
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1545,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/fat-raccoon/index.html b/_site/fat-raccoon/index.html
index 7a63280..7994218 100644
--- a/_site/fat-raccoon/index.html
+++ b/_site/fat-raccoon/index.html
@@ -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 }
 
 
 
+
 
   

     
fat raccoon

@@ -1251,10 +1469,77 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
+			
+			
    printmaking paper notes
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
+			
+			
    foxgloves
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1564,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/fd-signifier-and-oppositional-sexism/index.html b/_site/fd-signifier-and-oppositional-sexism/index.html
index ab8468a..27d4021 100644
--- a/_site/fd-signifier-and-oppositional-sexism/index.html
+++ b/_site/fd-signifier-and-oppositional-sexism/index.html
@@ -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 }
 
 
 
+
 
   

     
fd signifier & oppositional sexism

@@ -1268,10 +1486,77 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
+			
+			
    happy biHRTday
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    pronoun patches
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • patch
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
+			
+			
    nonbinary flag
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1296,6 +1581,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/fedizinefest-2025/index.html b/_site/fedizinefest-2025/index.html
index 91ac497..dcd47f8 100644
--- a/_site/fedizinefest-2025/index.html
+++ b/_site/fedizinefest-2025/index.html
@@ -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 }
 
 
 
+
 
   

     
fediZineFest 2025

@@ -1234,10 +1452,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    kestrel zine
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • zine
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    gender as a proxy variable
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • zine
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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
+			
+			
    on the shoulders of giants
    
+			
      
+				
+				
    • zine
      • 
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1543,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/feed.xml b/_site/feed.xml
index 3fc1d23..91cd380 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -15,7 +15,7 @@
     
     2026-02-19T00:00:00Z
     https://leecat.art/eleventy-lessons/
-    <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="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>
diff --git a/_site/fire-and-ice-handspun/index.html b/_site/fire-and-ice-handspun/index.html
index dcfa7fc..fa50f45 100644
--- a/_site/fire-and-ice-handspun/index.html
+++ b/_site/fire-and-ice-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
fire & ice handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			a skein of dark grey handspun yarn
+			
+			
    handcombed jacobs handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a skein of black handspun yarn
+			
+			
    icelandic lamb handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
+			
+			
    handspun yarn in party mix and orange-gold
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/fishhook-pride-keychains/index.html b/_site/fishhook-pride-keychains/index.html
index fc4f101..2c9a71c 100644
--- a/_site/fishhook-pride-keychains/index.html
+++ b/_site/fishhook-pride-keychains/index.html
@@ -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 }
 
 
 
+
 
   

     
fishhook pride keychains

@@ -1239,10 +1457,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
+			
+			
    vertical zipper card wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A brown leather wallet with a subtle trans flag stitching across the top.
+			
+			
    proud dad wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Two pink leather bracelets with stainless steel hardware and aqua stitching.
+			
+			
    rachel's bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1542,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/five-of-them/index.html b/_site/five-of-them/index.html
index adda974..4a2f222 100644
--- a/_site/five-of-them/index.html
+++ b/_site/five-of-them/index.html
@@ -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 }
 
 
 
+
 
   

     
five of them

@@ -1246,10 +1464,79 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
+			
+			
    greeting quorbs
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
+			
+			
    foxgloves
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1274,6 +1561,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/fix-your-hearts/index.html b/_site/fix-your-hearts/index.html
index 585f698..2109bd3 100644
--- a/_site/fix-your-hearts/index.html
+++ b/_site/fix-your-hearts/index.html
@@ -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 }
 
 
 
+
 
   

     
fix your hearts

@@ -1233,10 +1451,77 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch
+			
+			
    stellar's jay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.
+			
+			
    boypussy
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
+			
+			
    printmaking paper notes
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1261,6 +1546,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/flatfish/index.html b/_site/flatfish/index.html
index d4a883f..72bf5f9 100644
--- a/_site/flatfish/index.html
+++ b/_site/flatfish/index.html
@@ -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 }
 
 
 
+
 
   

     
flatfish

@@ -1246,10 +1464,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
+			
+			
    foxgloves
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    crow
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    squarsh
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1274,6 +1551,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/flicker/index.html b/_site/flicker/index.html
index 3119f33..88d7d87 100644
--- a/_site/flicker/index.html
+++ b/_site/flicker/index.html
@@ -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 }
 
 
 
+
 
   

     
flicker

@@ -1251,10 +1469,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
+			
+			
    fat raccoon
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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!'
+			
+			
    geese/trans wrongs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A block print of a spotted towhee mid-leap.
+			
+			
    spotted towhee
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1562,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/flocked-notebook/index.html b/_site/flocked-notebook/index.html
index c8d7a0f..6372947 100644
--- a/_site/flocked-notebook/index.html
+++ b/_site/flocked-notebook/index.html
@@ -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 }
 
 
 
+
 
   

     
flocked notebook

@@ -1247,10 +1465,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A three panel collage showcasing a small book with foldout pages and a bright orange cover.
+			
+			
    orange journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
+			
+			
    leather long-stitch journals
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A three panel collage showcasing a journal with a striped cover.
+			
+			
    striped journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1275,6 +1550,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/foldy-wallet-with-thumb-slide/index.html b/_site/foldy-wallet-with-thumb-slide/index.html
index 6a5b330..b073422 100644
--- a/_site/foldy-wallet-with-thumb-slide/index.html
+++ b/_site/foldy-wallet-with-thumb-slide/index.html
@@ -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 }
 
 
 
+
 
   

     
foldy wallet with thumb slide

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
+			
+			
    little critter pouch
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring.
+			
+			
    stephanie collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Two pink leather bracelets with stainless steel hardware and aqua stitching.
+			
+			
    rachel's bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/foldy-wallet/index.html b/_site/foldy-wallet/index.html
index 811e8db..2f1e0d8 100644
--- a/_site/foldy-wallet/index.html
+++ b/_site/foldy-wallet/index.html
@@ -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 }
 
 
 
+
 
   

     
foldy wallet

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
+			
+			
    leather chest harness
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing an orange leather wallet with a long zipper running the length of the outside.
+			
+			
    long zipper bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Two red leather lobster ornaments, about 4-5 in long each.
+			
+			
    lobstah
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/fountain-pen-friendly-stationery/index.html b/_site/fountain-pen-friendly-stationery/index.html
index bbcb82e..96f0750 100644
--- a/_site/fountain-pen-friendly-stationery/index.html
+++ b/_site/fountain-pen-friendly-stationery/index.html
@@ -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 }
 
 
 
+
 
   

     
fountain pen-friendly stationery

@@ -1249,10 +1467,51 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. A surprisingly neat pile of rounded beach rocks, mainly speckly grey-white-bluish ones, with trees in the background.
+			
+			
    siblinghood of the traveling greeting card
    
+			
      
+				
+				
    • stationery
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms.
+			
+			
    stationery exchange
    
+			
      
+				
+				
    • stationery
      • 
+				
+			
    
+		    
+	
    3. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1277,6 +1536,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/foxgloves/index.html b/_site/foxgloves/index.html
index 4214fb2..f6cce24 100644
--- a/_site/foxgloves/index.html
+++ b/_site/foxgloves/index.html
@@ -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 }
 
 
 
+
 
   

     
foxgloves

@@ -1250,10 +1468,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print in black ink of belly hair.
+			
+			
    hair
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'
+			
+			
    congrats on the gay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence.
+			
+			
    big pidge
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1278,6 +1561,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/1/index.html b/_site/gallery/1/index.html
index 9830737..d079ee7 100644
--- a/_site/gallery/1/index.html
+++ b/_site/gallery/1/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1209,6 +1206,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/10/index.html b/_site/gallery/10/index.html
index dea86f9..983e1e9 100644
--- a/_site/gallery/10/index.html
+++ b/_site/gallery/10/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1213,6 +1210,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/11/index.html b/_site/gallery/11/index.html
index 27bffa5..bf4c119 100644
--- a/_site/gallery/11/index.html
+++ b/_site/gallery/11/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1091,6 +1088,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/2/index.html b/_site/gallery/2/index.html
index c6a25f2..0eb658b 100644
--- a/_site/gallery/2/index.html
+++ b/_site/gallery/2/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1223,6 +1220,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/3/index.html b/_site/gallery/3/index.html
index 068ffd2..205619a 100644
--- a/_site/gallery/3/index.html
+++ b/_site/gallery/3/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1205,6 +1202,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/4/index.html b/_site/gallery/4/index.html
index 87bb23b..311cd52 100644
--- a/_site/gallery/4/index.html
+++ b/_site/gallery/4/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1213,6 +1210,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/5/index.html b/_site/gallery/5/index.html
index 20dd833..f3daf7f 100644
--- a/_site/gallery/5/index.html
+++ b/_site/gallery/5/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1207,6 +1204,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/6/index.html b/_site/gallery/6/index.html
index e682a74..f56925f 100644
--- a/_site/gallery/6/index.html
+++ b/_site/gallery/6/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1211,6 +1208,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/7/index.html b/_site/gallery/7/index.html
index 19277db..2c99c76 100644
--- a/_site/gallery/7/index.html
+++ b/_site/gallery/7/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1255,6 +1252,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/8/index.html b/_site/gallery/8/index.html
index b123f29..9423322 100644
--- a/_site/gallery/8/index.html
+++ b/_site/gallery/8/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1237,6 +1234,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/9/index.html b/_site/gallery/9/index.html
index 0e4de53..9ec51d8 100644
--- a/_site/gallery/9/index.html
+++ b/_site/gallery/9/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1239,6 +1236,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gallery/index.html b/_site/gallery/index.html
index ceec8aa..62b6b98 100644
--- a/_site/gallery/index.html
+++ b/_site/gallery/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1197,6 +1194,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/geese-trans-wrongs/index.html b/_site/geese-trans-wrongs/index.html
index 9337a1d..985d308 100644
--- a/_site/geese-trans-wrongs/index.html
+++ b/_site/geese-trans-wrongs/index.html
@@ -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 }
 
 
 
+
 
   

     
geese/trans wrongs

@@ -1251,10 +1469,77 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
+			
+			
    chanterelle
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print in rainbow ink that says autism with the anarchy A.
+			
+			
    anarchy autism
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch
+			
+			
    stellar's jay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1564,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/geese/index.html b/_site/geese/index.html
index 37bc67d..b45762a 100644
--- a/_site/geese/index.html
+++ b/_site/geese/index.html
@@ -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 }
 
 
 
+
 
   

     
geese

@@ -1251,10 +1469,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
+			
+			
    nonbinary flag
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a brightly colored flower in 4 layers of color
+			
+			
    kniphofia
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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
+			
+			
    artisans cooperative cards
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1558,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gender-as-a-proxy-variable/index.html b/_site/gender-as-a-proxy-variable/index.html
index c631d2b..1911704 100644
--- a/_site/gender-as-a-proxy-variable/index.html
+++ b/_site/gender-as-a-proxy-variable/index.html
@@ -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 }
 
 
 
+
 
   

     
gender as a proxy variable

@@ -1423,10 +1641,85 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
+			
+			
    nonbinary flag
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
+			
+			
    queer
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
+			
+			
    trans wrongs skull
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1451,6 +1744,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gender-in-data-models/index.html b/_site/gender-in-data-models/index.html
index 038c693..4d0b109 100644
--- a/_site/gender-in-data-models/index.html
+++ b/_site/gender-in-data-models/index.html
@@ -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 }
 
 
 
+
 
   

     
gender in data models

@@ -1473,10 +1691,69 @@ This may also be expanded to a multi-step approach, with questions covering some
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    in the news
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.
+			
+			
    handedness toggle
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    pronoun patches
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • patch
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1501,6 +1778,6 @@ This may also be expanded to a multi-step approach, with questions covering some
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gender/index.html b/_site/gender/index.html
index 7ea8b03..0ca4e36 100644
--- a/_site/gender/index.html
+++ b/_site/gender/index.html
@@ -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 }
 
 
 
+
 
   

     
gender?

@@ -1257,10 +1475,79 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    gender as a proxy variable
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • zine
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    pronoun patches
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • patch
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
+			
+			
    trans wrongs skull
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1285,6 +1572,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/girldick/index.html b/_site/girldick/index.html
index 203e6f8..b5149d3 100644
--- a/_site/girldick/index.html
+++ b/_site/girldick/index.html
@@ -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 }
 
 
 
+
 
   

     
girldick

@@ -1261,10 +1479,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
+			
+			
    slightly weird man club
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
+			
+			
    happy biHRTday
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print in dark teal ink depicting a power drill with text in cursive below that reads 'ceci n'est pas un exercice' or 'this is not a drill'
+			
+			
    not a drill
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1289,6 +1572,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/give-to-trans-orgs-and-people/index.html b/_site/give-to-trans-orgs-and-people/index.html
index 584632a..96784c1 100644
--- a/_site/give-to-trans-orgs-and-people/index.html
+++ b/_site/give-to-trans-orgs-and-people/index.html
@@ -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 }
 
 
 
+
 
   

     
give to trans orgs and people

@@ -1293,10 +1511,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    pride dice bags
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
+			
+			
    trans rights skull
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report'
+			
+			
    on the ubiquity of 'enby'
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1321,6 +1604,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/gradient-purse-strap/index.html b/_site/gradient-purse-strap/index.html
index 552935f..e0a66ba 100644
--- a/_site/gradient-purse-strap/index.html
+++ b/_site/gradient-purse-strap/index.html
@@ -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 }
 
 
 
+
 
   

     
gradient purse strap

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A black leather bow tie with black stitching.
+			
+			
    bowtie
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A four part collage showing a single piece of deep red leather folding up to become a card wallet.
+			
+			
    foldy wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
+			
+			
    zipper bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/green-memo-pad/index.html b/_site/green-memo-pad/index.html
index 67e435c..0f53e52 100644
--- a/_site/green-memo-pad/index.html
+++ b/_site/green-memo-pad/index.html
@@ -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 }
 
 
 
+
 
   

     
green memo pad

@@ -1250,10 +1468,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
+			
+			
    brooke's notebook
    
+			
      
+				
+				
    • book
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A three panel collage showing a book held in the palm of a hand.
+			
+			
    tiny books
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it.
+			
+			
    stampede journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1278,6 +1553,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/greeting-loons/index.html b/_site/greeting-loons/index.html
index 83d9f0a..9f9467d 100644
--- a/_site/greeting-loons/index.html
+++ b/_site/greeting-loons/index.html
@@ -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 }
 
 
 
+
 
   

     
greeting loons

@@ -1244,10 +1462,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    crow
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    pronoun patches
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • patch
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower.
+			
+			
    swallowtail on snowdrops
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1272,6 +1553,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/greeting-quorbs/index.html b/_site/greeting-quorbs/index.html
index c41eaab..fed4983 100644
--- a/_site/greeting-quorbs/index.html
+++ b/_site/greeting-quorbs/index.html
@@ -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 }
 
 
 
+
 
   

     
greeting quorbs

@@ -1239,10 +1457,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    squarsh
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers.
+			
+			
    euphorbia
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
+			
+			
    queer
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1548,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/guestbook/index.html b/_site/guestbook/index.html
index 2ccc56f..6980def 100644
--- a/_site/guestbook/index.html
+++ b/_site/guestbook/index.html
@@ -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 {
@@ -1051,8 +1050,6 @@ export { HeadingAnchors }
 
 
 
-
-    

   
 
   

@@ -1077,6 +1074,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/hair/index.html b/_site/hair/index.html
index 46b0ffb..d6875c2 100644
--- a/_site/hair/index.html
+++ b/_site/hair/index.html
@@ -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 }
 
 
 
+
 
   

     
hair

@@ -1246,10 +1464,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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'
+			
+			
    coming out
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
+			
+			
    foxgloves
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers.
+			
+			
    euphorbia
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1274,6 +1555,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/hand-dyed-gold-handspun/index.html b/_site/hand-dyed-gold-handspun/index.html
index 4e6e8af..cdb2451 100644
--- a/_site/hand-dyed-gold-handspun/index.html
+++ b/_site/hand-dyed-gold-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
hand-dyed gold handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			a skein of dark grey handspun yarn
+			
+			
    handcombed jacobs handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight
+			
+			
    charlie the alpaca handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.
+			
+			
    BFL/silk handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/handcombed-jacobs-handspun/index.html b/_site/handcombed-jacobs-handspun/index.html
index dd3660a..3d1cee6 100644
--- a/_site/handcombed-jacobs-handspun/index.html
+++ b/_site/handcombed-jacobs-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
handcombed jacobs handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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
+			
+			
    petrichor handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold.
+			
+			
    dyeing fiber
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    rambouillet handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/handedness-toggle/index.html b/_site/handedness-toggle/index.html
index 58d2c2f..13053f0 100644
--- a/_site/handedness-toggle/index.html
+++ b/_site/handedness-toggle/index.html
@@ -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 }
 
 
 
+
 
   

     
handedness toggle

@@ -1460,10 +1678,65 @@ alignToggle.
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash.
+			
+			
    an intro to git
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats.
+			
+			
    moving images
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Image unrelated to post. Close up on a pale green hellebore flower.
+			
+			
    eleventy lessons
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1488,6 +1761,6 @@ alignToggle.
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html b/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html
index f5fab79..aceb2f4 100644
--- a/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html
+++ b/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html
@@ -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 }
 
 
 
+
 
   

     
handspun yarn in party mix and orange-gold

@@ -1255,10 +1473,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold.
+			
+			
    dyeing fiber
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight.
+			
+			
    fire & ice handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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
+			
+			
    petrichor handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1283,6 +1556,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/happy-bihrtday/index.html b/_site/happy-bihrtday/index.html
index a8e3888..58d6df8 100644
--- a/_site/happy-bihrtday/index.html
+++ b/_site/happy-bihrtday/index.html
@@ -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 }
 
 
 
+
 
   

     
happy biHRTday

@@ -1250,10 +1468,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    pronoun patches
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • patch
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a tattooed woman in bright highlighter yellow underwear.
+			
+			
    luminescent
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'
+			
+			
    congrats on the gay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1278,6 +1559,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/happy-solstice-2024/index.html b/_site/happy-solstice-2024/index.html
index ec78d0a..d68ad87 100644
--- a/_site/happy-solstice-2024/index.html
+++ b/_site/happy-solstice-2024/index.html
@@ -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 }
 
 
 
+
 
   

     
happy solstice 2024

@@ -1225,10 +1443,15 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+
 
 
-
-    

   
 
   

@@ -1253,6 +1476,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/happy-solstice-2025/index.html b/_site/happy-solstice-2025/index.html
index c5abc55..5b30cc6 100644
--- a/_site/happy-solstice-2025/index.html
+++ b/_site/happy-solstice-2025/index.html
@@ -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 }
 
 
 
+
 
   

     
happy solstice 2025

@@ -1234,10 +1452,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    quorbs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Hands wearing a pair of pink and grey gloves with convertable mitten tops.
+			
+			
    butch hands pattern
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Image unrelated to post. A light pink peony in full bloom, close up.
+			
+			
    gender in data models
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • software
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1543,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/heron/index.html b/_site/heron/index.html
index 86c196b..9ecd598 100644
--- a/_site/heron/index.html
+++ b/_site/heron/index.html
@@ -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 }
 
 
 
+
 
   

     
heron

@@ -1251,10 +1469,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    quorbs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch
+			
+			
    stellar's jay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a simple flatfish design inked in sepia.
+			
+			
    flatfish
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1560,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/hummingbird-become-ungovernable/index.html b/_site/hummingbird-become-ungovernable/index.html
index f02fcb8..e444166 100644
--- a/_site/hummingbird-become-ungovernable/index.html
+++ b/_site/hummingbird-become-ungovernable/index.html
@@ -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 }
 
 
 
+
 
   

     
hummingbird become ungovernable

@@ -1251,10 +1469,77 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print in black ink of belly hair.
+			
+			
    hair
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail.
+			
+			
    artisans cooperative shirts
    
+			
      
+				
+				
    • shirt
      • 
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1564,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/icelandic-lamb-handspun/index.html b/_site/icelandic-lamb-handspun/index.html
index 58b66e1..dab9b2a 100644
--- a/_site/icelandic-lamb-handspun/index.html
+++ b/_site/icelandic-lamb-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
icelandic lamb handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			a skein of a lightly variegated grey yarn in about a sport or DK weight.
+			
+			
    spinner's dream handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    coral reef handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green.
+			
+			
    orion handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/in-the-news/index.html b/_site/in-the-news/index.html
index 7ae581c..7f0f7fd 100644
--- a/_site/in-the-news/index.html
+++ b/_site/in-the-news/index.html
@@ -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 }
 
 
 
+
 
   

     
in the news

@@ -1242,10 +1460,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. A close up on a flower bouquet in shades of purple, pink, and white. Centered is a large, almost soft-looking pink flower that is still partially closed up.
+			
+			
    give to trans orgs and people
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order
+			
+			
    queer book list
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
+			
+			
    nonbinary flag
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1270,6 +1547,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/index.html b/_site/index.html
index 2c5a231..c85cd7e 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -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 {
@@ -1169,8 +1168,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1195,6 +1192,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/intro-to-wireframing/index.html b/_site/intro-to-wireframing/index.html
index 769f169..f631f77 100644
--- a/_site/intro-to-wireframing/index.html
+++ b/_site/intro-to-wireframing/index.html
@@ -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 }
 
 
 
+
 
   

     
intro to wireframing

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. Close up on a pale green hellebore flower.
+			
+			
    eleventy lessons
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font.
+			
+			
    backend accessibility
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats.
+			
+			
    moving images
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/iris/index.html b/_site/iris/index.html
index 2e0d3e2..4b782a8 100644
--- a/_site/iris/index.html
+++ b/_site/iris/index.html
@@ -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 }
 
 
 
+
 
   

     
iris

@@ -1249,10 +1467,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
+			
+			
    greeting loons
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a loon rearing up with wings spread
+			
+			
    loon
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
+			
+			
    greeting quorbs
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1277,6 +1556,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/junco/index.html b/_site/junco/index.html
index a8223cd..ed485ad 100644
--- a/_site/junco/index.html
+++ b/_site/junco/index.html
@@ -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 }
 
 
 
+
 
   

     
junco

@@ -1246,10 +1464,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
+			
+			
    happy biHRTday
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
+			
+			
    chanterelle
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
+			
+			
    nonbinary flag
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1274,6 +1557,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/keffiyah-fishing-net-pattern/index.html b/_site/keffiyah-fishing-net-pattern/index.html
index 2f84c00..33e04b7 100644
--- a/_site/keffiyah-fishing-net-pattern/index.html
+++ b/_site/keffiyah-fishing-net-pattern/index.html
@@ -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 }
 
 
 
+
 
   

     
keffiyah fishing net pattern

@@ -1427,10 +1645,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.
+			
+			
    knit shrimp
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    pride dice bags
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray.
+			
+			
    brooke's socks
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1455,6 +1730,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/kestrel-zine/index.html b/_site/kestrel-zine/index.html
index 48c8fea..65feebc 100644
--- a/_site/kestrel-zine/index.html
+++ b/_site/kestrel-zine/index.html
@@ -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 }
 
 
 
+
 
   

     
kestrel zine

@@ -1243,10 +1461,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
+			
+			
    queer
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    dragon mask
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A collage showing various small (around an inch) stamps that depict people or animals.
+			
+			
    tiny portraits
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1271,6 +1554,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/killdeer/index.html b/_site/killdeer/index.html
index df7611d..84f16fb 100644
--- a/_site/killdeer/index.html
+++ b/_site/killdeer/index.html
@@ -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 }
 
 
 
+
 
   

     
killdeer

@@ -1246,10 +1464,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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
+			
+			
    artisans cooperative cards
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A landscape-oriented white card with a two-color print of a blue-footed booby.
+			
+			
    booby (congrats on the top surgery)
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    trans the world
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1274,6 +1557,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/kniphofia/index.html b/_site/kniphofia/index.html
index 30f0e31..a12d0b6 100644
--- a/_site/kniphofia/index.html
+++ b/_site/kniphofia/index.html
@@ -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 }
 
 
 
+
 
   

     
kniphofia

@@ -1234,10 +1452,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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'
+			
+			
    coming out
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes.
+			
+			
    iris
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
+			
+			
    slightly weird man club
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1545,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/knit-shrimp/index.html b/_site/knit-shrimp/index.html
index 0d331fe..b30e859 100644
--- a/_site/knit-shrimp/index.html
+++ b/_site/knit-shrimp/index.html
@@ -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 }
 
 
 
+
 
   

     
knit shrimp

@@ -1239,10 +1457,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    pride dice bags
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    sideways canvas shirt
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    textures unite
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1544,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/leaf-patches/index.html b/_site/leaf-patches/index.html
index d3a2f02..e6528f8 100644
--- a/_site/leaf-patches/index.html
+++ b/_site/leaf-patches/index.html
@@ -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 }
 
 
 
+
 
   

     
leaf patches

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.
+			
+			
    double bill pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
+			
+			
    little critter pouch
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A bic lighter wrapped in leather and hand-stitched up one side.
+			
+			
    leather lighter case
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/leather-chest-harness/index.html b/_site/leather-chest-harness/index.html
index e1182f0..2807700 100644
--- a/_site/leather-chest-harness/index.html
+++ b/_site/leather-chest-harness/index.html
@@ -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 }
 
 
 
+
 
   

     
leather chest harness

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing an orange leather wallet with a long zipper running the length of the outside.
+			
+			
    long zipper bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a two image collage showing the front and back of a person, neck to waist. she's wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back.
+			
+			
    brooke's suspenders
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			two wrists, each wearing a black leather wrap bracelet. the upper bracelet is a thin strap wrapped 3 times around the wrist. the lower bracelet wraps twice, with a thicker strap, and has carefully placed spikes that avoid the wrap spots.
+			
+			
    wrap bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/leather-keychains/index.html b/_site/leather-keychains/index.html
index 0367003..0dc32fd 100644
--- a/_site/leather-keychains/index.html
+++ b/_site/leather-keychains/index.html
@@ -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 }
 
 
 
+
 
   

     
leather keychains

@@ -1242,10 +1460,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Two pink leather bracelets with stainless steel hardware and aqua stitching.
+			
+			
    rachel's bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
+			
+			
    vertical card wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
+			
+			
    leaf patches
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1270,6 +1543,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/leather-lighter-case/index.html b/_site/leather-lighter-case/index.html
index 7380ae1..5738d92 100644
--- a/_site/leather-lighter-case/index.html
+++ b/_site/leather-lighter-case/index.html
@@ -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 }
 
 
 
+
 
   

     
leather lighter case

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A brown leather wallet with a subtle trans flag stitching across the top.
+			
+			
    proud dad wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing an orange leather wallet with a long zipper running the length of the outside.
+			
+			
    long zipper bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather.
+			
+			
    snap pouch
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/leather-long-stitch-journals/index.html b/_site/leather-long-stitch-journals/index.html
index a6577bf..3d1335f 100644
--- a/_site/leather-long-stitch-journals/index.html
+++ b/_site/leather-long-stitch-journals/index.html
@@ -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 }
 
 
 
+
 
   

     
leather long-stitch journals

@@ -1239,10 +1457,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.
+			
+			
    brooke's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.
+			
+			
    double bill pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			two wrists, each wearing a black leather wrap bracelet. the upper bracelet is a thin strap wrapped 3 times around the wrist. the lower bracelet wraps twice, with a thicker strap, and has carefully placed spikes that avoid the wrap spots.
+			
+			
    wrap bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1540,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/leather-strap-journal/index.html b/_site/leather-strap-journal/index.html
index b084705..ebd73b7 100644
--- a/_site/leather-strap-journal/index.html
+++ b/_site/leather-strap-journal/index.html
@@ -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 }
 
 
 
+
 
   

     
leather strap journal

@@ -1244,10 +1462,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
+			
+			
    brooke's notebook
    
+			
      
+				
+				
    • book
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
+			
+			
    baseball journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A three panel collage showcasing a small green memo pad.
+			
+			
    green memo pad
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1272,6 +1547,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/leatherworking-favorites/index.html b/_site/leatherworking-favorites/index.html
index 149b6a0..37b9cd9 100644
--- a/_site/leatherworking-favorites/index.html
+++ b/_site/leatherworking-favorites/index.html
@@ -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 }
 
 
 
+
 
   

     
leatherworking favorites

@@ -1362,10 +1580,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Olive green leather cuffs with silver spikes and a shearling lining.
+			
+			
    brooke's cuff bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A cat in a sunbeam snuggles a little leather mouse-shaped cat toy.
+			
+			
    mousie
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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'.
+			
+			
    leather keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1390,6 +1663,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/light-grey-jacobs-handspun/index.html b/_site/light-grey-jacobs-handspun/index.html
index ccccb22..808d11a 100644
--- a/_site/light-grey-jacobs-handspun/index.html
+++ b/_site/light-grey-jacobs-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
light grey jacobs handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight
+			
+			
    hand-dyed gold handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a skein of a lightly variegated grey yarn in about a sport or DK weight.
+			
+			
    spinner's dream handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight
+			
+			
    ruby the alpaca handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/lined-notebook/index.html b/_site/lined-notebook/index.html
index ffd17d5..3f7d0a9 100644
--- a/_site/lined-notebook/index.html
+++ b/_site/lined-notebook/index.html
@@ -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 }
 
 
 
+
 
   

     
lined notebook

@@ -1247,10 +1465,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A 4-part collage of a slim handbound book.
+			
+			
    orange green journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
+			
+			
    brooke's notebook
    
+			
      
+				
+				
    • book
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A three panel collage showcasing a blue and brown leather-covered journal.
+			
+			
    blue and brown leather journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1275,6 +1550,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/little-critter-pouch/index.html b/_site/little-critter-pouch/index.html
index f40c9d3..b5f4a64 100644
--- a/_site/little-critter-pouch/index.html
+++ b/_site/little-critter-pouch/index.html
@@ -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 }
 
 
 
+
 
   

     
little critter pouch

@@ -1239,10 +1457,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A cat in a sunbeam snuggles a little leather mouse-shaped cat toy.
+			
+			
    mousie
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.
+			
+			
    double bill pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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'.
+			
+			
    leather keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1540,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/lobstah/index.html b/_site/lobstah/index.html
index c42ee68..81aec0b 100644
--- a/_site/lobstah/index.html
+++ b/_site/lobstah/index.html
@@ -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 }
 
 
 
+
 
   

     
lobstah

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
+			
+			
    fishhook pride keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A nylon webbing harness in bright teal laid out on a desk.
+			
+			
    moss harness
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    sora's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/long-zipper-bifold/index.html b/_site/long-zipper-bifold/index.html
index 2a67737..8b7c698 100644
--- a/_site/long-zipper-bifold/index.html
+++ b/_site/long-zipper-bifold/index.html
@@ -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 }
 
 
 
+
 
   

     
long zipper bifold

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A nylon webbing harness in bright teal laid out on a desk.
+			
+			
    moss harness
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
+			
+			
    vertical bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    gradient purse strap
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/loon/index.html b/_site/loon/index.html
index f0ed865..42e1a0d 100644
--- a/_site/loon/index.html
+++ b/_site/loon/index.html
@@ -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 }
 
 
 
+
 
   

     
loon

@@ -1233,10 +1451,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print in black ink of belly hair.
+			
+			
    hair
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.
+			
+			
    heron
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a killdeer in black ink.
+			
+			
    killdeer
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1261,6 +1542,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/luminescent/index.html b/_site/luminescent/index.html
index 6eb7c74..ac21234 100644
--- a/_site/luminescent/index.html
+++ b/_site/luminescent/index.html
@@ -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 }
 
 
 
+
 
   

     
luminescent

@@ -1234,10 +1452,77 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
+			
+			
    slightly weird man club
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
+			
+			
    foxgloves
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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!'
+			
+			
    geese/trans wrongs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1547,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/lupine/index.html b/_site/lupine/index.html
index c8fac34..f5b1cfe 100644
--- a/_site/lupine/index.html
+++ b/_site/lupine/index.html
@@ -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 }
 
 
 
+
 
   

     
lupine

@@ -1251,10 +1469,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers.
+			
+			
    euphorbia
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
+			
+			
    happy biHRTday
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a killdeer in black ink.
+			
+			
    killdeer
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1558,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/makers-mark-keychain/index.html b/_site/makers-mark-keychain/index.html
index a0bcb16..fd0774c 100644
--- a/_site/makers-mark-keychain/index.html
+++ b/_site/makers-mark-keychain/index.html
@@ -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 }
 
 
 
+
 
   

     
maker's mark keychain

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
+			
+			
    vertical card wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A bic lighter wrapped in leather and hand-stitched up one side.
+			
+			
    leather lighter case
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.
+			
+			
    double bill pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/mom-bag/index.html b/_site/mom-bag/index.html
index 0c58d3e..9c2dc36 100644
--- a/_site/mom-bag/index.html
+++ b/_site/mom-bag/index.html
@@ -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 }
 
 
 
+
 
   

     
mom bag

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    swoop wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
+			
+			
    vertical bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    dragon mask
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/moss-harness/index.html b/_site/moss-harness/index.html
index 20c212a..48470b4 100644
--- a/_site/moss-harness/index.html
+++ b/_site/moss-harness/index.html
@@ -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 }
 
 
 
+
 
   

     
moss harness

@@ -1235,10 +1453,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    sora's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A bic lighter wrapped in leather and hand-stitched up one side.
+			
+			
    leather lighter case
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp.
+			
+			
    mom bag
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1263,6 +1536,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/mousie/index.html b/_site/mousie/index.html
index bbbb728..55474ca 100644
--- a/_site/mousie/index.html
+++ b/_site/mousie/index.html
@@ -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 }
 
 
 
+
 
   

     
mousie

@@ -1234,10 +1452,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    designing a bag
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
+			
+			
    tooled leather patches
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
+			
+			
    fishhook pride keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1541,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/moving-images/index.html b/_site/moving-images/index.html
index 7e6fb49..30c1728 100644
--- a/_site/moving-images/index.html
+++ b/_site/moving-images/index.html
@@ -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 }
 
 
 
+
 
   

     
moving images

@@ -1306,10 +1524,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type
+			
+			
    azure locations and file crawling
    
+			
      
+				
+				
    • software
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    intro to wireframing
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    designing a bag
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1334,6 +1611,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/my-favorite-git-flag/index.html b/_site/my-favorite-git-flag/index.html
index 3a783e8..5a7b7a8 100644
--- a/_site/my-favorite-git-flag/index.html
+++ b/_site/my-favorite-git-flag/index.html
@@ -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 }
 
 
 
+
 
   

     
my favorite git flag

@@ -1257,10 +1475,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets.
+			
+			
    redirections
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type
+			
+			
    azure locations and file crawling
    
+			
      
+				
+				
    • software
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Image unrelated to post. A crow poses on driftwood against a whitish sky.
+			
+			
    screen reader optimizations
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1285,6 +1560,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/networks-of-trans-care/index.html b/_site/networks-of-trans-care/index.html
index 9fe4e42..6f04f85 100644
--- a/_site/networks-of-trans-care/index.html
+++ b/_site/networks-of-trans-care/index.html
@@ -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 }
 
 
 
+
 
   

     
networks of trans care

@@ -1249,10 +1467,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    gender as a proxy variable
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • zine
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac.
+			
+			
    bottom growth
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'
+			
+			
    congrats on the gay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1277,6 +1558,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/nine-pocket-bifold/index.html b/_site/nine-pocket-bifold/index.html
index 893e738..a3fbdd7 100644
--- a/_site/nine-pocket-bifold/index.html
+++ b/_site/nine-pocket-bifold/index.html
@@ -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 }
 
 
 
+
 
   

     
nine pocket bifold

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    sora's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Olive green leather cuffs with silver spikes and a shearling lining.
+			
+			
    brooke's cuff bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
+			
+			
    vertical bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/no-politics-wip/index.html b/_site/no-politics-wip/index.html
index f6f2288..f0474bd 100644
--- a/_site/no-politics-wip/index.html
+++ b/_site/no-politics-wip/index.html
@@ -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 }
 
 
 
+
 
   

     
no politics (wip)

@@ -1274,10 +1492,15 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+
 
 
-
-    

   
 
   

@@ -1302,6 +1525,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/nonbinary-flag/index.html b/_site/nonbinary-flag/index.html
index 2ed8d64..6a4deb8 100644
--- a/_site/nonbinary-flag/index.html
+++ b/_site/nonbinary-flag/index.html
@@ -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 }
 
 
 
+
 
   

     
nonbinary flag

@@ -1251,10 +1469,77 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder.
+			
+			
    on pronouns
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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!'
+			
+			
    geese/trans wrongs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1564,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/not-a-drill/index.html b/_site/not-a-drill/index.html
index b5f2ff9..55dab75 100644
--- a/_site/not-a-drill/index.html
+++ b/_site/not-a-drill/index.html
@@ -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 }
 
 
 
+
 
   

     
not a drill

@@ -1239,10 +1457,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk.
+			
+			
    brown creeper
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
+			
+			
    happy biHRTday
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    crow
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1544,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/o-ring-bracelet/index.html b/_site/o-ring-bracelet/index.html
index 35a9466..108a2f9 100644
--- a/_site/o-ring-bracelet/index.html
+++ b/_site/o-ring-bracelet/index.html
@@ -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 }
 
 
 
+
 
   

     
o-ring bracelet

@@ -1239,10 +1457,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A bic lighter wrapped in leather and hand-stitched up one side.
+			
+			
    leather lighter case
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole.
+			
+			
    eight pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A collage showing an orange leather wallet with a long zipper running the length of the outside.
+			
+			
    long zipper bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1540,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/on-pronouns/index.html b/_site/on-pronouns/index.html
index 7660f41..be8266b 100644
--- a/_site/on-pronouns/index.html
+++ b/_site/on-pronouns/index.html
@@ -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 }
 
 
 
+
 
   

     
on pronouns

@@ -1477,10 +1695,81 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
+			
+			
    trans wrongs skull
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Image unrelated to post. A close up on a flower bouquet in shades of purple, pink, and white. Centered is a large, almost soft-looking pink flower that is still partially closed up.
+			
+			
    give to trans orgs and people
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1505,6 +1794,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/on-the-shoulders-of-giants/index.html b/_site/on-the-shoulders-of-giants/index.html
index ce23092..41bcc9f 100644
--- a/_site/on-the-shoulders-of-giants/index.html
+++ b/_site/on-the-shoulders-of-giants/index.html
@@ -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 }
 
 
 
+
 
   

     
on the shoulders of giants

@@ -1239,10 +1457,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray.
+			
+			
    brooke's socks
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025.
+			
+			
    fediZineFest 2025
    
+			
      
+				
+				
    • zine
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    kestrel zine
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • zine
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1544,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/on-the-ubiquity-of-enby/index.html b/_site/on-the-ubiquity-of-enby/index.html
index c8c92a6..ebf7d37 100644
--- a/_site/on-the-ubiquity-of-enby/index.html
+++ b/_site/on-the-ubiquity-of-enby/index.html
@@ -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 }
 
 
 
+
 
   

     
on the ubiquity of 'enby'

@@ -1248,10 +1466,83 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
+			
+			
    trans wrongs skull
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac.
+			
+			
    bottom growth
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1276,6 +1567,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/orange-green-journal/index.html b/_site/orange-green-journal/index.html
index 8891ba1..0ebf1ff 100644
--- a/_site/orange-green-journal/index.html
+++ b/_site/orange-green-journal/index.html
@@ -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 }
 
 
 
+
 
   

     
orange green journal

@@ -1244,10 +1462,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A three panel collage showing a book held in the palm of a hand.
+			
+			
    tiny books
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
+			
+			
    brooke's notebook
    
+			
      
+				
+				
    • book
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.
+			
+			
    Acadia coloring journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1272,6 +1547,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/orange-journal/index.html b/_site/orange-journal/index.html
index 5972661..ce3641e 100644
--- a/_site/orange-journal/index.html
+++ b/_site/orange-journal/index.html
@@ -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 }
 
 
 
+
 
   

     
orange journal

@@ -1250,10 +1468,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A 3-part collage showing a blue journal with leather straps woven into the covers.
+			
+			
    leather strap journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
+			
+			
    baseball journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A three panel collage showcasing a small green memo pad.
+			
+			
    green memo pad
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1278,6 +1551,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/orion-handspun/index.html b/_site/orion-handspun/index.html
index d7ce7ae..1e90760 100644
--- a/_site/orion-handspun/index.html
+++ b/_site/orion-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
orion handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
+			
+			
    handspun yarn in party mix and orange-gold
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight
+			
+			
    charlie the alpaca handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			a skein of black handspun yarn
+			
+			
    icelandic lamb handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/palette/index.html b/_site/palette/index.html
index df09d7a..2381420 100644
--- a/_site/palette/index.html
+++ b/_site/palette/index.html
@@ -112,8 +112,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 */
@@ -134,7 +132,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -153,7 +151,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -162,6 +159,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -323,13 +324,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 {
@@ -345,9 +342,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 */
@@ -540,6 +538,7 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: .5rem solid var(--color-pink);
 }
 
 footer ul {
@@ -1018,8 +1017,6 @@ export { HeadingAnchors }
 
 
 
-
-    

   
 
   

@@ -1044,6 +1041,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/patchwork-wallet/index.html b/_site/patchwork-wallet/index.html
index e7f2b2d..b3566a1 100644
--- a/_site/patchwork-wallet/index.html
+++ b/_site/patchwork-wallet/index.html
@@ -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 }
 
 
 
+
 
   

     
patchwork wallet

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide.
+			
+			
    foldy wallet with thumb slide
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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'.
+			
+			
    leather keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A nylon webbing shoulder strap in bright teal with clips on each end.
+			
+			
    bag strap
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/petrichor-handspun/index.html b/_site/petrichor-handspun/index.html
index 0dad75b..0f7fe67 100644
--- a/_site/petrichor-handspun/index.html
+++ b/_site/petrichor-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
petrichor handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green.
+			
+			
    orion handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.
+			
+			
    BFL/silk handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    coral reef handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/pinatex-wallet-with-zipper/index.html b/_site/pinatex-wallet-with-zipper/index.html
index 98721f6..3f2818e 100644
--- a/_site/pinatex-wallet-with-zipper/index.html
+++ b/_site/pinatex-wallet-with-zipper/index.html
@@ -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 }
 
 
 
+
 
   

     
piñatex wallet with zipper

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing a green leather wallet with a zippered pocket built into one external side.
+			
+			
    zipper bifold (green)
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    swoop wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps.
+			
+			
    o-ring bracelet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/pink-socks/index.html b/_site/pink-socks/index.html
index 9132363..ce51240 100644
--- a/_site/pink-socks/index.html
+++ b/_site/pink-socks/index.html
@@ -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 }
 
 
 
+
 
   

     
pink socks

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    pride dice bags
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.
+			
+			
    knit shrimp
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    sideways canvas shirt
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/pins/index.html b/_site/pins/index.html
index e8647e6..3d42b3b 100644
--- a/_site/pins/index.html
+++ b/_site/pins/index.html
@@ -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 }
 
 
 
+
 
   

     
pins!

@@ -1235,10 +1453,87 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of a small shrimp with slender little leggies in orange ink.
+			
+			
    shrimp
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
+			
+			
    trans wrongs skull
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1263,6 +1558,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/pride-dice-bags/index.html b/_site/pride-dice-bags/index.html
index a754752..a989252 100644
--- a/_site/pride-dice-bags/index.html
+++ b/_site/pride-dice-bags/index.html
@@ -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 }
 
 
 
+
 
   

     
pride dice bags

@@ -1257,10 +1475,81 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
+			
+			
    happy biHRTday
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    trans the world
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
+			
+			
    queer
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1285,6 +1574,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/printing-press-notes/index.html b/_site/printing-press-notes/index.html
index 831fefa..e006338 100644
--- a/_site/printing-press-notes/index.html
+++ b/_site/printing-press-notes/index.html
@@ -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 }
 
 
 
+
 
   

     
printing press notes

@@ -1249,10 +1467,15 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+
 
 
-
-    

   
 
   

@@ -1277,6 +1500,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/printmaking-paper-notes/index.html b/_site/printmaking-paper-notes/index.html
index 6adb053..c2a0ef8 100644
--- a/_site/printmaking-paper-notes/index.html
+++ b/_site/printmaking-paper-notes/index.html
@@ -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 }
 
 
 
+
 
   

     
printmaking paper notes

@@ -1285,10 +1503,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A block print of a spotted towhee mid-leap.
+			
+			
    spotted towhee
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a nude trans woman in an asymmetrical rope harness.
+			
+			
    rope (one)
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch
+			
+			
    stellar's jay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1313,6 +1592,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/pronoun-patches/index.html b/_site/pronoun-patches/index.html
index 772ebfe..428ee65 100644
--- a/_site/pronoun-patches/index.html
+++ b/_site/pronoun-patches/index.html
@@ -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 }
 
 
 
+
 
   

     
pronoun patches

@@ -1265,10 +1483,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk.
+			
+			
    networks of trans care
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
+			
+			
    chanterelle
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.
+			
+			
    heron
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1293,6 +1572,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/proud-dad-wallet/index.html b/_site/proud-dad-wallet/index.html
index 9f1759d..d56a3ae 100644
--- a/_site/proud-dad-wallet/index.html
+++ b/_site/proud-dad-wallet/index.html
@@ -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 }
 
 
 
+
 
   

     
proud dad wallet

@@ -1239,10 +1457,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing a green leather wallet with a zippered pocket built into one external side.
+			
+			
    zipper bifold (green)
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
+			
+			
    leather chest harness
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
+			
+			
    slightly weird man club
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1544,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/queer-book-list/index.html b/_site/queer-book-list/index.html
index a63a19b..ae2be08 100644
--- a/_site/queer-book-list/index.html
+++ b/_site/queer-book-list/index.html
@@ -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 }
 
 
 
+
 
   

     
queer book list

@@ -1228,10 +1446,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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'
+			
+			
    coming out
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field.
+			
+			
    fd signifier & oppositional sexism
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    gender as a proxy variable
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • zine
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1256,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/queer/index.html b/_site/queer/index.html
index 67dfd0b..23f570c 100644
--- a/_site/queer/index.html
+++ b/_site/queer/index.html
@@ -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 }
 
 
 
+
 
   

     
queer

@@ -1260,10 +1478,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report'
+			
+			
    on the ubiquity of 'enby'
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch
+			
+			
    stellar's jay
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A page of handwritten notes with some loosely drawn charts, described further in the post.
+			
+			
    gender?
    
+			
      
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1288,6 +1565,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/quorbs/index.html b/_site/quorbs/index.html
index fe35ae3..f0982d6 100644
--- a/_site/quorbs/index.html
+++ b/_site/quorbs/index.html
@@ -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 }
 
 
 
+
 
   

     
quorbs

@@ -1239,10 +1457,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    happy solstice 2025
    
+			
      
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    squarsh
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    crow
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1540,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/rachels-bracelets/index.html b/_site/rachels-bracelets/index.html
index c05013c..98444f4 100644
--- a/_site/rachels-bracelets/index.html
+++ b/_site/rachels-bracelets/index.html
@@ -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 }
 
 
 
+
 
   

     
rachel's bracelets

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
+			
+			
    fishhook pride keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide.
+			
+			
    foldy wallet with thumb slide
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
+			
+			
    aaron's mask
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/rambouillet-handspun/index.html b/_site/rambouillet-handspun/index.html
index a5f954a..a0faa52 100644
--- a/_site/rambouillet-handspun/index.html
+++ b/_site/rambouillet-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
rambouillet handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    coral reef handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			6 small skeins of handspun yarn, each made from a different plant fiber. from top, we have flax (medium brown, rough); what is probably lotus (golden, shiny and soft); banana (white and semi shiny); hemp (light brown, rough); tencel (white and very shiny); ramie (a particularly small skein, white and semi shiny)
+			
+			
    spinning plants
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight
+			
+			
    ruby the alpaca handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/recommendations-and-favorites/index.html b/_site/recommendations-and-favorites/index.html
index f232a81..9bf4d27 100644
--- a/_site/recommendations-and-favorites/index.html
+++ b/_site/recommendations-and-favorites/index.html
@@ -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 }
 
 
 
+
 
   

     
recommendations & favorites

@@ -1270,10 +1488,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    textures unite
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
+			
+			
    little critter pouch
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    happy solstice 2025
    
+			
      
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1298,6 +1575,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/redirections/index.html b/_site/redirections/index.html
index a1d8cb7..9c8586c 100644
--- a/_site/redirections/index.html
+++ b/_site/redirections/index.html
@@ -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 }
 
 
 
+
 
   

     
redirections

@@ -1283,10 +1501,69 @@ heredoc> tempest.md

 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash.
+			
+			
    an intro to git
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Image unrelated to post. A light pink peony in full bloom, close up.
+			
+			
    gender in data models
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • software
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.
+			
+			
    handedness toggle
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1311,6 +1588,6 @@ heredoc> tempest.md

 
 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/reference/1/index.html b/_site/reference/1/index.html
index ac04a0d..6a7ec7b 100644
--- a/_site/reference/1/index.html
+++ b/_site/reference/1/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1201,6 +1198,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/reference/2/index.html b/_site/reference/2/index.html
index 0afaebc..b06510d 100644
--- a/_site/reference/2/index.html
+++ b/_site/reference/2/index.html
@@ -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 {
@@ -1093,8 +1092,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1119,6 +1116,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/reference/index.html b/_site/reference/index.html
index 8cac848..1dfdb05 100644
--- a/_site/reference/index.html
+++ b/_site/reference/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1201,6 +1198,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/rescue-trans-rescue/index.html b/_site/rescue-trans-rescue/index.html
index 44e53bc..d451286 100644
--- a/_site/rescue-trans-rescue/index.html
+++ b/_site/rescue-trans-rescue/index.html
@@ -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 }
 
 
 
+
 
   

     
rescue Trans Rescue

@@ -1228,10 +1446,15 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+
 
 
-
-    

   
 
   

@@ -1256,6 +1479,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/resume/index.html b/_site/resume/index.html
index d834d84..303b75e 100644
--- a/_site/resume/index.html
+++ b/_site/resume/index.html
@@ -121,8 +121,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 */
@@ -143,7 +141,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -162,7 +160,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -171,6 +168,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -332,13 +333,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 {
@@ -354,9 +351,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 */
@@ -549,6 +547,7 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: .5rem solid var(--color-pink);
 }
 
 footer ul {
@@ -980,8 +979,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1006,6 +1003,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/rope-one/index.html b/_site/rope-one/index.html
index 56404dd..a260e6a 100644
--- a/_site/rope-one/index.html
+++ b/_site/rope-one/index.html
@@ -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 }
 
 
 
+
 
   

     
rope (one)

@@ -1241,10 +1459,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.
+			
+			
    heron
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
+			
+			
    slightly weird man club
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
+			
+			
    printmaking paper notes
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1269,6 +1550,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/ruby-the-alpaca-handspun/index.html b/_site/ruby-the-alpaca-handspun/index.html
index 1152132..2458f3a 100644
--- a/_site/ruby-the-alpaca-handspun/index.html
+++ b/_site/ruby-the-alpaca-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
ruby the alpaca handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			6 small skeins of handspun yarn, each made from a different plant fiber. from top, we have flax (medium brown, rough); what is probably lotus (golden, shiny and soft); banana (white and semi shiny); hemp (light brown, rough); tencel (white and very shiny); ramie (a particularly small skein, white and semi shiny)
+			
+			
    spinning plants
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold.
+			
+			
    dyeing fiber
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.
+			
+			
    BFL/silk handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/scrap-patches/index.html b/_site/scrap-patches/index.html
index b9d460d..a1f5415 100644
--- a/_site/scrap-patches/index.html
+++ b/_site/scrap-patches/index.html
@@ -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 }
 
 
 
+
 
   

     
scrap patches

@@ -1233,10 +1451,41 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    pronoun patches
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • patch
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1261,6 +1510,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/screen-reader-optimizations/index.html b/_site/screen-reader-optimizations/index.html
index a111ed4..792e5df 100644
--- a/_site/screen-reader-optimizations/index.html
+++ b/_site/screen-reader-optimizations/index.html
@@ -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 }
 
 
 
+
 
   

     
screen reader optimizations

@@ -1286,10 +1504,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Image unrelated to post. A light pink peony in full bloom, close up.
+			
+			
    gender in data models
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • software
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type
+			
+			
    azure locations and file crawling
    
+			
      
+				
+				
    • software
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash.
+			
+			
    an intro to git
    
+			
      
+				
+				
    • software
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1314,6 +1593,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/seedling/index.html b/_site/seedling/index.html
index cb11a4f..e16561c 100644
--- a/_site/seedling/index.html
+++ b/_site/seedling/index.html
@@ -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 }
 
 
 
+
 
   

     
seedling

@@ -1246,10 +1464,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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!'
+			
+			
    geese/trans wrongs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    tiny mushrooms
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
+			
+			
    greeting loons
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1274,6 +1555,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/shirt-making-notes/index.html b/_site/shirt-making-notes/index.html
index 54b9c49..a81fd3b 100644
--- a/_site/shirt-making-notes/index.html
+++ b/_site/shirt-making-notes/index.html
@@ -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 }
 
 
 
+
 
   

     
shirt making notes

@@ -1267,10 +1485,15 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+
 
 
-
-    

   
 
   

@@ -1295,6 +1518,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/shirts/index.html b/_site/shirts/index.html
index 52c6e7f..2712e6e 100644
--- a/_site/shirts/index.html
+++ b/_site/shirts/index.html
@@ -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 }
 
 
 
+
 
   

     
shirts!

@@ -1238,10 +1456,75 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print in dark teal ink depicting a power drill with text in cursive below that reads 'ceci n'est pas un exercice' or 'this is not a drill'
+			
+			
    not a drill
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
+			
+			
    foxgloves
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS!
+			
+			
    geese
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1266,6 +1549,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/shrimp-cat-toy/index.html b/_site/shrimp-cat-toy/index.html
index 796d66e..f690b78 100644
--- a/_site/shrimp-cat-toy/index.html
+++ b/_site/shrimp-cat-toy/index.html
@@ -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 }
 
 
 
+
 
   

     
shrimp cat toy

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
+			
+			
    vertical bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
+			
+			
    aaron's mask
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.
+			
+			
    brooke's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/shrimp/index.html b/_site/shrimp/index.html
index f14636c..4b51ab7 100644
--- a/_site/shrimp/index.html
+++ b/_site/shrimp/index.html
@@ -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 }
 
 
 
+
 
   

     
shrimp

@@ -1256,10 +1474,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
+			
+			
    greeting loons
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Clear and holographic stickers in the same design - a smiling skull with speech bubble reading 'trans rights!'
+			
+			
    stickers!
    
+			
      
+				
+				
    • sticker
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    seedling
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1284,6 +1563,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/siblinghood-of-the-traveling-greeting-card/index.html b/_site/siblinghood-of-the-traveling-greeting-card/index.html
index 8982317..19155c2 100644
--- a/_site/siblinghood-of-the-traveling-greeting-card/index.html
+++ b/_site/siblinghood-of-the-traveling-greeting-card/index.html
@@ -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 }
 
 
 
+
 
   

     
siblinghood of the traveling greeting card

@@ -1310,10 +1528,37 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Two envelopes with wax seals. The top envelope is cream with a copper-and-white swirled seal depicting a yelling possum holding mail. The bottom envelope is marbled blue, black, and gold, with a white-and-blue swirled seal depicting an octopus holding a fountain pen.
+			
+			
    fountain pen-friendly stationery
    
+			
      
+				
+				
    • stationery
      • 
+				
+			
    
+		    
+	
    2. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1338,6 +1583,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/sideways-canvas-shirt/index.html b/_site/sideways-canvas-shirt/index.html
index e0083a0..d005c89 100644
--- a/_site/sideways-canvas-shirt/index.html
+++ b/_site/sideways-canvas-shirt/index.html
@@ -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 }
 
 
 
+
 
   

     
sideways canvas shirt

@@ -1235,10 +1453,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Hands wearing a pair of pink and grey gloves with convertable mitten tops.
+			
+			
    butch hands pattern
    
+			
      
+				
+				
    • knit
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a hand wearing a knitted fingerless mitten. it's knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib.
+			
+			
    acadia mitts
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes.
+			
+			
    brooke's scarf
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1263,6 +1538,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/slightly-weird-man-club/index.html b/_site/slightly-weird-man-club/index.html
index afd65f6..abc08fc 100644
--- a/_site/slightly-weird-man-club/index.html
+++ b/_site/slightly-weird-man-club/index.html
@@ -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 }
 
 
 
+
 
   

     
slightly weird man club

@@ -1251,10 +1469,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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!'
+			
+			
    geese/trans wrongs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A row of shirts hanging in front of a window, with a variety of hand-printed designs.
+			
+			
    shirts!
    
+			
      
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia.
+			
+			
    junco
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1558,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/snap-pouch/index.html b/_site/snap-pouch/index.html
index 1970720..4c669c7 100644
--- a/_site/snap-pouch/index.html
+++ b/_site/snap-pouch/index.html
@@ -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 }
 
 
 
+
 
   

     
snap pouch

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    gradient purse strap
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.
+			
+			
    double bill pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    sora's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/soras-collar/index.html b/_site/soras-collar/index.html
index f957fb7..833e43d 100644
--- a/_site/soras-collar/index.html
+++ b/_site/soras-collar/index.html
@@ -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 }
 
 
 
+
 
   

     
sora's collar

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    patchwork wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A four part collage showing a single piece of deep red leather folding up to become a card wallet.
+			
+			
    foldy wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
+			
+			
    little critter pouch
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/spinners-dream-handspun/index.html b/_site/spinners-dream-handspun/index.html
index a28a7d9..edf57b2 100644
--- a/_site/spinners-dream-handspun/index.html
+++ b/_site/spinners-dream-handspun/index.html
@@ -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 }
 
 
 
+
 
   

     
spinner's dream handspun

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			a skein of light grey handspun yarn
+			
+			
    light grey jacobs handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green.
+			
+			
    orion handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
+			
+			
    handspun yarn in party mix and orange-gold
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/spinning-plants/index.html b/_site/spinning-plants/index.html
index 9bb2b9d..0fae549 100644
--- a/_site/spinning-plants/index.html
+++ b/_site/spinning-plants/index.html
@@ -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 }
 
 
 
+
 
   

     
spinning plants

@@ -1359,10 +1577,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    coral reef handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a skein of black handspun yarn
+			
+			
    icelandic lamb handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    rambouillet handspun
    
+			
      
+				
+				
    • yarn
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1387,6 +1660,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/spotted-towhee/index.html b/_site/spotted-towhee/index.html
index a695076..9e16116 100644
--- a/_site/spotted-towhee/index.html
+++ b/_site/spotted-towhee/index.html
@@ -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 }
 
 
 
+
 
   

     
spotted towhee

@@ -1246,10 +1464,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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).
+			
+			
    flicker
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a tattooed woman in bright highlighter yellow underwear.
+			
+			
    luminescent
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing.
+			
+			
    five of them
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1274,6 +1553,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/square-watercolor-pad/index.html b/_site/square-watercolor-pad/index.html
index f97bebc..9ce304f 100644
--- a/_site/square-watercolor-pad/index.html
+++ b/_site/square-watercolor-pad/index.html
@@ -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 }
 
 
 
+
 
   

     
square watercolor pad

@@ -1250,10 +1468,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A three panel collage showcasing a journal with a striped cover.
+			
+			
    striped journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 4-part collage of a slim handbound book.
+			
+			
    orange green journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A three panel collage showcasing a blue and brown leather-covered journal.
+			
+			
    blue and brown leather journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1278,6 +1551,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/squarsh/index.html b/_site/squarsh/index.html
index f9cdce8..62de62f 100644
--- a/_site/squarsh/index.html
+++ b/_site/squarsh/index.html
@@ -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 }
 
 
 
+
 
   

     
squarsh

@@ -1234,10 +1452,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing various small (around an inch) stamps that depict people or animals.
+			
+			
    tiny portraits
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
+			
+			
    greeting loons
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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'
+			
+			
    hummingbird become ungovernable
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1543,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/stampede-journal/index.html b/_site/stampede-journal/index.html
index 77a3bdd..a8de818 100644
--- a/_site/stampede-journal/index.html
+++ b/_site/stampede-journal/index.html
@@ -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 }
 
 
 
+
 
   

     
stampede journal

@@ -1245,10 +1463,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A two panel collage showing a square book with a tan cover and blue and gold endpapers.
+			
+			
    square watercolor pad
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A three panel collage showcasing a small book with foldout pages and a bright orange cover.
+			
+			
    orange journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A two panel collage showing the cover and endpapers of a thick notebook.
+			
+			
    flocked notebook
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1273,6 +1546,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/stationery-exchange/index.html b/_site/stationery-exchange/index.html
index 8440316..d1ac609 100644
--- a/_site/stationery-exchange/index.html
+++ b/_site/stationery-exchange/index.html
@@ -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 }
 
 
 
+
 
   

     
stationery exchange

@@ -1252,10 +1470,37 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			Two envelopes with wax seals. The top envelope is cream with a copper-and-white swirled seal depicting a yelling possum holding mail. The bottom envelope is marbled blue, black, and gold, with a white-and-blue swirled seal depicting an octopus holding a fountain pen.
+			
+			
    fountain pen-friendly stationery
    
+			
      
+				
+				
    • stationery
      • 
+				
+			
    
+		    
+	
    2. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1280,6 +1525,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/stellars-jay/index.html b/_site/stellars-jay/index.html
index 8653de3..b4f53f5 100644
--- a/_site/stellars-jay/index.html
+++ b/_site/stellars-jay/index.html
@@ -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 }
 
 
 
+
 
   

     
stellar's jay

@@ -1251,10 +1469,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk.
+			
+			
    brown creeper
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac.
+			
+			
    bottom growth
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
+			
+			
    happy biHRTday
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1558,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/stephanie-collar/index.html b/_site/stephanie-collar/index.html
index c4265d3..e2359dd 100644
--- a/_site/stephanie-collar/index.html
+++ b/_site/stephanie-collar/index.html
@@ -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 }
 
 
 
+
 
   

     
stephanie collar

@@ -1234,10 +1452,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
+			
+			
    fishhook pride keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
+			
+			
    leather long-stitch journals
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.
+			
+			
    circle bag
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1539,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/stickers/index.html b/_site/stickers/index.html
index 15fa68b..f034ab4 100644
--- a/_site/stickers/index.html
+++ b/_site/stickers/index.html
@@ -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 }
 
 
 
+
 
   

     
stickers!

@@ -1248,10 +1466,89 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
+			
+			
    girldick
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
+			
+			
    queer
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.
+			
+			
    boypussy
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • sticker
      • 
+				
+				
    • shirt
      • 
+				
+				
    • pin
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1276,6 +1573,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/striped-journal/index.html b/_site/striped-journal/index.html
index 54a66ad..dd29469 100644
--- a/_site/striped-journal/index.html
+++ b/_site/striped-journal/index.html
@@ -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 }
 
 
 
+
 
   

     
striped journal

@@ -1251,10 +1469,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A three panel collage showing a book held in the palm of a hand.
+			
+			
    tiny books
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A 4-part collage of a slim handbound book.
+			
+			
    orange green journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.
+			
+			
    Acadia coloring journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1552,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/style/index.html b/_site/style/index.html
index 8aefaf4..79f7869 100644
--- a/_site/style/index.html
+++ b/_site/style/index.html
@@ -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 {
@@ -1081,8 +1080,6 @@ This is supposed to be a new paragraph, but it isn't.

 
 
 
-
-    

   
 
   

@@ -1107,6 +1104,6 @@ This is supposed to be a new paragraph, but it isn't.

 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/sunflower/index.html b/_site/sunflower/index.html
index ac2e1e7..15c261f 100644
--- a/_site/sunflower/index.html
+++ b/_site/sunflower/index.html
@@ -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 }
 
 
 
+
 
   

     
sunflower

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
+			
+			
    vertical bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			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.
+			
+			
    x-acto knife sheath
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    sora's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/swallowtail-on-snowdrops/index.html b/_site/swallowtail-on-snowdrops/index.html
index 23e22ba..b772616 100644
--- a/_site/swallowtail-on-snowdrops/index.html
+++ b/_site/swallowtail-on-snowdrops/index.html
@@ -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 }
 
 
 
+
 
   

     
swallowtail on snowdrops

@@ -1251,10 +1469,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.
+			
+			
    heron
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A row of shirts hanging in front of a window, with a variety of hand-printed designs.
+			
+			
    shirts!
    
+			
      
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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
+			
+			
    artisans cooperative cards
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1279,6 +1558,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/swoop-wallet/index.html b/_site/swoop-wallet/index.html
index 0b620fc..608f7f4 100644
--- a/_site/swoop-wallet/index.html
+++ b/_site/swoop-wallet/index.html
@@ -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 }
 
 
 
+
 
   

     
swoop wallet

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide.
+			
+			
    foldy wallet with thumb slide
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A bic lighter wrapped in leather and hand-stitched up one side.
+			
+			
    leather lighter case
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    vix collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/book/2/index.html b/_site/tags/book/2/index.html
index 96e649a..2dd02fc 100644
--- a/_site/tags/book/2/index.html
+++ b/_site/tags/book/2/index.html
@@ -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 {
@@ -1017,8 +1016,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1043,6 +1040,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/book/index.html b/_site/tags/book/index.html
index 15c9f3e..01f5bf0 100644
--- a/_site/tags/book/index.html
+++ b/_site/tags/book/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1201,6 +1198,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/card/2/index.html b/_site/tags/card/2/index.html
index a67bce6..a5810ee 100644
--- a/_site/tags/card/2/index.html
+++ b/_site/tags/card/2/index.html
@@ -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 {
@@ -1225,8 +1224,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1251,6 +1248,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/card/3/index.html b/_site/tags/card/3/index.html
index a531f79..fbde9a9 100644
--- a/_site/tags/card/3/index.html
+++ b/_site/tags/card/3/index.html
@@ -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 {
@@ -1055,8 +1054,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1081,6 +1078,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/card/index.html b/_site/tags/card/index.html
index 7bdf42b..43f445e 100644
--- a/_site/tags/card/index.html
+++ b/_site/tags/card/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1255,6 +1252,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/gender/2/index.html b/_site/tags/gender/2/index.html
index 9b1b5bc..89b827b 100644
--- a/_site/tags/gender/2/index.html
+++ b/_site/tags/gender/2/index.html
@@ -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 {
@@ -1245,8 +1244,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1271,6 +1268,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/gender/3/index.html b/_site/tags/gender/3/index.html
index 3dfcdcc..627a20c 100644
--- a/_site/tags/gender/3/index.html
+++ b/_site/tags/gender/3/index.html
@@ -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 {
@@ -1051,8 +1050,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1077,6 +1074,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/gender/index.html b/_site/tags/gender/index.html
index 467869f..6bd9d44 100644
--- a/_site/tags/gender/index.html
+++ b/_site/tags/gender/index.html
@@ -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 {
@@ -1193,8 +1192,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1219,6 +1216,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/highlight/index.html b/_site/tags/highlight/index.html
index 667554d..36be10d 100644
--- a/_site/tags/highlight/index.html
+++ b/_site/tags/highlight/index.html
@@ -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 {
@@ -1168,8 +1167,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1194,6 +1191,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/index.html b/_site/tags/index.html
index b786cc1..4c767cd 100644
--- a/_site/tags/index.html
+++ b/_site/tags/index.html
@@ -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 {
@@ -1446,8 +1445,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1472,6 +1469,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/knit/index.html b/_site/tags/knit/index.html
index da6e0b9..b361aff 100644
--- a/_site/tags/knit/index.html
+++ b/_site/tags/knit/index.html
@@ -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 {
@@ -1136,8 +1135,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1162,6 +1159,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/leather/2/index.html b/_site/tags/leather/2/index.html
index 0b3471f..52e83c4 100644
--- a/_site/tags/leather/2/index.html
+++ b/_site/tags/leather/2/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1207,6 +1204,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/leather/3/index.html b/_site/tags/leather/3/index.html
index a2e4b24..66fffcc 100644
--- a/_site/tags/leather/3/index.html
+++ b/_site/tags/leather/3/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1211,6 +1208,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/leather/4/index.html b/_site/tags/leather/4/index.html
index c736708..2497a29 100644
--- a/_site/tags/leather/4/index.html
+++ b/_site/tags/leather/4/index.html
@@ -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 {
@@ -1143,8 +1142,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1169,6 +1166,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/leather/index.html b/_site/tags/leather/index.html
index 44e047f..a4de5a2 100644
--- a/_site/tags/leather/index.html
+++ b/_site/tags/leather/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1203,6 +1200,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/patch/index.html b/_site/tags/patch/index.html
index b17918d..8dd0180 100644
--- a/_site/tags/patch/index.html
+++ b/_site/tags/patch/index.html
@@ -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 {
@@ -1006,8 +1005,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1032,6 +1029,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/pin/index.html b/_site/tags/pin/index.html
index 04a28b3..963fe8e 100644
--- a/_site/tags/pin/index.html
+++ b/_site/tags/pin/index.html
@@ -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 {
@@ -1138,8 +1137,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1164,6 +1161,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/print/2/index.html b/_site/tags/print/2/index.html
index c770474..94482ef 100644
--- a/_site/tags/print/2/index.html
+++ b/_site/tags/print/2/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1245,6 +1242,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/print/3/index.html b/_site/tags/print/3/index.html
index f6850f4..0835268 100644
--- a/_site/tags/print/3/index.html
+++ b/_site/tags/print/3/index.html
@@ -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 {
@@ -1233,8 +1232,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1259,6 +1256,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/print/4/index.html b/_site/tags/print/4/index.html
index 47c6ebd..dc7705e 100644
--- a/_site/tags/print/4/index.html
+++ b/_site/tags/print/4/index.html
@@ -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 {
@@ -1223,8 +1222,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1249,6 +1246,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/print/5/index.html b/_site/tags/print/5/index.html
index a90f322..8d8a9ab 100644
--- a/_site/tags/print/5/index.html
+++ b/_site/tags/print/5/index.html
@@ -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 {
@@ -1071,8 +1070,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1097,6 +1094,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/print/index.html b/_site/tags/print/index.html
index 5a1643e..54d2f4b 100644
--- a/_site/tags/print/index.html
+++ b/_site/tags/print/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1215,6 +1212,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/shirt/2/index.html b/_site/tags/shirt/2/index.html
index 6915afb..0fee5b5 100644
--- a/_site/tags/shirt/2/index.html
+++ b/_site/tags/shirt/2/index.html
@@ -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 {
@@ -1115,8 +1114,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1141,6 +1138,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/shirt/index.html b/_site/tags/shirt/index.html
index aa1cca8..d1af184 100644
--- a/_site/tags/shirt/index.html
+++ b/_site/tags/shirt/index.html
@@ -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 {
@@ -1223,8 +1222,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1249,6 +1246,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/software/2/index.html b/_site/tags/software/2/index.html
index 7886bcd..05a553d 100644
--- a/_site/tags/software/2/index.html
+++ b/_site/tags/software/2/index.html
@@ -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 {
@@ -1003,8 +1002,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1029,6 +1026,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/software/index.html b/_site/tags/software/index.html
index 306f0fc..51bb267 100644
--- a/_site/tags/software/index.html
+++ b/_site/tags/software/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1205,6 +1202,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/stationery/index.html b/_site/tags/stationery/index.html
index 460262e..e5fbca5 100644
--- a/_site/tags/stationery/index.html
+++ b/_site/tags/stationery/index.html
@@ -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 {
@@ -1016,8 +1015,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1042,6 +1039,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/sticker/index.html b/_site/tags/sticker/index.html
index 6f41170..95398fa 100644
--- a/_site/tags/sticker/index.html
+++ b/_site/tags/sticker/index.html
@@ -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 {
@@ -1138,8 +1137,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1164,6 +1161,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/yarn/2/index.html b/_site/tags/yarn/2/index.html
index 22d7131..d27dc03 100644
--- a/_site/tags/yarn/2/index.html
+++ b/_site/tags/yarn/2/index.html
@@ -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 {
@@ -1031,8 +1030,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1057,6 +1054,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/yarn/index.html b/_site/tags/yarn/index.html
index ab3f455..b390d2d 100644
--- a/_site/tags/yarn/index.html
+++ b/_site/tags/yarn/index.html
@@ -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 {
 
 
 
-
-    

   
 
   

@@ -1197,6 +1194,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tags/zine/index.html b/_site/tags/zine/index.html
index 7935fef..070652b 100644
--- a/_site/tags/zine/index.html
+++ b/_site/tags/zine/index.html
@@ -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 {
@@ -1038,8 +1037,6 @@ footer a:focus-visible {
 
 
 
-
-    

   
 
   

@@ -1064,6 +1061,6 @@ footer a:focus-visible {
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/textures-unite/index.html b/_site/textures-unite/index.html
index 97ece49..b8fb56f 100644
--- a/_site/textures-unite/index.html
+++ b/_site/textures-unite/index.html
@@ -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 }
 
 
 
+
 
   

     
textures unite

@@ -1240,10 +1458,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    dragon mask
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Image unrelated to post. A light pink peony in full bloom, close up.
+			
+			
    gender in data models
    
+			
      
+				
+				
    • gender
      • 
+				
+				
    • software
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.
+			
+			
    knit shrimp
    
+			
      
+				
+				
    • knit
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1268,6 +1547,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tiny-books/index.html b/_site/tiny-books/index.html
index d2e8ecb..9e12a60 100644
--- a/_site/tiny-books/index.html
+++ b/_site/tiny-books/index.html
@@ -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 }
 
 
 
+
 
   

     
tiny books

@@ -1249,10 +1467,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A 4-part collage of a slim handbound book.
+			
+			
    orange green journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
+			
+			
    leather long-stitch journals
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A three panel collage showcasing a journal with a striped cover.
+			
+			
    striped journal
    
+			
      
+				
+				
    • book
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1277,6 +1552,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tiny-mushrooms/index.html b/_site/tiny-mushrooms/index.html
index 33de599..b85038c 100644
--- a/_site/tiny-mushrooms/index.html
+++ b/_site/tiny-mushrooms/index.html
@@ -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 }
 
 
 
+
 
   

     
tiny mushrooms

@@ -1234,10 +1452,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
+			
+			
    greeting loons
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing various small (around an inch) stamps that depict people or animals.
+			
+			
    tiny portraits
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence.
+			
+			
    big pidge
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1543,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tiny-portraits/index.html b/_site/tiny-portraits/index.html
index e4c98b6..8211392 100644
--- a/_site/tiny-portraits/index.html
+++ b/_site/tiny-portraits/index.html
@@ -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 }
 
 
 
+
 
   

     
tiny portraits

@@ -1234,10 +1452,73 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
+			
+			
    greeting loons
    
+			
      
+				
+				
    • card
      • 
+				
+				
    • print
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
+			
+			
    chanterelle
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    seedling
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1543,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/tooled-leather-patches/index.html b/_site/tooled-leather-patches/index.html
index 1520a66..82982da 100644
--- a/_site/tooled-leather-patches/index.html
+++ b/_site/tooled-leather-patches/index.html
@@ -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 }
 
 
 
+
 
   

     
tooled leather patches

@@ -1239,10 +1457,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A cat in a sunbeam snuggles a little leather mouse-shaped cat toy.
+			
+			
    mousie
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
+			
+			
    zipper bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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'.
+			
+			
    leather keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1267,6 +1540,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/trans-rights-skull/index.html b/_site/trans-rights-skull/index.html
index eb4d7d7..7728f65 100644
--- a/_site/trans-rights-skull/index.html
+++ b/_site/trans-rights-skull/index.html
@@ -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 }
 
 
 
+
 
   

     
trans rights skull

@@ -1263,10 +1481,77 @@ prints/cards: black with blue and pink letters

 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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!'
+			
+			
    geese/trans wrongs
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • shirt
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
+			
+			
    fishhook pride keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a small shrimp with slender little leggies in orange ink.
+			
+			
    shrimp
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • sticker
      • 
+				
+				
    • pin
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1291,6 +1576,6 @@ prints/cards: black with blue and pink letters

 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/trans-the-world/index.html b/_site/trans-the-world/index.html
index fdcc922..311bbb4 100644
--- a/_site/trans-the-world/index.html
+++ b/_site/trans-the-world/index.html
@@ -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 }
 
 
 
+
 
   

     
trans the world

@@ -1250,10 +1468,71 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    lupine
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • shirt
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A print of a brightly colored flower in 4 layers of color
+			
+			
    kniphofia
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail.
+			
+			
    artisans cooperative shirts
    
+			
      
+				
+				
    • shirt
      • 
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1278,6 +1557,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/trans-wrongs-skull/index.html b/_site/trans-wrongs-skull/index.html
index 7bbc53c..97dce8c 100644
--- a/_site/trans-wrongs-skull/index.html
+++ b/_site/trans-wrongs-skull/index.html
@@ -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 }
 
 
 
+
 
   

     
trans wrongs skull

@@ -1261,10 +1479,69 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
+			
+			
    nonbinary flag
    
+			
      
+				
+				
    • print
      • 
+				
+				
    • card
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			Two hard enamel pins in my trans rights and trans wrongs skulls designs.
+			
+			
    pins!
    
+			
      
+				
+				
    • pin
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A print of a nude trans woman in an asymmetrical rope harness.
+			
+			
    rope (one)
    
+			
      
+				
+				
    • print
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1289,6 +1566,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/triangle-pouch/index.html b/_site/triangle-pouch/index.html
index dca1420..25f4d78 100644
--- a/_site/triangle-pouch/index.html
+++ b/_site/triangle-pouch/index.html
@@ -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 }
 
 
 
+
 
   

     
triangle pouch

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			two wrists, each wearing a black leather wrap bracelet. the upper bracelet is a thin strap wrapped 3 times around the wrist. the lower bracelet wraps twice, with a thicker strap, and has carefully placed spikes that avoid the wrap spots.
+			
+			
    wrap bracelets
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather.
+			
+			
    snap pouch
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    patchwork wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/vertical-bifold/index.html b/_site/vertical-bifold/index.html
index 8c49a6b..a47a035 100644
--- a/_site/vertical-bifold/index.html
+++ b/_site/vertical-bifold/index.html
@@ -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 }
 
 
 
+
 
   

     
vertical bifold

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    dragon mask
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
+			
+			
    zipper bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A black leather bow tie with black stitching.
+			
+			
    bowtie
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/vertical-card-wallet/index.html b/_site/vertical-card-wallet/index.html
index 372a63f..fd86a34 100644
--- a/_site/vertical-card-wallet/index.html
+++ b/_site/vertical-card-wallet/index.html
@@ -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 }
 
 
 
+
 
   

     
vertical card wallet

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			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.
+			
+			
    patchwork wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
+			
+			
    fishhook pride keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    sora's collar
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/vertical-zipper-card-wallet/index.html b/_site/vertical-zipper-card-wallet/index.html
index c62677b..5da97c7 100644
--- a/_site/vertical-zipper-card-wallet/index.html
+++ b/_site/vertical-zipper-card-wallet/index.html
@@ -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 }
 
 
 
+
 
   

     
vertical zipper card wallet

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.
+			
+			
    circle bag
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
+			
+			
    fishhook pride keychains
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    swoop wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/vix-collar/index.html b/_site/vix-collar/index.html
index 5632164..794f41d 100644
--- a/_site/vix-collar/index.html
+++ b/_site/vix-collar/index.html
@@ -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 }
 
 
 
+
 
   

     
vix collar

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A nylon webbing harness in bright teal laid out on a desk.
+			
+			
    moss harness
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
+			
+			
    little critter pouch
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • highlight
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			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.
+			
+			
    patchwork wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/wrap-bracelets/index.html b/_site/wrap-bracelets/index.html
index 892db67..14fd339 100644
--- a/_site/wrap-bracelets/index.html
+++ b/_site/wrap-bracelets/index.html
@@ -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 }
 
 
 
+
 
   

     
wrap bracelets

@@ -1233,10 +1451,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.
+			
+			
    double bill pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
+			
+			
    aaron's mask
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a symmetrical interior with a hidden pocket and 3 card pockets on each side.
+			
+			
    nine pocket bifold
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1261,6 +1534,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/x-acto-knife-sheath/index.html b/_site/x-acto-knife-sheath/index.html
index c52813e..f97d254 100644
--- a/_site/x-acto-knife-sheath/index.html
+++ b/_site/x-acto-knife-sheath/index.html
@@ -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 }
 
 
 
+
 
   

     
x-acto knife sheath

@@ -1234,10 +1452,65 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A collage showing a green leather wallet with a zippered pocket built into one external side.
+			
+			
    zipper bifold (green)
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A four part collage showing a single piece of deep red leather folding up to become a card wallet.
+			
+			
    foldy wallet
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			A nylon webbing harness in bright teal laid out on a desk.
+			
+			
    moss harness
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1535,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/zipper-bifold-green/index.html b/_site/zipper-bifold-green/index.html
index 86c8d85..aad6553 100644
--- a/_site/zipper-bifold-green/index.html
+++ b/_site/zipper-bifold-green/index.html
@@ -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 }
 
 
 
+
 
   

     
zipper bifold (green)

@@ -1234,10 +1452,67 @@ export { HeadingAnchors }
 
 
 
+
+  

+
+  
+  
+  
+  

+    
+    
    
+	
+	
  1. 
+		
+			
+			A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.
+			
+			
    circle bag
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    2. 
+	
+	
  2. 
+		
+			
+			A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp.
+			
+			
    mom bag
    
+			
      
+				
+				
    • leather
      • 
+				
+			
    
+		    
+	
    3. 
+	
+	
  3. 
+		
+			
+			two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
+			
+			
    tooled leather patches
    
+			
      
+				
+				
    • leather
      • 
+				
+				
    • gender
      • 
+				
+			
    
+		    
+	
    4. 
+	
+

+
+  

+  
+
 
 
-
-    

   
 
   

@@ -1262,6 +1537,6 @@ export { HeadingAnchors }
 

 
 
-  
+  
 
 
\ No newline at end of file
diff --git a/_site/zipper-bifold/index.html b/_site/zipper-bifold/index.html
index 0acd4f6..def646c 100644
--- a/_site/zipper-bifold/index.html
+++ b/_site/zipper-bifold/index.html
@@ -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 }
 
 
 
+