diff --git a/_site/1/index.html b/_site/1/index.html index 290eb972..69a99347 100644 --- a/_site/1/index.html +++ b/_site/1/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1216,6 +1215,6 @@ footer a:focus-visible { - + diff --git a/_site/10/index.html b/_site/10/index.html index f3b4d1a3..1f185ec2 100644 --- a/_site/10/index.html +++ b/_site/10/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1246,6 +1245,6 @@ footer a:focus-visible { - + diff --git a/_site/11/index.html b/_site/11/index.html index 6d8267b1..a091ed26 100644 --- a/_site/11/index.html +++ b/_site/11/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1252,6 +1251,6 @@ footer a:focus-visible { - + diff --git a/_site/12/index.html b/_site/12/index.html index 7613031e..f0ba8e61 100644 --- a/_site/12/index.html +++ b/_site/12/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1240,6 +1239,6 @@ footer a:focus-visible { - + diff --git a/_site/13/index.html b/_site/13/index.html index 3cb661b8..5da6e151 100644 --- a/_site/13/index.html +++ b/_site/13/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1228,6 +1227,6 @@ footer a:focus-visible { - + diff --git a/_site/14/index.html b/_site/14/index.html index e8620cd1..843d2d2d 100644 --- a/_site/14/index.html +++ b/_site/14/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1160,6 +1159,6 @@ footer a:focus-visible { - + diff --git a/_site/2/index.html b/_site/2/index.html index e3030109..418a1768 100644 --- a/_site/2/index.html +++ b/_site/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1220,6 +1219,6 @@ footer a:focus-visible { - + diff --git a/_site/3/index.html b/_site/3/index.html index 014c2dbb..c5d4788f 100644 --- a/_site/3/index.html +++ b/_site/3/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1228,6 +1227,6 @@ footer a:focus-visible { - + diff --git a/_site/4/index.html b/_site/4/index.html index 64a3db76..37a5a63f 100644 --- a/_site/4/index.html +++ b/_site/4/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1224,6 +1223,6 @@ footer a:focus-visible { - + diff --git a/_site/404.html b/_site/404.html index 03bcfc63..bdb5333b 100644 --- a/_site/404.html +++ b/_site/404.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1014,6 +1013,6 @@ export { HeadingAnchors } - + diff --git a/_site/5/index.html b/_site/5/index.html index f716bdcd..f156ee65 100644 --- a/_site/5/index.html +++ b/_site/5/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1220,6 +1219,6 @@ footer a:focus-visible { - + diff --git a/_site/6/index.html b/_site/6/index.html index 05bad926..8d097683 100644 --- a/_site/6/index.html +++ b/_site/6/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1218,6 +1217,6 @@ footer a:focus-visible { - + diff --git a/_site/7/index.html b/_site/7/index.html index 7ac3b95d..b3ae2714 100644 --- a/_site/7/index.html +++ b/_site/7/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1228,6 +1227,6 @@ footer a:focus-visible { - + diff --git a/_site/8/index.html b/_site/8/index.html index d96a0e1a..e16884dd 100644 --- a/_site/8/index.html +++ b/_site/8/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1216,6 +1215,6 @@ footer a:focus-visible { - + diff --git a/_site/9/index.html b/_site/9/index.html index f5a18799..aa69b157 100644 --- a/_site/9/index.html +++ b/_site/9/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1254,6 +1253,6 @@ footer a:focus-visible { - + diff --git a/_site/aarons-mask/index.html b/_site/aarons-mask/index.html index ba53dd41..ee4347f4 100644 --- a/_site/aarons-mask/index.html +++ b/_site/aarons-mask/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

aaron's mask

@@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + + + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.

Commission piece; based on an existing pattern. The red detailing and teeth are my own design.

@@ -1481,43 +1592,47 @@ export { HeadingAnchors }
  1. - -

    vertical zipper card wallet

    +     +

    little critter pouch

    • leather
      • +
    • highlight
      • +
    - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
  2. - -

    lobstah

    +     +

    leather chest harness

    • leather
    - Two red leather lobster ornaments, about 4-5 in long each. + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
  3. - -

    o-ring bracelet

    +     +

    dragon mask

    • leather
      • +
    • highlight
      • +
    - A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + 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.
    4. @@ -1553,6 +1668,6 @@ export { HeadingAnchors } - + diff --git a/_site/about/index.html b/_site/about/index.html index 8c33ce1a..47f37497 100644 --- a/_site/about/index.html +++ b/_site/about/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1131,6 +1130,6 @@ export { HeadingAnchors } - + diff --git a/_site/acadia-coloring-journal/index.html b/_site/acadia-coloring-journal/index.html index 44715cbd..1d86dd9c 100644 --- a/_site/acadia-coloring-journal/index.html +++ b/_site/acadia-coloring-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

    Acadia coloring journal

    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + + + A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + + A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.

    A green journal with a blue leather spine. The coloring pages are from the book Color Acadia with art by Katie Dube and Keri Kimura.

    @@ -1497,43 +1608,47 @@ export { HeadingAnchors }
    1. - -

      baseball journal

      +       +

      brooke's notebook

      • book
        • +
      • highlight
        • +
      - A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
    2. - -

      tiny books

      +       +

      leather long-stitch journals

        +
      • leather
        • +
      • book
      - A three panel collage showing a book held in the palm of a hand. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
    3. - -

      flocked notebook

      +       +

      square watercolor pad

      • book
      - A two panel collage showing the cover and endpapers of a thick notebook. + A two panel collage showing a square book with a tan cover and blue and gold endpapers.
      4. @@ -1569,6 +1684,6 @@ export { HeadingAnchors } - + diff --git a/_site/acadia-mitts/index.html b/_site/acadia-mitts/index.html index ae8573c9..848831d0 100644 --- a/_site/acadia-mitts/index.html +++ b/_site/acadia-mitts/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

      acadia mitts

      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

      Yarn: The Fibre Co. Acadia

      @@ -1480,20 +1591,6 @@ export { HeadingAnchors }
        -
      1. - -

        sideways canvas shirt

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

      2. pink socks

        @@ -1522,6 +1619,20 @@ export { HeadingAnchors }
        3. +
      3. + +

        keffiyah fishing net pattern

        + +
          + +
        • knit
          • + +
        + a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later. + +         +
        4. +
      @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/accessible-image-modals/index.html b/_site/accessible-image-modals/index.html index 98a8a9ea..4f7ded18 100644 --- a/_site/accessible-image-modals/index.html +++ b/_site/accessible-image-modals/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

      accessible image modals

      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth. + + + Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth. + + Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth.

      Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.

      @@ -1540,15 +1651,19 @@ export { HeadingAnchors }
      1. - -

        an intro to git

        +         +

        gender in data models

          +
        • gender
          • +
        • software
          • +
        • highlight
          • +
        - Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. + Image unrelated to post. A light pink peony in full bloom, close up.
        2. @@ -1568,15 +1683,15 @@ export { HeadingAnchors }
      2. - -

        intro to wireframing

        +         +

        comparing text editors

        • software
        - 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. + Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint.
        3. @@ -1612,6 +1727,6 @@ export { HeadingAnchors } - + diff --git a/_site/an-intro-to-git/index.html b/_site/an-intro-to-git/index.html index 23ecf2fe..b9e68cbc 100644 --- a/_site/an-intro-to-git/index.html +++ b/_site/an-intro-to-git/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

        an intro to git

        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. + + + Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. + + Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash.

        alrighty, this one's a real doozy. Strap in.

        @@ -1896,43 +2007,45 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)
        1. - -

          moving images

          +           +

          azure locations and file crawling

          • software
            • +
          • highlight
            • +
          - 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. + A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy.
        2. - -

          my favorite git flag

          +           +

          intro to wireframing

          • software
          - Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk. + 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.
        3. - -

          screen reader optimizations

          +           +

          eleventy lessons

          • software
          - Image unrelated to post. A crow poses on driftwood against a whitish sky. + Image unrelated to post. Close up on a pale green hellebore flower.
          4. @@ -1968,6 +2081,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push) - + diff --git a/_site/anarchy-autism/index.html b/_site/anarchy-autism/index.html index 404886b3..f03365be 100644 --- a/_site/anarchy-autism/index.html +++ b/_site/anarchy-autism/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

          anarchy autism

          @@ -1450,7 +1557,11 @@ export { HeadingAnchors } - A print in rainbow ink that says autism with the anarchy A. + + + A print in rainbow ink that says autism with the anarchy A. + + A print in rainbow ink that says autism with the anarchy A.

          my therapist's idea

          @@ -1503,8 +1614,8 @@ export { HeadingAnchors }
          1. - -

            congrats on the gay

            +             +

            chanterelle

              @@ -1512,17 +1623,29 @@ export { HeadingAnchors }
            • card
              • -
            • gender
              • -
            - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
          2. - -

            nonbinary flag

            +             +

            crow

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

            queer

              @@ -1530,28 +1653,14 @@ export { HeadingAnchors }
            • card
              • -
            • gender
              • +
            • sticker
              • -
            - A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. - -             -
            4. - -
          4. - -

            trans the world

            - -
              - -
            • print
              • - -
            • shirt
              • +
            • pin
            • gender
            - 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. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
            5. @@ -1587,6 +1696,6 @@ export { HeadingAnchors } - + diff --git a/_site/art-shows-and-events/index.html b/_site/art-shows-and-events/index.html index 86fa5315..d9ad3599 100644 --- a/_site/art-shows-and-events/index.html +++ b/_site/art-shows-and-events/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

            art shows and events

            @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow. + + + Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow. + + Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow.

            Listed by recency.

            @@ -1517,6 +1628,6 @@ export { HeadingAnchors } - + diff --git a/_site/artisans-cooperative-cards/index.html b/_site/artisans-cooperative-cards/index.html index a1cbe60f..b9f62542 100644 --- a/_site/artisans-cooperative-cards/index.html +++ b/_site/artisans-cooperative-cards/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

            artisans cooperative cards

            @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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 + + + 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 + + 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

            Learn more about Artisans Cooperative, a new platform for makers and supporters.

            @@ -1488,40 +1599,8 @@ export { HeadingAnchors }
            1. - -

              geese/trans wrongs

              - -
                - -
              • print
                • - -
              • shirt
                • - -
              • gender
                • - -
              - 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!' - -               -
              2. - -
            2. - -

              printmaking paper notes

              - -
                - -
              • print
                • - -
              - Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. - -               -
              3. - -
            3. - -

              junco

              +               +

              queer

                @@ -1529,8 +1608,44 @@ export { HeadingAnchors }
              • card
                • +
              • sticker
                • + +
              • pin
                • + +
              • gender
                • +
              - A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + +               +
              4. + +
            4. + +

              rope (one) (mature)

              + +
                + +
              • print
                • + +
              • gender
                • + +
              + A print of a nude trans woman in an asymmetrical rope harness. + +               +
              5. + +
            5. + +

              brown creeper

              + +
                + +
              • print
                • + +
              + 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.
              6. @@ -1566,6 +1681,6 @@ export { HeadingAnchors } - + diff --git a/_site/artisans-cooperative-shirts/index.html b/_site/artisans-cooperative-shirts/index.html index 3e02bfe6..5210de1c 100644 --- a/_site/artisans-cooperative-shirts/index.html +++ b/_site/artisans-cooperative-shirts/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

              artisans cooperative shirts

              @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail. + + + A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail. + + A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail.

              Learn more about Artisans Cooperative, a new platform for makers and supporters.

              @@ -1489,8 +1600,26 @@ export { HeadingAnchors }
              1. - -

                seedling

                +                 +

                trans the world

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

                iris

                  @@ -1499,37 +1628,25 @@ export { HeadingAnchors }
                • card
                - 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. + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes.
              3. - -

                become unbutterable

                +                 +

                swallowtail on snowdrops

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

                quorbs

                - -
                  +
                • card
                  • -
                • print
                  • - -
                • highlight
                  • +
                • shirt
                - 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. + A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower.
                5. @@ -1565,6 +1682,6 @@ export { HeadingAnchors } - + diff --git a/_site/artists-conk/index.html b/_site/artists-conk/index.html index d2613870..7d1550f5 100644 --- a/_site/artists-conk/index.html +++ b/_site/artists-conk/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                artists conk!

                @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools. + + + A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools. + + A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools.

                did you know you can draw on (certain) mushrooms

                @@ -1494,6 +1605,6 @@ export { HeadingAnchors } - + diff --git a/_site/azure-locations-and-file-crawling/index.html b/_site/azure-locations-and-file-crawling/index.html index 83dd6f23..3878624a 100644 --- a/_site/azure-locations-and-file-crawling/index.html +++ b/_site/azure-locations-and-file-crawling/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                azure locations and file crawling

                @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy. + + + A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy. + + A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy.

                context

                @@ -1728,33 +1839,29 @@ export { HeadingAnchors }
              5. - -

                kestrel zine

                +                 +

                recommendations & favorites

                  -
                • print
                  • - -
                • zine
                  • -
                • highlight
                - 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. + Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible.
              6. - -

                backend accessibility

                +                 +

                my favorite git flag

                • software
                - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk.
                7. @@ -1790,6 +1897,6 @@ export { HeadingAnchors } - + diff --git a/_site/backend-accessibility/index.html b/_site/backend-accessibility/index.html index 46b5cedd..4d55513a 100644 --- a/_site/backend-accessibility/index.html +++ b/_site/backend-accessibility/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                backend accessibility

                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + + + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font.
                @@ -1542,15 +1653,15 @@ export { HeadingAnchors }
                1. - -

                  screen reader optimizations

                  +                   +

                  handedness toggle

                  • software
                  - Image unrelated to post. A crow poses on driftwood against a whitish sky. + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.
                  2. @@ -1570,17 +1681,19 @@ export { HeadingAnchors }
                2. - -

                  azure locations and file crawling

                  +                   +

                  gender in data models

                    +
                  • gender
                    • +
                  • software
                  • highlight
                  - A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy. + Image unrelated to post. A light pink peony in full bloom, close up.
                  3. @@ -1616,6 +1729,6 @@ export { HeadingAnchors } - + diff --git a/_site/bag-strap/index.html b/_site/bag-strap/index.html index 0db44a81..c14c5e92 100644 --- a/_site/bag-strap/index.html +++ b/_site/bag-strap/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                  bag strap

                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A nylon webbing shoulder strap in bright teal with clips on each end. + + + A nylon webbing shoulder strap in bright teal with clips on each end. + + A nylon webbing shoulder strap in bright teal with clips on each end.

                  adjustable! also can be made with rainbow fittings.

                  @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                  1. - -

                    nine pocket bifold

                    +                     +

                    maker's mark keychain

                    • leather
                    - 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. + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it.
                  2. - -

                    aaron's mask

                    +                     +

                    vertical zipper card wallet

                    • leather
                    - A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
                  3. - -

                    foldy wallet

                    +                     +

                    eight pocket bifold

                    • leather
                    - A four part collage showing a single piece of deep red leather folding up to become a card wallet. + 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.
                    4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/baseball-journal/index.html b/_site/baseball-journal/index.html index 58ff1b34..6e524000 100644 --- a/_site/baseball-journal/index.html +++ b/_site/baseball-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                    baseball journal

                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + + + A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + + A 3-part collage of a leather-covered book with baseball-style stitching across the spine.

                    Baseball stitched book!

                    @@ -1491,43 +1602,45 @@ export { HeadingAnchors }
                    1. - -

                      green memo pad

                      +                       +

                      flocked notebook

                      • book
                      - A three panel collage showcasing a small green memo pad. + A two panel collage showing the cover and endpapers of a thick notebook.
                    2. - -

                      striped journal

                      +                       +

                      blue and brown leather journal

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

                      leather strap journal

                      +                       +

                      brooke's notebook

                      • book
                        • +
                      • highlight
                        • +
                      - A 3-part collage showing a blue journal with leather straps woven into the covers. + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
                      4. @@ -1563,6 +1676,6 @@ export { HeadingAnchors } - + diff --git a/_site/become-unbutterable/index.html b/_site/become-unbutterable/index.html index b073cdbf..47db726e 100644 --- a/_site/become-unbutterable/index.html +++ b/_site/become-unbutterable/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                      become unbutterable

                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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.' + + + 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.' + + 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.'

                      Hand carved stamp based on a photo of Jorts the cat.

                      @@ -1488,22 +1599,8 @@ export { HeadingAnchors }
                      1. - -

                        loon

                        - -
                          - -
                        • print
                          • - -
                        - A print of a loon rearing up with wings spread - -                         -
                        2. - -
                      2. - -

                        coming out

                        +                         +

                        nonbinary flag

                          @@ -1514,25 +1611,37 @@ export { HeadingAnchors }
                        • gender
                        - 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' + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
                      3. - -

                        slightly weird man club

                        +                         +

                        fix your hearts

                        • print
                          • -
                        • shirt
                          • +
                        + 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + +                         +
                        4. + +
                      4. + +

                        seedling

                        + +
                          -
                        • gender
                          • +
                        • print
                          • + +
                        • card
                        - A print that reads 'slightly weird man club' in a nonbinary flag colored gradient + 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.
                        5. @@ -1568,6 +1677,6 @@ export { HeadingAnchors } - + diff --git a/_site/bfl-silk-handspun/index.html b/_site/bfl-silk-handspun/index.html index 833915f8..5e4c186e 100644 --- a/_site/bfl-silk-handspun/index.html +++ b/_site/bfl-silk-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                        BFL/silk handspun

                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + + + a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + + a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.

                        Fiber from Woolgatherings. 70% Blue-Faced Leicester 30% tussah silk.

                        @@ -1480,34 +1591,6 @@ export { HeadingAnchors }
                          -
                        1. - -

                          handspun yarn in party mix and orange-gold

                          - -
                            - -
                          • yarn
                            • - -
                          - 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. - -                           -
                          2. - -
                        2. - -

                          ruby the alpaca handspun

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

                        3. hand-dyed gold handspun

                          @@ -1522,6 +1605,34 @@ export { HeadingAnchors }
                          4. +
                        4. + +

                          petrichor handspun

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

                          orion handspun

                          + +
                            + +
                          • yarn
                            • + +
                          + 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. + +                           +
                          6. +
                        @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/big-pidge/index.html b/_site/big-pidge/index.html index b555eb79..52b441f6 100644 --- a/_site/big-pidge/index.html +++ b/_site/big-pidge/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                        big pidge

                        @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence. + + + A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence. + + A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence.

                        A large, large pigeon. Based on a fantastic photograph by Chris Price.

                        @@ -1498,44 +1609,8 @@ export { HeadingAnchors }
                        1. - -

                          five of them

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

                          shrimp

                          - -
                            - -
                          • print
                            • - -
                          • card
                            • - -
                          • sticker
                            • - -
                          • pin
                            • - -
                          - A print of a small shrimp with slender little leggies in orange ink. - -                           -
                          3. - -
                        3. - -

                          heron

                          +                           +

                          geese

                            @@ -1546,7 +1621,41 @@ export { HeadingAnchors }
                          • shirt
                          - A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + +                           +
                          4. + +
                        4. + +

                          rope (one) (mature)

                          + +
                            + +
                          • print
                            • + +
                          • gender
                            • + +
                          + A print of a nude trans woman in an asymmetrical rope harness. + +                           +
                          5. + +
                        5. + +

                          happy biHRTday

                          + +
                            + +
                          • print
                            • + +
                          • card
                            • + +
                          • gender
                            • + +
                          + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
                          6. @@ -1582,6 +1691,6 @@ export { HeadingAnchors } - + diff --git a/_site/block-printing-transfer-method/index.html b/_site/block-printing-transfer-method/index.html index fa85e6a4..42527bf5 100644 --- a/_site/block-printing-transfer-method/index.html +++ b/_site/block-printing-transfer-method/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                          block printing transfer method

                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material. + + + A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material. + + A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material.

                          materials

                          @@ -1521,37 +1632,35 @@ export { HeadingAnchors }
                          1. - -

                            greeting loons

                            +                             +

                            printmaking paper notes

                              -
                            • card
                              • -
                            • print
                              • -
                            • highlight
                              • -
                            - A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
                          2. - -

                            fat raccoon

                            +                             +

                            anarchy autism

                            • print
                              • -
                            • card
                              • +
                            • sticker
                            • shirt
                              • +
                            • pin
                              • +
                            - A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + A print in rainbow ink that says autism with the anarchy A.
                            3. @@ -1601,6 +1710,6 @@ export { HeadingAnchors } - + diff --git a/_site/blue-and-brown-leather-journal/index.html b/_site/blue-and-brown-leather-journal/index.html index f7f94b30..3cad9055 100644 --- a/_site/blue-and-brown-leather-journal/index.html +++ b/_site/blue-and-brown-leather-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                            blue and brown leather journal

                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A three panel collage showcasing a blue and brown leather-covered journal. + + + A three panel collage showcasing a blue and brown leather-covered journal. + + A three panel collage showcasing a blue and brown leather-covered journal.

                            A two-tone blue and brown leather journal closed by a button. The inside front cover has a small pocket.

                            @@ -1496,6 +1607,20 @@ export { HeadingAnchors }
                              +
                            1. + +

                              square watercolor pad

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

                            2. leather strap journal

                              @@ -1511,31 +1636,15 @@ export { HeadingAnchors }
                            3. - -

                              orange green journal

                              +                               +

                              stampede journal

                              • book
                              - A 4-part collage of a slim handbound book. - -                               -
                              4. - -
                            4. - -

                              brooke's notebook

                              - -
                                - -
                              • book
                                • - -
                              • highlight
                                • - -
                              - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it.
                              5. @@ -1571,6 +1680,6 @@ export { HeadingAnchors } - + diff --git a/_site/booby-congrats-on-the-top-surgery/index.html b/_site/booby-congrats-on-the-top-surgery/index.html index bf327856..ab91dce7 100644 --- a/_site/booby-congrats-on-the-top-surgery/index.html +++ b/_site/booby-congrats-on-the-top-surgery/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                              booby (congrats on the top surgery)

                              @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A landscape-oriented white card with a two-color print of a blue-footed booby. + + + A landscape-oriented white card with a two-color print of a blue-footed booby. + + A landscape-oriented white card with a two-color print of a blue-footed booby.

                              cheeky lil congrats on the top surgery card :D

                              @@ -1491,47 +1602,51 @@ export { HeadingAnchors }
                              1. - -

                                in the news

                                +                                 +

                                queer book list

                                • gender
                                - 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. + A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order
                              2. - -

                                swallowtail on snowdrops

                                +                                 +

                                gender in data models

                                + +
                                  + +
                                • gender
                                  • + +
                                • software
                                  • + +
                                • highlight
                                  • + +
                                + Image unrelated to post. A light pink peony in full bloom, close up. + +                                 +
                                3. + +
                              3. + +

                                trans the world

                                • print
                                  • -
                                • card
                                  • -
                                • shirt
                                  • -
                                - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. - -                                 -
                                4. - -
                              4. - -

                                brown creeper

                                - -
                                  - -
                                • print
                                  • +
                                • gender
                                - 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. + 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.
                                5. @@ -1567,6 +1682,6 @@ export { HeadingAnchors } - + diff --git a/_site/bottom-growth/index.html b/_site/bottom-growth/index.html index 769dc2e3..ffe64ca0 100644 --- a/_site/bottom-growth/index.html +++ b/_site/bottom-growth/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                bottom growth

                                @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                Celebration of testosterone-driven bottom growth. Submitted for T! the Zine.

                                @@ -1486,22 +1597,8 @@ export { HeadingAnchors }
                                1. - -

                                  block printing transfer method

                                  - -
                                    - -
                                  • print
                                    • - -
                                  - A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material. - -                                   -
                                  2. - -
                                2. - -

                                  booby (congrats on the top surgery)

                                  +                                   +

                                  geese

                                    @@ -1509,26 +1606,46 @@ export { HeadingAnchors }
                                  • card
                                    • +
                                  • shirt
                                    • + +
                                  + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + +                                   +
                                  3. + +
                                3. + +

                                  girldick (mature)

                                  + +
                                    + +
                                  • print
                                    • + +
                                  • sticker
                                    • + +
                                  • shirt
                                    • + +
                                  • pin
                                    • +
                                  • gender
                                  - A landscape-oriented white card with a two-color print of a blue-footed booby. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
                                4. - -

                                  artisans cooperative cards

                                  +                                   +

                                  become unbutterable

                                  • print
                                    • -
                                  • card
                                    • -
                                  - 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 + 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.'
                                  5. @@ -1564,6 +1681,6 @@ export { HeadingAnchors } - + diff --git a/_site/bowtie/index.html b/_site/bowtie/index.html index 9dd0b095..877c9618 100644 --- a/_site/bowtie/index.html +++ b/_site/bowtie/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                  bowtie

                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A black leather bow tie with black stitching. + + + A black leather bow tie with black stitching. + + A black leather bow tie with black stitching.

                                  Handstitched leather bowtie with standard clasp.

                                  @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                  1. - -

                                    eight pocket bifold

                                    +                                     +

                                    leather chest harness

                                    • leather
                                    - 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. + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
                                  2. - -

                                    shrimp cat toy

                                    +                                     +

                                    brooke's cuff bracelets

                                    • leather
                                    - Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + Olive green leather cuffs with silver spikes and a shearling lining.
                                  3. - -

                                    lobstah

                                    +                                     +

                                    moss harness

                                    • leather
                                    - Two red leather lobster ornaments, about 4-5 in long each. + A nylon webbing harness in bright teal laid out on a desk.
                                    4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/boypussy/index.html b/_site/boypussy/index.html index 46d620dc..7ee7cfd0 100644 --- a/_site/boypussy/index.html +++ b/_site/boypussy/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                    boypussy

                                    @@ -1455,7 +1562,11 @@ export { HeadingAnchors } - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + + + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.

                                    To order this as a shirt, please fill out the order form (Sep 2024: no longer taking orders via this method).

                                    @@ -1508,43 +1619,51 @@ export { HeadingAnchors }
                                    1. - -

                                      printmaking paper notes

                                      +                                       +

                                      slightly weird man club

                                      • print
                                        • +
                                      • shirt
                                        • + +
                                      • gender
                                        • +
                                      - Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
                                    2. - -

                                      become unbutterable

                                      +                                       +

                                      brown creeper

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

                                      block printing transfer method

                                      +                                       +

                                      hummingbird become ungovernable

                                      • print
                                        • +
                                      • card
                                        • + +
                                      • shirt
                                        • +
                                      - A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material. + 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'
                                      4. @@ -1580,6 +1699,6 @@ export { HeadingAnchors } - + diff --git a/_site/brookes-collar/index.html b/_site/brookes-collar/index.html index 43341e79..996d30d1 100644 --- a/_site/brookes-collar/index.html +++ b/_site/brookes-collar/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                      brooke's collar

                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + + + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.

                                      3/4" wide collar with stainless/nickel fittings.

                                      @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                      1. - -

                                        moss harness

                                        +                                         +

                                        lobstah

                                        • leather
                                        - A nylon webbing harness in bright teal laid out on a desk. + Two red leather lobster ornaments, about 4-5 in long each.
                                      2. - -

                                        nine pocket bifold

                                        +                                         +

                                        foldy wallet with thumb slide

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

                                        brooke's suspenders

                                        +                                         +

                                        zipper bifold (green)

                                        • leather
                                        - 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. + A collage showing a green leather wallet with a zippered pocket built into one external side.
                                        4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/brookes-cuff-bracelets/index.html b/_site/brookes-cuff-bracelets/index.html index 7327a633..015dc6d5 100644 --- a/_site/brookes-cuff-bracelets/index.html +++ b/_site/brookes-cuff-bracelets/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                        brooke's cuff bracelets

                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Olive green leather cuffs with silver spikes and a shearling lining. + + + Olive green leather cuffs with silver spikes and a shearling lining. + + Olive green leather cuffs with silver spikes and a shearling lining.

                                        To match brooke's collar.

                                        @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                        1. - -

                                          leather chest harness

                                          +                                           +

                                          stephanie collar

                                          • leather
                                          - Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring.
                                        2. - -

                                          zipper bifold

                                          +                                           +

                                          maker's mark keychain

                                          • leather
                                          - A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side. + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it.
                                        3. - -

                                          sora's collar

                                          +                                           +

                                          zipper bifold (green)

                                          • leather
                                          - 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. + A collage showing a green leather wallet with a zippered pocket built into one external side.
                                          4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/brookes-notebook/index.html b/_site/brookes-notebook/index.html index 2cf75f88..d17fd0eb 100644 --- a/_site/brookes-notebook/index.html +++ b/_site/brookes-notebook/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                          brooke's notebook

                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + + + A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.

                                          A collage book full of different paper, art, and more.

                                          @@ -1496,47 +1607,45 @@ export { HeadingAnchors }
                                          1. - -

                                            tiny books

                                            +                                             +

                                            green memo pad

                                            • book
                                            - A three panel collage showing a book held in the palm of a hand. + A three panel collage showcasing a small green memo pad.
                                          2. - -

                                            kestrel zine

                                            +                                             +

                                            stampede journal

                                              -
                                            • print
                                              • - -
                                            • zine
                                              • - -
                                            • highlight
                                              • +
                                            • book
                                            - 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. + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it.
                                          3. - -

                                            happy solstice 2025

                                            +                                             +

                                            textures unite

                                              +
                                            • knit
                                              • +
                                            • highlight
                                            - 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. + 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.
                                            4. @@ -1572,6 +1681,6 @@ export { HeadingAnchors } - + diff --git a/_site/brookes-scarf/index.html b/_site/brookes-scarf/index.html index e5c48538..6e198351 100644 --- a/_site/brookes-scarf/index.html +++ b/_site/brookes-scarf/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                            brooke's scarf

                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                            pattern

                                            @@ -1488,31 +1599,31 @@ export { HeadingAnchors }
                                            1. - -

                                              butch hands pattern

                                              +                                               +

                                              on the shoulders of giants

                                                +
                                              • zine
                                                • +
                                              • knit
                                                • -
                                              • highlight
                                                • -
                                              - Hands wearing a pair of pink and grey gloves with convertable mitten tops. + 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
                                            2. - -

                                              pink socks

                                              +                                               +

                                              keffiyah fishing net pattern

                                              • knit
                                              - Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks. + a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later.
                                              3. @@ -1562,6 +1673,6 @@ export { HeadingAnchors } - + diff --git a/_site/brookes-socks/index.html b/_site/brookes-socks/index.html index e66fbb8a..49339d7a 100644 --- a/_site/brookes-socks/index.html +++ b/_site/brookes-socks/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                              brooke's socks

                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + + + Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + + Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray.

                                              My second pair of socks, knit for my partner. They use Schoppel-Wolle Das Paar yarn in the colorway Fruhjahrsputz / Spring Cleaning. This yarn is designed to produce identical striping for each sock, and it very nearly did, with only a tiny discrepancy notable as I got to the toes.

                                              @@ -1481,29 +1592,17 @@ export { HeadingAnchors }
                                              1. - -

                                                sideways canvas shirt

                                                +                                                 +

                                                textures unite

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

                                                brooke's scarf

                                                - -
                                                  - -
                                                • knit
                                                  • +
                                                • highlight
                                                - 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. + 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.
                                                3. @@ -1522,6 +1621,22 @@ export { HeadingAnchors } +
                                              3. + +

                                                butch hands pattern

                                                + +
                                                  + +
                                                • knit
                                                  • + +
                                                • highlight
                                                  • + +
                                                + Hands wearing a pair of pink and grey gloves with convertable mitten tops. + +                                                 +
                                                4. +
                                              @@ -1553,6 +1668,6 @@ export { HeadingAnchors } - + diff --git a/_site/brookes-suspenders/index.html b/_site/brookes-suspenders/index.html index 8bed3688..ed3b95e5 100644 --- a/_site/brookes-suspenders/index.html +++ b/_site/brookes-suspenders/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                              brooke's suspenders

                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                              for our 3 year anniversary :)

                                              @@ -1481,45 +1592,45 @@ export { HeadingAnchors }
                                              1. - -

                                                vertical zipper card wallet

                                                +                                                 +

                                                dragon mask

                                                • leather
                                                  • +
                                                • highlight
                                                  • +
                                                - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + 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.
                                              2. - -

                                                triangle pouch

                                                +                                                 +

                                                mom bag

                                                • leather
                                                - 5 small triangular pouches made of leather in two sizes and various colors. + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp.
                                              3. - -

                                                leather long-stitch journals

                                                +                                                 +

                                                sora's collar

                                                • leather
                                                  • -
                                                • book
                                                  • -
                                                - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + 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.
                                                4. @@ -1555,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/brown-creeper/index.html b/_site/brown-creeper/index.html index b7043cc0..9fad66c7 100644 --- a/_site/brown-creeper/index.html +++ b/_site/brown-creeper/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                brown creeper

                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                Created for Stanza 2024, a show highlighting nonbinary artists and poets.

                                                @@ -1482,22 +1593,8 @@ export { HeadingAnchors }
                                                1. - -

                                                  tiny portraits

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

                                                  flatfish

                                                  +                                                   +

                                                  seedling

                                                    @@ -1506,25 +1603,39 @@ export { HeadingAnchors }
                                                  • card
                                                  - A print of a simple flatfish design inked in sepia. + 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.
                                                3. - -

                                                  booby (congrats on the top surgery)

                                                  +                                                   +

                                                  crow

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

                                                  kestrel zine

                                                  + +
                                                    -
                                                  • gender
                                                    • +
                                                  • print
                                                    • + +
                                                  • zine
                                                    • + +
                                                  • highlight
                                                  - A landscape-oriented white card with a two-color print of a blue-footed booby. + 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.
                                                  5. @@ -1560,6 +1671,6 @@ export { HeadingAnchors } - + diff --git a/_site/butch-hands-pattern/index.html b/_site/butch-hands-pattern/index.html index bccc771c..6d14ec28 100644 --- a/_site/butch-hands-pattern/index.html +++ b/_site/butch-hands-pattern/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                  butch hands pattern

                                                  @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - Hands wearing a pair of pink and grey gloves with convertable mitten tops. + + + Hands wearing a pair of pink and grey gloves with convertable mitten tops. + + Hands wearing a pair of pink and grey gloves with convertable mitten tops.

                                                  This pattern is a Work in Progress and will be updated with more information as I make a second pair of these.

                                                  @@ -1563,49 +1674,45 @@ export { HeadingAnchors }
                                                  1. - -

                                                    kestrel zine

                                                    +                                                     +

                                                    keffiyah fishing net pattern

                                                      -
                                                    • print
                                                      • +
                                                    • knit
                                                      • -
                                                    • zine
                                                      • +
                                                    + a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later. + +                                                     +
                                                    2. + +
                                                  2. + +

                                                    dragon mask

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

                                                    on the shoulders of giants

                                                    +                                                     +

                                                    recommendations & favorites

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

                                                    brooke's socks

                                                    - -
                                                      - -
                                                    • knit
                                                      • - -
                                                    - Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible.
                                                    5. @@ -1641,6 +1748,6 @@ export { HeadingAnchors } - + diff --git a/_site/chanterelle/index.html b/_site/chanterelle/index.html index 0609e21e..2eb1a829 100644 --- a/_site/chanterelle/index.html +++ b/_site/chanterelle/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                    chanterelle

                                                    @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + + + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.

                                                    Hand carved stamp based on a photo of chanterelle mushrooms.

                                                    @@ -1493,42 +1604,38 @@ export { HeadingAnchors }
                                                    1. - -

                                                      heron

                                                      +                                                       +

                                                      hair

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

                                                      iris

                                                      +                                                       +

                                                      printmaking paper notes

                                                      • print
                                                        • -
                                                      • card
                                                        • -
                                                      - 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
                                                    3. - -

                                                      spotted towhee

                                                      +                                                       +

                                                      killdeer

                                                        @@ -1537,7 +1644,7 @@ export { HeadingAnchors }
                                                      • card
                                                      - A block print of a spotted towhee mid-leap. + A print of a killdeer in black ink.
                                                      4. @@ -1573,6 +1680,6 @@ export { HeadingAnchors } - + diff --git a/_site/charlie-the-alpaca-handspun/index.html b/_site/charlie-the-alpaca-handspun/index.html index 6b04fcb4..28fc7821 100644 --- a/_site/charlie-the-alpaca-handspun/index.html +++ b/_site/charlie-the-alpaca-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                      charlie the alpaca handspun

                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight + + + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight + + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight

                                                      Fiber from Circle R Ranch. 100% alpaca, from Charlie the alpaca.

                                                      @@ -1481,29 +1592,29 @@ export { HeadingAnchors }
                                                      1. - -

                                                        hand-dyed gold handspun

                                                        +                                                         +

                                                        orion handspun

                                                        • yarn
                                                        - 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + 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.
                                                      2. - -

                                                        fire & ice handspun

                                                        +                                                         +

                                                        icelandic lamb handspun

                                                        • yarn
                                                        - 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + a skein of black handspun yarn
                                                        3. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/circle-bag/index.html b/_site/circle-bag/index.html index 9a1208a9..4f7e7f78 100644 --- a/_site/circle-bag/index.html +++ b/_site/circle-bag/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                        circle bag

                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + + + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.

                                                        it's roumd

                                                        @@ -1481,29 +1592,29 @@ export { HeadingAnchors }
                                                        1. - -

                                                          sunflower

                                                          +                                                           +

                                                          stephanie collar

                                                          • leather
                                                          - A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . + A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring.
                                                        2. - -

                                                          rachel's bracelets

                                                          +                                                           +

                                                          leaf patches

                                                          • leather
                                                          - Two pink leather bracelets with stainless steel hardware and aqua stitching. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                          3. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/colophon/index.html b/_site/colophon/index.html index c215c1d2..54938926 100644 --- a/_site/colophon/index.html +++ b/_site/colophon/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1022,6 +1021,6 @@ export { HeadingAnchors } - + diff --git a/_site/coming-out/index.html b/_site/coming-out/index.html index c5f9f951..3b3eb1ec 100644 --- a/_site/coming-out/index.html +++ b/_site/coming-out/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                          coming out

                                                          @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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' + + + 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' + + 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'

                                                          details

                                                          @@ -1497,8 +1608,8 @@ export { HeadingAnchors }
                                                          1. - -

                                                            booby (congrats on the top surgery)

                                                            +                                                             +

                                                            trans wrongs skull

                                                              @@ -1506,50 +1617,44 @@ export { HeadingAnchors }
                                                            • card
                                                              • -
                                                            • gender
                                                              • - -
                                                            - A landscape-oriented white card with a two-color print of a blue-footed booby. - -                                                             -
                                                            2. - -
                                                          2. - -

                                                            boypussy (mature)

                                                            - -
                                                              - -
                                                            • print
                                                              • -
                                                            • sticker
                                                              • -
                                                            • shirt
                                                              • -
                                                            • pin
                                                            • gender
                                                            - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
                                                          3. - -

                                                            geese/trans wrongs

                                                            +                                                             +

                                                            rope (one) (mature)

                                                            • print
                                                              • -
                                                            • shirt
                                                              • -
                                                            • gender
                                                            - 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!' + A print of a nude trans woman in an asymmetrical rope harness. + +                                                             +
                                                            4. + +
                                                          4. + +

                                                            loon

                                                            + +
                                                              + +
                                                            • print
                                                              • + +
                                                            + A print of a loon rearing up with wings spread
                                                            5. @@ -1585,6 +1690,6 @@ export { HeadingAnchors } - + diff --git a/_site/comparing-text-editors/index.html b/_site/comparing-text-editors/index.html index e0e6b578..03d8fa33 100644 --- a/_site/comparing-text-editors/index.html +++ b/_site/comparing-text-editors/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                            comparing text editors

                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint. + + + Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint. + + Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint.

                                                            I'm fucking depressed. No, not like mental health depressed (okay, look, that too, but that's not relevant here). Looking to switch text editors, I reviewed 6 different options...and what I found didn't thrill me.

                                                            @@ -1703,45 +1814,43 @@ export { HeadingAnchors }
                                                            1. - -

                                                              handedness toggle

                                                              +                                                               +

                                                              domain and site setup

                                                              • software
                                                              - A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass.
                                                            2. - -

                                                              screen reader optimizations

                                                              +                                                               +

                                                              redirections

                                                              • software
                                                              - Image unrelated to post. A crow poses on driftwood against a whitish sky. + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets.
                                                            3. - -

                                                              azure locations and file crawling

                                                              +                                                               +

                                                              backend accessibility

                                                              • software
                                                                • -
                                                              • highlight
                                                                • -
                                                              - A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy. + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font.
                                                              4. @@ -1777,6 +1886,6 @@ export { HeadingAnchors } - + diff --git a/_site/congrats-on-the-autism-adhd/index.html b/_site/congrats-on-the-autism-adhd/index.html index 8f1a1892..231e8835 100644 --- a/_site/congrats-on-the-autism-adhd/index.html +++ b/_site/congrats-on-the-autism-adhd/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                              congrats on the autism/adhd

                                                              @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows. + + + 4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows. + + 4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows.

                                                              Hand carved modular stamps to congratulate your friend or yourself on your fantastic neurodivergence.

                                                              @@ -1494,47 +1605,55 @@ export { HeadingAnchors }
                                                              1. - -

                                                                stellar's jay

                                                                +                                                                 +

                                                                greeting loons

                                                                  -
                                                                • print
                                                                  • -
                                                                • card
                                                                  • +
                                                                • print
                                                                  • + +
                                                                • highlight
                                                                  • + +
                                                                + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + +                                                                 +
                                                                2. + +
                                                              2. + +

                                                                tiny portraits

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

                                                                girldick (mature)

                                                                + +
                                                                  + +
                                                                • print
                                                                  • + +
                                                                • sticker
                                                                  • +
                                                                • shirt
                                                                  • -
                                                                - A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch - -                                                                 -
                                                                4. - -
                                                              4. - -

                                                                squarsh

                                                                - -
                                                                  +
                                                                • pin
                                                                  • -
                                                                • print
                                                                  • +
                                                                • gender
                                                                - 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. - -                                                                 -
                                                                5. - -
                                                              5. - -

                                                                fix your hearts

                                                                - -
                                                                  - -
                                                                • print
                                                                  • - -
                                                                - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
                                                                6. @@ -1570,6 +1689,6 @@ export { HeadingAnchors } - + diff --git a/_site/congrats-on-the-gay/index.html b/_site/congrats-on-the-gay/index.html index e331eb05..390a20d7 100644 --- a/_site/congrats-on-the-gay/index.html +++ b/_site/congrats-on-the-gay/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                congrats on the gay

                                                                @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + + + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'

                                                                A variation on my congrats on the autism/adhd cards.

                                                                @@ -1500,42 +1611,22 @@ export { HeadingAnchors }
                                                                1. - -

                                                                  stellar's jay

                                                                  +                                                                   +

                                                                  tiny portraits

                                                                  • print
                                                                    • -
                                                                  • card
                                                                    • - -
                                                                  • shirt
                                                                    • -
                                                                  - A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + A collage showing various small (around an inch) stamps that depict people or animals.
                                                                2. - -

                                                                  spotted towhee

                                                                  - -
                                                                    - -
                                                                  • print
                                                                    • - -
                                                                  • card
                                                                    • - -
                                                                  - A block print of a spotted towhee mid-leap. - -                                                                   -
                                                                  3. - -
                                                                3. - -

                                                                  boypussy (mature)

                                                                  +                                                                   +

                                                                  girldick (mature)

                                                                    @@ -1550,7 +1641,21 @@ export { HeadingAnchors }
                                                                  • gender
                                                                  - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + +                                                                   +
                                                                  4. + +
                                                                4. + +

                                                                  networks of trans care

                                                                  + +
                                                                    + +
                                                                  • gender
                                                                    • + +
                                                                  + Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk.
                                                                  5. @@ -1586,6 +1691,6 @@ export { HeadingAnchors } - + diff --git a/_site/contact/index.html b/_site/contact/index.html index 909401af..f8abcef3 100644 --- a/_site/contact/index.html +++ b/_site/contact/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1102,6 +1101,6 @@ export { HeadingAnchors } - + diff --git a/_site/coral-reef-handspun/index.html b/_site/coral-reef-handspun/index.html index cc999882..0cd570e9 100644 --- a/_site/coral-reef-handspun/index.html +++ b/_site/coral-reef-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                  coral reef handspun

                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                  Fiber from Jakira Farms in Coral Reef colorway. 100% merino.

                                                                  @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                  1. - -

                                                                    handcombed jacobs handspun

                                                                    +                                                                     +

                                                                    fire & ice handspun

                                                                    • yarn
                                                                    - a skein of dark grey handspun yarn + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight.
                                                                  2. - -

                                                                    hand-dyed gold handspun

                                                                    +                                                                     +

                                                                    charlie the alpaca handspun

                                                                    • yarn
                                                                    - 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight
                                                                  3. - -

                                                                    icelandic lamb handspun

                                                                    +                                                                     +

                                                                    petrichor handspun

                                                                    • yarn
                                                                    - a skein of black handspun yarn + 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
                                                                    4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/crow/index.html b/_site/crow/index.html index 228c2797..2136eb5f 100644 --- a/_site/crow/index.html +++ b/_site/crow/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                    crow

                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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. @@ -1480,38 +1591,48 @@ export { HeadingAnchors }
                                                                    1. - -

                                                                      kniphofia

                                                                      +                                                                       +

                                                                      big pidge

                                                                      • print
                                                                        • +
                                                                      • card
                                                                        • + +
                                                                      • shirt
                                                                        • +
                                                                      - A print of a brightly colored flower in 4 layers of color + A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence.
                                                                    2. - -

                                                                      quorbs

                                                                      +                                                                       +

                                                                      girldick (mature)

                                                                      • print
                                                                        • -
                                                                      • highlight
                                                                        • +
                                                                      • sticker
                                                                        • + +
                                                                      • shirt
                                                                        • + +
                                                                      • pin
                                                                        • + +
                                                                      • gender
                                                                      - 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. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
                                                                    3. - -

                                                                      iris

                                                                      +                                                                       +

                                                                      chanterelle

                                                                        @@ -1520,7 +1641,7 @@ export { HeadingAnchors }
                                                                      • card
                                                                      - 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
                                                                      4. @@ -1556,6 +1677,6 @@ export { HeadingAnchors } - + diff --git a/_site/designing-a-bag/index.html b/_site/designing-a-bag/index.html index b3d42a16..b06ab806 100644 --- a/_site/designing-a-bag/index.html +++ b/_site/designing-a-bag/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                      designing a bag

                                                                      @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                      begin by testing

                                                                      @@ -1497,45 +1608,43 @@ export { HeadingAnchors }
                                                                      1. - -

                                                                        leather keychains

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

                                                                        redirections

                                                                        +                                                                         +

                                                                        accessible image modals

                                                                        • software
                                                                        - Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets. + Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth.
                                                                      3. - -

                                                                        leather long-stitch journals

                                                                        +                                                                         +

                                                                        eleventy lessons

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

                                                                        leaf patches

                                                                        • leather
                                                                          • -
                                                                        • book
                                                                          • -
                                                                        - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                        5. @@ -1571,6 +1680,6 @@ export { HeadingAnchors } - + diff --git a/_site/domain-and-site-setup/index.html b/_site/domain-and-site-setup/index.html index cef888a4..ac6d6012 100644 --- a/_site/domain-and-site-setup/index.html +++ b/_site/domain-and-site-setup/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                        domain and site setup

                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass. + + + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass. + + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass.

                                                                        This was written as a skill share for the Artisans Cooperative blog.

                                                                        @@ -1532,15 +1643,29 @@ export { HeadingAnchors }
                                                                        1. - -

                                                                          accessible image modals

                                                                          +                                                                           +

                                                                          moving images

                                                                          • software
                                                                          - Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth. + 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. + +                                                                           +
                                                                          2. + +
                                                                        2. + +

                                                                          eleventy lessons

                                                                          + +
                                                                            + +
                                                                          • software
                                                                            • + +
                                                                          + Image unrelated to post. Close up on a pale green hellebore flower.
                                                                          3. @@ -1561,20 +1686,6 @@ export { HeadingAnchors } -
                                                                        3. - -

                                                                          moving images

                                                                          - -
                                                                            - -
                                                                          • software
                                                                            • - -
                                                                          - 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. - -                                                                           -
                                                                          4. -
                                                                        @@ -1606,6 +1717,6 @@ export { HeadingAnchors } - + diff --git a/_site/double-bill-pocket-bifold/index.html b/_site/double-bill-pocket-bifold/index.html index 048d1644..6ade9515 100644 --- a/_site/double-bill-pocket-bifold/index.html +++ b/_site/double-bill-pocket-bifold/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                        double bill pocket bifold

                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + + + A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + + A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.

                                                                        continuing to iterate on bifolds. made of a variety of discount leather with various imperfections. fully hand-stitched.

                                                                        @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                        1. - -

                                                                          stephanie collar

                                                                          +                                                                           +

                                                                          leather chest harness

                                                                          • leather
                                                                          - A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
                                                                        2. - -

                                                                          brooke's suspenders

                                                                          +                                                                           +

                                                                          rachel's bracelets

                                                                          • leather
                                                                          - 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. + Two pink leather bracelets with stainless steel hardware and aqua stitching.
                                                                        3. - -

                                                                          vertical card wallet

                                                                          +                                                                           +

                                                                          lobstah

                                                                          • leather
                                                                          - A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket. + Two red leather lobster ornaments, about 4-5 in long each.
                                                                          4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/dragon-mask/index.html b/_site/dragon-mask/index.html index 211ca520..27f89492 100644 --- a/_site/dragon-mask/index.html +++ b/_site/dragon-mask/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                          dragon mask

                                                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                          pattern by PaintYee

                                                                          @@ -1486,51 +1597,43 @@ export { HeadingAnchors }
                                                                          1. - -

                                                                            kestrel zine

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

                                                                            azure locations and file crawling

                                                                            - -
                                                                              - -
                                                                            • software
                                                                              • - -
                                                                            • highlight
                                                                              • - -
                                                                            - A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy. - -                                                                             -
                                                                            3. - -
                                                                          3. - -

                                                                            proud dad wallet

                                                                            +                                                                             +

                                                                            leather keychains

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

                                                                            mom bag

                                                                            + +
                                                                              + +
                                                                            • leather
                                                                            - A brown leather wallet with a subtle trans flag stitching across the top. + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + +                                                                             +
                                                                            5. + +
                                                                          5. + +

                                                                            leaf patches

                                                                            + +
                                                                              + +
                                                                            • leather
                                                                              • + +
                                                                            + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                            6. @@ -1566,6 +1669,6 @@ export { HeadingAnchors } - + diff --git a/_site/dyeing-fiber/index.html b/_site/dyeing-fiber/index.html index 5ef1c056..e1349b23 100644 --- a/_site/dyeing-fiber/index.html +++ b/_site/dyeing-fiber/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                            dyeing fiber

                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                            hand-dyed with acid dyes

                                                                            @@ -1481,29 +1592,15 @@ export { HeadingAnchors }
                                                                            1. - -

                                                                              charlie the alpaca handspun

                                                                              +                                                                               +

                                                                              handspun yarn in party mix and orange-gold

                                                                              • yarn
                                                                              - one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight - -                                                                               -
                                                                              2. - -
                                                                            2. - -

                                                                              orion handspun

                                                                              - -
                                                                                - -
                                                                              • yarn
                                                                                • - -
                                                                              - 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. + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
                                                                              3. @@ -1522,6 +1619,20 @@ export { HeadingAnchors } +
                                                                            3. + +

                                                                              charlie the alpaca handspun

                                                                              + +
                                                                                + +
                                                                              • yarn
                                                                                • + +
                                                                              + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight + +                                                                               +
                                                                              4. +
                                                                            @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/ecommerce-options/index.html b/_site/ecommerce-options/index.html index 0a9c6b6f..3b3ad284 100644 --- a/_site/ecommerce-options/index.html +++ b/_site/ecommerce-options/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                            ecommerce options

                                                                            @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - Image unrelated to post. A loon rearing up with eir wings spread on a calm lake. + + + Image unrelated to post. A loon rearing up with eir wings spread on a calm lake. + + Image unrelated to post. A loon rearing up with eir wings spread on a calm lake.

                                                                            Artisans Cooperative

                                                                            @@ -1535,6 +1646,6 @@ export { HeadingAnchors } - + diff --git a/_site/eight-pocket-bifold/index.html b/_site/eight-pocket-bifold/index.html index d99a31aa..b4d1b2a3 100644 --- a/_site/eight-pocket-bifold/index.html +++ b/_site/eight-pocket-bifold/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                            eight pocket bifold

                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                            a slight change to the first wallet design. made of a variety of discount leather with various imperfections. fully hand-stitched.

                                                                            @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                            1. - -

                                                                              brooke's collar

                                                                              +                                                                               +

                                                                              rachel's bracelets

                                                                              • leather
                                                                              - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + Two pink leather bracelets with stainless steel hardware and aqua stitching.
                                                                            2. - -

                                                                              brooke's suspenders

                                                                              +                                                                               +

                                                                              patchwork wallet

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

                                                                              snap pouch

                                                                              +                                                                               +

                                                                              foldy wallet

                                                                              • leather
                                                                              - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + A four part collage showing a single piece of deep red leather folding up to become a card wallet.
                                                                              4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/eleventy-lessons/index.html b/_site/eleventy-lessons/index.html index 0d4cc06f..e0f56790 100644 --- a/_site/eleventy-lessons/index.html +++ b/_site/eleventy-lessons/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                              eleventy lessons

                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. Close up on a pale green hellebore flower. + + + Image unrelated to post. Close up on a pale green hellebore flower. + + 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, 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.

                                                                              @@ -1772,45 +1883,47 @@ eleventyExcludeFromCollections: true
                                                                              1. - -

                                                                                domain and site setup

                                                                                +                                                                                 +

                                                                                my favorite git flag

                                                                                • software
                                                                                - Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass. + Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk.
                                                                              2. - -

                                                                                comparing text editors

                                                                                +                                                                                 +

                                                                                handedness toggle

                                                                                • software
                                                                                - Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint. + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.
                                                                              3. - -

                                                                                designing a bag

                                                                                +                                                                                 +

                                                                                gender in data models

                                                                                  -
                                                                                • leather
                                                                                  • +
                                                                                • gender
                                                                                • software
                                                                                  • +
                                                                                • highlight
                                                                                  • +
                                                                                - 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. + Image unrelated to post. A light pink peony in full bloom, close up.
                                                                                4. @@ -1846,6 +1959,6 @@ eleventyExcludeFromCollections: true - + diff --git a/_site/euphorbia/index.html b/_site/euphorbia/index.html index 4de0f5d3..fd15f821 100644 --- a/_site/euphorbia/index.html +++ b/_site/euphorbia/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                euphorbia

                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers. + + + A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers. + + A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers.

                                                                                I am euphorbic.

                                                                                @@ -1481,36 +1592,30 @@ export { HeadingAnchors }
                                                                                1. - -

                                                                                  crow

                                                                                  +                                                                                   +

                                                                                  trans wrongs skull

                                                                                  • print
                                                                                    • +
                                                                                  • card
                                                                                    • + +
                                                                                  • sticker
                                                                                    • + +
                                                                                  • pin
                                                                                    • + +
                                                                                  • gender
                                                                                    • +
                                                                                  - 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. + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
                                                                                2. - -

                                                                                  block printing transfer method

                                                                                  - -
                                                                                    - -
                                                                                  • print
                                                                                    • - -
                                                                                  - A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material. - -                                                                                   -
                                                                                  3. - -
                                                                                3. - -

                                                                                  heron

                                                                                  +                                                                                   +

                                                                                  lupine

                                                                                    @@ -1521,7 +1626,21 @@ export { HeadingAnchors }
                                                                                  • shirt
                                                                                  - A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + 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. + +                                                                                   +
                                                                                  4. + +
                                                                                4. + +

                                                                                  crow

                                                                                  + +
                                                                                    + +
                                                                                  • print
                                                                                    • + +
                                                                                  + 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.
                                                                                  5. @@ -1557,6 +1676,6 @@ export { HeadingAnchors } - + diff --git a/_site/fat-raccoon/index.html b/_site/fat-raccoon/index.html index a43f4c42..9660f6c1 100644 --- a/_site/fat-raccoon/index.html +++ b/_site/fat-raccoon/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                  fat raccoon

                                                                                  @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + + + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.

                                                                                  A friendly neighborhood visitor.

                                                                                  @@ -1497,38 +1608,6 @@ export { HeadingAnchors }
                                                                                    -
                                                                                  1. - -

                                                                                    loon

                                                                                    - -
                                                                                      - -
                                                                                    • print
                                                                                      • - -
                                                                                    - A print of a loon rearing up with wings spread - -                                                                                     -
                                                                                    2. - -
                                                                                  2. - -

                                                                                    lupine

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

                                                                                  3. boypussy (mature)

                                                                                    @@ -1551,6 +1630,36 @@ export { HeadingAnchors }
                                                                                    4. +
                                                                                  4. + +

                                                                                    quorbs

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

                                                                                    squarsh

                                                                                    + +
                                                                                      + +
                                                                                    • print
                                                                                      • + +
                                                                                    + 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. + +                                                                                     +
                                                                                    6. +
                                                                                  @@ -1582,6 +1691,6 @@ export { HeadingAnchors } - + diff --git a/_site/fd-signifier-and-oppositional-sexism/index.html b/_site/fd-signifier-and-oppositional-sexism/index.html index ffca131c..c521cdb9 100644 --- a/_site/fd-signifier-and-oppositional-sexism/index.html +++ b/_site/fd-signifier-and-oppositional-sexism/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                  fd signifier & oppositional sexism

                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field. + + + Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field. + + Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field.

                                                                                  This is in response to an F.D Signifier video, How to get RICH off weak men! (go follow him!). It is written as a response video and the script has not been changed to fit this format.

                                                                                  @@ -1515,55 +1626,57 @@ export { HeadingAnchors }
                                                                                  1. - -

                                                                                    trans wrongs skull

                                                                                    +                                                                                     +

                                                                                    girldick (mature)

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

                                                                                    queer book list

                                                                                    - -
                                                                                      - -
                                                                                    • gender
                                                                                      • - -
                                                                                    - A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order - -                                                                                     -
                                                                                    3. - -
                                                                                  3. - -

                                                                                    pronoun patches

                                                                                    +                                                                                     +

                                                                                    trans the world

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

                                                                                    pride dice bags

                                                                                    + +
                                                                                      + +
                                                                                    • knit
                                                                                      • + +
                                                                                    • gender
                                                                                      • + +
                                                                                    + 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.
                                                                                    5. @@ -1599,6 +1712,6 @@ export { HeadingAnchors } - + diff --git a/_site/fedilearns/index.html b/_site/fedilearns/index.html index fecc2323..10be7e57 100644 --- a/_site/fedilearns/index.html +++ b/_site/fedilearns/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                    fediLearns

                                                                                    @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - the logo for fedilearns, which is a grey newspaper icon with the fediverse icon (a rainbow pentagon) superimposed. + + + the logo for fedilearns, which is a grey newspaper icon with the fediverse icon (a rainbow pentagon) superimposed. + + the logo for fedilearns, which is a grey newspaper icon with the fediverse icon (a rainbow pentagon) superimposed.

                                                                                    My new project FediLearns is a learning-focused classifieds page for the fediverse. Check it out!

                                                                                    @@ -1488,6 +1599,6 @@ export { HeadingAnchors } - + diff --git a/_site/fedizinefest-2025/index.html b/_site/fedizinefest-2025/index.html index fa34853b..938a0df8 100644 --- a/_site/fedizinefest-2025/index.html +++ b/_site/fedizinefest-2025/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                    fediZineFest 2025

                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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 returns for its second year. Read more about it and sign up on the fediZineFest 2025 website.

                                                                                    @@ -1480,22 +1591,6 @@ export { HeadingAnchors }
                                                                                      -
                                                                                    1. - -

                                                                                      on the shoulders of giants

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

                                                                                    2. kestrel zine

                                                                                      @@ -1514,6 +1609,22 @@ export { HeadingAnchors }
                                                                                      3. +
                                                                                    3. + +

                                                                                      on the shoulders of giants

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

                                                                                    4. gender as a proxy variable

                                                                                      @@ -1561,6 +1672,6 @@ export { HeadingAnchors } - + diff --git a/_site/fire-and-ice-handspun/index.html b/_site/fire-and-ice-handspun/index.html index fc30a11b..01df7979 100644 --- a/_site/fire-and-ice-handspun/index.html +++ b/_site/fire-and-ice-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                      fire & ice handspun

                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + + + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight.

                                                                                      Fiber from Jakira Farms in Fire & Ice colorway. 100% merino.

                                                                                      @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                      1. - -

                                                                                        spinner's dream handspun

                                                                                        +                                                                                         +

                                                                                        orion handspun

                                                                                        • yarn
                                                                                        - a skein of a lightly variegated grey yarn in about a sport or DK weight. + 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.
                                                                                      2. - -

                                                                                        spinning plants

                                                                                        +                                                                                         +

                                                                                        light grey jacobs handspun

                                                                                        • yarn
                                                                                        - 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) + a skein of light grey handspun yarn
                                                                                      3. - -

                                                                                        hand-dyed gold handspun

                                                                                        +                                                                                         +

                                                                                        handcombed jacobs handspun

                                                                                        • yarn
                                                                                        - 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + a skein of dark grey handspun yarn
                                                                                        4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/fishhook-pride-keychains/index.html b/_site/fishhook-pride-keychains/index.html index d7a5faed..7e52f4ab 100644 --- a/_site/fishhook-pride-keychains/index.html +++ b/_site/fishhook-pride-keychains/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                        fishhook pride keychains

                                                                                        @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + + + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.

                                                                                        Available for lots of flags! Except the lesbian sunset flag because it's really hard to color match :(

                                                                                        @@ -1486,43 +1597,43 @@ export { HeadingAnchors }
                                                                                        1. - -

                                                                                          patchwork wallet

                                                                                          +                                                                                           +

                                                                                          nine pocket bifold

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

                                                                                          sora's collar

                                                                                          +                                                                                           +

                                                                                          on pronouns

                                                                                            -
                                                                                          • leather
                                                                                            • +
                                                                                          • gender
                                                                                          - 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. + Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder.
                                                                                        3. - -

                                                                                          wrap bracelets

                                                                                          +                                                                                           +

                                                                                          vertical zipper card wallet

                                                                                          • leather
                                                                                          - 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. + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
                                                                                          4. @@ -1558,6 +1669,6 @@ export { HeadingAnchors } - + diff --git a/_site/five-of-them/index.html b/_site/five-of-them/index.html index 7efb9398..8c4edaf2 100644 --- a/_site/five-of-them/index.html +++ b/_site/five-of-them/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                          five of them

                                                                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + + + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing.

                                                                                          Photographed in the backyard.

                                                                                          @@ -1493,57 +1604,47 @@ export { HeadingAnchors }
                                                                                          1. - -

                                                                                            shrimp

                                                                                            +                                                                                             +

                                                                                            kniphofia

                                                                                            • print
                                                                                              • -
                                                                                            • card
                                                                                              • - -
                                                                                            • sticker
                                                                                              • - -
                                                                                            • pin
                                                                                              • -
                                                                                            - A print of a small shrimp with slender little leggies in orange ink. + A print of a brightly colored flower in 4 layers of color
                                                                                          2. - -

                                                                                            lupine

                                                                                            +                                                                                             +

                                                                                            tiny mushrooms

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

                                                                                            coming out

                                                                                            +                                                                                             +

                                                                                            greeting loons

                                                                                              -
                                                                                            • print
                                                                                              • -
                                                                                            • card
                                                                                              • -
                                                                                            • gender
                                                                                              • +
                                                                                            • print
                                                                                              • + +
                                                                                            • highlight
                                                                                            - 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' + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
                                                                                            4. @@ -1579,6 +1680,6 @@ export { HeadingAnchors } - + diff --git a/_site/fix-your-hearts/index.html b/_site/fix-your-hearts/index.html index e34565c8..ee917059 100644 --- a/_site/fix-your-hearts/index.html +++ b/_site/fix-your-hearts/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                            fix your hearts

                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + + + 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + + 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. @@ -1480,30 +1591,42 @@ export { HeadingAnchors }
                                                                                            1. - -

                                                                                              trans rights skull

                                                                                              +                                                                                               +

                                                                                              squarsh

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

                                                                                              anarchy autism

                                                                                              + +
                                                                                                + +
                                                                                              • print
                                                                                              • sticker
                                                                                                • +
                                                                                              • shirt
                                                                                                • +
                                                                                              • pin
                                                                                                • -
                                                                                              • gender
                                                                                                • -
                                                                                              - A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!' + A print in rainbow ink that says autism with the anarchy A.
                                                                                            3. - -

                                                                                              killdeer

                                                                                              +                                                                                               +

                                                                                              junco

                                                                                                @@ -1512,23 +1635,7 @@ export { HeadingAnchors }
                                                                                              • card
                                                                                              - A print of a killdeer in black ink. - -                                                                                               -
                                                                                              4. - -
                                                                                            4. - -

                                                                                              artisans cooperative shirts

                                                                                              - -
                                                                                                - -
                                                                                              • shirt
                                                                                                • - -
                                                                                              • print
                                                                                                • - -
                                                                                              - A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail. + A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia.
                                                                                              5. @@ -1564,6 +1671,6 @@ export { HeadingAnchors } - + diff --git a/_site/flatfish/index.html b/_site/flatfish/index.html index 2972d5f9..19b5a0a1 100644 --- a/_site/flatfish/index.html +++ b/_site/flatfish/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                              flatfish

                                                                                              @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A print of a simple flatfish design inked in sepia. + + + A print of a simple flatfish design inked in sepia. + + A print of a simple flatfish design inked in sepia.

                                                                                              Hand carved stamp of a slightly goofy looking flatfish.

                                                                                              @@ -1493,17 +1604,35 @@ export { HeadingAnchors }
                                                                                              1. - -

                                                                                                artisans cooperative shirts

                                                                                                +                                                                                                 +

                                                                                                foxgloves

                                                                                                  +
                                                                                                • print
                                                                                                  • + +
                                                                                                • card
                                                                                                  • +
                                                                                                • shirt
                                                                                                  • +
                                                                                                + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + +                                                                                                 +
                                                                                                2. + +
                                                                                              2. + +

                                                                                                iris

                                                                                                + +
                                                                                                  +
                                                                                                • print
                                                                                                  • +
                                                                                                • card
                                                                                                  • +
                                                                                                - A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail. + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes.
                                                                                                3. @@ -1522,22 +1651,6 @@ export { HeadingAnchors } -
                                                                                              3. - -

                                                                                                seedling

                                                                                                - -
                                                                                                  - -
                                                                                                • print
                                                                                                  • - -
                                                                                                • card
                                                                                                  • - -
                                                                                                - 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. - -                                                                                                 -
                                                                                                4. -
                                                                                              @@ -1569,6 +1682,6 @@ export { HeadingAnchors } - + diff --git a/_site/flicker/index.html b/_site/flicker/index.html index 02e51685..5c202082 100644 --- a/_site/flicker/index.html +++ b/_site/flicker/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                              flicker

                                                                                              @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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). + + + 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). + + 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).

                                                                                              Hand carved set of stamps of a northern flicker, hungrily eyeing our bird feeder.

                                                                                              @@ -1498,55 +1609,53 @@ export { HeadingAnchors }
                                                                                              1. - -

                                                                                                boypussy (mature)

                                                                                                +                                                                                                 +

                                                                                                queer

                                                                                                • print
                                                                                                  • -
                                                                                                • sticker
                                                                                                  • +
                                                                                                • card
                                                                                                  • -
                                                                                                • shirt
                                                                                                  • +
                                                                                                • sticker
                                                                                                • pin
                                                                                                • gender
                                                                                                - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                              2. - -

                                                                                                bottom growth (mature)

                                                                                                +                                                                                                 +

                                                                                                congrats on the autism/adhd

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

                                                                                                greeting quorbs

                                                                                                - -
                                                                                                  -
                                                                                                • card
                                                                                                  • +
                                                                                                + 4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows. + +                                                                                                 +
                                                                                                4. + +
                                                                                              4. + +

                                                                                                kniphofia

                                                                                                + +
                                                                                                  +
                                                                                                • print
                                                                                                - A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail. + A print of a brightly colored flower in 4 layers of color
                                                                                                5. @@ -1582,6 +1691,6 @@ export { HeadingAnchors } - + diff --git a/_site/flocked-notebook/index.html b/_site/flocked-notebook/index.html index 38911dbe..9ba0ad7e 100644 --- a/_site/flocked-notebook/index.html +++ b/_site/flocked-notebook/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                flocked notebook

                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A two panel collage showing the cover and endpapers of a thick notebook. + + + A two panel collage showing the cover and endpapers of a thick notebook. + + A two panel collage showing the cover and endpapers of a thick notebook.

                                                                                                A landscape-oriented notebook with black paper and a fuzzy cover. yes. it's fuzzy.

                                                                                                @@ -1494,15 +1605,15 @@ export { HeadingAnchors }
                                                                                                1. - -

                                                                                                  green memo pad

                                                                                                  +                                                                                                   +

                                                                                                  striped journal

                                                                                                  • book
                                                                                                  - A three panel collage showcasing a small green memo pad. + A three panel collage showcasing a journal with a striped cover.
                                                                                                  2. @@ -1524,15 +1635,15 @@ export { HeadingAnchors }
                                                                                                2. - -

                                                                                                  stampede journal

                                                                                                  +                                                                                                   +

                                                                                                  Acadia coloring journal

                                                                                                  • book
                                                                                                  - A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.
                                                                                                  3. @@ -1568,6 +1679,6 @@ export { HeadingAnchors } - + diff --git a/_site/foldy-wallet-with-thumb-slide/index.html b/_site/foldy-wallet-with-thumb-slide/index.html index ab4c6d4b..78de65a3 100644 --- a/_site/foldy-wallet-with-thumb-slide/index.html +++ b/_site/foldy-wallet-with-thumb-slide/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                  foldy wallet with thumb slide

                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                  Designed for standard credit cards, not business cards.

                                                                                                  @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                  1. - -

                                                                                                    mom bag

                                                                                                    +                                                                                                     +

                                                                                                    foldy wallet

                                                                                                    • leather
                                                                                                    - A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + A four part collage showing a single piece of deep red leather folding up to become a card wallet.
                                                                                                  2. - -

                                                                                                    patchwork wallet

                                                                                                    +                                                                                                     +

                                                                                                    leaf patches

                                                                                                    • leather
                                                                                                    - 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. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                                                  3. - -

                                                                                                    nine pocket bifold

                                                                                                    +                                                                                                     +

                                                                                                    vix collar

                                                                                                    • leather
                                                                                                    - 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. + 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.
                                                                                                    4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/foldy-wallet/index.html b/_site/foldy-wallet/index.html index 15de04ff..b0359b47 100644 --- a/_site/foldy-wallet/index.html +++ b/_site/foldy-wallet/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                    foldy wallet

                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A four part collage showing a single piece of deep red leather folding up to become a card wallet. + + + A four part collage showing a single piece of deep red leather folding up to become a card wallet. + + A four part collage showing a single piece of deep red leather folding up to become a card wallet.

                                                                                                    Single piece construction for easy care - just unfold/pull out the tabs!

                                                                                                    @@ -1481,45 +1592,43 @@ export { HeadingAnchors }
                                                                                                    1. - -

                                                                                                      shrimp cat toy

                                                                                                      +                                                                                                       +

                                                                                                      vix collar

                                                                                                      • leather
                                                                                                      - Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + 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.
                                                                                                    2. - -

                                                                                                      tooled leather patches

                                                                                                      +                                                                                                       +

                                                                                                      brooke's cuff bracelets

                                                                                                      • leather
                                                                                                        • -
                                                                                                      • gender
                                                                                                        • -
                                                                                                      - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + Olive green leather cuffs with silver spikes and a shearling lining.
                                                                                                    3. - -

                                                                                                      brooke's collar

                                                                                                      +                                                                                                       +

                                                                                                      o-ring bracelet

                                                                                                      • leather
                                                                                                      - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps.
                                                                                                      4. @@ -1555,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/fountain-pen-friendly-stationery/index.html b/_site/fountain-pen-friendly-stationery/index.html index 16998a67..555eaa47 100644 --- a/_site/fountain-pen-friendly-stationery/index.html +++ b/_site/fountain-pen-friendly-stationery/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                      fountain pen-friendly stationery

                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                      Wax seals pictured from boygirlparty.

                                                                                                      @@ -1554,6 +1665,6 @@ export { HeadingAnchors } - + diff --git a/_site/foxgloves/index.html b/_site/foxgloves/index.html index 29fc31fd..6dcd33fc 100644 --- a/_site/foxgloves/index.html +++ b/_site/foxgloves/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                      foxgloves

                                                                                                      @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + + + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.

                                                                                                      details

                                                                                                      @@ -1497,55 +1608,49 @@ export { HeadingAnchors }
                                                                                                      1. - -

                                                                                                        heron

                                                                                                        +                                                                                                         +

                                                                                                        printmaking paper notes

                                                                                                        • print
                                                                                                          • -
                                                                                                        • card
                                                                                                          • - -
                                                                                                        • shirt
                                                                                                          • -
                                                                                                        - A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
                                                                                                      2. - -

                                                                                                        geese/trans wrongs

                                                                                                        +                                                                                                         +

                                                                                                        rope (one) (mature)

                                                                                                        • print
                                                                                                          • -
                                                                                                        • shirt
                                                                                                          • -
                                                                                                        • gender
                                                                                                        - 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!' + A print of a nude trans woman in an asymmetrical rope harness.
                                                                                                      3. - -

                                                                                                        hummingbird become ungovernable

                                                                                                        +                                                                                                         +

                                                                                                        kestrel zine

                                                                                                        • print
                                                                                                          • -
                                                                                                        • card
                                                                                                          • +
                                                                                                        • zine
                                                                                                          • -
                                                                                                        • shirt
                                                                                                          • +
                                                                                                        • highlight
                                                                                                        - 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' + 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.
                                                                                                        4. @@ -1581,6 +1686,6 @@ export { HeadingAnchors } - + diff --git a/_site/gallery/1/index.html b/_site/gallery/1/index.html index 72aa7beb..54978048 100644 --- a/_site/gallery/1/index.html +++ b/_site/gallery/1/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1224,6 +1223,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/10/index.html b/_site/gallery/10/index.html index a3462796..511e1a1f 100644 --- a/_site/gallery/10/index.html +++ b/_site/gallery/10/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1228,6 +1227,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/11/index.html b/_site/gallery/11/index.html index 433026ac..4874903f 100644 --- a/_site/gallery/11/index.html +++ b/_site/gallery/11/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1106,6 +1105,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/2/index.html b/_site/gallery/2/index.html index 9005195d..d8a6f96e 100644 --- a/_site/gallery/2/index.html +++ b/_site/gallery/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1240,6 +1239,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/3/index.html b/_site/gallery/3/index.html index 2785524f..7ea14d46 100644 --- a/_site/gallery/3/index.html +++ b/_site/gallery/3/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1220,6 +1219,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/4/index.html b/_site/gallery/4/index.html index 6e2bf9a4..0c816039 100644 --- a/_site/gallery/4/index.html +++ b/_site/gallery/4/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1228,6 +1227,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/5/index.html b/_site/gallery/5/index.html index 08f8ea01..2c3260ec 100644 --- a/_site/gallery/5/index.html +++ b/_site/gallery/5/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1222,6 +1221,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/6/index.html b/_site/gallery/6/index.html index a3e108f2..55b4d0e9 100644 --- a/_site/gallery/6/index.html +++ b/_site/gallery/6/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1228,6 +1227,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/7/index.html b/_site/gallery/7/index.html index a2502ae8..4905aebe 100644 --- a/_site/gallery/7/index.html +++ b/_site/gallery/7/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1270,6 +1269,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/8/index.html b/_site/gallery/8/index.html index c57f436d..f3444cd1 100644 --- a/_site/gallery/8/index.html +++ b/_site/gallery/8/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1252,6 +1251,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/9/index.html b/_site/gallery/9/index.html index 38cc4195..606db8af 100644 --- a/_site/gallery/9/index.html +++ b/_site/gallery/9/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1254,6 +1253,6 @@ footer a:focus-visible { - + diff --git a/_site/gallery/index.html b/_site/gallery/index.html index 13ca2be2..5f358e55 100644 --- a/_site/gallery/index.html +++ b/_site/gallery/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1212,6 +1211,6 @@ footer a:focus-visible { - + diff --git a/_site/geese-trans-wrongs/index.html b/_site/geese-trans-wrongs/index.html index a7a380cb..306e9d97 100644 --- a/_site/geese-trans-wrongs/index.html +++ b/_site/geese-trans-wrongs/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                        geese/trans wrongs

                                                                                                        @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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!' + + + 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!' + + 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!'

                                                                                                        Combination of trans wrongs skull and the geese.

                                                                                                        @@ -1512,35 +1623,41 @@ export { HeadingAnchors }
                                                                                                      4. - -

                                                                                                        fat raccoon

                                                                                                        +                                                                                                         +

                                                                                                        girldick (mature)

                                                                                                        • print
                                                                                                          • -
                                                                                                        • card
                                                                                                          • +
                                                                                                        • sticker
                                                                                                        • shirt
                                                                                                          • +
                                                                                                        • pin
                                                                                                          • + +
                                                                                                        • gender
                                                                                                          • +
                                                                                                        - A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
                                                                                                      5. - -

                                                                                                        gender as a proxy variable

                                                                                                        +                                                                                                         +

                                                                                                        greeting loons

                                                                                                          -
                                                                                                        • gender
                                                                                                          • +
                                                                                                        • card
                                                                                                          • -
                                                                                                        • zine
                                                                                                          • +
                                                                                                        • print
                                                                                                          • + +
                                                                                                        • highlight
                                                                                                        - 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. + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
                                                                                                        6. @@ -1576,6 +1693,6 @@ export { HeadingAnchors } - + diff --git a/_site/geese/index.html b/_site/geese/index.html index 06a04988..03143157 100644 --- a/_site/geese/index.html +++ b/_site/geese/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                        geese

                                                                                                        @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + + + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS!

                                                                                                        Based on a fantastic picture by handmade ghost

                                                                                                        @@ -1498,49 +1609,47 @@ export { HeadingAnchors }
                                                                                                        1. - -

                                                                                                          greeting quorbs

                                                                                                          +                                                                                                           +

                                                                                                          kniphofia

                                                                                                            -
                                                                                                          • card
                                                                                                            • -
                                                                                                          • print
                                                                                                          - A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail. + A print of a brightly colored flower in 4 layers of color
                                                                                                        2. - -

                                                                                                          chanterelle

                                                                                                          +                                                                                                           +

                                                                                                          quorbs

                                                                                                          • print
                                                                                                            • -
                                                                                                          • card
                                                                                                            • +
                                                                                                          • highlight
                                                                                                          - A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + 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.
                                                                                                        3. - -

                                                                                                          five of them

                                                                                                          +                                                                                                           +

                                                                                                          artisans cooperative shirts

                                                                                                            -
                                                                                                          • print
                                                                                                            • -
                                                                                                          • shirt
                                                                                                            • +
                                                                                                          • print
                                                                                                            • +
                                                                                                          - A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail.
                                                                                                          4. @@ -1576,6 +1685,6 @@ export { HeadingAnchors } - + diff --git a/_site/gender-as-a-proxy-variable/index.html b/_site/gender-as-a-proxy-variable/index.html index 821d5d90..9487cb60 100644 --- a/_site/gender-as-a-proxy-variable/index.html +++ b/_site/gender-as-a-proxy-variable/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                          gender as a proxy variable

                                                                                                          @@ -1440,11 +1547,14 @@ export { HeadingAnchors } - 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. + + + 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. + + 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. -

                                                                                                          Look through a scan of the zine. (Be aware that the PDF is not as up to date as the web version below.)

                                                                                                          -

                                                                                                          Get print copies.

                                                                                                          +

                                                                                                          Get print copies.

                                                                                                          The below material is a web page reproduction of my zine Gender as a Proxy Variable.

                                                                                                          Authored by Lee Cattarin

                                                                                                          @@ -1670,55 +1780,53 @@ export { HeadingAnchors }
                                                                                                          1. - -

                                                                                                            congrats on the gay

                                                                                                            +                                                                                                             +

                                                                                                            tooled leather patches

                                                                                                              -
                                                                                                            • print
                                                                                                              • - -
                                                                                                            • card
                                                                                                              • +
                                                                                                            • leather
                                                                                                            • gender
                                                                                                            - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                                                          2. - -

                                                                                                            trans rights skull

                                                                                                            +                                                                                                             +

                                                                                                            girldick (mature)

                                                                                                            • print
                                                                                                              • -
                                                                                                            • card
                                                                                                              • -
                                                                                                            • sticker
                                                                                                              • +
                                                                                                            • shirt
                                                                                                              • +
                                                                                                            • pin
                                                                                                            • gender
                                                                                                            - A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!' + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
                                                                                                          3. - -

                                                                                                            on the ubiquity of 'enby'

                                                                                                            +                                                                                                             +

                                                                                                            gender?

                                                                                                            • gender
                                                                                                            - A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report' + A page of handwritten notes with some loosely drawn charts, described further in the post.
                                                                                                            4. @@ -1754,6 +1862,6 @@ export { HeadingAnchors } - + diff --git a/_site/gender-in-data-models/index.html b/_site/gender-in-data-models/index.html index db437fe1..533ca1e5 100644 --- a/_site/gender-in-data-models/index.html +++ b/_site/gender-in-data-models/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                            gender in data models

                                                                                                            @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - Image unrelated to post. A light pink peony in full bloom, close up. + + + Image unrelated to post. A light pink peony in full bloom, close up. + + Image unrelated to post. A light pink peony in full bloom, close up. @@ -1720,31 +1831,35 @@ This may also be expanded to a multi-step approach, with questions covering some
                                                                                                            1. - -

                                                                                                              in the news

                                                                                                              +                                                                                                               +

                                                                                                              bottom growth (mature)

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

                                                                                                              gender as a proxy variable

                                                                                                              +                                                                                                               +

                                                                                                              kestrel zine

                                                                                                                -
                                                                                                              • gender
                                                                                                                • +
                                                                                                              • print
                                                                                                              • zine
                                                                                                                • +
                                                                                                              • highlight
                                                                                                                • +
                                                                                                              - 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. + 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.
                                                                                                              3. @@ -1794,6 +1909,6 @@ This may also be expanded to a multi-step approach, with questions covering some - + diff --git a/_site/gender/index.html b/_site/gender/index.html index 505b193d..da37d0e1 100644 --- a/_site/gender/index.html +++ b/_site/gender/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                              gender?

                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A page of handwritten notes with some loosely drawn charts, described further in the post. + + + A page of handwritten notes with some loosely drawn charts, described further in the post. + + A page of handwritten notes with some loosely drawn charts, described further in the post.

                                                                                                              transcription

                                                                                                              @@ -1504,26 +1615,8 @@ export { HeadingAnchors }
                                                                                                              1. - -

                                                                                                                pronoun patches

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

                                                                                                                congrats on the gay

                                                                                                                +                                                                                                                 +

                                                                                                                trans wrongs skull

                                                                                                                  @@ -1531,28 +1624,44 @@ export { HeadingAnchors }
                                                                                                                • card
                                                                                                                  • +
                                                                                                                • sticker
                                                                                                                  • + +
                                                                                                                • pin
                                                                                                                  • +
                                                                                                                • gender
                                                                                                                - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
                                                                                                              3. - -

                                                                                                                trans the world

                                                                                                                +                                                                                                                 +

                                                                                                                luminescent (mature)

                                                                                                                • print
                                                                                                                  • -
                                                                                                                • shirt
                                                                                                                  • +
                                                                                                                • gender
                                                                                                                  • + +
                                                                                                                + A print of a tattooed woman in bright highlighter yellow underwear. + +                                                                                                                 +
                                                                                                                4. + +
                                                                                                              4. + +

                                                                                                                in the news

                                                                                                                + +
                                                                                                                • gender
                                                                                                                - 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. + 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.
                                                                                                                5. @@ -1588,6 +1697,6 @@ export { HeadingAnchors } - + diff --git a/_site/girldick/index.html b/_site/girldick/index.html index 232c1bdd..def0e7be 100644 --- a/_site/girldick/index.html +++ b/_site/girldick/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                girldick

                                                                                                                @@ -1455,7 +1562,11 @@ export { HeadingAnchors } - A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + + + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.

                                                                                                                To order this as a shirt, please fill out the order form. (Sep 2024: no longer taking orders via this method)

                                                                                                                @@ -1508,22 +1619,8 @@ export { HeadingAnchors }
                                                                                                                1. - -

                                                                                                                  kniphofia

                                                                                                                  - -
                                                                                                                    - -
                                                                                                                  • print
                                                                                                                    • - -
                                                                                                                  - A print of a brightly colored flower in 4 layers of color - -                                                                                                                   -
                                                                                                                  2. - -
                                                                                                                2. - -

                                                                                                                  queer

                                                                                                                  +                                                                                                                   +

                                                                                                                  seedling

                                                                                                                    @@ -1531,28 +1628,42 @@ export { HeadingAnchors }
                                                                                                                  • card
                                                                                                                    • -
                                                                                                                  • sticker
                                                                                                                    • - -
                                                                                                                  • pin
                                                                                                                    • - -
                                                                                                                  • gender
                                                                                                                    • -
                                                                                                                  - A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + 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.
                                                                                                                3. - -

                                                                                                                  fix your hearts

                                                                                                                  +                                                                                                                   +

                                                                                                                  congrats on the gay

                                                                                                                  • print
                                                                                                                    • +
                                                                                                                  • card
                                                                                                                    • + +
                                                                                                                  • gender
                                                                                                                    • +
                                                                                                                  - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + +                                                                                                                   +
                                                                                                                  4. + +
                                                                                                                4. + +

                                                                                                                  greeting quorbs

                                                                                                                  + +
                                                                                                                    + +
                                                                                                                  • card
                                                                                                                    • + +
                                                                                                                  • print
                                                                                                                    • + +
                                                                                                                  + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
                                                                                                                  5. @@ -1588,6 +1699,6 @@ export { HeadingAnchors } - + diff --git a/_site/give-to-trans-orgs-and-people/index.html b/_site/give-to-trans-orgs-and-people/index.html index d00975a8..d746d388 100644 --- a/_site/give-to-trans-orgs-and-people/index.html +++ b/_site/give-to-trans-orgs-and-people/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                  give to trans orgs and people

                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                  This is a collation of responses to a fediverse post I made.

                                                                                                                  @@ -1540,47 +1651,51 @@ export { HeadingAnchors }
                                                                                                                  1. - -

                                                                                                                    proud dad wallet

                                                                                                                    +                                                                                                                     +

                                                                                                                    coming out

                                                                                                                      -
                                                                                                                    • leather
                                                                                                                      • +
                                                                                                                    • print
                                                                                                                      • + +
                                                                                                                    • card
                                                                                                                    • gender
                                                                                                                    - A brown leather wallet with a subtle trans flag stitching across the top. + 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'
                                                                                                                  2. - -

                                                                                                                    fd signifier & oppositional sexism

                                                                                                                    +                                                                                                                     +

                                                                                                                    on pronouns

                                                                                                                    • gender
                                                                                                                    - Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field. + Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder.
                                                                                                                  3. - -

                                                                                                                    fishhook pride keychains

                                                                                                                    +                                                                                                                     +

                                                                                                                    booby (congrats on the top surgery)

                                                                                                                      -
                                                                                                                    • leather
                                                                                                                      • +
                                                                                                                    • print
                                                                                                                      • + +
                                                                                                                    • card
                                                                                                                    • gender
                                                                                                                    - a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + A landscape-oriented white card with a two-color print of a blue-footed booby.
                                                                                                                    4. @@ -1616,6 +1731,6 @@ export { HeadingAnchors } - + diff --git a/_site/gradient-purse-strap/index.html b/_site/gradient-purse-strap/index.html index dc00a42d..1295e2fe 100644 --- a/_site/gradient-purse-strap/index.html +++ b/_site/gradient-purse-strap/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                    gradient purse strap

                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                    40-something inches long, brass hardware, custom dyed.

                                                                                                                    @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                    1. - -

                                                                                                                      vertical zipper card wallet

                                                                                                                      +                                                                                                                       +

                                                                                                                      circle bag

                                                                                                                      • leather
                                                                                                                      - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.
                                                                                                                    2. - -

                                                                                                                      sora's collar

                                                                                                                      +                                                                                                                       +

                                                                                                                      long zipper bifold

                                                                                                                      • leather
                                                                                                                      - 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. + A collage showing an orange leather wallet with a long zipper running the length of the outside.
                                                                                                                    3. - -

                                                                                                                      patchwork wallet

                                                                                                                      +                                                                                                                       +

                                                                                                                      vix collar

                                                                                                                      • leather
                                                                                                                      - 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. + 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.
                                                                                                                      4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/green-memo-pad/index.html b/_site/green-memo-pad/index.html index 398e916f..1b63558a 100644 --- a/_site/green-memo-pad/index.html +++ b/_site/green-memo-pad/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                      green memo pad

                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A three panel collage showcasing a small green memo pad. + + + A three panel collage showcasing a small green memo pad. + + A three panel collage showcasing a small green memo pad.

                                                                                                                      A green memo pad. The text block is held on by a piece of waxed thread around the spine, which allows it to be replaced if desired.

                                                                                                                      @@ -1497,15 +1608,15 @@ export { HeadingAnchors }
                                                                                                                      1. - -

                                                                                                                        baseball journal

                                                                                                                        +                                                                                                                         +

                                                                                                                        stampede journal

                                                                                                                        • book
                                                                                                                        - A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it.
                                                                                                                        2. @@ -1525,17 +1636,15 @@ export { HeadingAnchors }
                                                                                                                      2. - -

                                                                                                                        leather long-stitch journals

                                                                                                                        +                                                                                                                         +

                                                                                                                        baseball journal

                                                                                                                          -
                                                                                                                        • leather
                                                                                                                          • -
                                                                                                                        • book
                                                                                                                        - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
                                                                                                                        3. @@ -1571,6 +1680,6 @@ export { HeadingAnchors } - + diff --git a/_site/greeting-loons/index.html b/_site/greeting-loons/index.html index b50e75ec..4dc1b763 100644 --- a/_site/greeting-loons/index.html +++ b/_site/greeting-loons/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                        greeting loons

                                                                                                                        @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + + + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.

                                                                                                                        Original print greeting cards.

                                                                                                                        @@ -1491,8 +1602,26 @@ export { HeadingAnchors }
                                                                                                                        1. - -

                                                                                                                          killdeer

                                                                                                                          +                                                                                                                           +

                                                                                                                          heron

                                                                                                                          + +
                                                                                                                            + +
                                                                                                                          • print
                                                                                                                            • + +
                                                                                                                          • card
                                                                                                                            • + +
                                                                                                                          • shirt
                                                                                                                            • + +
                                                                                                                          + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + +                                                                                                                           +
                                                                                                                          2. + +
                                                                                                                        2. + +

                                                                                                                          chanterelle

                                                                                                                            @@ -1501,14 +1630,14 @@ export { HeadingAnchors }
                                                                                                                          • card
                                                                                                                          - A print of a killdeer in black ink. + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
                                                                                                                        3. - -

                                                                                                                          happy biHRTday

                                                                                                                          +                                                                                                                           +

                                                                                                                          booby (congrats on the top surgery)

                                                                                                                            @@ -1519,25 +1648,7 @@ export { HeadingAnchors }
                                                                                                                          • gender
                                                                                                                          - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' - -                                                                                                                           -
                                                                                                                          4. - -
                                                                                                                        4. - -

                                                                                                                          congrats on the gay

                                                                                                                          - -
                                                                                                                            - -
                                                                                                                          • print
                                                                                                                            • - -
                                                                                                                          • card
                                                                                                                            • - -
                                                                                                                          • gender
                                                                                                                            • - -
                                                                                                                          - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + A landscape-oriented white card with a two-color print of a blue-footed booby.
                                                                                                                          5. @@ -1573,6 +1684,6 @@ export { HeadingAnchors } - + diff --git a/_site/greeting-quorbs/index.html b/_site/greeting-quorbs/index.html index 66f8b7df..c7949d6d 100644 --- a/_site/greeting-quorbs/index.html +++ b/_site/greeting-quorbs/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                          greeting quorbs

                                                                                                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail. + + + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail. + + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.

                                                                                                                          Original print greeting cards.

                                                                                                                          @@ -1500,28 +1611,24 @@ export { HeadingAnchors }
                                                                                                                        5. - -

                                                                                                                          shrimp

                                                                                                                          +                                                                                                                           +

                                                                                                                          quorbs

                                                                                                                          • print
                                                                                                                            • -
                                                                                                                          • card
                                                                                                                            • - -
                                                                                                                          • sticker
                                                                                                                            • - -
                                                                                                                          • pin
                                                                                                                            • +
                                                                                                                          • highlight
                                                                                                                          - A print of a small shrimp with slender little leggies in orange ink. + 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.
                                                                                                                        6. - -

                                                                                                                          trans the world

                                                                                                                          +                                                                                                                           +

                                                                                                                          not a drill

                                                                                                                            @@ -1529,10 +1636,8 @@ export { HeadingAnchors }
                                                                                                                          • shirt
                                                                                                                            • -
                                                                                                                          • gender
                                                                                                                            • -
                                                                                                                          - 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. + 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'
                                                                                                                          7. @@ -1568,6 +1673,6 @@ export { HeadingAnchors } - + diff --git a/_site/guestbook/index.html b/_site/guestbook/index.html index 67bb1682..af7f5554 100644 --- a/_site/guestbook/index.html +++ b/_site/guestbook/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1087,6 +1086,6 @@ export { HeadingAnchors } - + diff --git a/_site/hair/index.html b/_site/hair/index.html index 0bb553f2..66d05fc2 100644 --- a/_site/hair/index.html +++ b/_site/hair/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                          hair

                                                                                                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A print in black ink of belly hair. + + + A print in black ink of belly hair. + + A print in black ink of belly hair.

                                                                                                                          Hand carved stamp of some tummy hair, in celebration of testosterone.

                                                                                                                          @@ -1493,49 +1604,43 @@ export { HeadingAnchors }
                                                                                                                          1. - -

                                                                                                                            gender?

                                                                                                                            - -
                                                                                                                              - -
                                                                                                                            • gender
                                                                                                                              • - -
                                                                                                                            - A page of handwritten notes with some loosely drawn charts, described further in the post. - -                                                                                                                             -
                                                                                                                            2. - -
                                                                                                                          2. - -

                                                                                                                            big pidge

                                                                                                                            +                                                                                                                             +

                                                                                                                            tiny mushrooms

                                                                                                                            • print
                                                                                                                              • -
                                                                                                                            • card
                                                                                                                              • - -
                                                                                                                            • shirt
                                                                                                                              • -
                                                                                                                            - A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence. + 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.
                                                                                                                          3. - -

                                                                                                                            gender as a proxy variable

                                                                                                                            +                                                                                                                             +

                                                                                                                            kniphofia

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

                                                                                                                            in the news

                                                                                                                            • gender
                                                                                                                              • -
                                                                                                                            • zine
                                                                                                                              • -
                                                                                                                            - 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. + 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.
                                                                                                                            5. @@ -1571,6 +1676,6 @@ export { HeadingAnchors } - + diff --git a/_site/hand-dyed-gold-handspun/index.html b/_site/hand-dyed-gold-handspun/index.html index 797543fb..789154fb 100644 --- a/_site/hand-dyed-gold-handspun/index.html +++ b/_site/hand-dyed-gold-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                            hand-dyed gold handspun

                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + + + 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + + 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight

                                                                                                                            Fiber from Paradise Fibers. 70% merino/30% nylon. Hand-dyed by me.

                                                                                                                            @@ -1480,6 +1591,20 @@ export { HeadingAnchors }
                                                                                                                              +
                                                                                                                            1. + +

                                                                                                                              dyeing fiber

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

                                                                                                                            2. rambouillet handspun

                                                                                                                              @@ -1495,29 +1620,15 @@ export { HeadingAnchors }
                                                                                                                            3. - -

                                                                                                                              BFL/silk handspun

                                                                                                                              +                                                                                                                               +

                                                                                                                              spinning plants

                                                                                                                              • yarn
                                                                                                                              - a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. - -                                                                                                                               -
                                                                                                                              4. - -
                                                                                                                            4. - -

                                                                                                                              handcombed jacobs handspun

                                                                                                                              - -
                                                                                                                                - -
                                                                                                                              • yarn
                                                                                                                                • - -
                                                                                                                              - a skein of dark grey handspun yarn + 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)
                                                                                                                              5. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/handcombed-jacobs-handspun/index.html b/_site/handcombed-jacobs-handspun/index.html index e04a3b97..e26cb711 100644 --- a/_site/handcombed-jacobs-handspun/index.html +++ b/_site/handcombed-jacobs-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                              handcombed jacobs handspun

                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - a skein of dark grey handspun yarn + + + a skein of dark grey handspun yarn + + a skein of dark grey handspun yarn

                                                                                                                              Fiber: Jacobs wool that I scoured and combed myself.

                                                                                                                              @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                              1. - -

                                                                                                                                BFL/silk handspun

                                                                                                                                +                                                                                                                                 +

                                                                                                                                handspun yarn in party mix and orange-gold

                                                                                                                                • yarn
                                                                                                                                - a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
                                                                                                                              2. - -

                                                                                                                                ruby the alpaca handspun

                                                                                                                                +                                                                                                                                 +

                                                                                                                                petrichor handspun

                                                                                                                                • yarn
                                                                                                                                - one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight + 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
                                                                                                                              3. - -

                                                                                                                                light grey jacobs handspun

                                                                                                                                +                                                                                                                                 +

                                                                                                                                hand-dyed gold handspun

                                                                                                                                • yarn
                                                                                                                                - a skein of light grey handspun yarn + 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight
                                                                                                                                4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/handedness-toggle/index.html b/_site/handedness-toggle/index.html index 2498a25d..95c1ec31 100644 --- a/_site/handedness-toggle/index.html +++ b/_site/handedness-toggle/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                handedness toggle

                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + + + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.

                                                                                                                                Recently, I got an iPad for art and immediately fell down the rabbit hole of Glitch and web development.

                                                                                                                                @@ -1706,6 +1817,20 @@ alignToggle.
                                                                                                                                  +
                                                                                                                                1. + +

                                                                                                                                  redirections

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

                                                                                                                                2. screen reader optimizations

                                                                                                                                  @@ -1721,31 +1846,15 @@ alignToggle.
                                                                                                                                3. - -

                                                                                                                                  domain and site setup

                                                                                                                                  +                                                                                                                                   +

                                                                                                                                  intro to wireframing

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

                                                                                                                                  designing a bag

                                                                                                                                  - -
                                                                                                                                    - -
                                                                                                                                  • leather
                                                                                                                                    • - -
                                                                                                                                  • software
                                                                                                                                    • - -
                                                                                                                                  - 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. + 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.
                                                                                                                                  5. @@ -1781,6 +1890,6 @@ alignToggle. - + 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 1fa95965..200361c5 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 @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                  handspun yarn in party mix and orange-gold

                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. + + + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. + + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.

                                                                                                                                  4 skeins of handspun yarn.

                                                                                                                                  @@ -1502,43 +1613,43 @@ export { HeadingAnchors }
                                                                                                                                  1. - -

                                                                                                                                    spinning plants

                                                                                                                                    +                                                                                                                                     +

                                                                                                                                    handcombed jacobs handspun

                                                                                                                                    • yarn
                                                                                                                                    - 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) + a skein of dark grey handspun yarn
                                                                                                                                  2. - -

                                                                                                                                    BFL/silk handspun

                                                                                                                                    +                                                                                                                                     +

                                                                                                                                    charlie the alpaca handspun

                                                                                                                                    • yarn
                                                                                                                                    - a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight
                                                                                                                                  3. - -

                                                                                                                                    orion handspun

                                                                                                                                    +                                                                                                                                     +

                                                                                                                                    rambouillet handspun

                                                                                                                                    • yarn
                                                                                                                                    - 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. + 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.
                                                                                                                                    4. @@ -1574,6 +1685,6 @@ export { HeadingAnchors } - + diff --git a/_site/happy-bihrtday/index.html b/_site/happy-bihrtday/index.html index 3bb469f8..e6090a98 100644 --- a/_site/happy-bihrtday/index.html +++ b/_site/happy-bihrtday/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                    happy biHRTday

                                                                                                                                    @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + + + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'

                                                                                                                                    details

                                                                                                                                    @@ -1497,8 +1608,8 @@ export { HeadingAnchors }
                                                                                                                                    1. - -

                                                                                                                                      trans rights skull

                                                                                                                                      +                                                                                                                                       +

                                                                                                                                      swallowtail on snowdrops

                                                                                                                                        @@ -1506,44 +1617,38 @@ export { HeadingAnchors }
                                                                                                                                      • card
                                                                                                                                        • -
                                                                                                                                      • sticker
                                                                                                                                        • - -
                                                                                                                                      • pin
                                                                                                                                        • - -
                                                                                                                                      • gender
                                                                                                                                        • +
                                                                                                                                      • shirt
                                                                                                                                      - A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!' + A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower.
                                                                                                                                    2. - -

                                                                                                                                      gender?

                                                                                                                                      - -
                                                                                                                                        - -
                                                                                                                                      • gender
                                                                                                                                        • - -
                                                                                                                                      - A page of handwritten notes with some loosely drawn charts, described further in the post. - -                                                                                                                                       -
                                                                                                                                      3. - -
                                                                                                                                    3. - -

                                                                                                                                      bottom growth (mature)

                                                                                                                                      +                                                                                                                                       +

                                                                                                                                      crow

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

                                                                                                                                      on the ubiquity of 'enby'

                                                                                                                                      + +
                                                                                                                                        +
                                                                                                                                      • gender
                                                                                                                                      - 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. + A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report'
                                                                                                                                      5. @@ -1579,6 +1684,6 @@ export { HeadingAnchors } - + diff --git a/_site/happy-solstice-2024/index.html b/_site/happy-solstice-2024/index.html index 8c6c81a2..3d0b612d 100644 --- a/_site/happy-solstice-2024/index.html +++ b/_site/happy-solstice-2024/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                      happy solstice 2024

                                                                                                                                      @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - A digital card with front and back stitched together into one image. Front - a collage of photos - brooke with blue hair and kestrel wiggling in her lap; kestrel on his back with one back paw clutched in his mouth; lee sitting holding some custom art of kestrel, showing kestrel the pictures; lee looking intently through a long camera lens; brooke, back to the camera, swaggering across tidal flats in her hand-stitched jacket. over the photos, hand-lettering reads 'happy solstice!' in two shades of pink. Back - two photos - the duckies clustered around the camera; and kestrel leaping gracefully through shallow water with his tongue out in a blep. Overlaid text reads '~ Lee, Brooke, Kestrel, & the Flock' + + + A digital card with front and back stitched together into one image. Front - a collage of photos - brooke with blue hair and kestrel wiggling in her lap; kestrel on his back with one back paw clutched in his mouth; lee sitting holding some custom art of kestrel, showing kestrel the pictures; lee looking intently through a long camera lens; brooke, back to the camera, swaggering across tidal flats in her hand-stitched jacket. over the photos, hand-lettering reads 'happy solstice!' in two shades of pink. Back - two photos - the duckies clustered around the camera; and kestrel leaping gracefully through shallow water with his tongue out in a blep. Overlaid text reads '~ Lee, Brooke, Kestrel, & the Flock' + + A digital card with front and back stitched together into one image. Front - a collage of photos - brooke with blue hair and kestrel wiggling in her lap; kestrel on his back with one back paw clutched in his mouth; lee sitting holding some custom art of kestrel, showing kestrel the pictures; lee looking intently through a long camera lens; brooke, back to the camera, swaggering across tidal flats in her hand-stitched jacket. over the photos, hand-lettering reads 'happy solstice!' in two shades of pink. Back - two photos - the duckies clustered around the camera; and kestrel leaping gracefully through shallow water with his tongue out in a blep. Overlaid text reads '~ Lee, Brooke, Kestrel, & the Flock'

                                                                                                                                      Hand-lettered digitally. Happy Solstice to you and yours.

                                                                                                                                      @@ -1494,6 +1605,6 @@ export { HeadingAnchors } - + diff --git a/_site/happy-solstice-2025/index.html b/_site/happy-solstice-2025/index.html index 0f0082c8..25125121 100644 --- a/_site/happy-solstice-2025/index.html +++ b/_site/happy-solstice-2025/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                      happy solstice 2025

                                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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 to you and yours.

                                                                                                                                      @@ -1480,6 +1591,22 @@ export { HeadingAnchors }
                                                                                                                                        +
                                                                                                                                      1. + +

                                                                                                                                        quorbs

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

                                                                                                                                      2. brooke's notebook

                                                                                                                                        @@ -1497,35 +1624,15 @@ export { HeadingAnchors }
                                                                                                                                      3. - -

                                                                                                                                        greeting loons

                                                                                                                                        +                                                                                                                                         +

                                                                                                                                        recommendations & favorites

                                                                                                                                          -
                                                                                                                                        • card
                                                                                                                                          • - -
                                                                                                                                        • print
                                                                                                                                          • -
                                                                                                                                        • highlight
                                                                                                                                        - A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. - -                                                                                                                                         -
                                                                                                                                        4. - -
                                                                                                                                      4. - -

                                                                                                                                        butch hands pattern

                                                                                                                                        - -
                                                                                                                                          - -
                                                                                                                                        • knit
                                                                                                                                          • - -
                                                                                                                                        • highlight
                                                                                                                                          • - -
                                                                                                                                        - Hands wearing a pair of pink and grey gloves with convertable mitten tops. + Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible.
                                                                                                                                        5. @@ -1561,6 +1668,6 @@ export { HeadingAnchors } - + diff --git a/_site/heron/index.html b/_site/heron/index.html index 1bc52e05..0770390f 100644 --- a/_site/heron/index.html +++ b/_site/heron/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                        heron

                                                                                                                                        @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + + + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.

                                                                                                                                        Hand carved stamp of a great blue heron. Based on a photo from birdpixel.

                                                                                                                                        @@ -1498,47 +1609,53 @@ export { HeadingAnchors }
                                                                                                                                        1. - -

                                                                                                                                          quorbs

                                                                                                                                          +                                                                                                                                           +

                                                                                                                                          queer

                                                                                                                                          • print
                                                                                                                                            • -
                                                                                                                                          • highlight
                                                                                                                                            • +
                                                                                                                                          • card
                                                                                                                                            • + +
                                                                                                                                          • sticker
                                                                                                                                            • + +
                                                                                                                                          • pin
                                                                                                                                            • + +
                                                                                                                                          • gender
                                                                                                                                          - 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. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                                                                        2. - -

                                                                                                                                          five of them

                                                                                                                                          +                                                                                                                                           +

                                                                                                                                          bottom growth (mature)

                                                                                                                                          • print
                                                                                                                                            • -
                                                                                                                                          • shirt
                                                                                                                                            • +
                                                                                                                                          • gender
                                                                                                                                          - A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + 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.
                                                                                                                                        3. - -

                                                                                                                                          loon

                                                                                                                                          +                                                                                                                                           +

                                                                                                                                          tiny mushrooms

                                                                                                                                          • print
                                                                                                                                          - A print of a loon rearing up with wings spread + 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.
                                                                                                                                          4. @@ -1574,6 +1691,6 @@ export { HeadingAnchors } - + diff --git a/_site/hummingbird-become-ungovernable/index.html b/_site/hummingbird-become-ungovernable/index.html index 50930f3f..3a64618c 100644 --- a/_site/hummingbird-become-ungovernable/index.html +++ b/_site/hummingbird-become-ungovernable/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                          hummingbird become ungovernable

                                                                                                                                          @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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' + + + 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' + + 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'

                                                                                                                                          Rufous hummingbirds are remarkably aggressive.

                                                                                                                                          @@ -1498,17 +1609,17 @@ export { HeadingAnchors }
                                                                                                                                          1. - -

                                                                                                                                            five of them

                                                                                                                                            +                                                                                                                                             +

                                                                                                                                            hair

                                                                                                                                            • print
                                                                                                                                              • -
                                                                                                                                            • shirt
                                                                                                                                              • +
                                                                                                                                            • gender
                                                                                                                                            - A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + A print in black ink of belly hair.
                                                                                                                                            2. @@ -1530,19 +1641,23 @@ export { HeadingAnchors }
                                                                                                                                          2. - -

                                                                                                                                            pronoun patches

                                                                                                                                            +                                                                                                                                             +

                                                                                                                                            boypussy (mature)

                                                                                                                                            • print
                                                                                                                                              • -
                                                                                                                                            • patch
                                                                                                                                              • +
                                                                                                                                            • sticker
                                                                                                                                              • + +
                                                                                                                                            • shirt
                                                                                                                                              • + +
                                                                                                                                            • pin
                                                                                                                                            • gender
                                                                                                                                            - 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. + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.
                                                                                                                                            3. @@ -1578,6 +1693,6 @@ export { HeadingAnchors } - + diff --git a/_site/icelandic-lamb-handspun/index.html b/_site/icelandic-lamb-handspun/index.html index 009e6b23..41a948be 100644 --- a/_site/icelandic-lamb-handspun/index.html +++ b/_site/icelandic-lamb-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                            icelandic lamb handspun

                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - a skein of black handspun yarn + + + a skein of black handspun yarn + + a skein of black handspun yarn

                                                                                                                                            Fiber: Icelandic Lamb from Skagit Woolen Works

                                                                                                                                            @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                            1. - -

                                                                                                                                              charlie the alpaca handspun

                                                                                                                                              +                                                                                                                                               +

                                                                                                                                              petrichor handspun

                                                                                                                                              • yarn
                                                                                                                                              - one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight + 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
                                                                                                                                            2. - -

                                                                                                                                              spinner's dream handspun

                                                                                                                                              +                                                                                                                                               +

                                                                                                                                              BFL/silk handspun

                                                                                                                                              • yarn
                                                                                                                                              - a skein of a lightly variegated grey yarn in about a sport or DK weight. + a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.
                                                                                                                                            3. - -

                                                                                                                                              handspun yarn in party mix and orange-gold

                                                                                                                                              +                                                                                                                                               +

                                                                                                                                              dyeing fiber

                                                                                                                                              • yarn
                                                                                                                                              - 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. + 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.
                                                                                                                                              4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/in-the-news/index.html b/_site/in-the-news/index.html index c7aa6e1c..c7d4c087 100644 --- a/_site/in-the-news/index.html +++ b/_site/in-the-news/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                              in the news

                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                              topic: Artisans Cooperative

                                                                                                                                              @@ -1489,38 +1600,40 @@ export { HeadingAnchors }
                                                                                                                                              1. - -

                                                                                                                                                give to trans orgs and people

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

                                                                                                                                                luminescent (mature)

                                                                                                                                                +                                                                                                                                                 +

                                                                                                                                                geese/trans wrongs

                                                                                                                                                • print
                                                                                                                                                  • +
                                                                                                                                                • shirt
                                                                                                                                                  • +
                                                                                                                                                • gender
                                                                                                                                                - A print of a tattooed woman in bright highlighter yellow underwear. + 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!'
                                                                                                                                              3. - -

                                                                                                                                                trans wrongs skull

                                                                                                                                                +                                                                                                                                                 +

                                                                                                                                                on the ubiquity of 'enby'

                                                                                                                                                + +
                                                                                                                                                  + +
                                                                                                                                                • gender
                                                                                                                                                  • + +
                                                                                                                                                + A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report' + +                                                                                                                                                 +
                                                                                                                                                4. + +
                                                                                                                                              4. + +

                                                                                                                                                queer

                                                                                                                                                  @@ -1535,7 +1648,7 @@ export { HeadingAnchors }
                                                                                                                                                • gender
                                                                                                                                                - A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                                                                                5. @@ -1571,6 +1684,6 @@ export { HeadingAnchors } - + diff --git a/_site/index.html b/_site/index.html index f6b492d9..54d92793 100644 --- a/_site/index.html +++ b/_site/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1208,6 +1207,6 @@ footer a:focus-visible { - + diff --git a/_site/intro-to-wireframing/index.html b/_site/intro-to-wireframing/index.html index b58f53d2..3d7d2c41 100644 --- a/_site/intro-to-wireframing/index.html +++ b/_site/intro-to-wireframing/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                intro to wireframing

                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                learning figma! isn't it fun!

                                                                                                                                                @@ -1481,43 +1592,45 @@ export { HeadingAnchors }
                                                                                                                                                1. - -

                                                                                                                                                  accessible image modals

                                                                                                                                                  +                                                                                                                                                   +

                                                                                                                                                  comparing text editors

                                                                                                                                                  • software
                                                                                                                                                  - Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth. + Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint.
                                                                                                                                                2. - -

                                                                                                                                                  screen reader optimizations

                                                                                                                                                  +                                                                                                                                                   +

                                                                                                                                                  handedness toggle

                                                                                                                                                  • software
                                                                                                                                                  - Image unrelated to post. A crow poses on driftwood against a whitish sky. + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.
                                                                                                                                                3. - -

                                                                                                                                                  moving images

                                                                                                                                                  +                                                                                                                                                   +

                                                                                                                                                  azure locations and file crawling

                                                                                                                                                  • software
                                                                                                                                                    • +
                                                                                                                                                  • highlight
                                                                                                                                                    • +
                                                                                                                                                  - 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. + A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy.
                                                                                                                                                  4. @@ -1553,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/iris/index.html b/_site/iris/index.html index 690bf64f..5daeba6a 100644 --- a/_site/iris/index.html +++ b/_site/iris/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                  iris

                                                                                                                                                  @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + + + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes.

                                                                                                                                                  A hand carved set of 4 stamps make up this iris print.

                                                                                                                                                  @@ -1496,8 +1607,8 @@ export { HeadingAnchors }
                                                                                                                                                  1. - -

                                                                                                                                                    stellar's jay

                                                                                                                                                    +                                                                                                                                                     +

                                                                                                                                                    foxgloves

                                                                                                                                                      @@ -1508,49 +1619,43 @@ export { HeadingAnchors }
                                                                                                                                                    • shirt
                                                                                                                                                    - A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
                                                                                                                                                  2. - -

                                                                                                                                                    girldick (mature)

                                                                                                                                                    +                                                                                                                                                     +

                                                                                                                                                    geese/trans wrongs

                                                                                                                                                    • print
                                                                                                                                                      • -
                                                                                                                                                    • sticker
                                                                                                                                                      • -
                                                                                                                                                    • shirt
                                                                                                                                                      • -
                                                                                                                                                    • pin
                                                                                                                                                      • -
                                                                                                                                                    • gender
                                                                                                                                                    - A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + 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!'
                                                                                                                                                  3. - -

                                                                                                                                                    anarchy autism

                                                                                                                                                    +                                                                                                                                                     +

                                                                                                                                                    happy biHRTday

                                                                                                                                                    • print
                                                                                                                                                      • -
                                                                                                                                                    • sticker
                                                                                                                                                      • +
                                                                                                                                                    • card
                                                                                                                                                      • -
                                                                                                                                                    • shirt
                                                                                                                                                      • - -
                                                                                                                                                    • pin
                                                                                                                                                      • +
                                                                                                                                                    • gender
                                                                                                                                                    - A print in rainbow ink that says autism with the anarchy A. + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
                                                                                                                                                    4. @@ -1586,6 +1691,6 @@ export { HeadingAnchors } - + diff --git a/_site/junco/index.html b/_site/junco/index.html index 23aa5df7..acef6b73 100644 --- a/_site/junco/index.html +++ b/_site/junco/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                    junco

                                                                                                                                                    @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia. + + + A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia. + + A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia.

                                                                                                                                                    Hand carved stamp based on a photo of a dark-eyed junco.

                                                                                                                                                    @@ -1493,24 +1604,24 @@ export { HeadingAnchors }
                                                                                                                                                    1. - -

                                                                                                                                                      congrats on the autism/adhd

                                                                                                                                                      +                                                                                                                                                       +

                                                                                                                                                      greeting quorbs

                                                                                                                                                        -
                                                                                                                                                      • print
                                                                                                                                                        • -
                                                                                                                                                      • card
                                                                                                                                                        • +
                                                                                                                                                      • print
                                                                                                                                                        • +
                                                                                                                                                      - 4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows. + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
                                                                                                                                                    2. - -

                                                                                                                                                      stellar's jay

                                                                                                                                                      +                                                                                                                                                       +

                                                                                                                                                      coming out

                                                                                                                                                        @@ -1518,26 +1629,26 @@ export { HeadingAnchors }
                                                                                                                                                      • card
                                                                                                                                                        • -
                                                                                                                                                      • shirt
                                                                                                                                                        • +
                                                                                                                                                      • gender
                                                                                                                                                      - A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + 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'
                                                                                                                                                    3. - -

                                                                                                                                                      chanterelle

                                                                                                                                                      +                                                                                                                                                       +

                                                                                                                                                      bottom growth (mature)

                                                                                                                                                      • print
                                                                                                                                                        • -
                                                                                                                                                      • card
                                                                                                                                                        • +
                                                                                                                                                      • gender
                                                                                                                                                      - A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + 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.
                                                                                                                                                      4. @@ -1573,6 +1684,6 @@ export { HeadingAnchors } - + diff --git a/_site/keffiyah-fishing-net-pattern/index.html b/_site/keffiyah-fishing-net-pattern/index.html index 01424bae..804b3fcf 100644 --- a/_site/keffiyah-fishing-net-pattern/index.html +++ b/_site/keffiyah-fishing-net-pattern/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                      keffiyah fishing net pattern

                                                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later. + + + a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later. + + a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later.

                                                                                                                                                      give

                                                                                                                                                      @@ -1674,45 +1785,45 @@ export { HeadingAnchors }
                                                                                                                                                      1. - -

                                                                                                                                                        brooke's socks

                                                                                                                                                        +                                                                                                                                                         +

                                                                                                                                                        on the shoulders of giants

                                                                                                                                                          +
                                                                                                                                                        • zine
                                                                                                                                                          • +
                                                                                                                                                        • knit
                                                                                                                                                        - Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + 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
                                                                                                                                                      2. - -

                                                                                                                                                        knit shrimp

                                                                                                                                                        +                                                                                                                                                         +

                                                                                                                                                        acadia mitts

                                                                                                                                                        • knit
                                                                                                                                                        - Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + 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.
                                                                                                                                                      3. - -

                                                                                                                                                        textures unite

                                                                                                                                                        +                                                                                                                                                         +

                                                                                                                                                        brooke's scarf

                                                                                                                                                        • knit
                                                                                                                                                          • -
                                                                                                                                                        • highlight
                                                                                                                                                          • -
                                                                                                                                                        - 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. + 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.
                                                                                                                                                        4. @@ -1748,6 +1859,6 @@ export { HeadingAnchors } - + diff --git a/_site/kestrel-zine/index.html b/_site/kestrel-zine/index.html index 784155e4..e25dc1ce 100644 --- a/_site/kestrel-zine/index.html +++ b/_site/kestrel-zine/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                        kestrel zine

                                                                                                                                                        @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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. @@ -1490,47 +1601,51 @@ export { HeadingAnchors }
                                                                                                                                                        1. - -

                                                                                                                                                          brooke's notebook

                                                                                                                                                          +                                                                                                                                                           +

                                                                                                                                                          pronoun patches

                                                                                                                                                            -
                                                                                                                                                          • book
                                                                                                                                                            • +
                                                                                                                                                          • print
                                                                                                                                                            • -
                                                                                                                                                          • highlight
                                                                                                                                                            • +
                                                                                                                                                          • patch
                                                                                                                                                            • + +
                                                                                                                                                          • gender
                                                                                                                                                          - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + 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.
                                                                                                                                                        2. - -

                                                                                                                                                          crow

                                                                                                                                                          +                                                                                                                                                           +

                                                                                                                                                          geese

                                                                                                                                                          + +
                                                                                                                                                            + +
                                                                                                                                                          • print
                                                                                                                                                            • + +
                                                                                                                                                          • card
                                                                                                                                                            • + +
                                                                                                                                                          • shirt
                                                                                                                                                            • + +
                                                                                                                                                          + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + +                                                                                                                                                           +
                                                                                                                                                          3. + +
                                                                                                                                                        3. + +

                                                                                                                                                          brown creeper

                                                                                                                                                          • print
                                                                                                                                                          - 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. - -                                                                                                                                                           -
                                                                                                                                                          4. - -
                                                                                                                                                        4. - -

                                                                                                                                                          dragon mask

                                                                                                                                                          - -
                                                                                                                                                            - -
                                                                                                                                                          • leather
                                                                                                                                                            • - -
                                                                                                                                                          • highlight
                                                                                                                                                            • - -
                                                                                                                                                          - 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. + 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.
                                                                                                                                                          5. @@ -1566,6 +1681,6 @@ export { HeadingAnchors } - + diff --git a/_site/killdeer/index.html b/_site/killdeer/index.html index 0abc3f23..5943383c 100644 --- a/_site/killdeer/index.html +++ b/_site/killdeer/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                          killdeer

                                                                                                                                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A print of a killdeer in black ink. + + + A print of a killdeer in black ink. + + A print of a killdeer in black ink.

                                                                                                                                                          Hand carved stamp based on a photo of a killdeer.

                                                                                                                                                          @@ -1492,6 +1603,24 @@ export { HeadingAnchors }
                                                                                                                                                            +
                                                                                                                                                          1. + +

                                                                                                                                                            hummingbird become ungovernable

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

                                                                                                                                                          2. kniphofia

                                                                                                                                                            @@ -1507,37 +1636,15 @@ export { HeadingAnchors }
                                                                                                                                                          3. - -

                                                                                                                                                            geese

                                                                                                                                                            +                                                                                                                                                             +

                                                                                                                                                            brown creeper

                                                                                                                                                            • print
                                                                                                                                                              • -
                                                                                                                                                            • card
                                                                                                                                                              • - -
                                                                                                                                                            • shirt
                                                                                                                                                              • -
                                                                                                                                                            - Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! - -                                                                                                                                                             -
                                                                                                                                                            4. - -
                                                                                                                                                          4. - -

                                                                                                                                                            heron

                                                                                                                                                            - -
                                                                                                                                                              - -
                                                                                                                                                            • print
                                                                                                                                                              • - -
                                                                                                                                                            • card
                                                                                                                                                              • - -
                                                                                                                                                            • shirt
                                                                                                                                                              • - -
                                                                                                                                                            - A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + 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.
                                                                                                                                                            5. @@ -1573,6 +1680,6 @@ export { HeadingAnchors } - + diff --git a/_site/kniphofia/index.html b/_site/kniphofia/index.html index 07896ee8..5dacee9f 100644 --- a/_site/kniphofia/index.html +++ b/_site/kniphofia/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                            kniphofia

                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A print of a brightly colored flower in 4 layers of color + + + A print of a brightly colored flower in 4 layers of color + + A print of a brightly colored flower in 4 layers of color

                                                                                                                                                            a reduction print. total print run of 33.

                                                                                                                                                            @@ -1481,8 +1592,38 @@ export { HeadingAnchors }
                                                                                                                                                            1. - -

                                                                                                                                                              swallowtail on snowdrops

                                                                                                                                                              +                                                                                                                                                               +

                                                                                                                                                              bottom growth (mature)

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

                                                                                                                                                              block printing transfer method

                                                                                                                                                              + +
                                                                                                                                                                + +
                                                                                                                                                              • print
                                                                                                                                                                • + +
                                                                                                                                                              + A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material. + +                                                                                                                                                               +
                                                                                                                                                              3. + +
                                                                                                                                                            3. + +

                                                                                                                                                              fat raccoon

                                                                                                                                                                @@ -1493,43 +1634,7 @@ export { HeadingAnchors }
                                                                                                                                                              • shirt
                                                                                                                                                              - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. - -                                                                                                                                                               -
                                                                                                                                                              4. - -
                                                                                                                                                            4. - -

                                                                                                                                                              geese

                                                                                                                                                              - -
                                                                                                                                                                - -
                                                                                                                                                              • print
                                                                                                                                                                • - -
                                                                                                                                                              • card
                                                                                                                                                                • - -
                                                                                                                                                              • shirt
                                                                                                                                                                • - -
                                                                                                                                                              - Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! - -                                                                                                                                                               -
                                                                                                                                                              5. - -
                                                                                                                                                            5. - -

                                                                                                                                                              greeting loons

                                                                                                                                                              - -
                                                                                                                                                                - -
                                                                                                                                                              • card
                                                                                                                                                                • - -
                                                                                                                                                              • print
                                                                                                                                                                • - -
                                                                                                                                                              • highlight
                                                                                                                                                                • - -
                                                                                                                                                              - A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
                                                                                                                                                              6. @@ -1565,6 +1670,6 @@ export { HeadingAnchors } - + diff --git a/_site/knit-shrimp/index.html b/_site/knit-shrimp/index.html index 295c609e..3133f982 100644 --- a/_site/knit-shrimp/index.html +++ b/_site/knit-shrimp/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                              knit shrimp

                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + + + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.

                                                                                                                                                              Apparently I knit shrimp now. Not for sale, only a gift. Optionally stuffed with catnip in addition to stuffing.

                                                                                                                                                              @@ -1486,29 +1597,31 @@ export { HeadingAnchors }
                                                                                                                                                              1. - -

                                                                                                                                                                acadia mitts

                                                                                                                                                                +                                                                                                                                                                 +

                                                                                                                                                                on the shoulders of giants

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

                                                                                                                                                                brooke's scarf

                                                                                                                                                                +                                                                                                                                                                 +

                                                                                                                                                                keffiyah fishing net pattern

                                                                                                                                                                • knit
                                                                                                                                                                - 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. + a knitted swatch. it's mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later.
                                                                                                                                                                3. @@ -1560,6 +1673,6 @@ export { HeadingAnchors } - + diff --git a/_site/leaf-patches/index.html b/_site/leaf-patches/index.html index 92d8e999..39939918 100644 --- a/_site/leaf-patches/index.html +++ b/_site/leaf-patches/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                leaf patches

                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Several oak-leaf-shaped leather patches with stitching holes punched around the edges. + + + Several oak-leaf-shaped leather patches with stitching holes punched around the edges. + + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.

                                                                                                                                                                Also available in maple and serrated-edge leaves

                                                                                                                                                                @@ -1481,15 +1592,31 @@ export { HeadingAnchors }
                                                                                                                                                                1. - -

                                                                                                                                                                  vertical bifold

                                                                                                                                                                  +                                                                                                                                                                   +

                                                                                                                                                                  leather long-stitch journals

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

                                                                                                                                                                  vertical zipper card wallet

                                                                                                                                                                  • leather
                                                                                                                                                                  - A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket. + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
                                                                                                                                                                  3. @@ -1508,20 +1635,6 @@ export { HeadingAnchors } -
                                                                                                                                                                3. - -

                                                                                                                                                                  triangle pouch

                                                                                                                                                                  - -
                                                                                                                                                                    - -
                                                                                                                                                                  • leather
                                                                                                                                                                    • - -
                                                                                                                                                                  - 5 small triangular pouches made of leather in two sizes and various colors. - -                                                                                                                                                                   -
                                                                                                                                                                  4. -
                                                                                                                                                                @@ -1553,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/leather-chest-harness/index.html b/_site/leather-chest-harness/index.html index c7d5180e..360da403 100644 --- a/_site/leather-chest-harness/index.html +++ b/_site/leather-chest-harness/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                leather chest harness

                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + + + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.

                                                                                                                                                                Fully designed and created by me. Talk to me about designing your harness next!

                                                                                                                                                                @@ -1480,20 +1591,6 @@ export { HeadingAnchors }
                                                                                                                                                                  -
                                                                                                                                                                1. - -

                                                                                                                                                                  eight pocket bifold

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

                                                                                                                                                                2. mom bag

                                                                                                                                                                  @@ -1509,15 +1606,29 @@ export { HeadingAnchors }
                                                                                                                                                                3. - -

                                                                                                                                                                  o-ring bracelet

                                                                                                                                                                  +                                                                                                                                                                   +

                                                                                                                                                                  foldy wallet with thumb slide

                                                                                                                                                                  • leather
                                                                                                                                                                  - A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + 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. + +                                                                                                                                                                   +
                                                                                                                                                                  4. + +
                                                                                                                                                                4. + +

                                                                                                                                                                  wrap bracelets

                                                                                                                                                                  + +
                                                                                                                                                                    + +
                                                                                                                                                                  • leather
                                                                                                                                                                    • + +
                                                                                                                                                                  + 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.
                                                                                                                                                                  5. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/leather-keychains/index.html b/_site/leather-keychains/index.html index 2545b556..cadbd1fd 100644 --- a/_site/leather-keychains/index.html +++ b/_site/leather-keychains/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                  leather keychains

                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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'. + + + 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'. + + 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'.

                                                                                                                                                                  Hand-stitched leather keychains made from scrap leather.

                                                                                                                                                                  @@ -1489,43 +1600,43 @@ export { HeadingAnchors }
                                                                                                                                                                  1. - -

                                                                                                                                                                    o-ring bracelet

                                                                                                                                                                    +                                                                                                                                                                     +

                                                                                                                                                                    leaf patches

                                                                                                                                                                    • leather
                                                                                                                                                                    - A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                                                                                                                  2. - -

                                                                                                                                                                    foldy wallet

                                                                                                                                                                    +                                                                                                                                                                     +

                                                                                                                                                                    brooke's collar

                                                                                                                                                                    • leather
                                                                                                                                                                    - A four part collage showing a single piece of deep red leather folding up to become a card wallet. + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.
                                                                                                                                                                  3. - -

                                                                                                                                                                    snap pouch

                                                                                                                                                                    +                                                                                                                                                                     +

                                                                                                                                                                    maker's mark keychain

                                                                                                                                                                    • leather
                                                                                                                                                                    - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it.
                                                                                                                                                                    4. @@ -1561,6 +1672,6 @@ export { HeadingAnchors } - + diff --git a/_site/leather-lighter-case/index.html b/_site/leather-lighter-case/index.html index d81e606a..54b9142d 100644 --- a/_site/leather-lighter-case/index.html +++ b/_site/leather-lighter-case/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                    leather lighter case

                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A bic lighter wrapped in leather and hand-stitched up one side. + + + A bic lighter wrapped in leather and hand-stitched up one side. + + A bic lighter wrapped in leather and hand-stitched up one side.

                                                                                                                                                                    wet molded and hand-stitched

                                                                                                                                                                    @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                    1. - -

                                                                                                                                                                      maker's mark keychain

                                                                                                                                                                      +                                                                                                                                                                       +

                                                                                                                                                                      vertical bifold

                                                                                                                                                                      • leather
                                                                                                                                                                      - A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it. + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
                                                                                                                                                                    2. - -

                                                                                                                                                                      leaf patches

                                                                                                                                                                      +                                                                                                                                                                       +

                                                                                                                                                                      mousie

                                                                                                                                                                      • leather
                                                                                                                                                                      - Several oak-leaf-shaped leather patches with stitching holes punched around the edges. + A cat in a sunbeam snuggles a little leather mouse-shaped cat toy.
                                                                                                                                                                    3. - -

                                                                                                                                                                      leatherworking favorites

                                                                                                                                                                      +                                                                                                                                                                       +

                                                                                                                                                                      eight pocket bifold

                                                                                                                                                                      • leather
                                                                                                                                                                      - two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black. + 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.
                                                                                                                                                                      4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/leather-long-stitch-journals/index.html b/_site/leather-long-stitch-journals/index.html index c82cc0d2..1f2f42f0 100644 --- a/_site/leather-long-stitch-journals/index.html +++ b/_site/leather-long-stitch-journals/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                      leather long-stitch journals

                                                                                                                                                                      @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + + + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.

                                                                                                                                                                      Variety of leather-bound journals. See the shop listing for paper and size details.

                                                                                                                                                                      @@ -1486,43 +1597,43 @@ export { HeadingAnchors }
                                                                                                                                                                      1. - -

                                                                                                                                                                        vertical bifold

                                                                                                                                                                        +                                                                                                                                                                         +

                                                                                                                                                                        x-acto knife sheath

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

                                                                                                                                                                        double bill pocket bifold

                                                                                                                                                                        +                                                                                                                                                                         +

                                                                                                                                                                        leather keychains

                                                                                                                                                                        • leather
                                                                                                                                                                        - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + 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'.
                                                                                                                                                                      3. - -

                                                                                                                                                                        mom bag

                                                                                                                                                                        +                                                                                                                                                                         +

                                                                                                                                                                        brooke's suspenders

                                                                                                                                                                        • leather
                                                                                                                                                                        - A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + 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.
                                                                                                                                                                        4. @@ -1558,6 +1669,6 @@ export { HeadingAnchors } - + diff --git a/_site/leather-strap-journal/index.html b/_site/leather-strap-journal/index.html index 13acb318..0772401e 100644 --- a/_site/leather-strap-journal/index.html +++ b/_site/leather-strap-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                        leather strap journal

                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A 3-part collage showing a blue journal with leather straps woven into the covers. + + + A 3-part collage showing a blue journal with leather straps woven into the covers. + + A 3-part collage showing a blue journal with leather straps woven into the covers.

                                                                                                                                                                        The pages are sewn onto leather straps which are then woven into the cover.

                                                                                                                                                                        @@ -1491,45 +1602,43 @@ export { HeadingAnchors }
                                                                                                                                                                        1. - -

                                                                                                                                                                          flocked notebook

                                                                                                                                                                          +                                                                                                                                                                           +

                                                                                                                                                                          baseball journal

                                                                                                                                                                          • book
                                                                                                                                                                          - A two panel collage showing the cover and endpapers of a thick notebook. + A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
                                                                                                                                                                        2. - -

                                                                                                                                                                          stampede journal

                                                                                                                                                                          +                                                                                                                                                                           +

                                                                                                                                                                          Acadia coloring journal

                                                                                                                                                                          • book
                                                                                                                                                                          - A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.
                                                                                                                                                                        3. - -

                                                                                                                                                                          leather long-stitch journals

                                                                                                                                                                          +                                                                                                                                                                           +

                                                                                                                                                                          square watercolor pad

                                                                                                                                                                            -
                                                                                                                                                                          • leather
                                                                                                                                                                            • -
                                                                                                                                                                          • book
                                                                                                                                                                          - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + A two panel collage showing a square book with a tan cover and blue and gold endpapers.
                                                                                                                                                                          4. @@ -1565,6 +1674,6 @@ export { HeadingAnchors } - + diff --git a/_site/leatherworking-favorites/index.html b/_site/leatherworking-favorites/index.html index 622a2387..8b358669 100644 --- a/_site/leatherworking-favorites/index.html +++ b/_site/leatherworking-favorites/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                          leatherworking favorites

                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black. + + + two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black. + + two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black.

                                                                                                                                                                          practices

                                                                                                                                                                          @@ -1609,43 +1720,43 @@ export { HeadingAnchors }
                                                                                                                                                                          1. - -

                                                                                                                                                                            brooke's collar

                                                                                                                                                                            +                                                                                                                                                                             +

                                                                                                                                                                            swoop wallet

                                                                                                                                                                            • leather
                                                                                                                                                                            - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + 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.
                                                                                                                                                                          2. - -

                                                                                                                                                                            nine pocket bifold

                                                                                                                                                                            +                                                                                                                                                                             +

                                                                                                                                                                            leaf patches

                                                                                                                                                                            • leather
                                                                                                                                                                            - 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. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                                                                                                                          3. - -

                                                                                                                                                                            lobstah

                                                                                                                                                                            +                                                                                                                                                                             +

                                                                                                                                                                            sunflower

                                                                                                                                                                            • leather
                                                                                                                                                                            - Two red leather lobster ornaments, about 4-5 in long each. + A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center .
                                                                                                                                                                            4. @@ -1681,6 +1792,6 @@ export { HeadingAnchors } - + diff --git a/_site/light-grey-jacobs-handspun/index.html b/_site/light-grey-jacobs-handspun/index.html index 8c1bbe74..56b9971d 100644 --- a/_site/light-grey-jacobs-handspun/index.html +++ b/_site/light-grey-jacobs-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                            light grey jacobs handspun

                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - a skein of light grey handspun yarn + + + a skein of light grey handspun yarn + + a skein of light grey handspun yarn

                                                                                                                                                                            Fiber: Jacobs (light grey) from Skagit Woolen Works

                                                                                                                                                                            @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                            1. - -

                                                                                                                                                                              ruby the alpaca handspun

                                                                                                                                                                              +                                                                                                                                                                               +

                                                                                                                                                                              handspun yarn in party mix and orange-gold

                                                                                                                                                                              • yarn
                                                                                                                                                                              - one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
                                                                                                                                                                            2. - -

                                                                                                                                                                              rambouillet handspun

                                                                                                                                                                              +                                                                                                                                                                               +

                                                                                                                                                                              dyeing fiber

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

                                                                                                                                                                              hand-dyed gold handspun

                                                                                                                                                                              +                                                                                                                                                                               +

                                                                                                                                                                              spinner's dream handspun

                                                                                                                                                                              • yarn
                                                                                                                                                                              - 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + a skein of a lightly variegated grey yarn in about a sport or DK weight.
                                                                                                                                                                              4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/lined-notebook/index.html b/_site/lined-notebook/index.html index ac6bd19d..ec5e2870 100644 --- a/_site/lined-notebook/index.html +++ b/_site/lined-notebook/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                              lined notebook

                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. + + + A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. + + A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook.

                                                                                                                                                                              A hardcover book with lined pages.

                                                                                                                                                                              @@ -1494,43 +1605,45 @@ export { HeadingAnchors }
                                                                                                                                                                              1. - -

                                                                                                                                                                                Acadia coloring journal

                                                                                                                                                                                +                                                                                                                                                                                 +

                                                                                                                                                                                tiny books

                                                                                                                                                                                • book
                                                                                                                                                                                - A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + A three panel collage showing a book held in the palm of a hand.
                                                                                                                                                                              2. - -

                                                                                                                                                                                blue and brown leather journal

                                                                                                                                                                                +                                                                                                                                                                                 +

                                                                                                                                                                                green memo pad

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

                                                                                                                                                                                leather strap journal

                                                                                                                                                                                +                                                                                                                                                                                 +

                                                                                                                                                                                leather long-stitch journals

                                                                                                                                                                                  +
                                                                                                                                                                                • leather
                                                                                                                                                                                  • +
                                                                                                                                                                                • book
                                                                                                                                                                                - A 3-part collage showing a blue journal with leather straps woven into the covers. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                4. @@ -1566,6 +1679,6 @@ export { HeadingAnchors } - + diff --git a/_site/little-critter-pouch/index.html b/_site/little-critter-pouch/index.html index 710f1f7e..b993807a 100644 --- a/_site/little-critter-pouch/index.html +++ b/_site/little-critter-pouch/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                little critter pouch

                                                                                                                                                                                @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. + + + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. + + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.

                                                                                                                                                                                he's just a lil guy

                                                                                                                                                                                @@ -1486,43 +1597,45 @@ export { HeadingAnchors }
                                                                                                                                                                                1. - -

                                                                                                                                                                                  snap pouch

                                                                                                                                                                                  +                                                                                                                                                                                   +

                                                                                                                                                                                  vertical bifold

                                                                                                                                                                                  • leather
                                                                                                                                                                                  - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
                                                                                                                                                                                2. - -

                                                                                                                                                                                  sunflower

                                                                                                                                                                                  +                                                                                                                                                                                   +

                                                                                                                                                                                  o-ring bracelet

                                                                                                                                                                                  • leather
                                                                                                                                                                                  - A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps.
                                                                                                                                                                                3. - -

                                                                                                                                                                                  recommendations & favorites

                                                                                                                                                                                  +                                                                                                                                                                                   +

                                                                                                                                                                                  tooled leather patches

                                                                                                                                                                                    -
                                                                                                                                                                                  • highlight
                                                                                                                                                                                    • +
                                                                                                                                                                                  • leather
                                                                                                                                                                                    • + +
                                                                                                                                                                                  • gender
                                                                                                                                                                                  - Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible. + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                                                                                                                                  4. @@ -1558,6 +1671,6 @@ export { HeadingAnchors } - + diff --git a/_site/lobstah/index.html b/_site/lobstah/index.html index 2cde4491..96980633 100644 --- a/_site/lobstah/index.html +++ b/_site/lobstah/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                  lobstah

                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Two red leather lobster ornaments, about 4-5 in long each. + + + Two red leather lobster ornaments, about 4-5 in long each. + + Two red leather lobster ornaments, about 4-5 in long each.

                                                                                                                                                                                  From a pattern by Buckleguy.

                                                                                                                                                                                  @@ -1481,43 +1592,45 @@ export { HeadingAnchors }
                                                                                                                                                                                  1. - -

                                                                                                                                                                                    shrimp cat toy

                                                                                                                                                                                    +                                                                                                                                                                                     +

                                                                                                                                                                                    tooled leather patches

                                                                                                                                                                                    • leather
                                                                                                                                                                                      • +
                                                                                                                                                                                    • gender
                                                                                                                                                                                      • +
                                                                                                                                                                                    - Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                                                                                                                                  2. - -

                                                                                                                                                                                    long zipper bifold

                                                                                                                                                                                    +                                                                                                                                                                                     +

                                                                                                                                                                                    nine pocket bifold

                                                                                                                                                                                    • leather
                                                                                                                                                                                    - A collage showing an orange leather wallet with a long zipper running the length of the outside. + 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.
                                                                                                                                                                                  3. - -

                                                                                                                                                                                    vertical bifold

                                                                                                                                                                                    +                                                                                                                                                                                     +

                                                                                                                                                                                    gradient purse strap

                                                                                                                                                                                    • leather
                                                                                                                                                                                    - A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket. + 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.
                                                                                                                                                                                    4. @@ -1553,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/long-zipper-bifold/index.html b/_site/long-zipper-bifold/index.html index ad3b0dc1..b27ec1c2 100644 --- a/_site/long-zipper-bifold/index.html +++ b/_site/long-zipper-bifold/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                    long zipper bifold

                                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A collage showing an orange leather wallet with a long zipper running the length of the outside. + + + A collage showing an orange leather wallet with a long zipper running the length of the outside. + + A collage showing an orange leather wallet with a long zipper running the length of the outside.

                                                                                                                                                                                    Full grain leather, handstitched. Great fidget.

                                                                                                                                                                                    @@ -1481,43 +1592,45 @@ export { HeadingAnchors }
                                                                                                                                                                                    1. - -

                                                                                                                                                                                      leaf patches

                                                                                                                                                                                      +                                                                                                                                                                                       +

                                                                                                                                                                                      vertical card wallet

                                                                                                                                                                                      • leather
                                                                                                                                                                                      - Several oak-leaf-shaped leather patches with stitching holes punched around the edges. + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
                                                                                                                                                                                    2. - -

                                                                                                                                                                                      rachel's bracelets

                                                                                                                                                                                      +                                                                                                                                                                                       +

                                                                                                                                                                                      circle bag

                                                                                                                                                                                      • leather
                                                                                                                                                                                      - Two pink leather bracelets with stainless steel hardware and aqua stitching. + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.
                                                                                                                                                                                    3. - -

                                                                                                                                                                                      snap pouch

                                                                                                                                                                                      +                                                                                                                                                                                       +

                                                                                                                                                                                      leather long-stitch journals

                                                                                                                                                                                      • leather
                                                                                                                                                                                        • +
                                                                                                                                                                                      • book
                                                                                                                                                                                        • +
                                                                                                                                                                                      - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                      4. @@ -1553,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/loon/index.html b/_site/loon/index.html index 5339ae8c..ac761e24 100644 --- a/_site/loon/index.html +++ b/_site/loon/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                      loon

                                                                                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A print of a loon rearing up with wings spread + + + A print of a loon rearing up with wings spread + + A print of a loon rearing up with wings spread @@ -1479,38 +1590,6 @@ export { HeadingAnchors }
                                                                                                                                                                                        -
                                                                                                                                                                                      1. - -

                                                                                                                                                                                        crow

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

                                                                                                                                                                                        swallowtail on snowdrops

                                                                                                                                                                                        - -
                                                                                                                                                                                          - -
                                                                                                                                                                                        • print
                                                                                                                                                                                          • - -
                                                                                                                                                                                        • card
                                                                                                                                                                                          • - -
                                                                                                                                                                                        • shirt
                                                                                                                                                                                          • - -
                                                                                                                                                                                        - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. - -                                                                                                                                                                                         -
                                                                                                                                                                                        3. -

                                                                                                                                                                                      3. squarsh

                                                                                                                                                                                        @@ -1525,6 +1604,42 @@ export { HeadingAnchors }
                                                                                                                                                                                        4. +
                                                                                                                                                                                      4. + +

                                                                                                                                                                                        trans the world

                                                                                                                                                                                        + +
                                                                                                                                                                                          + +
                                                                                                                                                                                        • print
                                                                                                                                                                                          • + +
                                                                                                                                                                                        • shirt
                                                                                                                                                                                          • + +
                                                                                                                                                                                        • gender
                                                                                                                                                                                          • + +
                                                                                                                                                                                        + 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. + +                                                                                                                                                                                         +
                                                                                                                                                                                        5. + +
                                                                                                                                                                                      5. + +

                                                                                                                                                                                        happy biHRTday

                                                                                                                                                                                        + +
                                                                                                                                                                                          + +
                                                                                                                                                                                        • print
                                                                                                                                                                                          • + +
                                                                                                                                                                                        • card
                                                                                                                                                                                          • + +
                                                                                                                                                                                        • gender
                                                                                                                                                                                          • + +
                                                                                                                                                                                        + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + +                                                                                                                                                                                         +
                                                                                                                                                                                        6. +
                                                                                                                                                                                      @@ -1556,6 +1671,6 @@ export { HeadingAnchors } - + diff --git a/_site/luminescent/index.html b/_site/luminescent/index.html index aa24ac88..03366b1d 100644 --- a/_site/luminescent/index.html +++ b/_site/luminescent/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                      luminescent

                                                                                                                                                                                      @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A print of a tattooed woman in bright highlighter yellow underwear. + + + A print of a tattooed woman in bright highlighter yellow underwear. + + A print of a tattooed woman in bright highlighter yellow underwear.

                                                                                                                                                                                      a reduction print. total print run of 8 test prints and 18 final prints.

                                                                                                                                                                                      @@ -1486,49 +1597,53 @@ export { HeadingAnchors }
                                                                                                                                                                                      1. - -

                                                                                                                                                                                        tiny mushrooms

                                                                                                                                                                                        +                                                                                                                                                                                         +

                                                                                                                                                                                        pride dice bags

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

                                                                                                                                                                                        iris

                                                                                                                                                                                        +                                                                                                                                                                                         +

                                                                                                                                                                                        kestrel zine

                                                                                                                                                                                        • print
                                                                                                                                                                                          • -
                                                                                                                                                                                        • card
                                                                                                                                                                                          • +
                                                                                                                                                                                        • zine
                                                                                                                                                                                          • + +
                                                                                                                                                                                        • highlight
                                                                                                                                                                                        - 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + 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.
                                                                                                                                                                                      3. - -

                                                                                                                                                                                        swallowtail on snowdrops

                                                                                                                                                                                        +                                                                                                                                                                                         +

                                                                                                                                                                                        gender in data models

                                                                                                                                                                                          -
                                                                                                                                                                                        • print
                                                                                                                                                                                          • +
                                                                                                                                                                                        • gender
                                                                                                                                                                                          • -
                                                                                                                                                                                        • card
                                                                                                                                                                                          • +
                                                                                                                                                                                        • software
                                                                                                                                                                                          • -
                                                                                                                                                                                        • shirt
                                                                                                                                                                                          • +
                                                                                                                                                                                        • highlight
                                                                                                                                                                                        - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + Image unrelated to post. A light pink peony in full bloom, close up.
                                                                                                                                                                                        4. @@ -1564,6 +1679,6 @@ export { HeadingAnchors } - + diff --git a/_site/lupine/index.html b/_site/lupine/index.html index d6a6236d..ab5bc122 100644 --- a/_site/lupine/index.html +++ b/_site/lupine/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                        lupine

                                                                                                                                                                                        @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                        Hand carved stamp based on a photo of lupines.

                                                                                                                                                                                        @@ -1498,40 +1609,22 @@ export { HeadingAnchors }
                                                                                                                                                                                        1. - -

                                                                                                                                                                                          geese/trans wrongs

                                                                                                                                                                                          - -
                                                                                                                                                                                            - -
                                                                                                                                                                                          • print
                                                                                                                                                                                            • - -
                                                                                                                                                                                          • shirt
                                                                                                                                                                                            • - -
                                                                                                                                                                                          • gender
                                                                                                                                                                                            • - -
                                                                                                                                                                                          - 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!' - -                                                                                                                                                                                           -
                                                                                                                                                                                          2. - -
                                                                                                                                                                                        2. - -

                                                                                                                                                                                          fix your hearts

                                                                                                                                                                                          +                                                                                                                                                                                           +

                                                                                                                                                                                          kniphofia

                                                                                                                                                                                          • print
                                                                                                                                                                                          - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + A print of a brightly colored flower in 4 layers of color
                                                                                                                                                                                        3. - -

                                                                                                                                                                                          killdeer

                                                                                                                                                                                          +                                                                                                                                                                                           +

                                                                                                                                                                                          happy biHRTday

                                                                                                                                                                                            @@ -1539,8 +1632,32 @@ export { HeadingAnchors }
                                                                                                                                                                                          • card
                                                                                                                                                                                            • +
                                                                                                                                                                                          • gender
                                                                                                                                                                                            • +
                                                                                                                                                                                          - A print of a killdeer in black ink. + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + +                                                                                                                                                                                           +
                                                                                                                                                                                          4. + +
                                                                                                                                                                                        4. + +

                                                                                                                                                                                          trans rights skull

                                                                                                                                                                                          + +
                                                                                                                                                                                            + +
                                                                                                                                                                                          • print
                                                                                                                                                                                            • + +
                                                                                                                                                                                          • card
                                                                                                                                                                                            • + +
                                                                                                                                                                                          • sticker
                                                                                                                                                                                            • + +
                                                                                                                                                                                          • pin
                                                                                                                                                                                            • + +
                                                                                                                                                                                          • gender
                                                                                                                                                                                            • + +
                                                                                                                                                                                          + A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
                                                                                                                                                                                          5. @@ -1576,6 +1693,6 @@ export { HeadingAnchors } - + diff --git a/_site/makers-mark-keychain/index.html b/_site/makers-mark-keychain/index.html index 823f5dc8..adec58ee 100644 --- a/_site/makers-mark-keychain/index.html +++ b/_site/makers-mark-keychain/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                          maker's mark keychain

                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it. + + + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it. + + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it.

                                                                                                                                                                                          i have a lil maker's mark stamp now!

                                                                                                                                                                                          @@ -1481,45 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                          1. - -

                                                                                                                                                                                            leather lighter case

                                                                                                                                                                                            +                                                                                                                                                                                             +

                                                                                                                                                                                            vertical zipper card wallet

                                                                                                                                                                                            • leather
                                                                                                                                                                                            - A bic lighter wrapped in leather and hand-stitched up one side. + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
                                                                                                                                                                                          2. - -

                                                                                                                                                                                            leather long-stitch journals

                                                                                                                                                                                            +                                                                                                                                                                                             +

                                                                                                                                                                                            wrap bracelets

                                                                                                                                                                                            • leather
                                                                                                                                                                                              • -
                                                                                                                                                                                            • book
                                                                                                                                                                                              • -
                                                                                                                                                                                            - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + 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.
                                                                                                                                                                                          3. - -

                                                                                                                                                                                            swoop wallet

                                                                                                                                                                                            +                                                                                                                                                                                             +

                                                                                                                                                                                            sunflower

                                                                                                                                                                                            • leather
                                                                                                                                                                                            - 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. + A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center .
                                                                                                                                                                                            4. @@ -1555,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/mom-bag/index.html b/_site/mom-bag/index.html index 7518b1e7..67f1d9dd 100644 --- a/_site/mom-bag/index.html +++ b/_site/mom-bag/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                            mom bag

                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + + + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp.

                                                                                                                                                                                            Designed for my mum.

                                                                                                                                                                                            @@ -1480,6 +1591,34 @@ export { HeadingAnchors }
                                                                                                                                                                                              +
                                                                                                                                                                                            1. + +

                                                                                                                                                                                              double bill pocket bifold

                                                                                                                                                                                              + +
                                                                                                                                                                                                + +
                                                                                                                                                                                              • leather
                                                                                                                                                                                                • + +
                                                                                                                                                                                              + A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + +                                                                                                                                                                                               +
                                                                                                                                                                                              2. + +
                                                                                                                                                                                            2. + +

                                                                                                                                                                                              wrap bracelets

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

                                                                                                                                                                                            3. leather keychains

                                                                                                                                                                                              @@ -1494,34 +1633,6 @@ export { HeadingAnchors }
                                                                                                                                                                                              4. -
                                                                                                                                                                                            4. - -

                                                                                                                                                                                              nine pocket bifold

                                                                                                                                                                                              - -
                                                                                                                                                                                                - -
                                                                                                                                                                                              • leather
                                                                                                                                                                                                • - -
                                                                                                                                                                                              - 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. - -                                                                                                                                                                                               -
                                                                                                                                                                                              5. - -
                                                                                                                                                                                            5. - -

                                                                                                                                                                                              swoop wallet

                                                                                                                                                                                              - -
                                                                                                                                                                                                - -
                                                                                                                                                                                              • leather
                                                                                                                                                                                                • - -
                                                                                                                                                                                              - 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. - -                                                                                                                                                                                               -
                                                                                                                                                                                              6. -
                                                                                                                                                                                            @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/moss-harness/index.html b/_site/moss-harness/index.html index d4cc9ed4..62ac6b90 100644 --- a/_site/moss-harness/index.html +++ b/_site/moss-harness/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                            moss harness

                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A nylon webbing harness in bright teal laid out on a desk. + + + A nylon webbing harness in bright teal laid out on a desk. + + A nylon webbing harness in bright teal laid out on a desk.

                                                                                                                                                                                            bulldog harness with matte nickel fittings

                                                                                                                                                                                            @@ -1482,45 +1593,43 @@ export { HeadingAnchors }
                                                                                                                                                                                            1. - -

                                                                                                                                                                                              tooled leather patches

                                                                                                                                                                                              +                                                                                                                                                                                               +

                                                                                                                                                                                              vertical card wallet

                                                                                                                                                                                              • leather
                                                                                                                                                                                                • -
                                                                                                                                                                                              • gender
                                                                                                                                                                                                • -
                                                                                                                                                                                              - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
                                                                                                                                                                                            2. - -

                                                                                                                                                                                              long zipper bifold

                                                                                                                                                                                              +                                                                                                                                                                                               +

                                                                                                                                                                                              leather chest harness

                                                                                                                                                                                              • leather
                                                                                                                                                                                              - A collage showing an orange leather wallet with a long zipper running the length of the outside. + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
                                                                                                                                                                                            3. - -

                                                                                                                                                                                              gradient purse strap

                                                                                                                                                                                              +                                                                                                                                                                                               +

                                                                                                                                                                                              zipper bifold

                                                                                                                                                                                              • leather
                                                                                                                                                                                              - 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. + A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
                                                                                                                                                                                              4. @@ -1556,6 +1665,6 @@ export { HeadingAnchors } - + diff --git a/_site/mousie/index.html b/_site/mousie/index.html index c0cad1e9..c1af558a 100644 --- a/_site/mousie/index.html +++ b/_site/mousie/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                              mousie

                                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. + + + A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. + + A cat in a sunbeam snuggles a little leather mouse-shaped cat toy.

                                                                                                                                                                                              Filled with catnip and polyfill.

                                                                                                                                                                                              @@ -1481,8 +1592,8 @@ export { HeadingAnchors }
                                                                                                                                                                                              1. - -

                                                                                                                                                                                                dragon mask

                                                                                                                                                                                                +                                                                                                                                                                                                 +

                                                                                                                                                                                                little critter pouch

                                                                                                                                                                                                  @@ -1491,37 +1602,37 @@ export { HeadingAnchors }
                                                                                                                                                                                                • highlight
                                                                                                                                                                                                - 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. + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
                                                                                                                                                                                              2. - -

                                                                                                                                                                                                leaf patches

                                                                                                                                                                                                +                                                                                                                                                                                                 +

                                                                                                                                                                                                fishhook pride keychains

                                                                                                                                                                                                + +
                                                                                                                                                                                                  + +
                                                                                                                                                                                                • leather
                                                                                                                                                                                                  • + +
                                                                                                                                                                                                • gender
                                                                                                                                                                                                  • + +
                                                                                                                                                                                                + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + +                                                                                                                                                                                                 +
                                                                                                                                                                                                3. + +
                                                                                                                                                                                              3. + +

                                                                                                                                                                                                leather lighter case

                                                                                                                                                                                                • leather
                                                                                                                                                                                                - Several oak-leaf-shaped leather patches with stitching holes punched around the edges. - -                                                                                                                                                                                                 -
                                                                                                                                                                                                4. - -
                                                                                                                                                                                              4. - -

                                                                                                                                                                                                designing a bag

                                                                                                                                                                                                - -
                                                                                                                                                                                                  - -
                                                                                                                                                                                                • leather
                                                                                                                                                                                                  • - -
                                                                                                                                                                                                • software
                                                                                                                                                                                                  • - -
                                                                                                                                                                                                - 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. + A bic lighter wrapped in leather and hand-stitched up one side.
                                                                                                                                                                                                5. @@ -1557,6 +1668,6 @@ export { HeadingAnchors } - + diff --git a/_site/moving-images/index.html b/_site/moving-images/index.html index b3a52f40..f73457a6 100644 --- a/_site/moving-images/index.html +++ b/_site/moving-images/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                moving images

                                                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                problem statement

                                                                                                                                                                                                @@ -1552,34 +1663,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                  -
                                                                                                                                                                                                1. - -

                                                                                                                                                                                                  domain and site setup

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

                                                                                                                                                                                                  an intro to git

                                                                                                                                                                                                  - -
                                                                                                                                                                                                    - -
                                                                                                                                                                                                  • software
                                                                                                                                                                                                    • - -
                                                                                                                                                                                                  - Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. - -                                                                                                                                                                                                   -
                                                                                                                                                                                                  3. -

                                                                                                                                                                                                3. redirections

                                                                                                                                                                                                  @@ -1594,6 +1677,40 @@ export { HeadingAnchors }
                                                                                                                                                                                                  4. +
                                                                                                                                                                                                4. + +

                                                                                                                                                                                                  gender in data models

                                                                                                                                                                                                  + +
                                                                                                                                                                                                    + +
                                                                                                                                                                                                  • gender
                                                                                                                                                                                                    • + +
                                                                                                                                                                                                  • software
                                                                                                                                                                                                    • + +
                                                                                                                                                                                                  • highlight
                                                                                                                                                                                                    • + +
                                                                                                                                                                                                  + Image unrelated to post. A light pink peony in full bloom, close up. + +                                                                                                                                                                                                   +
                                                                                                                                                                                                  5. + +
                                                                                                                                                                                                5. + +

                                                                                                                                                                                                  designing a bag

                                                                                                                                                                                                  + +
                                                                                                                                                                                                    + +
                                                                                                                                                                                                  • leather
                                                                                                                                                                                                    • + +
                                                                                                                                                                                                  • software
                                                                                                                                                                                                    • + +
                                                                                                                                                                                                  + 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. + +                                                                                                                                                                                                   +
                                                                                                                                                                                                  6. +
                                                                                                                                                                                                @@ -1625,6 +1742,6 @@ export { HeadingAnchors } - + diff --git a/_site/my-favorite-git-flag/index.html b/_site/my-favorite-git-flag/index.html index 8e16ad13..2fd6edc4 100644 --- a/_site/my-favorite-git-flag/index.html +++ b/_site/my-favorite-git-flag/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                my favorite git flag

                                                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk. + + + Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk. + + Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk.

                                                                                                                                                                                                do you have a favorite git flag? I do. let's talk about git add -p.

                                                                                                                                                                                                @@ -1504,47 +1615,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                1. - -

                                                                                                                                                                                                  azure locations and file crawling

                                                                                                                                                                                                  +                                                                                                                                                                                                   +

                                                                                                                                                                                                  domain and site setup

                                                                                                                                                                                                  • software
                                                                                                                                                                                                    • -
                                                                                                                                                                                                  • highlight
                                                                                                                                                                                                    • -
                                                                                                                                                                                                  - A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy. + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass.
                                                                                                                                                                                                2. - -

                                                                                                                                                                                                  accessible image modals

                                                                                                                                                                                                  +                                                                                                                                                                                                   +

                                                                                                                                                                                                  handedness toggle

                                                                                                                                                                                                  • software
                                                                                                                                                                                                  - Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth. + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.
                                                                                                                                                                                                3. - -

                                                                                                                                                                                                  designing a bag

                                                                                                                                                                                                  +                                                                                                                                                                                                   +

                                                                                                                                                                                                  redirections

                                                                                                                                                                                                    -
                                                                                                                                                                                                  • leather
                                                                                                                                                                                                    • -
                                                                                                                                                                                                  • software
                                                                                                                                                                                                  - 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. + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets.
                                                                                                                                                                                                  4. @@ -1580,6 +1687,6 @@ export { HeadingAnchors } - + diff --git a/_site/networks-of-trans-care/index.html b/_site/networks-of-trans-care/index.html index 3d89d906..ae2435ff 100644 --- a/_site/networks-of-trans-care/index.html +++ b/_site/networks-of-trans-care/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                  networks of trans care

                                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk. + + + Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk. + + Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk.

                                                                                                                                                                                                  These are collated USA-based resources I have found while seeking out trans surgical care networks.

                                                                                                                                                                                                  @@ -1496,38 +1607,40 @@ export { HeadingAnchors }
                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                    pride dice bags

                                                                                                                                                                                                    +                                                                                                                                                                                                     +

                                                                                                                                                                                                    rope (one) (mature)

                                                                                                                                                                                                      -
                                                                                                                                                                                                    • knit
                                                                                                                                                                                                      • +
                                                                                                                                                                                                    • print
                                                                                                                                                                                                    • gender
                                                                                                                                                                                                    - 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. + A print of a nude trans woman in an asymmetrical rope harness.
                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                    on the ubiquity of 'enby'

                                                                                                                                                                                                    +                                                                                                                                                                                                     +

                                                                                                                                                                                                    proud dad wallet

                                                                                                                                                                                                      +
                                                                                                                                                                                                    • leather
                                                                                                                                                                                                      • +
                                                                                                                                                                                                    • gender
                                                                                                                                                                                                    - A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report' + A brown leather wallet with a subtle trans flag stitching across the top.
                                                                                                                                                                                                  3. - -

                                                                                                                                                                                                    coming out

                                                                                                                                                                                                    +                                                                                                                                                                                                     +

                                                                                                                                                                                                    trans rights skull

                                                                                                                                                                                                      @@ -1535,10 +1648,14 @@ export { HeadingAnchors }
                                                                                                                                                                                                    • card
                                                                                                                                                                                                      • +
                                                                                                                                                                                                    • sticker
                                                                                                                                                                                                      • + +
                                                                                                                                                                                                    • pin
                                                                                                                                                                                                      • +
                                                                                                                                                                                                    • gender
                                                                                                                                                                                                    - 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' + A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
                                                                                                                                                                                                    4. @@ -1574,6 +1691,6 @@ export { HeadingAnchors } - + diff --git a/_site/nine-pocket-bifold/index.html b/_site/nine-pocket-bifold/index.html index d461284d..30c98f04 100644 --- a/_site/nine-pocket-bifold/index.html +++ b/_site/nine-pocket-bifold/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                    nine pocket bifold

                                                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                    my first wallet design. made of a variety of discount leather with various imperfections. fully hand-stitched.

                                                                                                                                                                                                    @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                      zipper bifold (green)

                                                                                                                                                                                                      +                                                                                                                                                                                                       +

                                                                                                                                                                                                      bowtie

                                                                                                                                                                                                      • leather
                                                                                                                                                                                                      - A collage showing a green leather wallet with a zippered pocket built into one external side. + A black leather bow tie with black stitching.
                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                      leather chest harness

                                                                                                                                                                                                      +                                                                                                                                                                                                       +

                                                                                                                                                                                                      x-acto knife sheath

                                                                                                                                                                                                      • leather
                                                                                                                                                                                                      - Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + 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.
                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                      circle bag

                                                                                                                                                                                                      +                                                                                                                                                                                                       +

                                                                                                                                                                                                      swoop wallet

                                                                                                                                                                                                      • leather
                                                                                                                                                                                                      - A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + 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.
                                                                                                                                                                                                      4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/no-politics-wip/index.html b/_site/no-politics-wip/index.html index af856cf6..4380dc93 100644 --- a/_site/no-politics-wip/index.html +++ b/_site/no-politics-wip/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                      no politics (wip)

                                                                                                                                                                                                      @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - Picture unrelated to post. A small orange mushroom grows from the center of a fence post. + + + Picture unrelated to post. A small orange mushroom grows from the center of a fence post. + + Picture unrelated to post. A small orange mushroom grows from the center of a fence post.

                                                                                                                                                                                                      This piece is unfinished and is presented in only partial form.

                                                                                                                                                                                                      @@ -1543,6 +1654,6 @@ export { HeadingAnchors } - + diff --git a/_site/nonbinary-flag/index.html b/_site/nonbinary-flag/index.html index ba72ab87..15ea00e6 100644 --- a/_site/nonbinary-flag/index.html +++ b/_site/nonbinary-flag/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                      nonbinary flag

                                                                                                                                                                                                      @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + + + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.

                                                                                                                                                                                                      Happy pride!

                                                                                                                                                                                                      @@ -1498,45 +1609,49 @@ export { HeadingAnchors }
                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                        gender as a proxy variable

                                                                                                                                                                                                        +                                                                                                                                                                                                         +

                                                                                                                                                                                                        fishhook pride keychains

                                                                                                                                                                                                          +
                                                                                                                                                                                                        • leather
                                                                                                                                                                                                          • +
                                                                                                                                                                                                        • gender
                                                                                                                                                                                                          • -
                                                                                                                                                                                                        • zine
                                                                                                                                                                                                          • -
                                                                                                                                                                                                        - 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. + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
                                                                                                                                                                                                      2. - -

                                                                                                                                                                                                        in the news

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

                                                                                                                                                                                                        crow

                                                                                                                                                                                                        +                                                                                                                                                                                                         +

                                                                                                                                                                                                        five of them

                                                                                                                                                                                                        • print
                                                                                                                                                                                                          • +
                                                                                                                                                                                                        • shirt
                                                                                                                                                                                                          • +
                                                                                                                                                                                                        - 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. + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + +                                                                                                                                                                                                         +
                                                                                                                                                                                                        4. + +
                                                                                                                                                                                                      4. + +

                                                                                                                                                                                                        luminescent (mature)

                                                                                                                                                                                                        + +
                                                                                                                                                                                                          + +
                                                                                                                                                                                                        • print
                                                                                                                                                                                                          • + +
                                                                                                                                                                                                        • gender
                                                                                                                                                                                                          • + +
                                                                                                                                                                                                        + A print of a tattooed woman in bright highlighter yellow underwear.
                                                                                                                                                                                                        5. @@ -1572,6 +1687,6 @@ export { HeadingAnchors } - + diff --git a/_site/not-a-drill/index.html b/_site/not-a-drill/index.html index ea268381..e924d143 100644 --- a/_site/not-a-drill/index.html +++ b/_site/not-a-drill/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                        not a drill

                                                                                                                                                                                                        @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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' + + + 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' + + 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'

                                                                                                                                                                                                        Idea by Cassandra.

                                                                                                                                                                                                        @@ -1486,51 +1597,49 @@ export { HeadingAnchors }
                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                          five of them

                                                                                                                                                                                                          +                                                                                                                                                                                                           +

                                                                                                                                                                                                          become unbutterable

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

                                                                                                                                                                                                          chanterelle

                                                                                                                                                                                                          + +
                                                                                                                                                                                                            + +
                                                                                                                                                                                                          • print
                                                                                                                                                                                                            • + +
                                                                                                                                                                                                          • card
                                                                                                                                                                                                            • + +
                                                                                                                                                                                                          + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + +                                                                                                                                                                                                           +
                                                                                                                                                                                                          3. + +
                                                                                                                                                                                                        3. + +

                                                                                                                                                                                                          fat raccoon

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

                                                                                                                                                                                                          nonbinary flag

                                                                                                                                                                                                          - -
                                                                                                                                                                                                            - -
                                                                                                                                                                                                          • print
                                                                                                                                                                                                            • - -
                                                                                                                                                                                                          • card
                                                                                                                                                                                                            • - -
                                                                                                                                                                                                          • gender
                                                                                                                                                                                                            • - -
                                                                                                                                                                                                          - A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. - -                                                                                                                                                                                                           -
                                                                                                                                                                                                          5. - -
                                                                                                                                                                                                        5. - -

                                                                                                                                                                                                          junco

                                                                                                                                                                                                          - -
                                                                                                                                                                                                            - -
                                                                                                                                                                                                          • print
                                                                                                                                                                                                            • - -
                                                                                                                                                                                                          • card
                                                                                                                                                                                                            • - -
                                                                                                                                                                                                          - A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia. + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
                                                                                                                                                                                                          6. @@ -1566,6 +1675,6 @@ export { HeadingAnchors } - + diff --git a/_site/o-ring-bracelet/index.html b/_site/o-ring-bracelet/index.html index 0b6e49ce..45716e13 100644 --- a/_site/o-ring-bracelet/index.html +++ b/_site/o-ring-bracelet/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                          o-ring bracelet

                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + + + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps.

                                                                                                                                                                                                          Made a few variations of this; check out the shop for more details and options:

                                                                                                                                                                                                          @@ -1486,8 +1597,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                            proud dad wallet

                                                                                                                                                                                                            +                                                                                                                                                                                                             +

                                                                                                                                                                                                            tooled leather patches

                                                                                                                                                                                                              @@ -1496,35 +1607,37 @@ export { HeadingAnchors }
                                                                                                                                                                                                            • gender
                                                                                                                                                                                                            - A brown leather wallet with a subtle trans flag stitching across the top. + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                            wrap bracelets

                                                                                                                                                                                                            +                                                                                                                                                                                                             +

                                                                                                                                                                                                            vertical bifold

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

                                                                                                                                                                                                            brooke's collar

                                                                                                                                                                                                            +                                                                                                                                                                                                             +

                                                                                                                                                                                                            designing a bag

                                                                                                                                                                                                            • leather
                                                                                                                                                                                                              • +
                                                                                                                                                                                                            • software
                                                                                                                                                                                                              • +
                                                                                                                                                                                                            - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + 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.
                                                                                                                                                                                                            4. @@ -1560,6 +1673,6 @@ export { HeadingAnchors } - + diff --git a/_site/on-pronouns/index.html b/_site/on-pronouns/index.html index 45c06932..ce083154 100644 --- a/_site/on-pronouns/index.html +++ b/_site/on-pronouns/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                            on pronouns

                                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder. + + + Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder. + + Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder.

                                                                                                                                                                                                            Created in cooperation with Julia Pinedo.

                                                                                                                                                                                                            @@ -1724,19 +1835,15 @@ export { HeadingAnchors }
                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                              geese/trans wrongs

                                                                                                                                                                                                              +                                                                                                                                                                                                               +

                                                                                                                                                                                                              queer book list

                                                                                                                                                                                                                -
                                                                                                                                                                                                              • print
                                                                                                                                                                                                                • - -
                                                                                                                                                                                                              • shirt
                                                                                                                                                                                                                • -
                                                                                                                                                                                                              • gender
                                                                                                                                                                                                              - 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!' + A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order
                                                                                                                                                                                                              2. @@ -1756,19 +1863,19 @@ export { HeadingAnchors }
                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                              pronoun patches

                                                                                                                                                                                                              +                                                                                                                                                                                                               +

                                                                                                                                                                                                              slightly weird man club

                                                                                                                                                                                                              • print
                                                                                                                                                                                                                • -
                                                                                                                                                                                                              • patch
                                                                                                                                                                                                                • +
                                                                                                                                                                                                              • shirt
                                                                                                                                                                                                              • gender
                                                                                                                                                                                                              - 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. + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
                                                                                                                                                                                                              3. @@ -1804,6 +1911,6 @@ export { HeadingAnchors } - + diff --git a/_site/on-the-shoulders-of-giants/index.html b/_site/on-the-shoulders-of-giants/index.html index df548e1f..d26ee032 100644 --- a/_site/on-the-shoulders-of-giants/index.html +++ b/_site/on-the-shoulders-of-giants/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                              on the shoulders of giants

                                                                                                                                                                                                              @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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 + + + 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 + + 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

                                                                                                                                                                                                              Riso printed!

                                                                                                                                                                                                              @@ -1485,6 +1596,38 @@ export { HeadingAnchors }
                                                                                                                                                                                                                +
                                                                                                                                                                                                              1. + +

                                                                                                                                                                                                                kestrel zine

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

                                                                                                                                                                                                                brooke's socks

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

                                                                                                                                                                                                              3. gender as a proxy variable

                                                                                                                                                                                                                @@ -1501,36 +1644,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                4. -
                                                                                                                                                                                                              4. - -

                                                                                                                                                                                                                pride dice bags

                                                                                                                                                                                                                - -
                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                • knit
                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                - 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. - -                                                                                                                                                                                                                 -
                                                                                                                                                                                                                5. - -
                                                                                                                                                                                                              5. - -

                                                                                                                                                                                                                knit shrimp

                                                                                                                                                                                                                - -
                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                • knit
                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                - Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. - -                                                                                                                                                                                                                 -
                                                                                                                                                                                                                6. -
                                                                                                                                                                                                              @@ -1562,6 +1675,6 @@ export { HeadingAnchors } - + diff --git a/_site/on-the-ubiquity-of-enby/index.html b/_site/on-the-ubiquity-of-enby/index.html index 7aad1f66..ee2a221b 100644 --- a/_site/on-the-ubiquity-of-enby/index.html +++ b/_site/on-the-ubiquity-of-enby/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                              on the ubiquity of 'enby'

                                                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report' + + + A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report' + + A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads 'Gender Census 2023 Worldwide Report'

                                                                                                                                                                                                              (originally posted on fedi)

                                                                                                                                                                                                              @@ -1495,47 +1606,49 @@ export { HeadingAnchors }
                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                gender in data models

                                                                                                                                                                                                                +                                                                                                                                                                                                                 +

                                                                                                                                                                                                                bottom growth (mature)

                                                                                                                                                                                                                  +
                                                                                                                                                                                                                • print
                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                • software
                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                • highlight
                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                - Image unrelated to post. A light pink peony in full bloom, close up. + 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.
                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                in the news

                                                                                                                                                                                                                +                                                                                                                                                                                                                 +

                                                                                                                                                                                                                give to trans orgs and people

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

                                                                                                                                                                                                                fd signifier & oppositional sexism

                                                                                                                                                                                                                +                                                                                                                                                                                                                 +

                                                                                                                                                                                                                happy biHRTday

                                                                                                                                                                                                                  +
                                                                                                                                                                                                                • print
                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                • card
                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                - Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field. + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
                                                                                                                                                                                                                4. @@ -1571,6 +1684,6 @@ export { HeadingAnchors } - + diff --git a/_site/orange-green-journal/index.html b/_site/orange-green-journal/index.html index f4f77b40..c7b3ca6d 100644 --- a/_site/orange-green-journal/index.html +++ b/_site/orange-green-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                orange green journal

                                                                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A 4-part collage of a slim handbound book. + + + A 4-part collage of a slim handbound book. + + A 4-part collage of a slim handbound book.

                                                                                                                                                                                                                details

                                                                                                                                                                                                                @@ -1491,43 +1602,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                  lined notebook

                                                                                                                                                                                                                  +                                                                                                                                                                                                                   +

                                                                                                                                                                                                                  orange journal

                                                                                                                                                                                                                  • book
                                                                                                                                                                                                                  - A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. + A three panel collage showcasing a small book with foldout pages and a bright orange cover.
                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                  Acadia coloring journal

                                                                                                                                                                                                                  +                                                                                                                                                                                                                   +

                                                                                                                                                                                                                  brooke's notebook

                                                                                                                                                                                                                  • book
                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                  • highlight
                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                  - A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                  green memo pad

                                                                                                                                                                                                                  +                                                                                                                                                                                                                   +

                                                                                                                                                                                                                  leather strap journal

                                                                                                                                                                                                                  • book
                                                                                                                                                                                                                  - A three panel collage showcasing a small green memo pad. + A 3-part collage showing a blue journal with leather straps woven into the covers.
                                                                                                                                                                                                                  4. @@ -1563,6 +1676,6 @@ export { HeadingAnchors } - + diff --git a/_site/orange-journal/index.html b/_site/orange-journal/index.html index 628f7dc1..d07980f5 100644 --- a/_site/orange-journal/index.html +++ b/_site/orange-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                  orange journal

                                                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A three panel collage showcasing a small book with foldout pages and a bright orange cover. + + + A three panel collage showcasing a small book with foldout pages and a bright orange cover. + + A three panel collage showcasing a small book with foldout pages and a bright orange cover.

                                                                                                                                                                                                                  A small highlighter-orange journal with blank fold-out pages and floral coloring pages, including flocked pages, from BLOOM by Alli Koch.

                                                                                                                                                                                                                  @@ -1497,29 +1608,29 @@ export { HeadingAnchors }
                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                    baseball journal

                                                                                                                                                                                                                    +                                                                                                                                                                                                                     +

                                                                                                                                                                                                                    stampede journal

                                                                                                                                                                                                                    • book
                                                                                                                                                                                                                    - A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it.
                                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                                    blue and brown leather journal

                                                                                                                                                                                                                    +                                                                                                                                                                                                                     +

                                                                                                                                                                                                                    lined notebook

                                                                                                                                                                                                                    • book
                                                                                                                                                                                                                    - A three panel collage showcasing a blue and brown leather-covered journal. + A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook.
                                                                                                                                                                                                                    3. @@ -1569,6 +1680,6 @@ export { HeadingAnchors } - + diff --git a/_site/orion-handspun/index.html b/_site/orion-handspun/index.html index bb9ef74f..08c7daf7 100644 --- a/_site/orion-handspun/index.html +++ b/_site/orion-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                    orion handspun

                                                                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                    Fiber: Merino/silk 70/30 from Jakira Farms in colorway Orion

                                                                                                                                                                                                                    @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                      spinner's dream handspun

                                                                                                                                                                                                                      +                                                                                                                                                                                                                       +

                                                                                                                                                                                                                      coral reef handspun

                                                                                                                                                                                                                      • yarn
                                                                                                                                                                                                                      - a skein of a lightly variegated grey yarn in about a sport or DK weight. + 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.
                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                      BFL/silk handspun

                                                                                                                                                                                                                      +                                                                                                                                                                                                                       +

                                                                                                                                                                                                                      fire & ice handspun

                                                                                                                                                                                                                      • yarn
                                                                                                                                                                                                                      - a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight.
                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                      petrichor handspun

                                                                                                                                                                                                                      +                                                                                                                                                                                                                       +

                                                                                                                                                                                                                      handspun yarn in party mix and orange-gold

                                                                                                                                                                                                                      • yarn
                                                                                                                                                                                                                      - 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 + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
                                                                                                                                                                                                                      4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/palette/index.html b/_site/palette/index.html index b95b0f18..0e17d74b 100644 --- a/_site/palette/index.html +++ b/_site/palette/index.html @@ -243,7 +243,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1054,6 +1053,6 @@ export { HeadingAnchors } - + diff --git a/_site/patchwork-wallet/index.html b/_site/patchwork-wallet/index.html index b6b27f94..1453b63a 100644 --- a/_site/patchwork-wallet/index.html +++ b/_site/patchwork-wallet/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                      patchwork wallet

                                                                                                                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                      inspired by this YouTube video

                                                                                                                                                                                                                      @@ -1481,43 +1592,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                        vertical card wallet

                                                                                                                                                                                                                        +                                                                                                                                                                                                                         +

                                                                                                                                                                                                                        circle bag

                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                        - A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket. + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.
                                                                                                                                                                                                                      2. - -

                                                                                                                                                                                                                        wrap bracelets

                                                                                                                                                                                                                        +                                                                                                                                                                                                                         +

                                                                                                                                                                                                                        fishhook pride keychains

                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                        • gender
                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                        - 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. + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
                                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                                        swoop wallet

                                                                                                                                                                                                                        +                                                                                                                                                                                                                         +

                                                                                                                                                                                                                        piñatex wallet with zipper

                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                        - 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. + 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.
                                                                                                                                                                                                                        4. @@ -1553,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/petrichor-handspun/index.html b/_site/petrichor-handspun/index.html index e688d626..ddd4091d 100644 --- a/_site/petrichor-handspun/index.html +++ b/_site/petrichor-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                        petrichor handspun

                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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 + + + 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 + + 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

                                                                                                                                                                                                                        Fiber: Malabrigo Nube in colorway petrichor

                                                                                                                                                                                                                        @@ -1481,15 +1592,29 @@ export { HeadingAnchors }
                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                          hand-dyed gold handspun

                                                                                                                                                                                                                          +                                                                                                                                                                                                                           +

                                                                                                                                                                                                                          fire & ice handspun

                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                          - 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + +                                                                                                                                                                                                                           +
                                                                                                                                                                                                                          2. + +
                                                                                                                                                                                                                        2. + +

                                                                                                                                                                                                                          charlie the alpaca handspun

                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                            • + +
                                                                                                                                                                                                                          + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight
                                                                                                                                                                                                                          3. @@ -1508,20 +1633,6 @@ export { HeadingAnchors } -
                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                          spinning plants

                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                            • - -
                                                                                                                                                                                                                          - 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) - -                                                                                                                                                                                                                           -
                                                                                                                                                                                                                          4. -
                                                                                                                                                                                                                        @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/pinatex-wallet-with-zipper/index.html b/_site/pinatex-wallet-with-zipper/index.html index e14d7266..493d5d65 100644 --- a/_site/pinatex-wallet-with-zipper/index.html +++ b/_site/pinatex-wallet-with-zipper/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                        piñatex wallet with zipper

                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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 is a leather alternative made from pineapple leaf waste!

                                                                                                                                                                                                                        @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                          vertical card wallet

                                                                                                                                                                                                                          +                                                                                                                                                                                                                           +

                                                                                                                                                                                                                          zipper bifold (green)

                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                          - A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket. + A collage showing a green leather wallet with a zippered pocket built into one external side.
                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                          foldy wallet

                                                                                                                                                                                                                          +                                                                                                                                                                                                                           +

                                                                                                                                                                                                                          patchwork wallet

                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                          - A four part collage showing a single piece of deep red leather folding up to become a card wallet. + 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.
                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                          foldy wallet with thumb slide

                                                                                                                                                                                                                          +                                                                                                                                                                                                                           +

                                                                                                                                                                                                                          mom bag

                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                          - 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. + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp.
                                                                                                                                                                                                                          4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/pink-socks/index.html b/_site/pink-socks/index.html index 0e4d5055..83628ec4 100644 --- a/_site/pink-socks/index.html +++ b/_site/pink-socks/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                          pink socks

                                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks. + + + Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks. + + Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks.

                                                                                                                                                                                                                          My first pair of socks, knit with Seattle Sky Dyeworks Temporum yarn in colorway Salmon Run.

                                                                                                                                                                                                                          @@ -1481,33 +1592,15 @@ export { HeadingAnchors }
                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                            butch hands pattern

                                                                                                                                                                                                                            +                                                                                                                                                                                                                             +

                                                                                                                                                                                                                            brooke's scarf

                                                                                                                                                                                                                            • knit
                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                            • highlight
                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                            - Hands wearing a pair of pink and grey gloves with convertable mitten tops. - -                                                                                                                                                                                                                             -
                                                                                                                                                                                                                            2. - -
                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                            on the shoulders of giants

                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                            • zine
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • knit
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            - 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 + 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.
                                                                                                                                                                                                                            3. @@ -1528,6 +1621,22 @@ export { HeadingAnchors } +
                                                                                                                                                                                                                          3. + +

                                                                                                                                                                                                                            pride dice bags

                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                            • knit
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            + 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. + +                                                                                                                                                                                                                             +
                                                                                                                                                                                                                            4. +
                                                                                                                                                                                                                          @@ -1559,6 +1668,6 @@ export { HeadingAnchors } - + diff --git a/_site/pins/index.html b/_site/pins/index.html index d833849a..9e86b74f 100644 --- a/_site/pins/index.html +++ b/_site/pins/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                          pins!

                                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Two hard enamel pins in my trans rights and trans wrongs skulls designs. + + + Two hard enamel pins in my trans rights and trans wrongs skulls designs. + + Two hard enamel pins in my trans rights and trans wrongs skulls designs.

                                                                                                                                                                                                                          we got PINS yahoo!

                                                                                                                                                                                                                          @@ -1481,50 +1592,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                            -
                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                            boypussy (mature)

                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • sticker
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • pin
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. - -                                                                                                                                                                                                                             -
                                                                                                                                                                                                                            2. - -
                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                            girldick (mature)

                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • sticker
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • pin
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            - A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. - -                                                                                                                                                                                                                             -
                                                                                                                                                                                                                            3. -

                                                                                                                                                                                                                          3. shrimp

                                                                                                                                                                                                                            @@ -1545,6 +1612,50 @@ export { HeadingAnchors }
                                                                                                                                                                                                                            4. +
                                                                                                                                                                                                                          4. + +

                                                                                                                                                                                                                            trans wrongs skull

                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • sticker
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • pin
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + +                                                                                                                                                                                                                             +
                                                                                                                                                                                                                            5. + +
                                                                                                                                                                                                                          5. + +

                                                                                                                                                                                                                            queer

                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • sticker
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • pin
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            + A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + +                                                                                                                                                                                                                             +
                                                                                                                                                                                                                            6. +
                                                                                                                                                                                                                          @@ -1576,6 +1687,6 @@ export { HeadingAnchors } - + diff --git a/_site/pride-dice-bags/index.html b/_site/pride-dice-bags/index.html index bc4352b8..369334ec 100644 --- a/_site/pride-dice-bags/index.html +++ b/_site/pride-dice-bags/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                          pride dice bags

                                                                                                                                                                                                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                          Knitted dice bags in pride flag patterns.

                                                                                                                                                                                                                          @@ -1504,36 +1615,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                            on pronouns

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

                                                                                                                                                                                                                            networks of trans care

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

                                                                                                                                                                                                                            congrats on the gay

                                                                                                                                                                                                                            +                                                                                                                                                                                                                             +

                                                                                                                                                                                                                            nonbinary flag

                                                                                                                                                                                                                              @@ -1544,7 +1627,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                            - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + +                                                                                                                                                                                                                             +
                                                                                                                                                                                                                            4. + +
                                                                                                                                                                                                                          4. + +

                                                                                                                                                                                                                            geese/trans wrongs

                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            + 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!' + +                                                                                                                                                                                                                             +
                                                                                                                                                                                                                            5. + +
                                                                                                                                                                                                                          5. + +

                                                                                                                                                                                                                            coming out

                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            + 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'
                                                                                                                                                                                                                            6. @@ -1580,6 +1699,6 @@ export { HeadingAnchors } - + diff --git a/_site/printing-press-notes/index.html b/_site/printing-press-notes/index.html index 089cd9ee..9272ec89 100644 --- a/_site/printing-press-notes/index.html +++ b/_site/printing-press-notes/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                            printing press notes

                                                                                                                                                                                                                            @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - An open Speedball Model B printing press, which uses a lever handle to put even pressure on a 6 by 8 inch top plate. + + + An open Speedball Model B printing press, which uses a lever handle to put even pressure on a 6 by 8 inch top plate. + + An open Speedball Model B printing press, which uses a lever handle to put even pressure on a 6 by 8 inch top plate.

                                                                                                                                                                                                                            specs

                                                                                                                                                                                                                            @@ -1518,6 +1629,6 @@ export { HeadingAnchors } - + diff --git a/_site/printmaking-paper-notes/index.html b/_site/printmaking-paper-notes/index.html index 6dfdcb78..975603ce 100644 --- a/_site/printmaking-paper-notes/index.html +++ b/_site/printmaking-paper-notes/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                            printmaking paper notes

                                                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + + + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.

                                                                                                                                                                                                                            Cataloguing paper I have worked with and any notes.

                                                                                                                                                                                                                            @@ -1532,42 +1643,40 @@ export { HeadingAnchors }
                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                              chanterelle

                                                                                                                                                                                                                              +                                                                                                                                                                                                                               +

                                                                                                                                                                                                                              five of them

                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                              • card
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              • shirt
                                                                                                                                                                                                                              - A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing.
                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                              happy biHRTday

                                                                                                                                                                                                                              +                                                                                                                                                                                                                               +

                                                                                                                                                                                                                              greeting quorbs

                                                                                                                                                                                                                                -
                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                              • card
                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                              - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                              iris

                                                                                                                                                                                                                              +                                                                                                                                                                                                                               +

                                                                                                                                                                                                                              heron

                                                                                                                                                                                                                                @@ -1575,8 +1684,10 @@ export { HeadingAnchors }
                                                                                                                                                                                                                              • card
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              • shirt
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              - 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.
                                                                                                                                                                                                                              4. @@ -1612,6 +1723,6 @@ export { HeadingAnchors } - + diff --git a/_site/pronoun-patches/index.html b/_site/pronoun-patches/index.html index 9941fae7..7833b8cd 100644 --- a/_site/pronoun-patches/index.html +++ b/_site/pronoun-patches/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                              pronoun patches

                                                                                                                                                                                                                              @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                              Hand carved modular stamps for when you want a chatty skeleton to yell your pronouns.

                                                                                                                                                                                                                              @@ -1511,6 +1622,28 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                +
                                                                                                                                                                                                                              1. + +

                                                                                                                                                                                                                                boypussy (mature)

                                                                                                                                                                                                                                + +
                                                                                                                                                                                                                                  + +
                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + +                                                                                                                                                                                                                                 +
                                                                                                                                                                                                                                2. +

                                                                                                                                                                                                                              2. fishhook pride keychains

                                                                                                                                                                                                                                @@ -1528,33 +1661,15 @@ export { HeadingAnchors }
                                                                                                                                                                                                                              3. - -

                                                                                                                                                                                                                                fd signifier & oppositional sexism

                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                - Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field. - -                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                4. - -
                                                                                                                                                                                                                              4. - -

                                                                                                                                                                                                                                foxgloves

                                                                                                                                                                                                                                +                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                squarsh

                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                - A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + 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.
                                                                                                                                                                                                                                5. @@ -1590,6 +1705,6 @@ export { HeadingAnchors } - + diff --git a/_site/proud-dad-wallet/index.html b/_site/proud-dad-wallet/index.html index 3cd1264e..6eb4126c 100644 --- a/_site/proud-dad-wallet/index.html +++ b/_site/proud-dad-wallet/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                proud dad wallet

                                                                                                                                                                                                                                @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A brown leather wallet with a subtle trans flag stitching across the top. + + + A brown leather wallet with a subtle trans flag stitching across the top. + + A brown leather wallet with a subtle trans flag stitching across the top.

                                                                                                                                                                                                                                Designed for my dad.

                                                                                                                                                                                                                                @@ -1486,45 +1597,47 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                  queer book list

                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                  give to trans orgs and people

                                                                                                                                                                                                                                  • gender
                                                                                                                                                                                                                                  - A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order + 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.
                                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                                  bag strap

                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                  brooke's cuff bracelets

                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                  - A nylon webbing shoulder strap in bright teal with clips on each end. + Olive green leather cuffs with silver spikes and a shearling lining.
                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                  fishhook pride keychains

                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                  coming out

                                                                                                                                                                                                                                    -
                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                  • print
                                                                                                                                                                                                                                    • + +
                                                                                                                                                                                                                                  • card
                                                                                                                                                                                                                                  • gender
                                                                                                                                                                                                                                  - a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + 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'
                                                                                                                                                                                                                                  4. @@ -1560,6 +1673,6 @@ export { HeadingAnchors } - + diff --git a/_site/queer-book-list/index.html b/_site/queer-book-list/index.html index 7c6a3c5f..743e59be 100644 --- a/_site/queer-book-list/index.html +++ b/_site/queer-book-list/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                  queer book list

                                                                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order + + + A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order + + A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order

                                                                                                                                                                                                                                  an incomplete list of books by/for/about queer folks. check it out and add your favorites.

                                                                                                                                                                                                                                  @@ -1475,22 +1586,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                    gender?

                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                    - A page of handwritten notes with some loosely drawn charts, described further in the post. - -                                                                                                                                                                                                                                     -
                                                                                                                                                                                                                                    2. - -
                                                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                                                    slightly weird man club

                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                    geese/trans wrongs

                                                                                                                                                                                                                                      @@ -1501,21 +1598,41 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                    - A print that reads 'slightly weird man club' in a nonbinary flag colored gradient + 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!'
                                                                                                                                                                                                                                  3. - -

                                                                                                                                                                                                                                    on pronouns

                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                    coming out

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

                                                                                                                                                                                                                                    gender as a proxy variable

                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                    • zine
                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                    - Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder. + 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.
                                                                                                                                                                                                                                    5. @@ -1551,6 +1668,6 @@ export { HeadingAnchors } - + diff --git a/_site/queer/index.html b/_site/queer/index.html index 01a4ef17..01a99c94 100644 --- a/_site/queer/index.html +++ b/_site/queer/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                    queer

                                                                                                                                                                                                                                    @@ -1455,7 +1562,11 @@ export { HeadingAnchors } - A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + + + A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.

                                                                                                                                                                                                                                    details

                                                                                                                                                                                                                                    @@ -1506,6 +1617,38 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                      +
                                                                                                                                                                                                                                    1. + +

                                                                                                                                                                                                                                      fat raccoon

                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                      • print
                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                      • card
                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                      • shirt
                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                      + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + +                                                                                                                                                                                                                                       +
                                                                                                                                                                                                                                      2. + +
                                                                                                                                                                                                                                    2. + +

                                                                                                                                                                                                                                      kniphofia

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

                                                                                                                                                                                                                                    3. trans the world

                                                                                                                                                                                                                                      @@ -1524,38 +1667,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                      4. -
                                                                                                                                                                                                                                    4. - -

                                                                                                                                                                                                                                      fix your hearts

                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                      • print
                                                                                                                                                                                                                                        • - -
                                                                                                                                                                                                                                      - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. - -                                                                                                                                                                                                                                       -
                                                                                                                                                                                                                                      5. - -
                                                                                                                                                                                                                                    5. - -

                                                                                                                                                                                                                                      greeting loons

                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                      • card
                                                                                                                                                                                                                                        • - -
                                                                                                                                                                                                                                      • print
                                                                                                                                                                                                                                        • - -
                                                                                                                                                                                                                                      • highlight
                                                                                                                                                                                                                                        • - -
                                                                                                                                                                                                                                      - A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. - -                                                                                                                                                                                                                                       -
                                                                                                                                                                                                                                      6. -
                                                                                                                                                                                                                                    @@ -1587,6 +1698,6 @@ export { HeadingAnchors } - + diff --git a/_site/quorbs/index.html b/_site/quorbs/index.html index 80b9fe0d..39ceb363 100644 --- a/_site/quorbs/index.html +++ b/_site/quorbs/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                    quorbs

                                                                                                                                                                                                                                    @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                    Based on a beautiful photograph by Jessamyn

                                                                                                                                                                                                                                    @@ -1486,22 +1597,24 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                      become unbutterable

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      brooke's notebook

                                                                                                                                                                                                                                        -
                                                                                                                                                                                                                                      • print
                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                      • highlight
                                                                                                                                                                                                                                      - 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.' + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
                                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                                      heron

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      spotted towhee

                                                                                                                                                                                                                                        @@ -1509,24 +1622,26 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                      • card
                                                                                                                                                                                                                                        • -
                                                                                                                                                                                                                                      • shirt
                                                                                                                                                                                                                                        • -
                                                                                                                                                                                                                                      - A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + A block print of a spotted towhee mid-leap.
                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                      fix your hearts

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      geese/trans wrongs

                                                                                                                                                                                                                                      • print
                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                      • shirt
                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                      • gender
                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                      - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + 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!'
                                                                                                                                                                                                                                      4. @@ -1562,6 +1677,6 @@ export { HeadingAnchors } - + diff --git a/_site/rachels-bracelets/index.html b/_site/rachels-bracelets/index.html index 4cdbe622..ac8b6059 100644 --- a/_site/rachels-bracelets/index.html +++ b/_site/rachels-bracelets/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                      rachel's bracelets

                                                                                                                                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Two pink leather bracelets with stainless steel hardware and aqua stitching. + + + Two pink leather bracelets with stainless steel hardware and aqua stitching. + + Two pink leather bracelets with stainless steel hardware and aqua stitching.

                                                                                                                                                                                                                                      Custom dyed. Stainless steel hardware.

                                                                                                                                                                                                                                      @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                                        double bill pocket bifold

                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                        leather lighter case

                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                        - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + A bic lighter wrapped in leather and hand-stitched up one side.
                                                                                                                                                                                                                                      2. - -

                                                                                                                                                                                                                                        vertical zipper card wallet

                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                        shrimp cat toy

                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                        - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange.
                                                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                                                        swoop wallet

                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                        vertical card wallet

                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                        - 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. + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
                                                                                                                                                                                                                                        4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/rambouillet-handspun/index.html b/_site/rambouillet-handspun/index.html index a14bad24..dc86cb7a 100644 --- a/_site/rambouillet-handspun/index.html +++ b/_site/rambouillet-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                        rambouillet handspun

                                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                        Fiber from Woolgatherings. 100% rambouillet. Hand-dyed!

                                                                                                                                                                                                                                        @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                          handcombed jacobs handspun

                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                          charlie the alpaca handspun

                                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                                          - a skein of dark grey handspun yarn + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight
                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                          ruby the alpaca handspun

                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                          BFL/silk handspun

                                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                                          - one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight + a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.
                                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                                          orion handspun

                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                          dyeing fiber

                                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                                          - 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. + 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.
                                                                                                                                                                                                                                          4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/recommendations-and-favorites/index.html b/_site/recommendations-and-favorites/index.html index 848e08f3..669fa19c 100644 --- a/_site/recommendations-and-favorites/index.html +++ b/_site/recommendations-and-favorites/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                          recommendations & favorites

                                                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible. + + + Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible. + + Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible.

                                                                                                                                                                                                                                          Articles

                                                                                                                                                                                                                                          @@ -1516,6 +1627,24 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                            +
                                                                                                                                                                                                                                          1. + +

                                                                                                                                                                                                                                            gender in data models

                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                            • software
                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                            • highlight
                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                            + Image unrelated to post. A light pink peony in full bloom, close up. + +                                                                                                                                                                                                                                             +
                                                                                                                                                                                                                                            2. +

                                                                                                                                                                                                                                          2. dragon mask

                                                                                                                                                                                                                                            @@ -1548,24 +1677,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                            3. -
                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                            kestrel zine

                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                            • zine
                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                            • highlight
                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                            - 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. - -                                                                                                                                                                                                                                             -
                                                                                                                                                                                                                                            4. -
                                                                                                                                                                                                                                          @@ -1597,6 +1708,6 @@ export { HeadingAnchors } - + diff --git a/_site/redirections/index.html b/_site/redirections/index.html index 65371d24..e2d65097 100644 --- a/_site/redirections/index.html +++ b/_site/redirections/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                          redirections

                                                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets. + + + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets. + + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets.

                                                                                                                                                                                                                                          baseline

                                                                                                                                                                                                                                          @@ -1529,6 +1640,20 @@ heredoc> tempest.md
                                                                                                                                                                                                                                            +
                                                                                                                                                                                                                                          1. + +

                                                                                                                                                                                                                                            backend accessibility

                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                                            • software
                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                            + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + +                                                                                                                                                                                                                                             +
                                                                                                                                                                                                                                            2. +

                                                                                                                                                                                                                                          2. my favorite git flag

                                                                                                                                                                                                                                            @@ -1557,20 +1682,6 @@ heredoc> tempest.md
                                                                                                                                                                                                                                            3. -
                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                            moving images

                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                            • software
                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                            - 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. - -                                                                                                                                                                                                                                             -
                                                                                                                                                                                                                                            4. -
                                                                                                                                                                                                                                          @@ -1602,6 +1713,6 @@ heredoc> tempest.md - + diff --git a/_site/reference/1/index.html b/_site/reference/1/index.html index f502a417..9d23bf0f 100644 --- a/_site/reference/1/index.html +++ b/_site/reference/1/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1216,6 +1215,6 @@ footer a:focus-visible { - + diff --git a/_site/reference/2/index.html b/_site/reference/2/index.html index 5f30303f..78adad00 100644 --- a/_site/reference/2/index.html +++ b/_site/reference/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1176,6 +1175,6 @@ footer a:focus-visible { - + diff --git a/_site/reference/index.html b/_site/reference/index.html index 246fec6f..6a94393c 100644 --- a/_site/reference/index.html +++ b/_site/reference/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1212,6 +1211,6 @@ footer a:focus-visible { - + diff --git a/_site/rescue-trans-rescue/index.html b/_site/rescue-trans-rescue/index.html index a9587528..7eb9cf10 100644 --- a/_site/rescue-trans-rescue/index.html +++ b/_site/rescue-trans-rescue/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                          rescue Trans Rescue

                                                                                                                                                                                                                                          @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - “Picture unrelated to post. A male and female wood duck in summer ‘eclipse’ plumage have a little tiff while standing on a log. to the right, the male has his neck extended and beak open; on the left, the female has a wing extended upwards.“ + + + “Picture unrelated to post. A male and female wood duck in summer ‘eclipse’ plumage have a little tiff while standing on a log. to the right, the male has his neck extended and beak open; on the left, the female has a wing extended upwards.“ + + “Picture unrelated to post. A male and female wood duck in summer ‘eclipse’ plumage have a little tiff while standing on a log. to the right, the male has his neck extended and beak open; on the left, the female has a wing extended upwards.“

                                                                                                                                                                                                                                          Updated 13 Aug 2024

                                                                                                                                                                                                                                          @@ -1497,6 +1608,6 @@ export { HeadingAnchors } - + diff --git a/_site/resume/index.html b/_site/resume/index.html index ba0bedf7..ac6888b8 100644 --- a/_site/resume/index.html +++ b/_site/resume/index.html @@ -267,7 +267,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1118,6 +1117,6 @@ footer a:focus-visible { - + diff --git a/_site/rope-one/index.html b/_site/rope-one/index.html index 33a85fc8..878a86ca 100644 --- a/_site/rope-one/index.html +++ b/_site/rope-one/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                          rope (one)

                                                                                                                                                                                                                                          @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A print of a nude trans woman in an asymmetrical rope harness. + + + A print of a nude trans woman in an asymmetrical rope harness. + + A print of a nude trans woman in an asymmetrical rope harness.

                                                                                                                                                                                                                                          first in a series, probably.

                                                                                                                                                                                                                                          @@ -1493,8 +1604,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                            chanterelle

                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                            junco

                                                                                                                                                                                                                                              @@ -1503,28 +1614,14 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                            - A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia.
                                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                                            kniphofia

                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                            - A print of a brightly colored flower in 4 layers of color - -                                                                                                                                                                                                                                             -
                                                                                                                                                                                                                                            3. - -
                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                            congrats on the gay

                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                            coming out

                                                                                                                                                                                                                                              @@ -1535,7 +1632,21 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                                            - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + 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' + +                                                                                                                                                                                                                                             +
                                                                                                                                                                                                                                            4. + +
                                                                                                                                                                                                                                          4. + +

                                                                                                                                                                                                                                            brown creeper

                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                            + 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.
                                                                                                                                                                                                                                            5. @@ -1571,6 +1682,6 @@ export { HeadingAnchors } - + diff --git a/_site/ruby-the-alpaca-handspun/index.html b/_site/ruby-the-alpaca-handspun/index.html index a7072d42..38a31706 100644 --- a/_site/ruby-the-alpaca-handspun/index.html +++ b/_site/ruby-the-alpaca-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                            ruby the alpaca handspun

                                                                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight + + + one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight + + one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight

                                                                                                                                                                                                                                            Fiber from Circle R Ranch. 100% alpaca, from Ruby the alpaca.

                                                                                                                                                                                                                                            @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                              spinner's dream handspun

                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                              spinning plants

                                                                                                                                                                                                                                              • yarn
                                                                                                                                                                                                                                              - a skein of a lightly variegated grey yarn in about a sport or DK weight. + 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)
                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                              fire & ice handspun

                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                              petrichor handspun

                                                                                                                                                                                                                                              • yarn
                                                                                                                                                                                                                                              - 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + 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
                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                              rambouillet handspun

                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                              handspun yarn in party mix and orange-gold

                                                                                                                                                                                                                                              • yarn
                                                                                                                                                                                                                                              - 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. + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
                                                                                                                                                                                                                                              4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/scrap-patches/index.html b/_site/scrap-patches/index.html index d091f42f..8fc3aa02 100644 --- a/_site/scrap-patches/index.html +++ b/_site/scrap-patches/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                              scrap patches

                                                                                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - a collage of 4 images, each showing a fabric patch created by collaging 5 or 6 scraps of fabric and joining them with a simple running stitch in white thread. patches of running stitch go back and forth both horizontally and vertically. + + + a collage of 4 images, each showing a fabric patch created by collaging 5 or 6 scraps of fabric and joining them with a simple running stitch in white thread. patches of running stitch go back and forth both horizontally and vertically. + + a collage of 4 images, each showing a fabric patch created by collaging 5 or 6 scraps of fabric and joining them with a simple running stitch in white thread. patches of running stitch go back and forth both horizontally and vertically. @@ -1528,6 +1639,6 @@ export { HeadingAnchors } - + diff --git a/_site/screen-reader-optimizations/index.html b/_site/screen-reader-optimizations/index.html index d0a7a87a..f814f80e 100644 --- a/_site/screen-reader-optimizations/index.html +++ b/_site/screen-reader-optimizations/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                              screen reader optimizations

                                                                                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. A crow poses on driftwood against a whitish sky. + + + Image unrelated to post. A crow poses on driftwood against a whitish sky. + + Image unrelated to post. A crow poses on driftwood against a whitish sky.

                                                                                                                                                                                                                                              context

                                                                                                                                                                                                                                              @@ -1533,47 +1644,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                accessible image modals

                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                moving images

                                                                                                                                                                                                                                                • software
                                                                                                                                                                                                                                                - Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth. + 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.
                                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                                gender in data models

                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                designing a bag

                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                • software
                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                • highlight
                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                - Image unrelated to post. A light pink peony in full bloom, close up. + 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.
                                                                                                                                                                                                                                              3. - -

                                                                                                                                                                                                                                                an intro to git

                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                redirections

                                                                                                                                                                                                                                                • software
                                                                                                                                                                                                                                                - Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets.
                                                                                                                                                                                                                                                4. @@ -1609,6 +1718,6 @@ export { HeadingAnchors } - + diff --git a/_site/seedling/index.html b/_site/seedling/index.html index 3aebe89b..d2508550 100644 --- a/_site/seedling/index.html +++ b/_site/seedling/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                seedling

                                                                                                                                                                                                                                                @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                Hand carved stamp of seedlings to celebrate new life.

                                                                                                                                                                                                                                                @@ -1493,8 +1604,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                  coming out

                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                  happy biHRTday

                                                                                                                                                                                                                                                    @@ -1505,41 +1616,41 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                  • gender
                                                                                                                                                                                                                                                  - 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' + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
                                                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                                                  brown creeper

                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                  greeting quorbs

                                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                                  • card
                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                  • print
                                                                                                                                                                                                                                                  - 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. + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                  anarchy autism

                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                  greeting loons

                                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                                  • card
                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                  • print
                                                                                                                                                                                                                                                    • -
                                                                                                                                                                                                                                                  • sticker
                                                                                                                                                                                                                                                    • - -
                                                                                                                                                                                                                                                  • shirt
                                                                                                                                                                                                                                                    • - -
                                                                                                                                                                                                                                                  • pin
                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                  • highlight
                                                                                                                                                                                                                                                  - A print in rainbow ink that says autism with the anarchy A. + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
                                                                                                                                                                                                                                                  4. @@ -1575,6 +1686,6 @@ export { HeadingAnchors } - + diff --git a/_site/shirt-making-notes/index.html b/_site/shirt-making-notes/index.html index cab498dc..dfe204c4 100644 --- a/_site/shirt-making-notes/index.html +++ b/_site/shirt-making-notes/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                  shirt making notes

                                                                                                                                                                                                                                                  @@ -1426,7 +1533,11 @@ export { HeadingAnchors } - A shirt laid out on my desk after being printed with my jay and flicker prints. There are ink pads and other tools scattered around. + + + A shirt laid out on my desk after being printed with my jay and flicker prints. There are ink pads and other tools scattered around. + + A shirt laid out on my desk after being printed with my jay and flicker prints. There are ink pads and other tools scattered around.

                                                                                                                                                                                                                                                  materials

                                                                                                                                                                                                                                                  @@ -1536,6 +1647,6 @@ export { HeadingAnchors } - + diff --git a/_site/shirts/index.html b/_site/shirts/index.html index 9f2501d1..a16be297 100644 --- a/_site/shirts/index.html +++ b/_site/shirts/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                  shirts!

                                                                                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A row of shirts hanging in front of a window, with a variety of hand-printed designs. + + + A row of shirts hanging in front of a window, with a variety of hand-printed designs. + + A row of shirts hanging in front of a window, with a variety of hand-printed designs.

                                                                                                                                                                                                                                                  hand-printed designs on bella & canvas shirts. To order, fill out this form (Sep 2024: no longer taking orders via this method). Or just message me.

                                                                                                                                                                                                                                                  @@ -1485,19 +1596,19 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                    trans the world

                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                    swallowtail on snowdrops

                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                    • shirt
                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                    - 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. + A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower.
                                                                                                                                                                                                                                                    2. @@ -1521,19 +1632,21 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                                                                    lupine

                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                    anarchy autism

                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                    • sticker
                                                                                                                                                                                                                                                    • shirt
                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                    • pin
                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                    - 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. + A print in rainbow ink that says autism with the anarchy A.
                                                                                                                                                                                                                                                    3. @@ -1569,6 +1682,6 @@ export { HeadingAnchors } - + diff --git a/_site/shrimp-cat-toy/index.html b/_site/shrimp-cat-toy/index.html index 058ece75..3c7f8c74 100644 --- a/_site/shrimp-cat-toy/index.html +++ b/_site/shrimp-cat-toy/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                    shrimp cat toy

                                                                                                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + + + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange.

                                                                                                                                                                                                                                                    Stuffed with catnip, of course.

                                                                                                                                                                                                                                                    @@ -1481,43 +1592,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                      stephanie collar

                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                      piñatex wallet with zipper

                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                      - A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + 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.
                                                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                                                      sunflower

                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                      leather chest harness

                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                      - A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                      maker's mark keychain

                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                      fishhook pride keychains

                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                      • gender
                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                      - A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it. + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
                                                                                                                                                                                                                                                      4. @@ -1553,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/shrimp/index.html b/_site/shrimp/index.html index 6e9aaa0b..8ec3a447 100644 --- a/_site/shrimp/index.html +++ b/_site/shrimp/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                      shrimp

                                                                                                                                                                                                                                                      @@ -1450,7 +1557,11 @@ export { HeadingAnchors } - A print of a small shrimp with slender little leggies in orange ink. + + + A print of a small shrimp with slender little leggies in orange ink. + + A print of a small shrimp with slender little leggies in orange ink.

                                                                                                                                                                                                                                                      a shrimp. eir name is Gomez.

                                                                                                                                                                                                                                                      @@ -1503,42 +1614,24 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                                                        coming out

                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                        quorbs

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

                                                                                                                                                                                                                                                        flatfish

                                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                        • card
                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                        - A print of a simple flatfish design inked in sepia. - -                                                                                                                                                                                                                                                         -
                                                                                                                                                                                                                                                        3. - -
                                                                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                                                                        stellar's jay

                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                        heron

                                                                                                                                                                                                                                                          @@ -1549,7 +1642,21 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                        • shirt
                                                                                                                                                                                                                                                        - A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + +                                                                                                                                                                                                                                                         +
                                                                                                                                                                                                                                                        4. + +
                                                                                                                                                                                                                                                      4. + +

                                                                                                                                                                                                                                                        euphorbia

                                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                                                        + A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers.
                                                                                                                                                                                                                                                        5. @@ -1585,6 +1692,6 @@ export { HeadingAnchors } - + diff --git a/_site/siblinghood-of-the-traveling-greeting-card/index.html b/_site/siblinghood-of-the-traveling-greeting-card/index.html index 836ca3cb..9280c35c 100644 --- a/_site/siblinghood-of-the-traveling-greeting-card/index.html +++ b/_site/siblinghood-of-the-traveling-greeting-card/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                        siblinghood of the traveling greeting card

                                                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Image unrelated to post. A surprisingly neat pile of rounded beach rocks, mainly speckly grey-white-bluish ones, with trees in the background. + + + Image unrelated to post. A surprisingly neat pile of rounded beach rocks, mainly speckly grey-white-bluish ones, with trees in the background. + + Image unrelated to post. A surprisingly neat pile of rounded beach rocks, mainly speckly grey-white-bluish ones, with trees in the background.

                                                                                                                                                                                                                                                        welcome to the siblinghood of the traveling greeting card. it now has a home at siblinghood.quest.

                                                                                                                                                                                                                                                        @@ -1601,6 +1712,6 @@ export { HeadingAnchors } - + diff --git a/_site/sideways-canvas-shirt/index.html b/_site/sideways-canvas-shirt/index.html index 4b3eddaa..4be7755c 100644 --- a/_site/sideways-canvas-shirt/index.html +++ b/_site/sideways-canvas-shirt/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                        sideways canvas shirt

                                                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                        Pattern: Sideways Canvas

                                                                                                                                                                                                                                                        @@ -1482,8 +1593,22 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                          textures unite

                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                          pink socks

                                                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                                          • knit
                                                                                                                                                                                                                                                            • + +
                                                                                                                                                                                                                                                          + Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks. + +                                                                                                                                                                                                                                                           +
                                                                                                                                                                                                                                                          2. + +
                                                                                                                                                                                                                                                        2. + +

                                                                                                                                                                                                                                                          butch hands pattern

                                                                                                                                                                                                                                                            @@ -1492,37 +1617,21 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                          • highlight
                                                                                                                                                                                                                                                          - 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. + Hands wearing a pair of pink and grey gloves with convertable mitten tops.
                                                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                                                          pride dice bags

                                                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                                          • knit
                                                                                                                                                                                                                                                            • - -
                                                                                                                                                                                                                                                          • gender
                                                                                                                                                                                                                                                            • - -
                                                                                                                                                                                                                                                          - 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. - -                                                                                                                                                                                                                                                           -
                                                                                                                                                                                                                                                          4. - -
                                                                                                                                                                                                                                                        4. - -

                                                                                                                                                                                                                                                          knit shrimp

                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                          brooke's scarf

                                                                                                                                                                                                                                                          • knit
                                                                                                                                                                                                                                                          - Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + 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.
                                                                                                                                                                                                                                                          5. @@ -1558,6 +1667,6 @@ export { HeadingAnchors } - + diff --git a/_site/sitemap.xml b/_site/sitemap.xml index 010f226e..1575ed7e 100644 --- a/_site/sitemap.xml +++ b/_site/sitemap.xml @@ -1630,7 +1630,7 @@ https://leecat.art/feed.xml - 2026-05-06 + 2026-05-14 diff --git a/_site/slightly-weird-man-club/index.html b/_site/slightly-weird-man-club/index.html index a8627f6b..767f2568 100644 --- a/_site/slightly-weird-man-club/index.html +++ b/_site/slightly-weird-man-club/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                          slightly weird man club

                                                                                                                                                                                                                                                          @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A print that reads 'slightly weird man club' in a nonbinary flag colored gradient + + + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient + + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient

                                                                                                                                                                                                                                                          from a discussion on being a nonbinary man

                                                                                                                                                                                                                                                          @@ -1498,22 +1609,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                            shirts!

                                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                                            - A row of shirts hanging in front of a window, with a variety of hand-printed designs. - -                                                                                                                                                                                                                                                             -
                                                                                                                                                                                                                                                            2. - -
                                                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                                                            spotted towhee

                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                            trans wrongs skull

                                                                                                                                                                                                                                                              @@ -1521,26 +1618,48 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                                                            - A block print of a spotted towhee mid-leap. - -                                                                                                                                                                                                                                                             -
                                                                                                                                                                                                                                                            3. - -
                                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                                            nonbinary flag

                                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                                              +
                                                                                                                                                                                                                                                            • sticker
                                                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                            • pin
                                                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                                                            - A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + +                                                                                                                                                                                                                                                             +
                                                                                                                                                                                                                                                            4. + +
                                                                                                                                                                                                                                                          4. + +

                                                                                                                                                                                                                                                            killdeer

                                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                                            + A print of a killdeer in black ink. + +                                                                                                                                                                                                                                                             +
                                                                                                                                                                                                                                                            5. + +
                                                                                                                                                                                                                                                          5. + +

                                                                                                                                                                                                                                                            pronoun patches

                                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                                            • patch
                                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                                            + 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.
                                                                                                                                                                                                                                                            6. @@ -1576,6 +1695,6 @@ export { HeadingAnchors } - + diff --git a/_site/snap-pouch/index.html b/_site/snap-pouch/index.html index 2e46bb43..9e78ed10 100644 --- a/_site/snap-pouch/index.html +++ b/_site/snap-pouch/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                            snap pouch

                                                                                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + + + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather.

                                                                                                                                                                                                                                                            simple pouch for coins, notions, what have you

                                                                                                                                                                                                                                                            @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                                              gradient purse strap

                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                              leatherworking favorites

                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                              - 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. + two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black.
                                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                                              brooke's cuff bracelets

                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                              leaf patches

                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                              - Olive green leather cuffs with silver spikes and a shearling lining. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                                              long zipper bifold

                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                              moss harness

                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                              - A collage showing an orange leather wallet with a long zipper running the length of the outside. + A nylon webbing harness in bright teal laid out on a desk.
                                                                                                                                                                                                                                                              4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/soras-collar/index.html b/_site/soras-collar/index.html index 184d3733..05545547 100644 --- a/_site/soras-collar/index.html +++ b/_site/soras-collar/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                              sora's collar

                                                                                                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                              Commission piece for a Doberman.

                                                                                                                                                                                                                                                              @@ -1481,45 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                brooke's collar

                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                stephanie collar

                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring.
                                                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                                                brooke's cuff bracelets

                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                foldy wallet with thumb slide

                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                - Olive green leather cuffs with silver spikes and a shearling lining. + 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.
                                                                                                                                                                                                                                                              3. - -

                                                                                                                                                                                                                                                                leather long-stitch journals

                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                long zipper bifold

                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                • book
                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + A collage showing an orange leather wallet with a long zipper running the length of the outside.
                                                                                                                                                                                                                                                                4. @@ -1555,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/spinners-dream-handspun/index.html b/_site/spinners-dream-handspun/index.html index caf412a6..bc13d4a7 100644 --- a/_site/spinners-dream-handspun/index.html +++ b/_site/spinners-dream-handspun/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                spinner's dream handspun

                                                                                                                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - a skein of a lightly variegated grey yarn in about a sport or DK weight. + + + a skein of a lightly variegated grey yarn in about a sport or DK weight. + + a skein of a lightly variegated grey yarn in about a sport or DK weight.

                                                                                                                                                                                                                                                                Fiber from Paradise Fibers. 40% merino/20% alpaca/20% camel/20% mulberry silk. Scrumptiously soft.

                                                                                                                                                                                                                                                                @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                                  dyeing fiber

                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                  handcombed jacobs handspun

                                                                                                                                                                                                                                                                  • yarn
                                                                                                                                                                                                                                                                  - 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. + a skein of dark grey handspun yarn
                                                                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                                                                  handspun yarn in party mix and orange-gold

                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                  icelandic lamb handspun

                                                                                                                                                                                                                                                                  • yarn
                                                                                                                                                                                                                                                                  - 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. + a skein of black handspun yarn
                                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                                  fire & ice handspun

                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                  orion handspun

                                                                                                                                                                                                                                                                  • yarn
                                                                                                                                                                                                                                                                  - 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + 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.
                                                                                                                                                                                                                                                                  4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/spinning-plants/index.html b/_site/spinning-plants/index.html index 0482d2ad..54508fa1 100644 --- a/_site/spinning-plants/index.html +++ b/_site/spinning-plants/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                  spinning plants

                                                                                                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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) + + + 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) + + 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)
                                                                                                                                                                                                                                                                  @@ -1605,20 +1716,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                    -
                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                    rambouillet handspun

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

                                                                                                                                                                                                                                                                  2. petrichor handspun

                                                                                                                                                                                                                                                                    @@ -1647,6 +1744,20 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                    3. +
                                                                                                                                                                                                                                                                  3. + +

                                                                                                                                                                                                                                                                    icelandic lamb handspun

                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                    • yarn
                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                    + a skein of black handspun yarn + +                                                                                                                                                                                                                                                                     +
                                                                                                                                                                                                                                                                    4. +
                                                                                                                                                                                                                                                                  @@ -1678,6 +1789,6 @@ export { HeadingAnchors } - + diff --git a/_site/spotted-towhee/index.html b/_site/spotted-towhee/index.html index c5bae5be..2cc6ac60 100644 --- a/_site/spotted-towhee/index.html +++ b/_site/spotted-towhee/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                  spotted towhee

                                                                                                                                                                                                                                                                  @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - A block print of a spotted towhee mid-leap. + + + A block print of a spotted towhee mid-leap. + + A block print of a spotted towhee mid-leap.

                                                                                                                                                                                                                                                                  A spotted towhee mid-leap.

                                                                                                                                                                                                                                                                  @@ -1493,8 +1604,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                    nonbinary flag

                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                    trans rights skull

                                                                                                                                                                                                                                                                      @@ -1502,33 +1613,21 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                    • sticker
                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                    • pin
                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                                    - A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
                                                                                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                                                                                    luminescent (mature)

                                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                                    - A print of a tattooed woman in bright highlighter yellow underwear. - -                                                                                                                                                                                                                                                                     -
                                                                                                                                                                                                                                                                    3. - -
                                                                                                                                                                                                                                                                  3. - -

                                                                                                                                                                                                                                                                    hummingbird become ungovernable

                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                    heron

                                                                                                                                                                                                                                                                      @@ -1539,7 +1638,25 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                    • shirt
                                                                                                                                                                                                                                                                    - 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' + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + +                                                                                                                                                                                                                                                                     +
                                                                                                                                                                                                                                                                    4. + +
                                                                                                                                                                                                                                                                  4. + +

                                                                                                                                                                                                                                                                    booby (congrats on the top surgery)

                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                    + A landscape-oriented white card with a two-color print of a blue-footed booby.
                                                                                                                                                                                                                                                                    5. @@ -1575,6 +1692,6 @@ export { HeadingAnchors } - + diff --git a/_site/square-watercolor-pad/index.html b/_site/square-watercolor-pad/index.html index 8957d277..d826f0b6 100644 --- a/_site/square-watercolor-pad/index.html +++ b/_site/square-watercolor-pad/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                    square watercolor pad

                                                                                                                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A two panel collage showing a square book with a tan cover and blue and gold endpapers. + + + A two panel collage showing a square book with a tan cover and blue and gold endpapers. + + A two panel collage showing a square book with a tan cover and blue and gold endpapers.

                                                                                                                                                                                                                                                                    A book of watercolor paper with an open spine and coptic stitching in light blue.

                                                                                                                                                                                                                                                                    @@ -1497,45 +1608,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                                      brooke's notebook

                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                      green memo pad

                                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                                        • -
                                                                                                                                                                                                                                                                      • highlight
                                                                                                                                                                                                                                                                        • -
                                                                                                                                                                                                                                                                      - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + A three panel collage showcasing a small green memo pad.
                                                                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                                                                      orange journal

                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                      baseball journal

                                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                                      - A three panel collage showcasing a small book with foldout pages and a bright orange cover. + A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
                                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                                      blue and brown leather journal

                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                      leather long-stitch journals

                                                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                                      - A three panel collage showcasing a blue and brown leather-covered journal. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                                                                                                      4. @@ -1571,6 +1682,6 @@ export { HeadingAnchors } - + diff --git a/_site/squarsh/index.html b/_site/squarsh/index.html index d60f58f8..2e819382 100644 --- a/_site/squarsh/index.html +++ b/_site/squarsh/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                      squarsh

                                                                                                                                                                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                                      Color test for 3 new ink colors.

                                                                                                                                                                                                                                                                      @@ -1481,8 +1592,22 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                                                                        trans the world

                                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                                        crow

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

                                                                                                                                                                                                                                                                        not a drill

                                                                                                                                                                                                                                                                          @@ -1490,48 +1615,30 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                        • shirt
                                                                                                                                                                                                                                                                          • -
                                                                                                                                                                                                                                                                        • gender
                                                                                                                                                                                                                                                                          • -
                                                                                                                                                                                                                                                                        - 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. + 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'
                                                                                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                                                                                        pronoun patches

                                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                                        boypussy (mature)

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

                                                                                                                                                                                                                                                                        shrimp

                                                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                                        • card
                                                                                                                                                                                                                                                                          • -
                                                                                                                                                                                                                                                                        • sticker
                                                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                                                        • shirt
                                                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                                                        • pin
                                                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                                                        • gender
                                                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                                                        - A print of a small shrimp with slender little leggies in orange ink. + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.
                                                                                                                                                                                                                                                                        5. @@ -1567,6 +1674,6 @@ export { HeadingAnchors } - + diff --git a/_site/stampede-journal/index.html b/_site/stampede-journal/index.html index 8f7a0197..76586a2f 100644 --- a/_site/stampede-journal/index.html +++ b/_site/stampede-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                        stampede journal

                                                                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + + + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it.

                                                                                                                                                                                                                                                                        Includes coloring pages from Animorphia by Kerby Rosanes.

                                                                                                                                                                                                                                                                        @@ -1492,43 +1603,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                                          blue and brown leather journal

                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                          baseball journal

                                                                                                                                                                                                                                                                          • book
                                                                                                                                                                                                                                                                          - A three panel collage showcasing a blue and brown leather-covered journal. + A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
                                                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                                                          tiny books

                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                          flocked notebook

                                                                                                                                                                                                                                                                          • book
                                                                                                                                                                                                                                                                          - A three panel collage showing a book held in the palm of a hand. + A two panel collage showing the cover and endpapers of a thick notebook.
                                                                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                                                                          orange journal

                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                          Acadia coloring journal

                                                                                                                                                                                                                                                                          • book
                                                                                                                                                                                                                                                                          - A three panel collage showcasing a small book with foldout pages and a bright orange cover. + A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.
                                                                                                                                                                                                                                                                          4. @@ -1564,6 +1675,6 @@ export { HeadingAnchors } - + diff --git a/_site/stationery-exchange/index.html b/_site/stationery-exchange/index.html index beb33fe8..26e649f8 100644 --- a/_site/stationery-exchange/index.html +++ b/_site/stationery-exchange/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                          stationery exchange

                                                                                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms. + + + Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms. + + Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms.

                                                                                                                                                                                                                                                                          do you, like me, have a stash of greeting cards and stickers you'll never use? Too many notebooks and pens?

                                                                                                                                                                                                                                                                          @@ -1543,6 +1654,6 @@ export { HeadingAnchors } - + diff --git a/_site/stellars-jay/index.html b/_site/stellars-jay/index.html index d5cf2427..d51c4d53 100644 --- a/_site/stellars-jay/index.html +++ b/_site/stellars-jay/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                          stellar's jay

                                                                                                                                                                                                                                                                          @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + + + A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + + A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch

                                                                                                                                                                                                                                                                          Hand carved set of stamps depicting a stellar's jay about to take off. Based on a photo from birdpixel.

                                                                                                                                                                                                                                                                          @@ -1498,43 +1609,49 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                                            fix your hearts

                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                            iris

                                                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                            - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes.
                                                                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                                                                            kniphofia

                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                            quorbs

                                                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                            • highlight
                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                            - A print of a brightly colored flower in 4 layers of color + 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.
                                                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                                                            squarsh

                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                            artisans cooperative cards

                                                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                            - 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. + 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
                                                                                                                                                                                                                                                                            4. @@ -1570,6 +1687,6 @@ export { HeadingAnchors } - + diff --git a/_site/stephanie-collar/index.html b/_site/stephanie-collar/index.html index 0581971b..12e254d8 100644 --- a/_site/stephanie-collar/index.html +++ b/_site/stephanie-collar/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                            stephanie collar

                                                                                                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + + + A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + + A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring.

                                                                                                                                                                                                                                                                            1" wide collar with nickel fittings and a 2" o-ring. sturdy 8/9oz leather.

                                                                                                                                                                                                                                                                            @@ -1481,45 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                                                              o-ring bracelet

                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                              aaron's mask

                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                              - A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
                                                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                                                              tooled leather patches

                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                              nine pocket bifold

                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                              - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + 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.
                                                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                                                              mousie

                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                              leaf patches

                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                              - A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                                                                                                                                                                                                                              4. @@ -1555,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/stickers/index.html b/_site/stickers/index.html index ba421155..5054772a 100644 --- a/_site/stickers/index.html +++ b/_site/stickers/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                              stickers!

                                                                                                                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - Clear and holographic stickers in the same design - a smiling skull with speech bubble reading 'trans rights!' + + + Clear and holographic stickers in the same design - a smiling skull with speech bubble reading 'trans rights!' + + Clear and holographic stickers in the same design - a smiling skull with speech bubble reading 'trans rights!'

                                                                                                                                                                                                                                                                              Clear and holographic stickers ordered through DieCutStickers. See the stickers tag to view available designs.

                                                                                                                                                                                                                                                                              @@ -1495,21 +1606,23 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                                anarchy autism

                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                trans wrongs skull

                                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                - A print in rainbow ink that says autism with the anarchy A. + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
                                                                                                                                                                                                                                                                                2. @@ -1537,23 +1650,23 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                                                                girldick (mature)

                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                trans rights skull

                                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                                                - A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
                                                                                                                                                                                                                                                                                3. @@ -1589,6 +1702,6 @@ export { HeadingAnchors } - + diff --git a/_site/striped-journal/index.html b/_site/striped-journal/index.html index 83f408b8..992e9f4a 100644 --- a/_site/striped-journal/index.html +++ b/_site/striped-journal/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                striped journal

                                                                                                                                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A three panel collage showcasing a journal with a striped cover. + + + A three panel collage showcasing a journal with a striped cover. + + A three panel collage showcasing a journal with a striped cover.

                                                                                                                                                                                                                                                                                A leather spine journal with a striped front cover and navy back cover. It includes both blank pages and fold-out coloring pages from Fantastic Cities by Steve McDonald.

                                                                                                                                                                                                                                                                                @@ -1498,45 +1609,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                                                  brooke's notebook

                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                  tiny books

                                                                                                                                                                                                                                                                                  • book
                                                                                                                                                                                                                                                                                    • -
                                                                                                                                                                                                                                                                                  • highlight
                                                                                                                                                                                                                                                                                    • -
                                                                                                                                                                                                                                                                                  - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + A three panel collage showing a book held in the palm of a hand.
                                                                                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                                                                                  Acadia coloring journal

                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                  flocked notebook

                                                                                                                                                                                                                                                                                  • book
                                                                                                                                                                                                                                                                                  - A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + A two panel collage showing the cover and endpapers of a thick notebook.
                                                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                                                  baseball journal

                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                  leather long-stitch journals

                                                                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                                                  • book
                                                                                                                                                                                                                                                                                  - A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                                                                                                                  4. @@ -1572,6 +1683,6 @@ export { HeadingAnchors } - + diff --git a/_site/style/index.html b/_site/style/index.html index e367d922..b3b43c5a 100644 --- a/_site/style/index.html +++ b/_site/style/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1117,6 +1116,6 @@ This is supposed to be a new paragraph, but it isn't.

                                                                                                                                                                                                                                                                                  - + diff --git a/_site/sunflower/index.html b/_site/sunflower/index.html index 4342f6b9..f60ac37b 100644 --- a/_site/sunflower/index.html +++ b/_site/sunflower/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                  sunflower

                                                                                                                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . + + + A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . + + A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center .

                                                                                                                                                                                                                                                                                  Commission piece.

                                                                                                                                                                                                                                                                                  @@ -1481,15 +1592,29 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                                    leaf patches

                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                    vertical zipper card wallet

                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                    - Several oak-leaf-shaped leather patches with stitching holes punched around the edges. + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + +                                                                                                                                                                                                                                                                                     +
                                                                                                                                                                                                                                                                                    2. + +
                                                                                                                                                                                                                                                                                  2. + +

                                                                                                                                                                                                                                                                                    triangle pouch

                                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                                    + 5 small triangular pouches made of leather in two sizes and various colors.
                                                                                                                                                                                                                                                                                    3. @@ -1508,22 +1633,6 @@ export { HeadingAnchors } -
                                                                                                                                                                                                                                                                                  3. - -

                                                                                                                                                                                                                                                                                    designing a bag

                                                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                                                    • software
                                                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                                                    - 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. - -                                                                                                                                                                                                                                                                                     -
                                                                                                                                                                                                                                                                                    4. -
                                                                                                                                                                                                                                                                                  @@ -1555,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/swallowtail-on-snowdrops/index.html b/_site/swallowtail-on-snowdrops/index.html index e546f1ba..23085190 100644 --- a/_site/swallowtail-on-snowdrops/index.html +++ b/_site/swallowtail-on-snowdrops/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                  swallowtail on snowdrops

                                                                                                                                                                                                                                                                                  @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + + + A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + + A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower.

                                                                                                                                                                                                                                                                                  Photographed in the backyard.

                                                                                                                                                                                                                                                                                  @@ -1498,43 +1609,47 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                                    squarsh

                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                    not a drill

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

                                                                                                                                                                                                                                                                                    become unbutterable

                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                    kniphofia

                                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                                    - 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.' + A print of a brightly colored flower in 4 layers of color
                                                                                                                                                                                                                                                                                  3. - -

                                                                                                                                                                                                                                                                                    loon

                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                    killdeer

                                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                                    - A print of a loon rearing up with wings spread + A print of a killdeer in black ink.
                                                                                                                                                                                                                                                                                    4. @@ -1570,6 +1685,6 @@ export { HeadingAnchors } - + diff --git a/_site/swoop-wallet/index.html b/_site/swoop-wallet/index.html index 5888a50f..a8e1b12a 100644 --- a/_site/swoop-wallet/index.html +++ b/_site/swoop-wallet/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                    swoop wallet

                                                                                                                                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                                                    A card wallet.

                                                                                                                                                                                                                                                                                    @@ -1481,43 +1592,47 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                                                      brooke's suspenders

                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                      leather long-stitch journals

                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                                                      - 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. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                                                                                      bag strap

                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                      designing a bag

                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                                                      • software
                                                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                                                      - A nylon webbing shoulder strap in bright teal with clips on each end. + 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.
                                                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                                                      sunflower

                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                      shrimp cat toy

                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                      - A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange.
                                                                                                                                                                                                                                                                                      4. @@ -1553,6 +1668,6 @@ export { HeadingAnchors } - + diff --git a/_site/tag/all/index.html b/_site/tag/all/index.html index 7e89972d..97596588 100644 --- a/_site/tag/all/index.html +++ b/_site/tag/all/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/blur/index.html b/_site/tag/blur/index.html index 98f2e965..15a6ce0e 100644 --- a/_site/tag/blur/index.html +++ b/_site/tag/blur/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/book/index.html b/_site/tag/book/index.html index 44dad751..bd132c5e 100644 --- a/_site/tag/book/index.html +++ b/_site/tag/book/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/card/index.html b/_site/tag/card/index.html index a944352e..09d842ba 100644 --- a/_site/tag/card/index.html +++ b/_site/tag/card/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/gallery/index.html b/_site/tag/gallery/index.html index 0ac6ff51..9481ae49 100644 --- a/_site/tag/gallery/index.html +++ b/_site/tag/gallery/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/gender/index.html b/_site/tag/gender/index.html index dd49987c..8bdac5c0 100644 --- a/_site/tag/gender/index.html +++ b/_site/tag/gender/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/highlight/index.html b/_site/tag/highlight/index.html index ac53cbb7..323f1d69 100644 --- a/_site/tag/highlight/index.html +++ b/_site/tag/highlight/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/knit/index.html b/_site/tag/knit/index.html index e0f10a79..289afbfa 100644 --- a/_site/tag/knit/index.html +++ b/_site/tag/knit/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/leather/index.html b/_site/tag/leather/index.html index 08fc214f..a501510a 100644 --- a/_site/tag/leather/index.html +++ b/_site/tag/leather/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/patch/index.html b/_site/tag/patch/index.html index eb7d8f3d..dd4bcfdd 100644 --- a/_site/tag/patch/index.html +++ b/_site/tag/patch/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/pin/index.html b/_site/tag/pin/index.html index 509510ab..05afbb5f 100644 --- a/_site/tag/pin/index.html +++ b/_site/tag/pin/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/posts/index.html b/_site/tag/posts/index.html index 7576040a..08241fed 100644 --- a/_site/tag/posts/index.html +++ b/_site/tag/posts/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/print/index.html b/_site/tag/print/index.html index 7b095806..2153df4b 100644 --- a/_site/tag/print/index.html +++ b/_site/tag/print/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/reference/index.html b/_site/tag/reference/index.html index 8e99bdbc..c88aa851 100644 --- a/_site/tag/reference/index.html +++ b/_site/tag/reference/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/shirt/index.html b/_site/tag/shirt/index.html index 0bc59187..56cb40a4 100644 --- a/_site/tag/shirt/index.html +++ b/_site/tag/shirt/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/software/index.html b/_site/tag/software/index.html index 7aad281b..5a16a085 100644 --- a/_site/tag/software/index.html +++ b/_site/tag/software/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/stationery/index.html b/_site/tag/stationery/index.html index 20e45b0e..c9abea10 100644 --- a/_site/tag/stationery/index.html +++ b/_site/tag/stationery/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/sticker/index.html b/_site/tag/sticker/index.html index e5aff800..05166a08 100644 --- a/_site/tag/sticker/index.html +++ b/_site/tag/sticker/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/tagpagination/index.html b/_site/tag/tagpagination/index.html index 06165fa6..f7ce024d 100644 --- a/_site/tag/tagpagination/index.html +++ b/_site/tag/tagpagination/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/yarn/index.html b/_site/tag/yarn/index.html index c5198b7a..4b1e0bf2 100644 --- a/_site/tag/yarn/index.html +++ b/_site/tag/yarn/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tag/zine/index.html b/_site/tag/zine/index.html index a0163654..af83828d 100644 --- a/_site/tag/zine/index.html +++ b/_site/tag/zine/index.html @@ -211,7 +211,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -780,6 +779,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/book/2/index.html b/_site/tags/book/2/index.html index f302fd00..d8f47af1 100644 --- a/_site/tags/book/2/index.html +++ b/_site/tags/book/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1058,6 +1057,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/book/index.html b/_site/tags/book/index.html index 6c64cebd..4044442b 100644 --- a/_site/tags/book/index.html +++ b/_site/tags/book/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1216,6 +1215,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/card/2/index.html b/_site/tags/card/2/index.html index 81aeec3c..44b8f475 100644 --- a/_site/tags/card/2/index.html +++ b/_site/tags/card/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1266,6 +1265,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/card/3/index.html b/_site/tags/card/3/index.html index 95f6c747..1895847e 100644 --- a/_site/tags/card/3/index.html +++ b/_site/tags/card/3/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1096,6 +1095,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/card/index.html b/_site/tags/card/index.html index 10d39af4..6b0eecaf 100644 --- a/_site/tags/card/index.html +++ b/_site/tags/card/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1270,6 +1269,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/gender/2/index.html b/_site/tags/gender/2/index.html index 93a40eaf..f2599b77 100644 --- a/_site/tags/gender/2/index.html +++ b/_site/tags/gender/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1282,6 +1281,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/gender/3/index.html b/_site/tags/gender/3/index.html index db2c3366..736af9db 100644 --- a/_site/tags/gender/3/index.html +++ b/_site/tags/gender/3/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1126,6 +1125,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/gender/index.html b/_site/tags/gender/index.html index ba7b5f11..679a9d84 100644 --- a/_site/tags/gender/index.html +++ b/_site/tags/gender/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1236,6 +1235,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/highlight/index.html b/_site/tags/highlight/index.html index 7fbf73c8..338cec01 100644 --- a/_site/tags/highlight/index.html +++ b/_site/tags/highlight/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1209,6 +1208,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/index.html b/_site/tags/index.html index 69e079b0..c0cd7c87 100644 --- a/_site/tags/index.html +++ b/_site/tags/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1487,6 +1486,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/knit/index.html b/_site/tags/knit/index.html index b28b242e..e434ffa9 100644 --- a/_site/tags/knit/index.html +++ b/_site/tags/knit/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1177,6 +1176,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/leather/2/index.html b/_site/tags/leather/2/index.html index feae69a2..c51a5ed0 100644 --- a/_site/tags/leather/2/index.html +++ b/_site/tags/leather/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1222,6 +1221,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/leather/3/index.html b/_site/tags/leather/3/index.html index 58b24304..f363f93e 100644 --- a/_site/tags/leather/3/index.html +++ b/_site/tags/leather/3/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1226,6 +1225,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/leather/4/index.html b/_site/tags/leather/4/index.html index 4dd43317..3d28d028 100644 --- a/_site/tags/leather/4/index.html +++ b/_site/tags/leather/4/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1184,6 +1183,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/leather/index.html b/_site/tags/leather/index.html index fc97f726..feba1c91 100644 --- a/_site/tags/leather/index.html +++ b/_site/tags/leather/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1218,6 +1217,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/patch/index.html b/_site/tags/patch/index.html index 98e71a6f..648e7444 100644 --- a/_site/tags/patch/index.html +++ b/_site/tags/patch/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1047,6 +1046,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/pin/index.html b/_site/tags/pin/index.html index f0c03bc0..8f924bde 100644 --- a/_site/tags/pin/index.html +++ b/_site/tags/pin/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1179,6 +1178,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/print/2/index.html b/_site/tags/print/2/index.html index c5a35c24..8ae9bd9f 100644 --- a/_site/tags/print/2/index.html +++ b/_site/tags/print/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1262,6 +1261,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/print/3/index.html b/_site/tags/print/3/index.html index e329ded3..bc007016 100644 --- a/_site/tags/print/3/index.html +++ b/_site/tags/print/3/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1274,6 +1273,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/print/4/index.html b/_site/tags/print/4/index.html index 6443889c..0b323955 100644 --- a/_site/tags/print/4/index.html +++ b/_site/tags/print/4/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1262,6 +1261,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/print/5/index.html b/_site/tags/print/5/index.html index 4aa03773..d672f722 100644 --- a/_site/tags/print/5/index.html +++ b/_site/tags/print/5/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1128,6 +1127,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/print/index.html b/_site/tags/print/index.html index d6689a2c..0ae59346 100644 --- a/_site/tags/print/index.html +++ b/_site/tags/print/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1232,6 +1231,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/shirt/2/index.html b/_site/tags/shirt/2/index.html index 82027baa..0bf3cccb 100644 --- a/_site/tags/shirt/2/index.html +++ b/_site/tags/shirt/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1156,6 +1155,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/shirt/index.html b/_site/tags/shirt/index.html index 42d447d2..d90180e8 100644 --- a/_site/tags/shirt/index.html +++ b/_site/tags/shirt/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1264,6 +1263,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/software/2/index.html b/_site/tags/software/2/index.html index 57902bd6..ce79ac0c 100644 --- a/_site/tags/software/2/index.html +++ b/_site/tags/software/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1062,6 +1061,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/software/index.html b/_site/tags/software/index.html index fda589a5..0603fb2e 100644 --- a/_site/tags/software/index.html +++ b/_site/tags/software/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1216,6 +1215,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/stationery/index.html b/_site/tags/stationery/index.html index d460eade..dd4f2a8b 100644 --- a/_site/tags/stationery/index.html +++ b/_site/tags/stationery/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1057,6 +1056,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/sticker/index.html b/_site/tags/sticker/index.html index c65f5054..a2a6fb19 100644 --- a/_site/tags/sticker/index.html +++ b/_site/tags/sticker/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1179,6 +1178,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/yarn/2/index.html b/_site/tags/yarn/2/index.html index 32782891..da5028e1 100644 --- a/_site/tags/yarn/2/index.html +++ b/_site/tags/yarn/2/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1072,6 +1071,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/yarn/index.html b/_site/tags/yarn/index.html index 43a68b50..806f5ad1 100644 --- a/_site/tags/yarn/index.html +++ b/_site/tags/yarn/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1212,6 +1211,6 @@ footer a:focus-visible { - + diff --git a/_site/tags/zine/index.html b/_site/tags/zine/index.html index ddb2a22d..77d02b2e 100644 --- a/_site/tags/zine/index.html +++ b/_site/tags/zine/index.html @@ -434,7 +434,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1079,6 +1078,6 @@ footer a:focus-visible { - + diff --git a/_site/textures-unite/index.html b/_site/textures-unite/index.html index 20a77c47..fa0373bb 100644 --- a/_site/textures-unite/index.html +++ b/_site/textures-unite/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                      textures unite

                                                                                                                                                                                                                                                                                      @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                                                      pattern by stephen west.

                                                                                                                                                                                                                                                                                      @@ -1486,6 +1597,20 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                                                                      1. + +

                                                                                                                                                                                                                                                                                        brooke's scarf

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

                                                                                                                                                                                                                                                                                      2. acadia mitts

                                                                                                                                                                                                                                                                                        @@ -1501,33 +1626,15 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                                                                                                        sideways canvas shirt

                                                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                                                        knit shrimp

                                                                                                                                                                                                                                                                                        • knit
                                                                                                                                                                                                                                                                                        - 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. - -                                                                                                                                                                                                                                                                                         -
                                                                                                                                                                                                                                                                                        4. - -
                                                                                                                                                                                                                                                                                      4. - -

                                                                                                                                                                                                                                                                                        greeting loons

                                                                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                                                                                        • card
                                                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                                                        • highlight
                                                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                                                        - A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.
                                                                                                                                                                                                                                                                                        5. @@ -1563,6 +1670,6 @@ export { HeadingAnchors } - + diff --git a/_site/tiny-books/index.html b/_site/tiny-books/index.html index c00434eb..364967b8 100644 --- a/_site/tiny-books/index.html +++ b/_site/tiny-books/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                        tiny books

                                                                                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A three panel collage showing a book held in the palm of a hand. + + + A three panel collage showing a book held in the palm of a hand. + + A three panel collage showing a book held in the palm of a hand.

                                                                                                                                                                                                                                                                                        Tiny leather-wrapped books in various colorations.

                                                                                                                                                                                                                                                                                        @@ -1496,43 +1607,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                                                          green memo pad

                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                          orange green journal

                                                                                                                                                                                                                                                                                          • book
                                                                                                                                                                                                                                                                                          - A three panel collage showcasing a small green memo pad. + A 4-part collage of a slim handbound book.
                                                                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                                                                          Acadia coloring journal

                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                          flocked notebook

                                                                                                                                                                                                                                                                                          • book
                                                                                                                                                                                                                                                                                          - A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + A two panel collage showing the cover and endpapers of a thick notebook.
                                                                                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                                                                                          blue and brown leather journal

                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                          lined notebook

                                                                                                                                                                                                                                                                                          • book
                                                                                                                                                                                                                                                                                          - A three panel collage showcasing a blue and brown leather-covered journal. + A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook.
                                                                                                                                                                                                                                                                                          4. @@ -1568,6 +1679,6 @@ export { HeadingAnchors } - + diff --git a/_site/tiny-mushrooms/index.html b/_site/tiny-mushrooms/index.html index db9b0049..927ea8d9 100644 --- a/_site/tiny-mushrooms/index.html +++ b/_site/tiny-mushrooms/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                          tiny mushrooms

                                                                                                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                                                          some tiny mushrooms for a friend

                                                                                                                                                                                                                                                                                          @@ -1481,42 +1592,8 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                                                            slightly weird man club

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

                                                                                                                                                                                                                                                                                            not a drill

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

                                                                                                                                                                                                                                                                                            fat raccoon

                                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                                            stellar's jay

                                                                                                                                                                                                                                                                                              @@ -1527,7 +1604,41 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                                                                                            - A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + +                                                                                                                                                                                                                                                                                             +
                                                                                                                                                                                                                                                                                            4. + +
                                                                                                                                                                                                                                                                                          4. + +

                                                                                                                                                                                                                                                                                            coming out

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

                                                                                                                                                                                                                                                                                            artisans cooperative cards

                                                                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                                                                                            + 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
                                                                                                                                                                                                                                                                                            6. @@ -1563,6 +1674,6 @@ export { HeadingAnchors } - + diff --git a/_site/tiny-portraits/index.html b/_site/tiny-portraits/index.html index 970c466e..c46120b2 100644 --- a/_site/tiny-portraits/index.html +++ b/_site/tiny-portraits/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                            tiny portraits

                                                                                                                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A collage showing various small (around an inch) stamps that depict people or animals. + + + A collage showing various small (around an inch) stamps that depict people or animals. + + A collage showing various small (around an inch) stamps that depict people or animals.

                                                                                                                                                                                                                                                                                            currently offering these free in the shop with the code FREESTAMP

                                                                                                                                                                                                                                                                                            @@ -1481,26 +1592,26 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                                                                              greeting loons

                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                              nonbinary flag

                                                                                                                                                                                                                                                                                                -
                                                                                                                                                                                                                                                                                              • card
                                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                                              • highlight
                                                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                                                              • card
                                                                                                                                                                                                                                                                                                • + +
                                                                                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                                                                              - A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
                                                                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                                                                              geese

                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                              foxgloves

                                                                                                                                                                                                                                                                                                @@ -1511,25 +1622,23 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                              • shirt
                                                                                                                                                                                                                                                                                              - Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
                                                                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                                                                              heron

                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                              greeting quorbs

                                                                                                                                                                                                                                                                                                -
                                                                                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                                              • card
                                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                                              • shirt
                                                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                                                                              - A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
                                                                                                                                                                                                                                                                                              4. @@ -1565,6 +1674,6 @@ export { HeadingAnchors } - + diff --git a/_site/tooled-leather-patches/index.html b/_site/tooled-leather-patches/index.html index 68aae0e9..507c1395 100644 --- a/_site/tooled-leather-patches/index.html +++ b/_site/tooled-leather-patches/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                              tooled leather patches

                                                                                                                                                                                                                                                                                              @@ -1440,7 +1547,11 @@ export { HeadingAnchors } - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + + + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.

                                                                                                                                                                                                                                                                                              Limited number available for free in my square shop with the code "FREEPATCH"

                                                                                                                                                                                                                                                                                              @@ -1485,6 +1596,40 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                                                                              1. + +

                                                                                                                                                                                                                                                                                                little critter pouch

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

                                                                                                                                                                                                                                                                                                pronoun patches

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

                                                                                                                                                                                                                                                                                              3. lobstah

                                                                                                                                                                                                                                                                                                @@ -1499,34 +1644,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                4. -
                                                                                                                                                                                                                                                                                              4. - -

                                                                                                                                                                                                                                                                                                brooke's collar

                                                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                                                                - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. - -                                                                                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                                                                                5. - -
                                                                                                                                                                                                                                                                                              5. - -

                                                                                                                                                                                                                                                                                                bag strap

                                                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                                                                - A nylon webbing shoulder strap in bright teal with clips on each end. - -                                                                                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                                                                                6. -
                                                                                                                                                                                                                                                                                              @@ -1558,6 +1675,6 @@ export { HeadingAnchors } - + diff --git a/_site/trans-rights-skull/index.html b/_site/trans-rights-skull/index.html index 5bfd8d83..d9d264df 100644 --- a/_site/trans-rights-skull/index.html +++ b/_site/trans-rights-skull/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                              trans rights skull

                                                                                                                                                                                                                                                                                              @@ -1455,7 +1562,11 @@ export { HeadingAnchors } - A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!' + + + A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!' + + A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'

                                                                                                                                                                                                                                                                                              Hand carved stamp of a smiling skull celebrating trans rights. Available now as clear and holographic stickers!

                                                                                                                                                                                                                                                                                              @@ -1510,22 +1621,42 @@ prints/cards: black with blue and pink letters

                                                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                                                fix your hearts

                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                gender in data models

                                                                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                                                • software
                                                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                                                • highlight
                                                                                                                                                                                                                                                                                                - 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + Image unrelated to post. A light pink peony in full bloom, close up.
                                                                                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                                                                                junco

                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                bottom growth (mature)

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

                                                                                                                                                                                                                                                                                                shrimp

                                                                                                                                                                                                                                                                                                  @@ -1533,22 +1664,12 @@ prints/cards: black with blue and pink letters

                                                                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                                - A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia. - -                                                                                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                                                                                4. - -
                                                                                                                                                                                                                                                                                              4. - -

                                                                                                                                                                                                                                                                                                printmaking paper notes

                                                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                                                  +
                                                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                                                                                - Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + A print of a small shrimp with slender little leggies in orange ink.
                                                                                                                                                                                                                                                                                                5. @@ -1584,6 +1705,6 @@ prints/cards: black with blue and pink letters

                                                                                                                                                                                                                                                                                                - + diff --git a/_site/trans-the-world/index.html b/_site/trans-the-world/index.html index 934604b1..c79f3276 100644 --- a/_site/trans-the-world/index.html +++ b/_site/trans-the-world/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                trans the world

                                                                                                                                                                                                                                                                                                @@ -1445,7 +1552,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                                                                details

                                                                                                                                                                                                                                                                                                @@ -1497,26 +1608,22 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                                                                  pronoun patches

                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                  brown creeper

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

                                                                                                                                                                                                                                                                                                  congrats on the gay

                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                  stellar's jay

                                                                                                                                                                                                                                                                                                    @@ -1524,32 +1631,26 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                  • card
                                                                                                                                                                                                                                                                                                    • -
                                                                                                                                                                                                                                                                                                  • gender
                                                                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                                                                  • shirt
                                                                                                                                                                                                                                                                                                  - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch
                                                                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                                                                  trans rights skull

                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                  pride dice bags

                                                                                                                                                                                                                                                                                                    -
                                                                                                                                                                                                                                                                                                  • print
                                                                                                                                                                                                                                                                                                    • - -
                                                                                                                                                                                                                                                                                                  • card
                                                                                                                                                                                                                                                                                                    • - -
                                                                                                                                                                                                                                                                                                  • sticker
                                                                                                                                                                                                                                                                                                    • - -
                                                                                                                                                                                                                                                                                                  • pin
                                                                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                                                                  • knit
                                                                                                                                                                                                                                                                                                  • gender
                                                                                                                                                                                                                                                                                                  - A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!' + 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.
                                                                                                                                                                                                                                                                                                  4. @@ -1585,6 +1686,6 @@ export { HeadingAnchors } - + diff --git a/_site/trans-wrongs-skull/index.html b/_site/trans-wrongs-skull/index.html index 93ed93bd..594e63b0 100644 --- a/_site/trans-wrongs-skull/index.html +++ b/_site/trans-wrongs-skull/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                  trans wrongs skull

                                                                                                                                                                                                                                                                                                  @@ -1455,7 +1562,11 @@ export { HeadingAnchors } - A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + + + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'

                                                                                                                                                                                                                                                                                                  A complement to trans rights skull.

                                                                                                                                                                                                                                                                                                  @@ -1508,53 +1619,47 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                                                    spotted towhee

                                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                                    gender in data models

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

                                                                                                                                                                                                                                                                                                    tooled leather patches

                                                                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                                                    • software
                                                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                                                    • highlight
                                                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                                                    - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + Image unrelated to post. A light pink peony in full bloom, close up.
                                                                                                                                                                                                                                                                                                  3. - -

                                                                                                                                                                                                                                                                                                    anarchy autism

                                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                                    euphorbia

                                                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                                                                    • sticker
                                                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                                                    + A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers. + +                                                                                                                                                                                                                                                                                                     +
                                                                                                                                                                                                                                                                                                    4. + +
                                                                                                                                                                                                                                                                                                  4. + +

                                                                                                                                                                                                                                                                                                    printmaking paper notes

                                                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                                                      -
                                                                                                                                                                                                                                                                                                    • shirt
                                                                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                                                                    • pin
                                                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                                                    - A print in rainbow ink that says autism with the anarchy A. + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
                                                                                                                                                                                                                                                                                                    5. @@ -1590,6 +1695,6 @@ export { HeadingAnchors } - + diff --git a/_site/triangle-pouch/index.html b/_site/triangle-pouch/index.html index fe6e5ad2..114a573b 100644 --- a/_site/triangle-pouch/index.html +++ b/_site/triangle-pouch/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                    triangle pouch

                                                                                                                                                                                                                                                                                                    @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 5 small triangular pouches made of leather in two sizes and various colors. + + + 5 small triangular pouches made of leather in two sizes and various colors. + + 5 small triangular pouches made of leather in two sizes and various colors.

                                                                                                                                                                                                                                                                                                    there's snaps on both sides.

                                                                                                                                                                                                                                                                                                    @@ -1481,45 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                                                                      leather long-stitch journals

                                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                                      leatherworking favorites

                                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                                        • -
                                                                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                                                                        • -
                                                                                                                                                                                                                                                                                                      - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black.
                                                                                                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                                                                                                      leather keychains

                                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                                      bowtie

                                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                                      - 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'. + A black leather bow tie with black stitching.
                                                                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                                                                      rachel's bracelets

                                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                                      mousie

                                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                                      - Two pink leather bracelets with stainless steel hardware and aqua stitching. + A cat in a sunbeam snuggles a little leather mouse-shaped cat toy.
                                                                                                                                                                                                                                                                                                      4. @@ -1555,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/vertical-bifold/index.html b/_site/vertical-bifold/index.html index 8c474200..f0b1e656 100644 --- a/_site/vertical-bifold/index.html +++ b/_site/vertical-bifold/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                      vertical bifold

                                                                                                                                                                                                                                                                                                      @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket. + + + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket. + + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.

                                                                                                                                                                                                                                                                                                      a vertical bifold. full grain leather, hand-stitched.

                                                                                                                                                                                                                                                                                                      @@ -1480,20 +1591,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                        -
                                                                                                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                                                                                                        leather keychains

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

                                                                                                                                                                                                                                                                                                      2. bag strap

                                                                                                                                                                                                                                                                                                        @@ -1509,15 +1606,29 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                                                                                                                        double bill pocket bifold

                                                                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                                                                        snap pouch

                                                                                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                                                                                        - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + +                                                                                                                                                                                                                                                                                                         +
                                                                                                                                                                                                                                                                                                        4. + +
                                                                                                                                                                                                                                                                                                      4. + +

                                                                                                                                                                                                                                                                                                        zipper bifold (green)

                                                                                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                                                                                                        + A collage showing a green leather wallet with a zippered pocket built into one external side.
                                                                                                                                                                                                                                                                                                        5. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/vertical-card-wallet/index.html b/_site/vertical-card-wallet/index.html index fba8d876..4d7e93f7 100644 --- a/_site/vertical-card-wallet/index.html +++ b/_site/vertical-card-wallet/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                        vertical card wallet

                                                                                                                                                                                                                                                                                                        @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket. + + + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket. + + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.

                                                                                                                                                                                                                                                                                                        simple vertical card wallet. full grain leather, hand-stitched.

                                                                                                                                                                                                                                                                                                        @@ -1481,15 +1592,15 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                                                                          bag strap

                                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                                          aaron's mask

                                                                                                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                                                                                                          - A nylon webbing shoulder strap in bright teal with clips on each end. + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
                                                                                                                                                                                                                                                                                                          2. @@ -1509,15 +1620,15 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                                                                                          triangle pouch

                                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                                          foldy wallet

                                                                                                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                                                                                                          - 5 small triangular pouches made of leather in two sizes and various colors. + A four part collage showing a single piece of deep red leather folding up to become a card wallet.
                                                                                                                                                                                                                                                                                                          3. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/vertical-zipper-card-wallet/index.html b/_site/vertical-zipper-card-wallet/index.html index 999305f0..8b28575f 100644 --- a/_site/vertical-zipper-card-wallet/index.html +++ b/_site/vertical-zipper-card-wallet/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                          vertical zipper card wallet

                                                                                                                                                                                                                                                                                                          @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + + + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.

                                                                                                                                                                                                                                                                                                          vertical card wallet with a zippered pocket. full grain leather, hand-stitched.

                                                                                                                                                                                                                                                                                                          @@ -1481,45 +1592,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                                                                            designing a bag

                                                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                                                            o-ring bracelet

                                                                                                                                                                                                                                                                                                            • leather
                                                                                                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                                                                                                            • software
                                                                                                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                                                                                                            - 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. + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps.
                                                                                                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                                                                                                            brooke's cuff bracelets

                                                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                                                            tooled leather patches

                                                                                                                                                                                                                                                                                                            • leather
                                                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                                                            - Olive green leather cuffs with silver spikes and a shearling lining. + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                                                                                            zipper bifold (green)

                                                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                                                            vix collar

                                                                                                                                                                                                                                                                                                            • leather
                                                                                                                                                                                                                                                                                                            - A collage showing a green leather wallet with a zippered pocket built into one external side. + 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.
                                                                                                                                                                                                                                                                                                            4. @@ -1555,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/vix-collar/index.html b/_site/vix-collar/index.html index 3313a4d6..bd0a8918 100644 --- a/_site/vix-collar/index.html +++ b/_site/vix-collar/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                            vix collar

                                                                                                                                                                                                                                                                                                            @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                                                                            1.5" collar with heart shaped o-ring and shearling lining stitched in place. stainless and nickel fittings.

                                                                                                                                                                                                                                                                                                            @@ -1481,43 +1592,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                                                                                              aaron's mask

                                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                                              vertical card wallet

                                                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                                                              - A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
                                                                                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                                                                                              bag strap

                                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                                              sora's collar

                                                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                                                              - A nylon webbing shoulder strap in bright teal with clips on each end. + 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.
                                                                                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                                                                                              wrap bracelets

                                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                                              fishhook pride keychains

                                                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                                                                              - 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. + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
                                                                                                                                                                                                                                                                                                              4. @@ -1553,6 +1666,6 @@ export { HeadingAnchors } - + diff --git a/_site/wrap-bracelets/index.html b/_site/wrap-bracelets/index.html index 32ec6cce..81921aab 100644 --- a/_site/wrap-bracelets/index.html +++ b/_site/wrap-bracelets/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                              wrap bracelets

                                                                                                                                                                                                                                                                                                              @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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. @@ -1480,45 +1591,45 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                                                                dragon mask

                                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                                maker's mark keychain

                                                                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                                                • highlight
                                                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                                                - 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. + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it.
                                                                                                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                                                                                                mom bag

                                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                                vertical zipper card wallet

                                                                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                                                                - A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
                                                                                                                                                                                                                                                                                                              3. - -

                                                                                                                                                                                                                                                                                                                leather chest harness

                                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                                tooled leather patches

                                                                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                                                - Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                                                                                                                                                                                                                                                                4. @@ -1554,6 +1665,6 @@ export { HeadingAnchors } - + diff --git a/_site/x-acto-knife-sheath/index.html b/_site/x-acto-knife-sheath/index.html index 10a90655..9dcdb8dc 100644 --- a/_site/x-acto-knife-sheath/index.html +++ b/_site/x-acto-knife-sheath/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                                x-acto knife sheath

                                                                                                                                                                                                                                                                                                                @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - 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. + + + 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. + + 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.

                                                                                                                                                                                                                                                                                                                tiny knife sheath.

                                                                                                                                                                                                                                                                                                                @@ -1481,43 +1592,43 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                                                                                  swoop wallet

                                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                                  zipper bifold (green)

                                                                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                                                                  - 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. + A collage showing a green leather wallet with a zippered pocket built into one external side.
                                                                                                                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                                                                                                                  double bill pocket bifold

                                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                                  sunflower

                                                                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                                                                  - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center .
                                                                                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                                                                                  gradient purse strap

                                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                                  zipper bifold

                                                                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                                                                  - 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. + A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
                                                                                                                                                                                                                                                                                                                  4. @@ -1553,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/zipper-bifold-green/index.html b/_site/zipper-bifold-green/index.html index cb3685cc..a3e9a29c 100644 --- a/_site/zipper-bifold-green/index.html +++ b/_site/zipper-bifold-green/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +

                                                                                                                                                                                                                                                                                                                  zipper bifold (green)

                                                                                                                                                                                                                                                                                                                  @@ -1435,7 +1542,11 @@ export { HeadingAnchors } - A collage showing a green leather wallet with a zippered pocket built into one external side. + + + A collage showing a green leather wallet with a zippered pocket built into one external side. + + A collage showing a green leather wallet with a zippered pocket built into one external side.

                                                                                                                                                                                                                                                                                                                  Iteration on the zipper bifold.

                                                                                                                                                                                                                                                                                                                  @@ -1480,36 +1591,6 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                                    -
                                                                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                                                                    dragon mask

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

                                                                                                                                                                                                                                                                                                                    vertical zipper card wallet

                                                                                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                                                                                    - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. - -                                                                                                                                                                                                                                                                                                                     -
                                                                                                                                                                                                                                                                                                                    3. -

                                                                                                                                                                                                                                                                                                                  3. leather lighter case

                                                                                                                                                                                                                                                                                                                    @@ -1524,6 +1605,34 @@ export { HeadingAnchors }
                                                                                                                                                                                                                                                                                                                    4. +
                                                                                                                                                                                                                                                                                                                  4. + +

                                                                                                                                                                                                                                                                                                                    zipper bifold

                                                                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                                                                    + A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side. + +                                                                                                                                                                                                                                                                                                                     +
                                                                                                                                                                                                                                                                                                                    5. + +
                                                                                                                                                                                                                                                                                                                  5. + +

                                                                                                                                                                                                                                                                                                                    stephanie collar

                                                                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                                                      • + +
                                                                                                                                                                                                                                                                                                                    + A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + +                                                                                                                                                                                                                                                                                                                     +
                                                                                                                                                                                                                                                                                                                    6. +
                                                                                                                                                                                                                                                                                                                  @@ -1555,6 +1664,6 @@ export { HeadingAnchors } - + diff --git a/_site/zipper-bifold/index.html b/_site/zipper-bifold/index.html index f510e859..1354a119 100644 --- a/_site/zipper-bifold/index.html +++ b/_site/zipper-bifold/index.html @@ -457,6 +457,90 @@ pre[class*=language-]::selection { .tag:nth-child(odd) p { text-align: right; } +img[tabindex="0"]:focus-visible { + outline: .15rem solid var(--color-teal); +} + +dialog { + margin: auto; + flex-flow: column; + background: transparent; + border: none; + position: absolute; +} + +dialog[open] { + display: flex; +} + +dialog::backdrop { + background-color: rgba(from var(--color-bg) r g b / .8); + backdrop-filter: blur(4px); +} + +body:has(dialog[open]) { + overflow: hidden; +} + +.close-dialog { + background-color: rgba(from var(--color-teal) r g b / .2); + font-size: 1.5rem; + padding: 0 .5rem .15rem; + border-radius: 1rem; + color: var(--color-teal); + box-shadow: .15rem .15rem var(--color-shadow); + border: .08rem solid var(--color-teal); + align-self: flex-end; + justify-self: flex-start; + margin: 0 .1rem; + /* Click animation handling */ + position: relative; + top: 1rem; + left: -.15rem; + transition: top .1s ease-in, left .1s ease-in; +} + +.close-dialog:focus-visible { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); +} + +@media (any-hover: hover) { + .close-dialog:hover { + outline: none; + background-color: var(--color-teal); + color: var(--color-bg); + } +} + +@media (forced-colors: active) { + .close-dialog:focus-visible { + outline-offset: .08rem; + outline: .08rem solid; + } + + @media (any-hover: hover) { + .close-dialog:hover { + outline-offset: .08rem; + outline: .08rem solid; + } + } +} + +/* Click animation */ +.close-dialog:active { + top: 1.1rem; + left: -.05rem; + box-shadow: .05rem .05rem var(--color-shadow); +} + +.modal-img { + max-height: calc(90vh - 2rem); + object-fit: contain; + width: auto; + margin: 0 1rem; +} :root { color-scheme: light dark; @@ -637,7 +721,6 @@ span.ha-placeholder { opacity: .55; } - /* Lists */ ::marker { color: var(--color-pink); @@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement { HeadingAnchors.register(); -export { HeadingAnchors } +export { HeadingAnchors } +/* don't even bother on mobile */ +if (window.innerWidth > 650) { + const dialog = document.querySelector("dialog"); + const closeButton = document.querySelector(".close-dialog"); + const hero = document.querySelector(".hero"); + + hero.addEventListener("click", (e) => dialog.showModal()); + hero.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.showModal(); + } + }); + + closeButton.addEventListener("click", (e) => dialog.close()); + closeButton.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + dialog.close(); + } + }); +} @@ -1411,6 +1516,8 @@ export { HeadingAnchors } + +