diff --git a/1/index.html b/1/index.html index 5f4e2fad..951688da 100644 --- a/1/index.html +++ b/1/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1352,9 +1500,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/10/index.html b/10/index.html index 29b966ac..0e0bde4e 100644 --- a/10/index.html +++ b/10/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1396,9 +1544,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/11/index.html b/11/index.html index cc0ec6fa..68b097d3 100644 --- a/11/index.html +++ b/11/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1374,9 +1522,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/12/index.html b/12/index.html index 2e8fab5a..92a4460c 100644 --- a/12/index.html +++ b/12/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1384,9 +1532,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/13/index.html b/13/index.html index c7154c25..3f88247b 100644 --- a/13/index.html +++ b/13/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1376,9 +1524,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/14/index.html b/14/index.html index b8c44804..edc6dccc 100644 --- a/14/index.html +++ b/14/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1354,9 +1502,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/15/index.html b/15/index.html index 63951a19..a6840d4b 100644 --- a/15/index.html +++ b/15/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1238,9 +1386,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/2/index.html b/2/index.html index 50369e17..0b3bb677 100644 --- a/2/index.html +++ b/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1354,9 +1502,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/3/index.html b/3/index.html index 647ce0a4..de56002b 100644 --- a/3/index.html +++ b/3/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1354,9 +1502,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/4/index.html b/4/index.html index 307e0799..901846f1 100644 --- a/4/index.html +++ b/4/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1364,9 +1512,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/404.html b/404.html index eb0db722..5b1cf157 100644 --- a/404.html +++ b/404.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,6 +945,8 @@ pre[class*=language-]::selection { } } + + +export { HeadingAnchors } +const THEME = "theme"; + +const saveTheme = (themeValue) => { + localStorage.setItem(THEME, themeValue); +}; + +const themeLight = document.getElementById("theme-light"); +themeLight.addEventListener("input", (e) => { + saveTheme(themeLight.value); +}); + +const themeAuto = document.getElementById("theme-auto"); +themeAuto.addEventListener("input", (e) => { + saveTheme(themeAuto.auto); +}); + +const themeDark = document.getElementById("theme-dark"); +themeDark.addEventListener("input", (e) => { + saveTheme(themeDark.value); +}); + +var currentThemeValue = localStorage.getItem(THEME); +switch (currentThemeValue) { + case "light": + themeLight.checked = true; + break; + case "auto": + themeAuto.checked = true; + break; + case "dark": + themeDark.checked = true; + break; + default: + themeAuto.checked = true; +} @@ -1148,9 +1297,30 @@ export { HeadingAnchors } + +
+ color scheme + + + + + + + + + +
- + diff --git a/5/index.html b/5/index.html index b4180aaf..6a618632 100644 --- a/5/index.html +++ b/5/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1354,9 +1502,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/6/index.html b/6/index.html index 4ed495b0..345e55b0 100644 --- a/6/index.html +++ b/6/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1352,9 +1500,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/7/index.html b/7/index.html index 4b7d305b..fa552307 100644 --- a/7/index.html +++ b/7/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1362,9 +1510,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/8/index.html b/8/index.html index 22fdab9b..053f83f7 100644 --- a/8/index.html +++ b/8/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1354,9 +1502,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/9/index.html b/9/index.html index 90e1b25e..8d2e60ab 100644 --- a/9/index.html +++ b/9/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1358,9 +1506,30 @@ pre[class*=language-]::selection { + +
+ color scheme + + + + + + + + + +
- + diff --git a/aarons-mask/index.html b/aarons-mask/index.html index 77315286..49c330a8 100644 --- a/aarons-mask/index.html +++ b/aarons-mask/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
  1. - -

    foldy wallet with thumb slide

    +     +

    foldy wallet

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

    mouse coin purse

    +     +

    leatherworking favorites

    • leather
    - 2 image collage. Both images show different sides of a small black leather mouse-shaped coin purse. There is a rainbow zipper that travels along the 'spine' of the mouse, and the zipper pull becomes the tail. + 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.
  3. - -

    x-acto knife sheath

    +     +

    brooke's collar

    • leather
    - 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. + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.
    4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
    + color scheme + + + + + + + + + +
    - + diff --git a/about/index.html b/about/index.html index 3c7f3a15..1e61c2f6 100644 --- a/about/index.html +++ b/about/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,6 +945,8 @@ pre[class*=language-]::selection { } } + + +export { HeadingAnchors } +const THEME = "theme"; + +const saveTheme = (themeValue) => { + localStorage.setItem(THEME, themeValue); +}; + +const themeLight = document.getElementById("theme-light"); +themeLight.addEventListener("input", (e) => { + saveTheme(themeLight.value); +}); + +const themeAuto = document.getElementById("theme-auto"); +themeAuto.addEventListener("input", (e) => { + saveTheme(themeAuto.auto); +}); + +const themeDark = document.getElementById("theme-dark"); +themeDark.addEventListener("input", (e) => { + saveTheme(themeDark.value); +}); + +var currentThemeValue = localStorage.getItem(THEME); +switch (currentThemeValue) { + case "light": + themeLight.checked = true; + break; + case "auto": + themeAuto.checked = true; + break; + case "dark": + themeDark.checked = true; + break; + default: + themeAuto.checked = true; +} @@ -1265,9 +1414,30 @@ export { HeadingAnchors } + +
    + color scheme + + + + + + + + + +
    - + diff --git a/acadia-coloring-journal/index.html b/acadia-coloring-journal/index.html index 0d79ee5b..5ad14150 100644 --- a/acadia-coloring-journal/index.html +++ b/acadia-coloring-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,45 +1775,45 @@ if (window.innerWidth > 650) {
    1. - -

      baseball journal

      +       +

      flocked notebook

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

      striped journal

      +       +

      orange journal

      • book
      - A three panel collage showcasing a journal with a striped cover. + A three panel collage showcasing a small book with foldout pages and a bright orange cover.
    3. - -

      black and red journal

      +       +

      leather long-stitch journals

        -
      • book
        • -
      • leather
        • +
      • book
        • +
      - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
      4. @@ -1697,9 +1846,30 @@ if (window.innerWidth > 650) { + +
      + color scheme + + + + + + + + + +
      - + diff --git a/acadia-mitts/index.html b/acadia-mitts/index.html index 940c7fb9..82c7240e 100644 --- a/acadia-mitts/index.html +++ b/acadia-mitts/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1642,15 +1791,17 @@ if (window.innerWidth > 650) {
    4. - -

      knit shrimp

      +       +

      pride dice bags

      • knit
        • +
      • gender
        • +
      - Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + 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. @@ -1683,9 +1834,30 @@ if (window.innerWidth > 650) { + +
      + color scheme + + + + + + + + + +
      - + diff --git a/accessible-image-modals/index.html b/accessible-image-modals/index.html index 277f4c5d..3f409250 100644 --- a/accessible-image-modals/index.html +++ b/accessible-image-modals/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1668,6 +1817,36 @@ if (window.innerWidth > 650) {
        +
      1. + +

        core CSS

        + +
          + +
        • software
          • + +
        • highlight
          • + +
        + A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley. + +         +
        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. framer accessibility

        @@ -1682,36 +1861,6 @@ if (window.innerWidth > 650) {
        4. -
      4. - -

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

        visual site builders and accessibility

        - -
          - -
        • software
          • - -
        - Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus. - -         -
        6. -
      @@ -1740,9 +1889,30 @@ if (window.innerWidth > 650) { + +
      + color scheme + + + + + + + + + +
      - + diff --git a/an-intro-to-git/index.html b/an-intro-to-git/index.html index 07c8aca0..7c975db5 100644 --- a/an-intro-to-git/index.html +++ b/an-intro-to-git/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -2025,47 +2174,47 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)
      1. - -

        backend accessibility

        +         +

        moving images

        • software
        - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + 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. - -

        intro to wireframing

        +         +

        designing a bag

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

        gender in data models

        +         +

        azure locations and file crawling

          -
        • gender
          • -
        • software
        • highlight
        - Image unrelated to post. A light pink peony in full bloom, close up. + 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. @@ -2098,9 +2247,30 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push) + +
        + color scheme + + + + + + + + + +
        - + diff --git a/anarchy-autism/index.html b/anarchy-autism/index.html index d00c44b4..359a0793 100644 --- a/anarchy-autism/index.html +++ b/anarchy-autism/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1632,8 +1781,8 @@ if (window.innerWidth > 650) {
        1. - -

          shrimp

          +           +

          nonbinary flag

            @@ -1641,52 +1790,40 @@ if (window.innerWidth > 650) {
          • card
            • -
          • sticker
            • - -
          • pin
            • - -
          - A print of a small shrimp with slender little leggies in orange ink. - -           -
          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 print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
        3. - -

          greeting loons

          +           +

          five of them

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

          block printing transfer method

          + +
          • 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 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.
          5. @@ -1719,9 +1856,30 @@ if (window.innerWidth > 650) { + +
          + color scheme + + + + + + + + + +
          - + diff --git a/art-shows-and-events/index.html b/art-shows-and-events/index.html index a705da9c..00615302 100644 --- a/art-shows-and-events/index.html +++ b/art-shows-and-events/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1643,9 +1792,30 @@ if (window.innerWidth > 650) { + +
          + color scheme + + + + + + + + + +
          - + diff --git a/artisans-cooperative-cards/index.html b/artisans-cooperative-cards/index.html index f150959c..9b0e74e2 100644 --- a/artisans-cooperative-cards/index.html +++ b/artisans-cooperative-cards/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1617,22 +1766,8 @@ if (window.innerWidth > 650) {
          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. - -

            happy biHRTday

            +             +

            fat raccoon

              @@ -1640,24 +1775,40 @@ if (window.innerWidth > 650) {
            • card
              • -
            • gender
              • +
            • shirt
            - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
          3. - -

            fix your hearts

            +             +

            tiny mushrooms

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

            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.
            5. @@ -1690,9 +1841,30 @@ if (window.innerWidth > 650) { + +
            + color scheme + + + + + + + + + +
            - + diff --git a/artisans-cooperative-shirts/index.html b/artisans-cooperative-shirts/index.html index f1ceb162..f46a0b06 100644 --- a/artisans-cooperative-shirts/index.html +++ b/artisans-cooperative-shirts/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1617,6 +1766,24 @@ if (window.innerWidth > 650) {
              +
            1. + +

              slightly weird man club

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

            2. spotted towhee

              @@ -1634,37 +1801,17 @@ if (window.innerWidth > 650) {
            3. - -

              become unbutterable

              +               +

              killdeer

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

              girldick (mature)

              - -
                - -
              • print
                • - -
              • sticker
                • - -
              • shirt
                • - -
              • pin
                • - -
              • gender
                • +
              • card
              - A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + A print of a killdeer in black ink.
              5. @@ -1697,9 +1844,30 @@ if (window.innerWidth > 650) { + +
              + color scheme + + + + + + + + + +
              - + diff --git a/artists-conk/index.html b/artists-conk/index.html index 19de5bdd..4e1d00db 100644 --- a/artists-conk/index.html +++ b/artists-conk/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,9 +1769,30 @@ if (window.innerWidth > 650) { + +
              + color scheme + + + + + + + + + +
              - + diff --git a/azure-locations-and-file-crawling/index.html b/azure-locations-and-file-crawling/index.html index 2785bc68..93fd79f7 100644 --- a/azure-locations-and-file-crawling/index.html +++ b/azure-locations-and-file-crawling/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1841,49 +1990,45 @@ if (window.innerWidth > 650) {
              1. - -

                comparing text editors

                +                 +

                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. + +

                framer accessibility

                • 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 Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features.
              3. - -

                brooke's notebook

                +                 +

                accessible image modals

                  -
                • book
                  • - -
                • highlight
                  • +
                • software
                - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. - -                 -
                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. + Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth.
                5. @@ -1916,9 +2061,30 @@ if (window.innerWidth > 650) { + +
                + color scheme + + + + + + + + + +
                - + diff --git a/backend-accessibility/index.html b/backend-accessibility/index.html index 78d88129..c8cb5da0 100644 --- a/backend-accessibility/index.html +++ b/backend-accessibility/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1671,45 +1820,43 @@ if (window.innerWidth > 650) {
                1. - -

                  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.
                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. - -

                  azure locations and file crawling

                  +                   +

                  handedness toggle

                  • 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 screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left.
                  4. @@ -1742,9 +1889,30 @@ if (window.innerWidth > 650) { + +
                  + color scheme + + + + + + + + + +
                  - + diff --git a/bag-strap/index.html b/bag-strap/index.html index 643fbf0e..29f48c2b 100644 --- a/bag-strap/index.html +++ b/bag-strap/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,47 +1759,43 @@ if (window.innerWidth > 650) {
                  1. - -

                    o-ring bracelet

                    +                     +

                    swoop wallet

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

                    tooled leather patches

                    +                     +

                    nine pocket bifold

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

                    vertical zipper card wallet

                    +                     +

                    vix collar

                    • leather
                    - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + 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. @@ -1683,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                    + color scheme + + + + + + + + + +
                    - + diff --git a/baseball-journal/index.html b/baseball-journal/index.html index 2b76b630..067529fa 100644 --- a/baseball-journal/index.html +++ b/baseball-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1619,34 +1768,6 @@ if (window.innerWidth > 650) {
                      -
                    1. - -

                      tiny books

                      - -
                        - -
                      • book
                        • - -
                      - A three panel collage showing a book held in the palm of a hand. - -                       -
                      2. - -
                    2. - -

                      square watercolor pad

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

                    3. black and red journal

                      @@ -1663,6 +1784,34 @@ if (window.innerWidth > 650) {
                      4. +
                    4. + +

                      flocked notebook

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

                      Acadia coloring journal

                      + +
                        + +
                      • 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. + +                       +
                      6. +
                    @@ -1691,9 +1840,30 @@ if (window.innerWidth > 650) { + +
                    + color scheme + + + + + + + + + +
                    - + diff --git a/become-unbutterable/index.html b/become-unbutterable/index.html index eb7fd5c4..fbaf7d72 100644 --- a/become-unbutterable/index.html +++ b/become-unbutterable/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1617,42 +1766,38 @@ if (window.innerWidth > 650) {
                    1. - -

                      fat raccoon

                      +                       +

                      loon

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

                      greeting quorbs

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

                      rope (one) (mature)

                      - -
                        -
                      • print
                        • -
                      • gender
                        • -
                      - A print of a nude trans woman in an asymmetrical rope harness. + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
                    4. - -

                      artisans cooperative cards

                      +                       +

                      iris

                        @@ -1661,7 +1806,7 @@ if (window.innerWidth > 650) {
                      • 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 print of iris flowers and a bud, done in slightly varied color schemes.
                      5. @@ -1694,9 +1839,30 @@ if (window.innerWidth > 650) { + +
                      + color scheme + + + + + + + + + +
                      - + diff --git a/bfl-silk-handspun/index.html b/bfl-silk-handspun/index.html index bdc6a249..fee9f1d4 100644 --- a/bfl-silk-handspun/index.html +++ b/bfl-silk-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
                      1. - -

                        dyeing fiber

                        +                         +

                        spinner's dream 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 a lightly variegated grey yarn in about a sport or DK weight.
                      2. - -

                        petrichor handspun

                        +                         +

                        orion 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 + 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. - -

                        fire & ice handspun

                        +                         +

                        rambouillet handspun

                        • yarn
                          • +
                        • highlight
                          • +
                        - 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + 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. @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                        + color scheme + + + + + + + + + +
                        - + diff --git a/big-pidge/index.html b/big-pidge/index.html index 4251b220..55ef0cb8 100644 --- a/big-pidge/index.html +++ b/big-pidge/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,24 +1776,40 @@ if (window.innerWidth > 650) {
                        1. - -

                          artisans cooperative shirts

                          +                           +

                          greeting loons

                            -
                          • shirt
                            • +
                          • card
                          • print
                            • +
                          • highlight
                            • +
                          - 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 pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
                        2. - -

                          spotted towhee

                          +                           +

                          printmaking paper notes

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

                          flicker

                            @@ -1652,22 +1817,10 @@ if (window.innerWidth > 650) {
                          • card
                            • -
                          - A block print of a spotted towhee mid-leap. - -                           -
                          4. - -
                        4. - -

                          become unbutterable

                          - -
                            - -
                          • print
                            • +
                          • shirt
                          - 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 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).
                          5. @@ -1700,9 +1853,30 @@ if (window.innerWidth > 650) { + +
                          + color scheme + + + + + + + + + +
                          - + diff --git a/black-and-red-journal/index.html b/black-and-red-journal/index.html index 61d65907..7b568ac0 100644 --- a/black-and-red-journal/index.html +++ b/black-and-red-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1614,45 +1763,43 @@ if (window.innerWidth > 650) {
                          1. - -

                            proud dad wallet

                            - -
                              - -
                            • leather
                              • - -
                            • gender
                              • - -
                            - A brown leather wallet with a subtle trans flag stitching across the top. - -                             -
                            2. - -
                          2. - -

                            orange green journal

                            +                             +

                            leather strap journal

                            • book
                            - A 4-part collage of a slim handbound book. + A 3-part collage showing a blue journal with leather straps woven into the covers.
                          3. - -

                            mousie

                            +                             +

                            o-ring bracelet

                            • leather
                            - A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + +                             +
                            4. + +
                          4. + +

                            sunflower

                            + +
                              + +
                            • leather
                              • + +
                            + A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center .
                            5. @@ -1685,9 +1832,30 @@ if (window.innerWidth > 650) { + +
                            + color scheme + + + + + + + + + +
                            - + diff --git a/block-printing-transfer-method/index.html b/block-printing-transfer-method/index.html index 945bc64f..2499007e 100644 --- a/block-printing-transfer-method/index.html +++ b/block-printing-transfer-method/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1650,8 +1799,8 @@ if (window.innerWidth > 650) {
                            1. - -

                              junco

                              +                               +

                              seedling

                                @@ -1660,32 +1809,30 @@ if (window.innerWidth > 650) {
                              • 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 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.
                            2. - -

                              coming out

                              +                               +

                              luminescent (mature)

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

                              trans rights skull

                              +                               +

                              fat raccoon

                                @@ -1693,14 +1840,10 @@ if (window.innerWidth > 650) {
                              • 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 in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
                              4. @@ -1733,9 +1876,30 @@ if (window.innerWidth > 650) { + +
                              + color scheme + + + + + + + + + +
                              - + diff --git a/blue-and-brown-leather-journal/index.html b/blue-and-brown-leather-journal/index.html index 71cc58c4..454c475e 100644 --- a/blue-and-brown-leather-journal/index.html +++ b/blue-and-brown-leather-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,43 +1775,43 @@ if (window.innerWidth > 650) {
                              1. - -

                                orange journal

                                +                                 +

                                square watercolor pad

                                • book
                                - A three panel collage showcasing a small book with foldout pages and a bright orange cover. + A two panel collage showing a square book with a tan cover and blue and gold endpapers.
                              2. - -

                                striped journal

                                +                                 +

                                tiny books

                                • book
                                - A three panel collage showcasing a journal with a striped cover. + A three panel collage showing a book held in the palm of a hand.
                              3. - -

                                stampede journal

                                +                                 +

                                leather strap journal

                                • book
                                - A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + A 3-part collage showing a blue journal with leather straps woven into the covers.
                                4. @@ -1695,9 +1844,30 @@ if (window.innerWidth > 650) { + +
                                + color scheme + + + + + + + + + +
                                - + diff --git a/booby-congrats-on-the-top-surgery/index.html b/booby-congrats-on-the-top-surgery/index.html index d514934b..93117a2b 100644 --- a/booby-congrats-on-the-top-surgery/index.html +++ b/booby-congrats-on-the-top-surgery/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,53 +1769,47 @@ if (window.innerWidth > 650) {
                                1. - -

                                  pronoun patches

                                  +                                   +

                                  become unbutterable

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

                                  kniphofia

                                  +                                   +

                                  spotted towhee

                                  • print
                                    • +
                                  • card
                                    • +
                                  - A print of a brightly colored flower in 4 layers of color + A block print of a spotted towhee mid-leap.
                                3. - -

                                  anarchy autism

                                  +                                   +

                                  iris

                                  • print
                                    • -
                                  • sticker
                                    • - -
                                  • shirt
                                    • - -
                                  • pin
                                    • +
                                  • card
                                  - A print in rainbow ink that says autism with the anarchy A. + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes.
                                  4. @@ -1699,9 +1842,30 @@ if (window.innerWidth > 650) { + +
                                  + color scheme + + + + + + + + + +
                                  - + diff --git a/bottom-growth/index.html b/bottom-growth/index.html index 0ce038ad..077c2e12 100644 --- a/bottom-growth/index.html +++ b/bottom-growth/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,53 +1764,47 @@ if (window.innerWidth > 650) {
                                  1. - -

                                    queer

                                    +                                     +

                                    gender in data models

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

                                    squarsh

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

                                    gender?

                                    + +
                                    • gender
                                    - A print of the word queer in black ink. The letters are rounded with elongated oval negative space. - -                                     -
                                    4. - -
                                  4. - -

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

                                    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. + A page of handwritten notes with some loosely drawn charts, described further in the post.
                                    6. @@ -1694,9 +1837,30 @@ if (window.innerWidth > 650) { + +
                                    + color scheme + + + + + + + + + +
                                    - + diff --git a/bowtie/index.html b/bowtie/index.html index f0411ba1..713fcacf 100644 --- a/bowtie/index.html +++ b/bowtie/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                    1. - -

                                      wrap bracelets

                                      +                                       +

                                      shrimp cat toy

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

                                      leather keychains

                                      +                                       +

                                      leatherworking favorites

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

                                      long zipper bifold

                                      +                                       +

                                      vertical bifold

                                      • leather
                                      - A collage showing an orange leather wallet with a long zipper running the length of the outside. + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
                                      4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                      + color scheme + + + + + + + + + +
                                      - + diff --git a/boypussy/index.html b/boypussy/index.html index 281803e0..c3e91551 100644 --- a/boypussy/index.html +++ b/boypussy/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1637,8 +1786,22 @@ if (window.innerWidth > 650) {
                                      1. - -

                                        killdeer

                                        +                                         +

                                        networks of trans care

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

                                        junco

                                          @@ -1647,39 +1810,25 @@ if (window.innerWidth > 650) {
                                        • card
                                        - A print of a killdeer in black ink. + A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia.
                                      3. - -

                                        greeting loons

                                        +                                         +

                                        pronoun patches

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

                                        shirts!

                                        - -
                                          - -
                                        • shirt
                                          • - -
                                        - A row of shirts hanging in front of a window, with a variety of hand-printed designs. + 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.
                                        5. @@ -1712,9 +1861,30 @@ if (window.innerWidth > 650) { + +
                                        + color scheme + + + + + + + + + +
                                        - + diff --git a/brookes-collar/index.html b/brookes-collar/index.html index 31a4454a..4b844752 100644 --- a/brookes-collar/index.html +++ b/brookes-collar/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,43 @@ if (window.innerWidth > 650) {
                                        1. - -

                                          snap pouch

                                          +                                           +

                                          mousie

                                          • leather
                                          - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + A cat in a sunbeam snuggles a little leather mouse-shaped cat toy.
                                        2. - -

                                          fishhook pride keychains

                                          +                                           +

                                          moss harness

                                          • 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. + A nylon webbing harness in bright teal laid out on a desk.
                                        3. - -

                                          zipper bifold (green)

                                          +                                           +

                                          leather chest harness

                                          • leather
                                          - A collage showing a green leather wallet with a zippered pocket built into one external side. + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
                                          4. @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                          + color scheme + + + + + + + + + +
                                          - + diff --git a/brookes-cuff-bracelets/index.html b/brookes-cuff-bracelets/index.html index f8b0d0df..0ad22c0c 100644 --- a/brookes-cuff-bracelets/index.html +++ b/brookes-cuff-bracelets/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                          1. - -

                                            foldy wallet

                                            +                                             +

                                            brooke's suspenders

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

                                            moss harness

                                            +                                             +

                                            maker's mark keychain

                                            • leather
                                            - A nylon webbing harness in bright teal laid out on a desk. + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it.
                                          3. - -

                                            leather keychains

                                            +                                             +

                                            zipper bifold

                                            • 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 collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
                                            4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                            + color scheme + + + + + + + + + +
                                            - + diff --git a/brookes-notebook/index.html b/brookes-notebook/index.html index 92071064..c6cef698 100644 --- a/brookes-notebook/index.html +++ b/brookes-notebook/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1625,47 +1774,45 @@ if (window.innerWidth > 650) {
                                            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. - -

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

                                              blue and brown leather journal

                                              +                                               +

                                              orange green journal

                                              • book
                                              - A three panel collage showcasing a blue and brown leather-covered journal. + A 4-part collage of a slim handbound book. + +                                               +
                                              4. + +
                                            4. + +

                                              lined notebook

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

                                              black and red journal

                                              + +
                                                + +
                                              • book
                                                • + +
                                              • leather
                                                • + +
                                              + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART
                                              6. @@ -1698,9 +1845,30 @@ if (window.innerWidth > 650) { + +
                                              + color scheme + + + + + + + + + +
                                              - + diff --git a/brookes-scarf/index.html b/brookes-scarf/index.html index 0fb37ebe..bdec8958 100644 --- a/brookes-scarf/index.html +++ b/brookes-scarf/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1617,8 +1766,8 @@ if (window.innerWidth > 650) {
                                              1. - -

                                                butch hands pattern

                                                +                                                 +

                                                textures unite

                                                  @@ -1627,35 +1776,35 @@ if (window.innerWidth > 650) {
                                                • highlight
                                                - Hands wearing a pair of pink and grey gloves with convertable mitten tops. + 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.
                                              2. - -

                                                pink socks

                                                +                                                 +

                                                acadia mitts

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

                                                brooke's socks

                                                +                                                 +

                                                knit shrimp

                                                • knit
                                                - Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.
                                                4. @@ -1688,9 +1837,30 @@ if (window.innerWidth > 650) { + +
                                                + color scheme + + + + + + + + + +
                                                - + diff --git a/brookes-socks/index.html b/brookes-socks/index.html index 458e2ac6..22e3b0f7 100644 --- a/brookes-socks/index.html +++ b/brookes-socks/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,36 +1759,22 @@ if (window.innerWidth > 650) {
                                                1. - -

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

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

                                                  textures unite

                                                  +                                                   +

                                                  butch hands pattern

                                                    @@ -1648,7 +1783,23 @@ if (window.innerWidth > 650) {
                                                  • 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. + +                                                   +
                                                  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. @@ -1681,9 +1832,30 @@ if (window.innerWidth > 650) { + +
                                                  + color scheme + + + + + + + + + +
                                                  - + diff --git a/brookes-suspenders/index.html b/brookes-suspenders/index.html index 6c36923b..1510494a 100644 --- a/brookes-suspenders/index.html +++ b/brookes-suspenders/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                  1. - -

                                                    eight pocket bifold

                                                    +                                                     +

                                                    zipper 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. + A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
                                                  2. - -

                                                    dragon mask

                                                    +                                                     +

                                                    shrimp cat toy

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

                                                    leather keychains

                                                    +                                                     +

                                                    proud dad wallet

                                                    • 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'. + A brown leather wallet with a subtle trans flag stitching across the top.
                                                    4. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                    + color scheme + + + + + + + + + +
                                                    - + diff --git a/brown-creeper/index.html b/brown-creeper/index.html index 4eb585fd..4991c366 100644 --- a/brown-creeper/index.html +++ b/brown-creeper/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1611,8 +1760,22 @@ if (window.innerWidth > 650) {
                                                    1. - -

                                                      trans wrongs skull

                                                      +                                                       +

                                                      kniphofia

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

                                                      heron

                                                        @@ -1620,48 +1783,28 @@ if (window.innerWidth > 650) {
                                                      • card
                                                        • -
                                                      • sticker
                                                        • +
                                                      • shirt
                                                        • -
                                                      • pin
                                                        • +
                                                      + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + +                                                       +
                                                      3. + +
                                                    3. + +

                                                      booby (congrats on the top surgery)

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

                                                      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. + A landscape-oriented white card with a two-color print of a blue-footed booby.
                                                      6. @@ -1694,9 +1837,30 @@ if (window.innerWidth > 650) { + +
                                                      + color scheme + + + + + + + + + +
                                                      - + diff --git a/butch-hands-pattern/index.html b/butch-hands-pattern/index.html index d8971437..5e7efce1 100644 --- a/butch-hands-pattern/index.html +++ b/butch-hands-pattern/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1691,6 +1840,20 @@ if (window.innerWidth > 650) {
                                                        +
                                                      1. + +

                                                        recommendations & favorites

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

                                                      2. keffiyah fishing net pattern

                                                        @@ -1721,22 +1884,6 @@ if (window.innerWidth > 650) {
                                                        3. -
                                                      3. - -

                                                        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. - -                                                         -
                                                        4. -
                                                      @@ -1765,9 +1912,30 @@ if (window.innerWidth > 650) { + +
                                                      + color scheme + + + + + + + + + +
                                                      - + diff --git a/chanterelle/index.html b/chanterelle/index.html index 493f7a1d..4b060ad5 100644 --- a/chanterelle/index.html +++ b/chanterelle/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,42 +1771,48 @@ if (window.innerWidth > 650) {
                                                      1. - -

                                                        spotted towhee

                                                        +                                                         +

                                                        boypussy (mature)

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

                                                        trans the world

                                                        - -
                                                          - -
                                                        • print
                                                          • +
                                                        • sticker
                                                        • 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 butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.
                                                      3. - -

                                                        stellar's jay

                                                        +                                                         +

                                                        nonbinary flag

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

                                                        hummingbird become ungovernable

                                                          @@ -1668,7 +1823,7 @@ if (window.innerWidth > 650) {
                                                        • shirt
                                                        - A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + 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'
                                                        5. @@ -1701,9 +1856,30 @@ if (window.innerWidth > 650) { + +
                                                        + color scheme + + + + + + + + + +
                                                        - + diff --git a/charlie-the-alpaca-handspun/index.html b/charlie-the-alpaca-handspun/index.html index 65c176fe..015e8c16 100644 --- a/charlie-the-alpaca-handspun/index.html +++ b/charlie-the-alpaca-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,6 +1758,20 @@ if (window.innerWidth > 650) {
                                                          +
                                                        1. + +

                                                          coral reef handspun

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

                                                        2. spinner's dream handspun

                                                          @@ -1623,20 +1786,6 @@ if (window.innerWidth > 650) {
                                                          3. -
                                                        3. - -

                                                          BFL/silk handspun

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

                                                        4. fire & ice handspun

                                                          @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) {
                                                          5. + +
                                                          + color scheme + + + + + + + + + +
                                                          - + diff --git a/circle-bag/index.html b/circle-bag/index.html index 3ae4693a..c69097ed 100644 --- a/circle-bag/index.html +++ b/circle-bag/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,47 @@ if (window.innerWidth > 650) {
                                                          1. - -

                                                            brooke's collar

                                                            +                                                             +

                                                            black and red journal

                                                              +
                                                            • book
                                                              • +
                                                            • leather
                                                            - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART
                                                          2. - -

                                                            bowtie

                                                            +                                                             +

                                                            brooke's suspenders

                                                            • leather
                                                            - A black leather bow tie with black stitching. + 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.
                                                          3. - -

                                                            gradient purse strap

                                                            +                                                             +

                                                            patchwork wallet

                                                            • leather
                                                              • +
                                                            • highlight
                                                              • +
                                                            - 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 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.
                                                            4. @@ -1679,9 +1832,30 @@ if (window.innerWidth > 650) { + +
                                                            + color scheme + + + + + + + + + +
                                                            - + diff --git a/colophon/index.html b/colophon/index.html index 2b775f04..1573807d 100644 --- a/colophon/index.html +++ b/colophon/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,6 +945,8 @@ pre[class*=language-]::selection { } } + + +export { HeadingAnchors } +const THEME = "theme"; + +const saveTheme = (themeValue) => { + localStorage.setItem(THEME, themeValue); +}; + +const themeLight = document.getElementById("theme-light"); +themeLight.addEventListener("input", (e) => { + saveTheme(themeLight.value); +}); + +const themeAuto = document.getElementById("theme-auto"); +themeAuto.addEventListener("input", (e) => { + saveTheme(themeAuto.auto); +}); + +const themeDark = document.getElementById("theme-dark"); +themeDark.addEventListener("input", (e) => { + saveTheme(themeDark.value); +}); + +var currentThemeValue = localStorage.getItem(THEME); +switch (currentThemeValue) { + case "light": + themeLight.checked = true; + break; + case "auto": + themeAuto.checked = true; + break; + case "dark": + themeDark.checked = true; + break; + default: + themeAuto.checked = true; +} @@ -1156,9 +1305,30 @@ export { HeadingAnchors } + +
                                                            + color scheme + + + + + + + + + +
                                                            - + diff --git a/coming-out/index.html b/coming-out/index.html index d21846fb..b219a75c 100644 --- a/coming-out/index.html +++ b/coming-out/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,49 +1775,49 @@ if (window.innerWidth > 650) {
                                                            1. - -

                                                              booby (congrats on the top surgery)

                                                              +                                                               +

                                                              bottom growth (mature)

                                                              • print
                                                                • -
                                                              • card
                                                                • -
                                                              • gender
                                                              - A landscape-oriented white card with a two-color print of a blue-footed booby. + 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. - -

                                                              spotted towhee

                                                              +                                                               +

                                                              luminescent (mature)

                                                              • print
                                                                • -
                                                              • card
                                                                • +
                                                              • gender
                                                              - A block print of a spotted towhee mid-leap. + A print of a tattooed woman in bright highlighter yellow underwear.
                                                            3. - -

                                                              networks of trans care

                                                              +                                                               +

                                                              artisans cooperative shirts

                                                                -
                                                              • gender
                                                                • +
                                                              • shirt
                                                                • + +
                                                              • print
                                                              - Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk. + 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. @@ -1701,9 +1850,30 @@ if (window.innerWidth > 650) { + +
                                                              + color scheme + + + + + + + + + +
                                                              - + diff --git a/comparing-text-editors/index.html b/comparing-text-editors/index.html index b313dfe2..4f65ce22 100644 --- a/comparing-text-editors/index.html +++ b/comparing-text-editors/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1846,29 +1995,29 @@ if (window.innerWidth > 650) {
                                                            4. - -

                                                              backend accessibility

                                                              +                                                               +

                                                              accessible image modals

                                                              • software
                                                              - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth.
                                                            5. - -

                                                              my favorite git flag

                                                              +                                                               +

                                                              visual site builders and accessibility

                                                              • software
                                                              - Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk. + Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.
                                                              6. @@ -1901,9 +2050,30 @@ if (window.innerWidth > 650) { + +
                                                              + color scheme + + + + + + + + + +
                                                              - + diff --git a/congrats-on-the-autism-adhd/index.html b/congrats-on-the-autism-adhd/index.html index d17c9535..c7440adb 100644 --- a/congrats-on-the-autism-adhd/index.html +++ b/congrats-on-the-autism-adhd/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1623,44 +1772,40 @@ if (window.innerWidth > 650) {
                                                              1. - -

                                                                anarchy autism

                                                                +                                                                 +

                                                                seedling

                                                                • print
                                                                  • -
                                                                • sticker
                                                                  • - -
                                                                • shirt
                                                                  • - -
                                                                • pin
                                                                  • +
                                                                • card
                                                                - A print in rainbow ink that says autism with the anarchy A. + 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.
                                                              2. - -

                                                                hair

                                                                +                                                                 +

                                                                artisans cooperative cards

                                                                • print
                                                                  • -
                                                                • gender
                                                                  • +
                                                                • card
                                                                - A print in black ink of belly hair. + 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. - -

                                                                flicker

                                                                +                                                                 +

                                                                fat raccoon

                                                                  @@ -1671,7 +1816,7 @@ if (window.innerWidth > 650) {
                                                                • shirt
                                                                - 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 block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
                                                                4. @@ -1704,9 +1849,30 @@ if (window.innerWidth > 650) { + +
                                                                + color scheme + + + + + + + + + +
                                                                - + diff --git a/congrats-on-the-gay/index.html b/congrats-on-the-gay/index.html index db40e9da..b9d19f30 100644 --- a/congrats-on-the-gay/index.html +++ b/congrats-on-the-gay/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1629,8 +1778,8 @@ if (window.innerWidth > 650) {
                                                                1. - -

                                                                  booby (congrats on the top surgery)

                                                                  +                                                                   +

                                                                  nonbinary flag

                                                                    @@ -1641,37 +1790,45 @@ if (window.innerWidth > 650) {
                                                                  • gender
                                                                  - A landscape-oriented white card with a two-color print of a blue-footed booby. + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
                                                                2. - -

                                                                  become unbutterable

                                                                  +                                                                   +

                                                                  shrimp

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

                                                                  gender as a proxy variable

                                                                  +                                                                   +

                                                                  geese

                                                                    -
                                                                  • gender
                                                                    • +
                                                                  • print
                                                                    • -
                                                                  • zine
                                                                    • +
                                                                  • card
                                                                    • + +
                                                                  • shirt
                                                                  - 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. + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS!
                                                                  4. @@ -1704,9 +1861,30 @@ if (window.innerWidth > 650) { + +
                                                                  + color scheme + + + + + + + + + +
                                                                  - + diff --git a/contact/index.html b/contact/index.html index de70d147..d76ffdd4 100644 --- a/contact/index.html +++ b/contact/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,6 +945,8 @@ pre[class*=language-]::selection { } } + + +export { HeadingAnchors } +const THEME = "theme"; + +const saveTheme = (themeValue) => { + localStorage.setItem(THEME, themeValue); +}; + +const themeLight = document.getElementById("theme-light"); +themeLight.addEventListener("input", (e) => { + saveTheme(themeLight.value); +}); + +const themeAuto = document.getElementById("theme-auto"); +themeAuto.addEventListener("input", (e) => { + saveTheme(themeAuto.auto); +}); + +const themeDark = document.getElementById("theme-dark"); +themeDark.addEventListener("input", (e) => { + saveTheme(themeDark.value); +}); + +var currentThemeValue = localStorage.getItem(THEME); +switch (currentThemeValue) { + case "light": + themeLight.checked = true; + break; + case "auto": + themeAuto.checked = true; + break; + case "dark": + themeDark.checked = true; + break; + default: + themeAuto.checked = true; +} @@ -1236,9 +1385,30 @@ export { HeadingAnchors } + +
                                                                  + color scheme + + + + + + + + + +
                                                                  - + diff --git a/coral-reef-handspun/index.html b/coral-reef-handspun/index.html index d0bf8a2e..e46fbdff 100644 --- a/coral-reef-handspun/index.html +++ b/coral-reef-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
                                                                  1. - -

                                                                    spinning plants

                                                                    +                                                                     +

                                                                    petrichor 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) + 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. - -

                                                                    light grey jacobs handspun

                                                                    +                                                                     +

                                                                    rambouillet handspun

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

                                                                    handcombed jacobs handspun

                                                                    +                                                                     +

                                                                    handspun yarn in party mix and orange-gold

                                                                    • yarn
                                                                    - a skein of dark grey handspun yarn + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
                                                                    4. @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                    + color scheme + + + + + + + + + +
                                                                    - + diff --git a/core-css/index.html b/core-css/index.html index c2b1b34d..5760f1aa 100644 --- a/core-css/index.html +++ b/core-css/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1927,45 +2076,43 @@ footer a[aria-current="page"]::after {
                                                                  4. - -

                                                                    designing a bag

                                                                    +                                                                     +

                                                                    visual site builders and accessibility

                                                                      -
                                                                    • 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. + Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.
                                                                  5. - -

                                                                    an intro to git

                                                                    +                                                                     +

                                                                    accessible image modals

                                                                    • software
                                                                    - Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. + Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth.
                                                                  6. - -

                                                                    framer accessibility

                                                                    +                                                                     +

                                                                    happy solstice 2025

                                                                      -
                                                                    • software
                                                                      • +
                                                                    • highlight
                                                                    - A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features. + 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.
                                                                    7. @@ -1998,9 +2145,30 @@ footer a[aria-current="page"]::after                                                                     { + +
                                                                    + color scheme + + + + + + + + + +
                                                                    - + diff --git a/crow/index.html b/crow/index.html index 530bc551..4e6894dd 100644 --- a/crow/index.html +++ b/crow/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,22 +1758,22 @@ if (window.innerWidth > 650) {
                                                                    1. - -

                                                                      fix your hearts

                                                                      +                                                                       +

                                                                      tiny mushrooms

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

                                                                      boypussy (mature)

                                                                      +                                                                       +

                                                                      anarchy autism

                                                                        @@ -1636,24 +1785,22 @@ if (window.innerWidth > 650) {
                                                                      • pin
                                                                        • -
                                                                      • gender
                                                                        • -
                                                                      - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + A print in rainbow ink that says autism with the anarchy A.
                                                                    3. - -

                                                                      brown creeper

                                                                      +                                                                       +

                                                                      printmaking paper notes

                                                                      • 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. + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
                                                                      4. @@ -1686,9 +1833,30 @@ if (window.innerWidth > 650) { + +
                                                                      + color scheme + + + + + + + + + +
                                                                      - + diff --git a/designing-a-bag/index.html b/designing-a-bag/index.html index f54f6c1a..e162b3d8 100644 --- a/designing-a-bag/index.html +++ b/designing-a-bag/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,45 +1775,45 @@ if (window.innerWidth > 650) {
                                                                      1. - -

                                                                        vix collar

                                                                        +                                                                         +

                                                                        redirections

                                                                          -
                                                                        • leather
                                                                          • +
                                                                        • software
                                                                        - 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. + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets.
                                                                      2. - -

                                                                        leather long-stitch journals

                                                                        +                                                                         +

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

                                                                        foldy wallet with thumb slide

                                                                        +                                                                         +

                                                                        fishhook pride keychains

                                                                        • leather
                                                                          • +
                                                                        • gender
                                                                          • +
                                                                        - 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 keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.
                                                                        4. @@ -1697,9 +1846,30 @@ if (window.innerWidth > 650) { + +
                                                                        + color scheme + + + + + + + + + +
                                                                        - + diff --git a/domain-and-site-setup/index.html b/domain-and-site-setup/index.html index a419062d..3e76865d 100644 --- a/domain-and-site-setup/index.html +++ b/domain-and-site-setup/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1661,43 +1810,47 @@ if (window.innerWidth > 650) {
                                                                        1. - -

                                                                          an intro to git

                                                                          +                                                                           +

                                                                          azure locations and file crawling

                                                                          • software
                                                                            • +
                                                                          • highlight
                                                                            • +
                                                                          - Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. + 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. - -

                                                                          backend accessibility

                                                                          +                                                                           +

                                                                          designing a bag

                                                                            +
                                                                          • leather
                                                                            • +
                                                                          • software
                                                                          - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + 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. - -

                                                                          comparing text editors

                                                                          +                                                                           +

                                                                          framer accessibility

                                                                          • 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 Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features.
                                                                          4. @@ -1730,9 +1883,30 @@ if (window.innerWidth > 650) { + +
                                                                          + color scheme + + + + + + + + + +
                                                                          - + diff --git a/double-bill-pocket-bifold/index.html b/double-bill-pocket-bifold/index.html index 88445004..7395ed07 100644 --- a/double-bill-pocket-bifold/index.html +++ b/double-bill-pocket-bifold/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,15 +1759,15 @@ if (window.innerWidth > 650) {
                                                                          1. - -

                                                                            mom bag

                                                                            +                                                                             +

                                                                            leaf patches

                                                                            • leather
                                                                            - A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                            2. @@ -1638,15 +1787,15 @@ if (window.innerWidth > 650) {
                                                                          2. - -

                                                                            bag strap

                                                                            +                                                                             +

                                                                            vertical card wallet

                                                                            • leather
                                                                            - A nylon webbing shoulder strap in bright teal with clips on each end. + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
                                                                            3. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                            + color scheme + + + + + + + + + +
                                                                            - + diff --git a/dragon-mask/index.html b/dragon-mask/index.html index 70d10ebb..fced0d0f 100644 --- a/dragon-mask/index.html +++ b/dragon-mask/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,47 +1764,47 @@ if (window.innerWidth > 650) {
                                                                            1. - -

                                                                              designing a bag

                                                                              +                                                                               +

                                                                              lobstah

                                                                              • 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. + Two red leather lobster ornaments, about 4-5 in long each.
                                                                            2. - -

                                                                              leather long-stitch journals

                                                                              +                                                                               +

                                                                              mom bag

                                                                              • leather
                                                                                • -
                                                                              • book
                                                                                • -
                                                                              - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp.
                                                                            3. - -

                                                                              bowtie

                                                                              +                                                                               +

                                                                              tooled leather patches

                                                                              • leather
                                                                                • +
                                                                              • gender
                                                                                • + +
                                                                              • patch
                                                                                • +
                                                                              - A black leather bow tie with black stitching. + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                              4. @@ -1688,9 +1837,30 @@ if (window.innerWidth > 650) { + +
                                                                              + color scheme + + + + + + + + + +
                                                                              - + diff --git a/dyeing-fiber/index.html b/dyeing-fiber/index.html index eef265fd..8a1cbafa 100644 --- a/dyeing-fiber/index.html +++ b/dyeing-fiber/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,15 +1759,31 @@ if (window.innerWidth > 650) {
                                                                              1. - -

                                                                                orion handspun

                                                                                +                                                                                 +

                                                                                rambouillet handspun

                                                                                + +
                                                                                  + +
                                                                                • yarn
                                                                                  • + +
                                                                                • highlight
                                                                                  • + +
                                                                                + 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

                                                                                • 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. + 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. @@ -1637,20 +1802,6 @@ if (window.innerWidth > 650) { -
                                                                              3. - -

                                                                                ruby the alpaca handspun

                                                                                - -
                                                                                  - -
                                                                                • yarn
                                                                                  • - -
                                                                                - one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight - -                                                                                 -
                                                                                4. -
                                                                              @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                              + color scheme + + + + + + + + + +
                                                                              - + diff --git a/ecommerce-options/index.html b/ecommerce-options/index.html index acf3ea5d..44d3489c 100644 --- a/ecommerce-options/index.html +++ b/ecommerce-options/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1661,9 +1810,30 @@ if (window.innerWidth > 650) { + +
                                                                              + color scheme + + + + + + + + + +
                                                                              - + diff --git a/eight-pocket-bifold/index.html b/eight-pocket-bifold/index.html index b3dfa750..24602b76 100644 --- a/eight-pocket-bifold/index.html +++ b/eight-pocket-bifold/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                                              1. - -

                                                                                stephanie collar

                                                                                +                                                                                 +

                                                                                snap pouch

                                                                                • leather
                                                                                - A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather.
                                                                              2. - -

                                                                                designing a bag

                                                                                +                                                                                 +

                                                                                brooke's suspenders

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

                                                                                leather lighter case

                                                                                +                                                                                 +

                                                                                dragon mask

                                                                                • leather
                                                                                  • +
                                                                                • highlight
                                                                                  • +
                                                                                - A bic lighter wrapped in leather and hand-stitched up one side. + 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. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                + color scheme + + + + + + + + + +
                                                                                - + diff --git a/eleventy-lessons/index.html b/eleventy-lessons/index.html index 7ebc01e4..8e0e9d2c 100644 --- a/eleventy-lessons/index.html +++ b/eleventy-lessons/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1901,43 +2050,45 @@ eleventyExcludeFromCollections: true
                                                                                1. - -

                                                                                  handedness toggle

                                                                                  +                                                                                   +

                                                                                  visual site builders and accessibility

                                                                                  • software
                                                                                  - A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.
                                                                                2. - -

                                                                                  framer accessibility

                                                                                  +                                                                                   +

                                                                                  designing a bag

                                                                                    +
                                                                                  • leather
                                                                                    • +
                                                                                  • software
                                                                                  - A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features. + 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. - -

                                                                                  moving images

                                                                                  +                                                                                   +

                                                                                  redirections

                                                                                  • 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. + Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets.
                                                                                  4. @@ -1970,9 +2121,30 @@ eleventyExcludeFromCollections: true + +
                                                                                  + color scheme + + + + + + + + + +
                                                                                  - + diff --git a/euphorbia/index.html b/euphorbia/index.html index b9fc8d16..a45c30d0 100644 --- a/euphorbia/index.html +++ b/euphorbia/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,48 +1759,8 @@ if (window.innerWidth > 650) {
                                                                                  1. - -

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

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

                                                                                    foxgloves

                                                                                    +                                                                                     +

                                                                                    trans wrongs skull

                                                                                      @@ -1659,10 +1768,46 @@ if (window.innerWidth > 650) {
                                                                                    • card
                                                                                      • -
                                                                                    • shirt
                                                                                      • +
                                                                                    • sticker
                                                                                      • + +
                                                                                    • pin
                                                                                      • + +
                                                                                    • gender
                                                                                    - A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + +                                                                                     +
                                                                                    4. + +
                                                                                  4. + +

                                                                                    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.' + +                                                                                     +
                                                                                    5. + +
                                                                                  5. + +

                                                                                    booby (congrats on the top surgery)

                                                                                    + +
                                                                                      + +
                                                                                    • print
                                                                                      • + +
                                                                                    • card
                                                                                      • + +
                                                                                    • gender
                                                                                      • + +
                                                                                    + A landscape-oriented white card with a two-color print of a blue-footed booby.
                                                                                    6. @@ -1695,9 +1840,30 @@ if (window.innerWidth > 650) { + +
                                                                                    + color scheme + + + + + + + + + +
                                                                                    - + diff --git a/fat-raccoon/index.html b/fat-raccoon/index.html index 0ba7c4ef..208e70c3 100644 --- a/fat-raccoon/index.html +++ b/fat-raccoon/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,40 +1776,8 @@ if (window.innerWidth > 650) {
                                                                                    1. - -

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

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

                                                                                      lupine

                                                                                      +                                                                                       +

                                                                                      iris

                                                                                        @@ -1668,10 +1785,40 @@ if (window.innerWidth > 650) {
                                                                                      • card
                                                                                        • -
                                                                                      • shirt
                                                                                        • +
                                                                                      + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + +                                                                                       +
                                                                                      4. + +
                                                                                    4. + +

                                                                                      kniphofia

                                                                                      + +
                                                                                        + +
                                                                                      • print
                                                                                      - 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 of a brightly colored flower in 4 layers of color + +                                                                                       +
                                                                                      5. + +
                                                                                    5. + +

                                                                                      happy biHRTday

                                                                                      + +
                                                                                        + +
                                                                                      • print
                                                                                        • + +
                                                                                      • card
                                                                                        • + +
                                                                                      • gender
                                                                                        • + +
                                                                                      + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
                                                                                      6. @@ -1704,9 +1851,30 @@ if (window.innerWidth > 650) { + +
                                                                                      + color scheme + + + + + + + + + +
                                                                                      - + diff --git a/fd-signifier-and-oppositional-sexism/index.html b/fd-signifier-and-oppositional-sexism/index.html index 5007c764..91da18d5 100644 --- a/fd-signifier-and-oppositional-sexism/index.html +++ b/fd-signifier-and-oppositional-sexism/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1644,55 +1793,53 @@ if (window.innerWidth > 650) {
                                                                                      1. - -

                                                                                        girldick (mature)

                                                                                        +                                                                                         +

                                                                                        trans wrongs 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 smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
                                                                                      2. - -

                                                                                        in the news

                                                                                        +                                                                                         +

                                                                                        gender?

                                                                                        • 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 page of handwritten notes with some loosely drawn charts, described further in the post.
                                                                                      3. - -

                                                                                        trans the world

                                                                                        +                                                                                         +

                                                                                        gender as a proxy variable

                                                                                          -
                                                                                        • print
                                                                                          • - -
                                                                                        • shirt
                                                                                          • -
                                                                                        • gender
                                                                                          • +
                                                                                        • zine
                                                                                          • +
                                                                                        - 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. + 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.
                                                                                        4. @@ -1725,9 +1872,30 @@ if (window.innerWidth > 650) { + +
                                                                                        + color scheme + + + + + + + + + +
                                                                                        - + diff --git a/fedilearns/index.html b/fedilearns/index.html index 1c4d67de..a037c573 100644 --- a/fedilearns/index.html +++ b/fedilearns/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,9 +1769,30 @@ if (window.innerWidth > 650) { + +
                                                                                        + color scheme + + + + + + + + + +
                                                                                        - + diff --git a/fedizinefest-2025/index.html b/fedizinefest-2025/index.html index b189723f..5fd6a0ea 100644 --- a/fedizinefest-2025/index.html +++ b/fedizinefest-2025/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,6 +1758,22 @@ if (window.innerWidth > 650) {
                                                                                          +
                                                                                        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

                                                                                          @@ -1627,22 +1792,6 @@ if (window.innerWidth > 650) {
                                                                                          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

                                                                                          @@ -1687,9 +1836,30 @@ if (window.innerWidth > 650) {
                                                                                          5. + +
                                                                                          + color scheme + + + + + + + + + +
                                                                                          - + diff --git a/feed.xsl b/feed.xsl index ee8c6c2c..68cec410 100644 --- a/feed.xsl +++ b/feed.xsl @@ -74,6 +74,13 @@ https://nicolas-hoizey.com/feeds/all.xml --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -217,7 +224,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } diff --git a/fire-and-ice-handspun/index.html b/fire-and-ice-handspun/index.html index 933f2175..a671ae6d 100644 --- a/fire-and-ice-handspun/index.html +++ b/fire-and-ice-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,20 +1758,6 @@ if (window.innerWidth > 650) {
                                                                                            -
                                                                                          1. - -

                                                                                            icelandic lamb handspun

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

                                                                                          2. charlie the alpaca handspun

                                                                                            @@ -1651,6 +1786,20 @@ if (window.innerWidth > 650) {
                                                                                            3. +
                                                                                          3. + +

                                                                                            light grey jacobs handspun

                                                                                            + +
                                                                                              + +
                                                                                            • yarn
                                                                                              • + +
                                                                                            + a skein of light grey handspun yarn + +                                                                                             +
                                                                                            4. +
                                                                                          @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                          + color scheme + + + + + + + + + +
                                                                                          - + diff --git a/fishhook-pride-keychains/index.html b/fishhook-pride-keychains/index.html index 6ae96b2a..d2495c22 100644 --- a/fishhook-pride-keychains/index.html +++ b/fishhook-pride-keychains/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,43 +1764,47 @@ if (window.innerWidth > 650) {
                                                                                          1. - -

                                                                                            double bill pocket bifold

                                                                                            +                                                                                             +

                                                                                            vertical bifold

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

                                                                                            nine pocket bifold

                                                                                            +                                                                                             +

                                                                                            geese/trans wrongs

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

                                                                                            mom bag

                                                                                            +                                                                                             +

                                                                                            rachel's bracelets

                                                                                            • leather
                                                                                            - A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + Two pink leather bracelets with stainless steel hardware and aqua stitching.
                                                                                            4. @@ -1684,9 +1837,30 @@ if (window.innerWidth > 650) { + +
                                                                                            + color scheme + + + + + + + + + +
                                                                                            - + diff --git a/five-of-them/index.html b/five-of-them/index.html index 432557ad..87bd12af 100644 --- a/five-of-them/index.html +++ b/five-of-them/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,30 +1771,38 @@ if (window.innerWidth > 650) {
                                                                                            1. - -

                                                                                              queer

                                                                                              +                                                                                               +

                                                                                              not a drill

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

                                                                                              hummingbird become ungovernable

                                                                                              +                                                                                               +

                                                                                              tiny mushrooms

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

                                                                                              big pidge

                                                                                                @@ -1656,25 +1813,7 @@ if (window.innerWidth > 650) {
                                                                                              • 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' - -                                                                                               -
                                                                                              4. - -
                                                                                            4. - -

                                                                                              flicker

                                                                                              - -
                                                                                                - -
                                                                                              • print
                                                                                                • - -
                                                                                              • card
                                                                                                • - -
                                                                                              • shirt
                                                                                                • - -
                                                                                              - 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 block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence.
                                                                                              5. @@ -1707,9 +1846,30 @@ if (window.innerWidth > 650) { + +
                                                                                              + color scheme + + + + + + + + + +
                                                                                              - + diff --git a/fix-your-hearts/index.html b/fix-your-hearts/index.html index f9ec3330..463544f0 100644 --- a/fix-your-hearts/index.html +++ b/fix-your-hearts/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,53 +1758,47 @@ if (window.innerWidth > 650) {
                                                                                              1. - -

                                                                                                queer

                                                                                                +                                                                                                 +

                                                                                                kestrel zine

                                                                                                • print
                                                                                                  • -
                                                                                                • card
                                                                                                  • - -
                                                                                                • sticker
                                                                                                  • - -
                                                                                                • pin
                                                                                                  • - -
                                                                                                • gender
                                                                                                  • - -
                                                                                                - A print of the word queer in black ink. The letters are rounded with elongated oval negative space. - -                                                                                                 -
                                                                                                2. - -
                                                                                              2. - -

                                                                                                quorbs

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

                                                                                                brown creeper

                                                                                                +                                                                                                 +

                                                                                                euphorbia

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

                                                                                                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.'
                                                                                                5. @@ -1688,9 +1831,30 @@ if (window.innerWidth > 650) { + +
                                                                                                + color scheme + + + + + + + + + +
                                                                                                - + diff --git a/flatfish/index.html b/flatfish/index.html index 685f3bf9..5ed6c334 100644 --- a/flatfish/index.html +++ b/flatfish/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,59 +1771,51 @@ if (window.innerWidth > 650) {
                                                                                                1. - -

                                                                                                  girldick (mature)

                                                                                                  +                                                                                                   +

                                                                                                  tiny portraits

                                                                                                  • 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. + A collage showing various small (around an inch) stamps that depict people or animals.
                                                                                                2. - -

                                                                                                  boypussy (mature)

                                                                                                  +                                                                                                   +

                                                                                                  nonbinary flag

                                                                                                  • print
                                                                                                    • -
                                                                                                  • sticker
                                                                                                    • - -
                                                                                                  • shirt
                                                                                                    • - -
                                                                                                  • pin
                                                                                                    • +
                                                                                                  • card
                                                                                                  • gender
                                                                                                  - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
                                                                                                3. - -

                                                                                                  squarsh

                                                                                                  +                                                                                                   +

                                                                                                  happy biHRTday

                                                                                                  • print
                                                                                                    • +
                                                                                                  • card
                                                                                                    • + +
                                                                                                  • 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. + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
                                                                                                  4. @@ -1707,9 +1848,30 @@ if (window.innerWidth > 650) { + +
                                                                                                  + color scheme + + + + + + + + + +
                                                                                                  - + diff --git a/flicker/index.html b/flicker/index.html index 23c27aa0..129003fd 100644 --- a/flicker/index.html +++ b/flicker/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1641,29 +1790,33 @@ if (window.innerWidth > 650) {
                                                                                                4. - -

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

                                                                                                  tiny portraits

                                                                                                  +                                                                                                   +

                                                                                                  foxgloves

                                                                                                  • print
                                                                                                    • +
                                                                                                  • card
                                                                                                    • + +
                                                                                                  • shirt
                                                                                                    • +
                                                                                                  - A collage showing various small (around an inch) stamps that depict people or animals. + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.
                                                                                                  6. @@ -1696,9 +1849,30 @@ if (window.innerWidth > 650) { + +
                                                                                                  + color scheme + + + + + + + + + +
                                                                                                  - + diff --git a/flocked-notebook/index.html b/flocked-notebook/index.html index 629b5ab8..01f9cdfe 100644 --- a/flocked-notebook/index.html +++ b/flocked-notebook/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1623,29 +1772,15 @@ if (window.innerWidth > 650) {
                                                                                                  1. - -

                                                                                                    leather strap journal

                                                                                                    +                                                                                                     +

                                                                                                    striped journal

                                                                                                    • book
                                                                                                    - A 3-part collage showing a blue journal with leather straps woven into the covers. - -                                                                                                     -
                                                                                                    2. - -
                                                                                                  2. - -

                                                                                                    stampede journal

                                                                                                    - -
                                                                                                      - -
                                                                                                    • book
                                                                                                      • - -
                                                                                                    - A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + A three panel collage showcasing a journal with a striped cover.
                                                                                                    3. @@ -1664,6 +1799,22 @@ if (window.innerWidth > 650) { +
                                                                                                  3. + +

                                                                                                    black and red journal

                                                                                                    + +
                                                                                                      + +
                                                                                                    • book
                                                                                                      • + +
                                                                                                    • leather
                                                                                                      • + +
                                                                                                    + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + +                                                                                                     +
                                                                                                    4. +
                                                                                                  @@ -1692,9 +1843,30 @@ if (window.innerWidth > 650) { + +
                                                                                                  + color scheme + + + + + + + + + +
                                                                                                  - + diff --git a/foldy-wallet-with-thumb-slide/index.html b/foldy-wallet-with-thumb-slide/index.html index 1f38595b..8b631177 100644 --- a/foldy-wallet-with-thumb-slide/index.html +++ b/foldy-wallet-with-thumb-slide/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                  1. - -

                                                                                                    stephanie collar

                                                                                                    +                                                                                                     +

                                                                                                    moss harness

                                                                                                    • leather
                                                                                                    - A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + A nylon webbing harness in bright teal laid out on a desk.
                                                                                                  2. - -

                                                                                                    designing a bag

                                                                                                    +                                                                                                     +

                                                                                                    leather lighter case

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

                                                                                                    swoop wallet

                                                                                                    +                                                                                                     +

                                                                                                    black and red journal

                                                                                                      +
                                                                                                    • book
                                                                                                      • +
                                                                                                    • 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. + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART
                                                                                                    4. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                    + color scheme + + + + + + + + + +
                                                                                                    - + diff --git a/foldy-wallet/index.html b/foldy-wallet/index.html index 134f564b..3a4a7e02 100644 --- a/foldy-wallet/index.html +++ b/foldy-wallet/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                    1. - -

                                                                                                      snap pouch

                                                                                                      +                                                                                                       +

                                                                                                      lobstah

                                                                                                      • leather
                                                                                                      - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + Two red leather lobster ornaments, about 4-5 in long each.
                                                                                                    2. - -

                                                                                                      leaf patches

                                                                                                      +                                                                                                       +

                                                                                                      patchwork wallet

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

                                                                                                      sora's collar

                                                                                                      +                                                                                                       +

                                                                                                      brooke's suspenders

                                                                                                      • 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 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. @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                      + color scheme + + + + + + + + + +
                                                                                                      - + diff --git a/fountain-pen-friendly-stationery/index.html b/fountain-pen-friendly-stationery/index.html index 3ff1bd1c..9b2f88b5 100644 --- a/fountain-pen-friendly-stationery/index.html +++ b/fountain-pen-friendly-stationery/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1680,9 +1829,30 @@ if (window.innerWidth > 650) { + +
                                                                                                      + color scheme + + + + + + + + + +
                                                                                                      - + diff --git a/foxgloves/index.html b/foxgloves/index.html index 01c291a4..612389f9 100644 --- a/foxgloves/index.html +++ b/foxgloves/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,8 +1775,22 @@ if (window.innerWidth > 650) {
                                                                                                      1. - -

                                                                                                        congrats on the autism/adhd

                                                                                                        +                                                                                                         +

                                                                                                        kniphofia

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

                                                                                                        trans rights skull

                                                                                                          @@ -1635,15 +1798,21 @@ if (window.innerWidth > 650) {
                                                                                                        • card
                                                                                                          • +
                                                                                                        • sticker
                                                                                                          • + +
                                                                                                        • pin
                                                                                                          • + +
                                                                                                        • gender
                                                                                                          • +
                                                                                                        - 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 print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
                                                                                                      3. - -

                                                                                                        big pidge

                                                                                                        +                                                                                                         +

                                                                                                        queer

                                                                                                          @@ -1651,26 +1820,14 @@ if (window.innerWidth > 650) {
                                                                                                        • card
                                                                                                          • -
                                                                                                        • shirt
                                                                                                          • +
                                                                                                        • sticker
                                                                                                          • + +
                                                                                                        • pin
                                                                                                          • + +
                                                                                                        • gender
                                                                                                        - A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence. - -                                                                                                         -
                                                                                                        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 the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                                        5. @@ -1703,9 +1860,30 @@ if (window.innerWidth > 650) { + +
                                                                                                        + color scheme + + + + + + + + + +
                                                                                                        - + diff --git a/framer-accessibility/index.html b/framer-accessibility/index.html index 2133c2d4..69792299 100644 --- a/framer-accessibility/index.html +++ b/framer-accessibility/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1715,20 +1864,6 @@ if (window.innerWidth > 650) {
                                                                                                          -
                                                                                                        1. - -

                                                                                                          redirections

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

                                                                                                        2. designing a bag

                                                                                                          @@ -1746,15 +1881,29 @@ if (window.innerWidth > 650) {
                                                                                                        3. - -

                                                                                                          accessible image modals

                                                                                                          +                                                                                                           +

                                                                                                          visual site builders and accessibility

                                                                                                          • software
                                                                                                          - Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth. + Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus. + +                                                                                                           +
                                                                                                          4. + +
                                                                                                        4. + +

                                                                                                          an intro to git

                                                                                                          + +
                                                                                                            + +
                                                                                                          • software
                                                                                                            • + +
                                                                                                          + Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash.
                                                                                                          5. @@ -1787,9 +1936,30 @@ if (window.innerWidth > 650) { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/1/index.html b/gallery/1/index.html index 60647676..8ffb7740 100644 --- a/gallery/1/index.html +++ b/gallery/1/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1353,9 +1501,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/10/index.html b/gallery/10/index.html index a5cf4d14..a1a2a0dd 100644 --- a/gallery/10/index.html +++ b/gallery/10/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1367,9 +1515,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/11/index.html b/gallery/11/index.html index 1af0153a..5de7be54 100644 --- a/gallery/11/index.html +++ b/gallery/11/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1325,9 +1473,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/2/index.html b/gallery/2/index.html index 6e1f2eb4..c0290ee8 100644 --- a/gallery/2/index.html +++ b/gallery/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1369,9 +1517,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/3/index.html b/gallery/3/index.html index 182d2d29..07088822 100644 --- a/gallery/3/index.html +++ b/gallery/3/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1359,9 +1507,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/4/index.html b/gallery/4/index.html index 99495f4c..988c4492 100644 --- a/gallery/4/index.html +++ b/gallery/4/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1357,9 +1505,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/5/index.html b/gallery/5/index.html index 6bbde912..02a1c54f 100644 --- a/gallery/5/index.html +++ b/gallery/5/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1365,9 +1513,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/6/index.html b/gallery/6/index.html index fb2c6187..7b2d1f42 100644 --- a/gallery/6/index.html +++ b/gallery/6/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1353,9 +1501,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/7/index.html b/gallery/7/index.html index 621302e8..0bf798b0 100644 --- a/gallery/7/index.html +++ b/gallery/7/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1399,9 +1547,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/8/index.html b/gallery/8/index.html index fb5c36f3..cf7b7dad 100644 --- a/gallery/8/index.html +++ b/gallery/8/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1379,9 +1527,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/9/index.html b/gallery/9/index.html index d0cba757..49fdedb2 100644 --- a/gallery/9/index.html +++ b/gallery/9/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1397,9 +1545,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/gallery/index.html b/gallery/index.html index c017207b..592e7cc1 100644 --- a/gallery/index.html +++ b/gallery/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1349,9 +1497,30 @@ pre[class*=language-]::selection { + +
                                                                                                          + color scheme + + + + + + + + + +
                                                                                                          - + diff --git a/geese-trans-wrongs/index.html b/geese-trans-wrongs/index.html index be90dfe2..8d59143c 100644 --- a/geese-trans-wrongs/index.html +++ b/geese-trans-wrongs/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,51 +1776,51 @@ if (window.innerWidth > 650) {
                                                                                                          1. - -

                                                                                                            brown creeper

                                                                                                            +                                                                                                             +

                                                                                                            gender in data models

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

                                                                                                            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' - -                                                                                                             -
                                                                                                            3. - -
                                                                                                          3. - -

                                                                                                            greeting loons

                                                                                                            - -
                                                                                                              - -
                                                                                                            • card
                                                                                                              • - -
                                                                                                            • print
                                                                                                              • +
                                                                                                            • software
                                                                                                            • 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 light pink peony in full bloom, close up. + +                                                                                                             +
                                                                                                            4. + +
                                                                                                          4. + +

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

                                                                                                            iris

                                                                                                            + +
                                                                                                              + +
                                                                                                            • print
                                                                                                              • + +
                                                                                                            • card
                                                                                                              • + +
                                                                                                            + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes.
                                                                                                            6. @@ -1704,9 +1853,30 @@ if (window.innerWidth > 650) { + +
                                                                                                            + color scheme + + + + + + + + + +
                                                                                                            - + diff --git a/geese/index.html b/geese/index.html index 9a8a036c..d240976c 100644 --- a/geese/index.html +++ b/geese/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,8 +1776,36 @@ if (window.innerWidth > 650) {
                                                                                                            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. + +

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

                                                                                                              not a drill

                                                                                                                @@ -1637,45 +1814,7 @@ if (window.innerWidth > 650) {
                                                                                                              • 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. - -

                                                                                                              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 - -                                                                                                               -
                                                                                                              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. + 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'
                                                                                                              6. @@ -1708,9 +1847,30 @@ if (window.innerWidth > 650) { + +
                                                                                                              + color scheme + + + + + + + + + +
                                                                                                              - + diff --git a/gender-as-a-proxy-variable/index.html b/gender-as-a-proxy-variable/index.html index 67b88b22..88701439 100644 --- a/gender-as-a-proxy-variable/index.html +++ b/gender-as-a-proxy-variable/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1797,20 +1946,6 @@ if (window.innerWidth > 650) {
                                                                                                                -
                                                                                                              1. - -

                                                                                                                fd signifier & oppositional sexism

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

                                                                                                              2. give to trans orgs and people

                                                                                                                @@ -1826,17 +1961,39 @@ if (window.innerWidth > 650) {
                                                                                                              3. - -

                                                                                                                fishhook pride keychains

                                                                                                                +                                                                                                                 +

                                                                                                                queer

                                                                                                                  -
                                                                                                                • leather
                                                                                                                  • +
                                                                                                                • print
                                                                                                                  • + +
                                                                                                                • card
                                                                                                                  • + +
                                                                                                                • sticker
                                                                                                                  • + +
                                                                                                                • pin
                                                                                                                • 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 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. @@ -1869,9 +2026,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                - + diff --git a/gender-in-data-models/index.html b/gender-in-data-models/index.html index cb1a051c..eeb57b88 100644 --- a/gender-in-data-models/index.html +++ b/gender-in-data-models/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1849,47 +1998,47 @@ This may also be expanded to a multi-step approach, with questions covering some
                                                                                                                1. - -

                                                                                                                  in the news

                                                                                                                  +                                                                                                                   +

                                                                                                                  visual site builders and accessibility

                                                                                                                    -
                                                                                                                  • gender
                                                                                                                    • +
                                                                                                                  • software
                                                                                                                  - 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. Two peach-colored roses, the farther away one a bit out of focus.
                                                                                                                2. - -

                                                                                                                  quorbs

                                                                                                                  +                                                                                                                   +

                                                                                                                  backend accessibility

                                                                                                                  + +
                                                                                                                    + +
                                                                                                                  • software
                                                                                                                    • + +
                                                                                                                  + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + +                                                                                                                   +
                                                                                                                  3. + +
                                                                                                                3. + +

                                                                                                                  kestrel zine

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

                                                                                                                  luminescent (mature)

                                                                                                                  - -
                                                                                                                    - -
                                                                                                                  • print
                                                                                                                    • - -
                                                                                                                  • gender
                                                                                                                    • - -
                                                                                                                  - A print of a tattooed woman in bright highlighter yellow underwear. + 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. @@ -1922,9 +2071,30 @@ This may also be expanded to a multi-step approach, with questions covering some + +
                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                  - + diff --git a/gender/index.html b/gender/index.html index 64f99825..68355a81 100644 --- a/gender/index.html +++ b/gender/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1633,24 +1782,44 @@ if (window.innerWidth > 650) {
                                                                                                                  1. - -

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

                                                                                                                    luminescent (mature)

                                                                                                                    +                                                                                                                     +

                                                                                                                    slightly weird man club

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

                                                                                                                    rope (one) (mature)

                                                                                                                      @@ -1659,21 +1828,7 @@ if (window.innerWidth > 650) {
                                                                                                                    • gender
                                                                                                                    - A print of a tattooed woman in bright highlighter yellow underwear. - -                                                                                                                     -
                                                                                                                    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. + A print of a nude trans woman in an asymmetrical rope harness.
                                                                                                                    5. @@ -1706,9 +1861,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                    - + diff --git a/girldick/index.html b/girldick/index.html index c26c57bc..e0fa64cd 100644 --- a/girldick/index.html +++ b/girldick/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1637,38 +1786,36 @@ if (window.innerWidth > 650) {
                                                                                                                    1. - -

                                                                                                                      spotted towhee

                                                                                                                      +                                                                                                                       +

                                                                                                                      fd signifier & oppositional sexism

                                                                                                                        -
                                                                                                                      • print
                                                                                                                        • - -
                                                                                                                      • card
                                                                                                                        • +
                                                                                                                      • gender
                                                                                                                      - A block print of a spotted towhee mid-leap. + Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field.
                                                                                                                    2. - -

                                                                                                                      squarsh

                                                                                                                      +                                                                                                                       +

                                                                                                                      stickers!

                                                                                                                        -
                                                                                                                      • print
                                                                                                                        • +
                                                                                                                      • sticker
                                                                                                                      - 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. + Clear and holographic stickers in the same design - a smiling skull with speech bubble reading 'trans rights!'
                                                                                                                    3. - -

                                                                                                                      happy biHRTday

                                                                                                                      +                                                                                                                       +

                                                                                                                      congrats on the gay

                                                                                                                        @@ -1679,7 +1826,7 @@ if (window.innerWidth > 650) {
                                                                                                                      • gender
                                                                                                                      - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'
                                                                                                                      4. @@ -1712,9 +1859,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                      - + diff --git a/give-to-trans-orgs-and-people/index.html b/give-to-trans-orgs-and-people/index.html index 07d20112..efd2f8b6 100644 --- a/give-to-trans-orgs-and-people/index.html +++ b/give-to-trans-orgs-and-people/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1668,24 +1817,6 @@ if (window.innerWidth > 650) {
                                                                                                                        -
                                                                                                                      1. - -

                                                                                                                        tooled leather patches

                                                                                                                        - -
                                                                                                                          - -
                                                                                                                        • leather
                                                                                                                          • - -
                                                                                                                        • gender
                                                                                                                          • - -
                                                                                                                        • patch
                                                                                                                          • - -
                                                                                                                        - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. - -                                                                                                                         -
                                                                                                                        2. -

                                                                                                                      2. gender as a proxy variable

                                                                                                                        @@ -1724,6 +1855,24 @@ if (window.innerWidth > 650) {
                                                                                                                        3. +
                                                                                                                      3. + +

                                                                                                                        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. + +                                                                                                                         +
                                                                                                                        4. +
                                                                                                                      @@ -1752,9 +1901,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                      - + diff --git a/gradient-purse-strap/index.html b/gradient-purse-strap/index.html index d41504be..0558bd53 100644 --- a/gradient-purse-strap/index.html +++ b/gradient-purse-strap/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,29 +1759,29 @@ if (window.innerWidth > 650) {
                                                                                                                      1. - -

                                                                                                                        triangle pouch

                                                                                                                        +                                                                                                                         +

                                                                                                                        bowtie

                                                                                                                        • leather
                                                                                                                        - 5 small triangular pouches made of leather in two sizes and various colors. + A black leather bow tie with black stitching.
                                                                                                                      2. - -

                                                                                                                        leather chest harness

                                                                                                                        +                                                                                                                         +

                                                                                                                        aaron's mask

                                                                                                                        • leather
                                                                                                                        - Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
                                                                                                                        3. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                        - + diff --git a/green-memo-pad/index.html b/green-memo-pad/index.html index 08fac359..51646b86 100644 --- a/green-memo-pad/index.html +++ b/green-memo-pad/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1625,34 +1774,6 @@ if (window.innerWidth > 650) {
                                                                                                                          -
                                                                                                                        1. - -

                                                                                                                          baseball journal

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

                                                                                                                          orange journal

                                                                                                                          - -
                                                                                                                            - -
                                                                                                                          • book
                                                                                                                            • - -
                                                                                                                          - A three panel collage showcasing a small book with foldout pages and a bright orange cover. - -                                                                                                                           -
                                                                                                                          3. -

                                                                                                                        3. black and red journal

                                                                                                                          @@ -1669,6 +1790,34 @@ if (window.innerWidth > 650) {
                                                                                                                          4. +
                                                                                                                        4. + +

                                                                                                                          flocked notebook

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

                                                                                                                          stampede journal

                                                                                                                          + +
                                                                                                                            + +
                                                                                                                          • book
                                                                                                                            • + +
                                                                                                                          + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + +                                                                                                                           +
                                                                                                                          6. +
                                                                                                                        @@ -1697,9 +1846,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                        - + diff --git a/greeting-loons/index.html b/greeting-loons/index.html index 9030b2aa..348b2a2a 100644 --- a/greeting-loons/index.html +++ b/greeting-loons/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,47 +1769,43 @@ if (window.innerWidth > 650) {
                                                                                                                        1. - -

                                                                                                                          quorbs

                                                                                                                          +                                                                                                                           +

                                                                                                                          happy solstice 2025

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

                                                                                                                          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. - -

                                                                                                                          block printing transfer method

                                                                                                                          +                                                                                                                           +

                                                                                                                          become unbutterable

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

                                                                                                                          printmaking paper notes

                                                                                                                          + +
                                                                                                                            + +
                                                                                                                          • print
                                                                                                                            • + +
                                                                                                                          + Image unrelated to post. A very fluffed up killdeer stands on a rocky beach.
                                                                                                                          5. @@ -1693,9 +1838,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                          - + diff --git a/greeting-quorbs/index.html b/greeting-quorbs/index.html index b0cfbd69..6e156ca2 100644 --- a/greeting-quorbs/index.html +++ b/greeting-quorbs/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,8 +1764,8 @@ if (window.innerWidth > 650) {
                                                                                                                          1. - -

                                                                                                                            foxgloves

                                                                                                                            +                                                                                                                             +

                                                                                                                            chanterelle

                                                                                                                              @@ -1624,38 +1773,46 @@ if (window.innerWidth > 650) {
                                                                                                                            • card
                                                                                                                              • +
                                                                                                                            + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + +                                                                                                                             +
                                                                                                                            2. + +
                                                                                                                          2. + +

                                                                                                                            trans the world

                                                                                                                            + +
                                                                                                                              + +
                                                                                                                            • print
                                                                                                                              • +
                                                                                                                            • shirt
                                                                                                                              • +
                                                                                                                            • gender
                                                                                                                              • +
                                                                                                                            - 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 that reads 'trans the world' surrounding an image of a globe and a trans symbol. It's in a ping-to-blue gradient.
                                                                                                                          3. - -

                                                                                                                            become unbutterable

                                                                                                                            +                                                                                                                             +

                                                                                                                            shrimp

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

                                                                                                                            printmaking paper notes

                                                                                                                            - -
                                                                                                                              +
                                                                                                                            • card
                                                                                                                              • -
                                                                                                                            • print
                                                                                                                              • +
                                                                                                                            • sticker
                                                                                                                              • + +
                                                                                                                            • 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. @@ -1688,9 +1845,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                            - + diff --git a/guestbook/index.html b/guestbook/index.html index 08fd13a9..170a53cb 100644 --- a/guestbook/index.html +++ b/guestbook/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,6 +945,8 @@ pre[class*=language-]::selection { } } + + +export { HeadingAnchors } +const THEME = "theme"; + +const saveTheme = (themeValue) => { + localStorage.setItem(THEME, themeValue); +}; + +const themeLight = document.getElementById("theme-light"); +themeLight.addEventListener("input", (e) => { + saveTheme(themeLight.value); +}); + +const themeAuto = document.getElementById("theme-auto"); +themeAuto.addEventListener("input", (e) => { + saveTheme(themeAuto.auto); +}); + +const themeDark = document.getElementById("theme-dark"); +themeDark.addEventListener("input", (e) => { + saveTheme(themeDark.value); +}); + +var currentThemeValue = localStorage.getItem(THEME); +switch (currentThemeValue) { + case "light": + themeLight.checked = true; + break; + case "auto": + themeAuto.checked = true; + break; + case "dark": + themeDark.checked = true; + break; + default: + themeAuto.checked = true; +} @@ -1221,9 +1370,30 @@ export { HeadingAnchors } + +
                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                            - + diff --git a/hair/index.html b/hair/index.html index 1490334d..06a694af 100644 --- a/hair/index.html +++ b/hair/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1636,8 +1785,8 @@ if (window.innerWidth > 650) {
                                                                                                                          5. - -

                                                                                                                            happy biHRTday

                                                                                                                            +                                                                                                                             +

                                                                                                                            trans wrongs skull

                                                                                                                              @@ -1645,24 +1794,36 @@ if (window.innerWidth > 650) {
                                                                                                                            • card
                                                                                                                              • +
                                                                                                                            • sticker
                                                                                                                              • + +
                                                                                                                            • pin
                                                                                                                              • +
                                                                                                                            • gender
                                                                                                                            - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'
                                                                                                                          6. - -

                                                                                                                            tiny portraits

                                                                                                                            +                                                                                                                             +

                                                                                                                            queer

                                                                                                                            • print
                                                                                                                              • +
                                                                                                                            • card
                                                                                                                              • + +
                                                                                                                            • sticker
                                                                                                                              • + +
                                                                                                                            • pin
                                                                                                                              • + +
                                                                                                                            • gender
                                                                                                                              • +
                                                                                                                            - A collage showing various small (around an inch) stamps that depict people or animals. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                                                            7. @@ -1695,9 +1856,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                            - + diff --git a/hand-dyed-gold-handspun/index.html b/hand-dyed-gold-handspun/index.html index afde0802..1b79d13d 100644 --- a/hand-dyed-gold-handspun/index.html +++ b/hand-dyed-gold-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1624,31 +1773,29 @@ if (window.innerWidth > 650) {
                                                                                                                          7. - -

                                                                                                                            handcombed jacobs handspun

                                                                                                                            +                                                                                                                             +

                                                                                                                            dyeing fiber

                                                                                                                            • yarn
                                                                                                                            - a skein of dark grey 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.
                                                                                                                          8. - -

                                                                                                                            rambouillet handspun

                                                                                                                            +                                                                                                                             +

                                                                                                                            charlie the alpaca handspun

                                                                                                                            • yarn
                                                                                                                              • -
                                                                                                                            • highlight
                                                                                                                              • -
                                                                                                                            - 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. + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight
                                                                                                                            9. @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                            - + diff --git a/handcombed-jacobs-handspun/index.html b/handcombed-jacobs-handspun/index.html index f1165a3b..0a841e7f 100644 --- a/handcombed-jacobs-handspun/index.html +++ b/handcombed-jacobs-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,29 +1759,15 @@ if (window.innerWidth > 650) {
                                                                                                                            1. - -

                                                                                                                              dyeing fiber

                                                                                                                              +                                                                                                                               +

                                                                                                                              fire & ice 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. - -                                                                                                                               -
                                                                                                                              2. - -
                                                                                                                            2. - -

                                                                                                                              BFL/silk 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. @@ -1651,6 +1786,20 @@ if (window.innerWidth > 650) { +
                                                                                                                            3. + +

                                                                                                                              hand-dyed gold 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. +
                                                                                                                            @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                            - + diff --git a/handedness-toggle/index.html b/handedness-toggle/index.html index d3d2e4b2..92687d66 100644 --- a/handedness-toggle/index.html +++ b/handedness-toggle/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1835,34 +1984,6 @@ alignToggle.
                                                                                                                              -
                                                                                                                            1. - -

                                                                                                                              domain and site setup

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

                                                                                                                              backend accessibility

                                                                                                                              - -
                                                                                                                                - -
                                                                                                                              • software
                                                                                                                                • - -
                                                                                                                              - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. - -                                                                                                                               -
                                                                                                                              3. -

                                                                                                                            3. redirections

                                                                                                                              @@ -1877,6 +1998,36 @@ alignToggle.
                                                                                                                              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. + +                                                                                                                               +
                                                                                                                              5. + +
                                                                                                                            5. + +

                                                                                                                              comparing text editors

                                                                                                                              + +
                                                                                                                                + +
                                                                                                                              • 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. + +                                                                                                                               +
                                                                                                                              6. +
                                                                                                                            @@ -1905,9 +2056,30 @@ alignToggle. + +
                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                            - + diff --git a/handspun-yarn-in-party-mix-and-orange-gold/index.html b/handspun-yarn-in-party-mix-and-orange-gold/index.html index 62e93a0b..2bfff12f 100644 --- a/handspun-yarn-in-party-mix-and-orange-gold/index.html +++ b/handspun-yarn-in-party-mix-and-orange-gold/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1631,43 +1780,43 @@ if (window.innerWidth > 650) {
                                                                                                                            1. - -

                                                                                                                              ruby the alpaca handspun

                                                                                                                              +                                                                                                                               +

                                                                                                                              coral reef handspun

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

                                                                                                                              charlie the alpaca handspun

                                                                                                                              +                                                                                                                               +

                                                                                                                              light grey jacobs handspun

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

                                                                                                                              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)
                                                                                                                              4. @@ -1700,9 +1849,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                              - + diff --git a/happy-bihrtday/index.html b/happy-bihrtday/index.html index 02cb8b76..aa634497 100644 --- a/happy-bihrtday/index.html +++ b/happy-bihrtday/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1625,6 +1774,28 @@ if (window.innerWidth > 650) {
                                                                                                                                +
                                                                                                                              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. trans rights skull

                                                                                                                                @@ -1648,35 +1819,15 @@ if (window.innerWidth > 650) {
                                                                                                                              3. - -

                                                                                                                                nonbinary flag

                                                                                                                                +                                                                                                                                 +

                                                                                                                                tiny mushrooms

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

                                                                                                                                spotted towhee

                                                                                                                                - -
                                                                                                                                  - -
                                                                                                                                • print
                                                                                                                                  • - -
                                                                                                                                • card
                                                                                                                                  • - -
                                                                                                                                - A block print of a spotted towhee mid-leap. + 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.
                                                                                                                                5. @@ -1709,9 +1860,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                - + diff --git a/happy-solstice-2024/index.html b/happy-solstice-2024/index.html index 94fc8114..35bc1438 100644 --- a/happy-solstice-2024/index.html +++ b/happy-solstice-2024/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,9 +1769,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                - + diff --git a/happy-solstice-2025/index.html b/happy-solstice-2025/index.html index b0896dbb..11e133cb 100644 --- a/happy-solstice-2025/index.html +++ b/happy-solstice-2025/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,6 +1758,22 @@ if (window.innerWidth > 650) {
                                                                                                                                  +
                                                                                                                                1. + +

                                                                                                                                  rambouillet handspun

                                                                                                                                  + +
                                                                                                                                    + +
                                                                                                                                  • yarn
                                                                                                                                    • + +
                                                                                                                                  • highlight
                                                                                                                                    • + +
                                                                                                                                  + 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. patchwork wallet

                                                                                                                                  @@ -1626,33 +1791,17 @@ if (window.innerWidth > 650) {
                                                                                                                                3. - -

                                                                                                                                  quorbs

                                                                                                                                  +                                                                                                                                   +

                                                                                                                                  dragon mask

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

                                                                                                                                  brooke's notebook

                                                                                                                                  - -
                                                                                                                                    - -
                                                                                                                                  • book
                                                                                                                                    • - -
                                                                                                                                  • highlight
                                                                                                                                    • - -
                                                                                                                                  - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + 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.
                                                                                                                                  5. @@ -1685,9 +1834,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                  - + diff --git a/heron/index.html b/heron/index.html index ebc20737..7aa75538 100644 --- a/heron/index.html +++ b/heron/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,40 +1776,8 @@ if (window.innerWidth > 650) {
                                                                                                                                  1. - -

                                                                                                                                    happy biHRTday

                                                                                                                                    - -
                                                                                                                                      - -
                                                                                                                                    • print
                                                                                                                                      • - -
                                                                                                                                    • card
                                                                                                                                      • - -
                                                                                                                                    • gender
                                                                                                                                      • - -
                                                                                                                                    - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' - -                                                                                                                                     -
                                                                                                                                    2. - -
                                                                                                                                  2. - -

                                                                                                                                    tiny portraits

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

                                                                                                                                    swallowtail on snowdrops

                                                                                                                                    +                                                                                                                                     +

                                                                                                                                    fat raccoon

                                                                                                                                      @@ -1671,7 +1788,39 @@ if (window.innerWidth > 650) {
                                                                                                                                    • shirt
                                                                                                                                    - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + +                                                                                                                                     +
                                                                                                                                    4. + +
                                                                                                                                  4. + +

                                                                                                                                    loon

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

                                                                                                                                    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.
                                                                                                                                    6. @@ -1704,9 +1853,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                    - + diff --git a/hummingbird-become-ungovernable/index.html b/hummingbird-become-ungovernable/index.html index f883eda2..904fd464 100644 --- a/hummingbird-become-ungovernable/index.html +++ b/hummingbird-become-ungovernable/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,51 +1776,49 @@ if (window.innerWidth > 650) {
                                                                                                                                    1. - -

                                                                                                                                      heron

                                                                                                                                      +                                                                                                                                       +

                                                                                                                                      artisans cooperative shirts

                                                                                                                                        -
                                                                                                                                      • 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 black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail.
                                                                                                                                    2. - -

                                                                                                                                      killdeer

                                                                                                                                      +                                                                                                                                       +

                                                                                                                                      greeting loons

                                                                                                                                        -
                                                                                                                                      • print
                                                                                                                                        • -
                                                                                                                                      • card
                                                                                                                                        • +
                                                                                                                                      • print
                                                                                                                                        • + +
                                                                                                                                      • highlight
                                                                                                                                        • +
                                                                                                                                      - A print of a killdeer in black ink. + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards.
                                                                                                                                    3. - -

                                                                                                                                      iris

                                                                                                                                      +                                                                                                                                       +

                                                                                                                                      crow

                                                                                                                                      • print
                                                                                                                                        • -
                                                                                                                                      • card
                                                                                                                                        • -
                                                                                                                                      - 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + 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. @@ -1704,9 +1851,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                      - + diff --git a/icelandic-lamb-handspun/index.html b/icelandic-lamb-handspun/index.html index 03cbcdd3..ed1f17aa 100644 --- a/icelandic-lamb-handspun/index.html +++ b/icelandic-lamb-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                      1. - -

                                                                                                                                        orion handspun

                                                                                                                                        +                                                                                                                                         +

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

                                                                                                                                        coral reef handspun

                                                                                                                                        +                                                                                                                                         +

                                                                                                                                        handspun yarn in party mix and orange-gold

                                                                                                                                        • yarn
                                                                                                                                        - 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. + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white.
                                                                                                                                      3. - -

                                                                                                                                        rambouillet handspun

                                                                                                                                        +                                                                                                                                         +

                                                                                                                                        spinning plants

                                                                                                                                        • yarn
                                                                                                                                          • -
                                                                                                                                        • highlight
                                                                                                                                          • -
                                                                                                                                        - 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. + 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. @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                        - + diff --git a/in-the-news/index.html b/in-the-news/index.html index 25fe6cbf..dcaccebe 100644 --- a/in-the-news/index.html +++ b/in-the-news/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1618,51 +1767,51 @@ if (window.innerWidth > 650) {
                                                                                                                                        1. - -

                                                                                                                                          happy biHRTday

                                                                                                                                          +                                                                                                                                           +

                                                                                                                                          networks of trans care

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

                                                                                                                                          boypussy (mature)

                                                                                                                                          • print
                                                                                                                                            • -
                                                                                                                                          • card
                                                                                                                                            • +
                                                                                                                                          • sticker
                                                                                                                                            • + +
                                                                                                                                          • shirt
                                                                                                                                            • + +
                                                                                                                                          • pin
                                                                                                                                          • gender
                                                                                                                                          - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.
                                                                                                                                        3. - -

                                                                                                                                          gender as a proxy variable

                                                                                                                                          +                                                                                                                                           +

                                                                                                                                          on the ubiquity of 'enby'

                                                                                                                                          • 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. - -                                                                                                                                           -
                                                                                                                                          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. + 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. @@ -1695,9 +1844,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                          - + diff --git a/index.html b/index.html index 18d34241..015f5ed5 100644 --- a/index.html +++ b/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1346,9 +1494,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                          - + diff --git a/intro-to-wireframing/index.html b/intro-to-wireframing/index.html index 2e1020a0..b53d3044 100644 --- a/intro-to-wireframing/index.html +++ b/intro-to-wireframing/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,47 @@ if (window.innerWidth > 650) {
                                                                                                                                          1. - -

                                                                                                                                            eleventy lessons

                                                                                                                                            +                                                                                                                                             +

                                                                                                                                            gender in data models

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

                                                                                                                                            screen reader optimizations

                                                                                                                                            - -
                                                                                                                                              - -
                                                                                                                                            • software
                                                                                                                                              • - -
                                                                                                                                            - Image unrelated to post. A crow poses on driftwood against a whitish sky. - -                                                                                                                                             -
                                                                                                                                            3. - -
                                                                                                                                          3. - -

                                                                                                                                            azure locations and file crawling

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

                                                                                                                                            my favorite git flag

                                                                                                                                            + +
                                                                                                                                              + +
                                                                                                                                            • software
                                                                                                                                              • + +
                                                                                                                                            + Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk. + +                                                                                                                                             +
                                                                                                                                            5. + +
                                                                                                                                          5. + +

                                                                                                                                            backend accessibility

                                                                                                                                            + +
                                                                                                                                              + +
                                                                                                                                            • software
                                                                                                                                              • + +
                                                                                                                                            + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font.
                                                                                                                                            6. @@ -1681,9 +1832,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                            - + diff --git a/iris/index.html b/iris/index.html index 7ce12656..16f425f3 100644 --- a/iris/index.html +++ b/iris/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1625,24 +1774,26 @@ if (window.innerWidth > 650) {
                                                                                                                                            1. - -

                                                                                                                                              rope (one) (mature)

                                                                                                                                              +                                                                                                                                               +

                                                                                                                                              slightly weird man club

                                                                                                                                              • print
                                                                                                                                                • +
                                                                                                                                              • shirt
                                                                                                                                                • +
                                                                                                                                              • gender
                                                                                                                                              - A print of a nude trans woman in an asymmetrical rope harness. + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient
                                                                                                                                            2. - -

                                                                                                                                              nonbinary flag

                                                                                                                                              +                                                                                                                                               +

                                                                                                                                              queer

                                                                                                                                                @@ -1650,17 +1801,21 @@ if (window.innerWidth > 650) {
                                                                                                                                              • card
                                                                                                                                                • +
                                                                                                                                              • sticker
                                                                                                                                                • + +
                                                                                                                                              • pin
                                                                                                                                                • +
                                                                                                                                              • gender
                                                                                                                                              - A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                                                                            3. - -

                                                                                                                                              stellar's jay

                                                                                                                                              +                                                                                                                                               +

                                                                                                                                              heron

                                                                                                                                                @@ -1671,7 +1826,7 @@ if (window.innerWidth > 650) {
                                                                                                                                              • 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. @@ -1704,9 +1859,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                              - + diff --git a/junco/index.html b/junco/index.html index 1e6eecb1..9dc7b554 100644 --- a/junco/index.html +++ b/junco/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,22 +1771,8 @@ if (window.innerWidth > 650) {
                                                                                                                                              1. - -

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

                                                                                                                                                heron

                                                                                                                                                +                                                                                                                                                 +

                                                                                                                                                nonbinary flag

                                                                                                                                                  @@ -1645,17 +1780,17 @@ if (window.innerWidth > 650) {
                                                                                                                                                • 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 of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
                                                                                                                                              3. - -

                                                                                                                                                flatfish

                                                                                                                                                +                                                                                                                                                 +

                                                                                                                                                booby (congrats on the top surgery)

                                                                                                                                                  @@ -1663,8 +1798,32 @@ if (window.innerWidth > 650) {
                                                                                                                                                • card
                                                                                                                                                  • +
                                                                                                                                                • gender
                                                                                                                                                  • +
                                                                                                                                                - A print of a simple flatfish design inked in sepia. + A landscape-oriented white card with a two-color print of a blue-footed booby. + +                                                                                                                                                 +
                                                                                                                                                4. + +
                                                                                                                                              4. + +

                                                                                                                                                queer

                                                                                                                                                + +
                                                                                                                                                  + +
                                                                                                                                                • print
                                                                                                                                                  • + +
                                                                                                                                                • card
                                                                                                                                                  • + +
                                                                                                                                                • sticker
                                                                                                                                                  • + +
                                                                                                                                                • pin
                                                                                                                                                  • + +
                                                                                                                                                • gender
                                                                                                                                                  • + +
                                                                                                                                                + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                                                                                5. @@ -1697,9 +1856,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                - + diff --git a/keffiyah-fishing-net-pattern/index.html b/keffiyah-fishing-net-pattern/index.html index faa3985f..2467bc3f 100644 --- a/keffiyah-fishing-net-pattern/index.html +++ b/keffiyah-fishing-net-pattern/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1803,45 +1952,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                1. - -

                                                                                                                                                  pride dice bags

                                                                                                                                                  +                                                                                                                                                   +

                                                                                                                                                  acadia mitts

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

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

                                                                                                                                                  brooke's scarf

                                                                                                                                                  +                                                                                                                                                   +

                                                                                                                                                  sideways canvas shirt

                                                                                                                                                  • 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. + 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. @@ -1874,9 +2023,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                  - + diff --git a/kestrel-zine/index.html b/kestrel-zine/index.html index 9aca1936..a9933742 100644 --- a/kestrel-zine/index.html +++ b/kestrel-zine/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1619,55 +1768,55 @@ if (window.innerWidth > 650) {
                                                                                                                                                  1. - -

                                                                                                                                                    congrats on the gay

                                                                                                                                                    +                                                                                                                                                     +

                                                                                                                                                    hair

                                                                                                                                                    • print
                                                                                                                                                      • -
                                                                                                                                                    • card
                                                                                                                                                      • -
                                                                                                                                                    • gender
                                                                                                                                                    - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + A print in black ink of belly hair.
                                                                                                                                                  2. - -

                                                                                                                                                    swallowtail on snowdrops

                                                                                                                                                    +                                                                                                                                                     +

                                                                                                                                                    artisans cooperative shirts

                                                                                                                                                      -
                                                                                                                                                    • print
                                                                                                                                                      • - -
                                                                                                                                                    • card
                                                                                                                                                      • -
                                                                                                                                                    • shirt
                                                                                                                                                      • +
                                                                                                                                                    • print
                                                                                                                                                      • +
                                                                                                                                                    - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + 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. - -

                                                                                                                                                    trans the world

                                                                                                                                                    +                                                                                                                                                     +

                                                                                                                                                    girldick (mature)

                                                                                                                                                    • print
                                                                                                                                                      • +
                                                                                                                                                    • sticker
                                                                                                                                                      • +
                                                                                                                                                    • 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 butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
                                                                                                                                                    4. @@ -1700,9 +1849,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                    - + diff --git a/killdeer/index.html b/killdeer/index.html index 347ffbb5..a5339280 100644 --- a/killdeer/index.html +++ b/killdeer/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,8 +1771,40 @@ if (window.innerWidth > 650) {
                                                                                                                                                    1. - -

                                                                                                                                                      bottom growth (mature)

                                                                                                                                                      +                                                                                                                                                       +

                                                                                                                                                      tiny portraits

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

                                                                                                                                                      slightly weird man club

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

                                                                                                                                                      hair

                                                                                                                                                        @@ -1632,37 +1813,7 @@ if (window.innerWidth > 650) {
                                                                                                                                                      • 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. - -                                                                                                                                                       -
                                                                                                                                                      4. - -
                                                                                                                                                    4. - -

                                                                                                                                                      kniphofia

                                                                                                                                                      - -
                                                                                                                                                        - -
                                                                                                                                                      • print
                                                                                                                                                        • - -
                                                                                                                                                      - A print of a brightly colored flower in 4 layers of color - -                                                                                                                                                       -
                                                                                                                                                      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 + A print in black ink of belly hair.
                                                                                                                                                      6. @@ -1695,9 +1846,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                      - + diff --git a/kniphofia/index.html b/kniphofia/index.html index e407658d..f70f3ef2 100644 --- a/kniphofia/index.html +++ b/kniphofia/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,6 +1758,20 @@ if (window.innerWidth > 650) {
                                                                                                                                                        +
                                                                                                                                                      1. + +

                                                                                                                                                        printmaking paper notes

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

                                                                                                                                                      2. pronoun patches

                                                                                                                                                        @@ -1628,8 +1791,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                      3. - -

                                                                                                                                                        junco

                                                                                                                                                        +                                                                                                                                                         +

                                                                                                                                                        queer

                                                                                                                                                          @@ -1637,22 +1800,14 @@ if (window.innerWidth > 650) {
                                                                                                                                                        • 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. - -

                                                                                                                                                        tiny mushrooms

                                                                                                                                                        - -
                                                                                                                                                          +
                                                                                                                                                        • sticker
                                                                                                                                                          • -
                                                                                                                                                        • print
                                                                                                                                                          • +
                                                                                                                                                        • pin
                                                                                                                                                          • + +
                                                                                                                                                        • 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. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space.
                                                                                                                                                        5. @@ -1685,9 +1840,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                        - + diff --git a/knit-shrimp/index.html b/knit-shrimp/index.html index ac39415a..a72e44d6 100644 --- a/knit-shrimp/index.html +++ b/knit-shrimp/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,47 +1764,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                        1. - -

                                                                                                                                                          sideways canvas shirt

                                                                                                                                                          +                                                                                                                                                           +

                                                                                                                                                          keffiyah fishing net pattern

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

                                                                                                                                                          pride dice bags

                                                                                                                                                          +                                                                                                                                                           +

                                                                                                                                                          butch hands pattern

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

                                                                                                                                                          on the shoulders of giants

                                                                                                                                                          +                                                                                                                                                           +

                                                                                                                                                          pink socks

                                                                                                                                                            -
                                                                                                                                                          • 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 + 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.
                                                                                                                                                          4. @@ -1688,9 +1835,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                          - + diff --git a/leaf-patches/index.html b/leaf-patches/index.html index 1582240f..7efffea4 100644 --- a/leaf-patches/index.html +++ b/leaf-patches/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                          1. - -

                                                                                                                                                            little critter pouch

                                                                                                                                                            +                                                                                                                                                             +

                                                                                                                                                            gradient purse strap

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

                                                                                                                                                            x-acto knife sheath

                                                                                                                                                            +                                                                                                                                                             +

                                                                                                                                                            fishhook pride keychains

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

                                                                                                                                                            brooke's cuff bracelets

                                                                                                                                                            +                                                                                                                                                             +

                                                                                                                                                            zipper bifold (green)

                                                                                                                                                            • leather
                                                                                                                                                            - Olive green leather cuffs with silver spikes and a shearling lining. + A collage showing a green leather wallet with a zippered pocket built into one external side.
                                                                                                                                                            4. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                            - + diff --git a/leather-chest-harness/index.html b/leather-chest-harness/index.html index e943f987..2c6392cc 100644 --- a/leather-chest-harness/index.html +++ b/leather-chest-harness/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                            1. - -

                                                                                                                                                              leaf patches

                                                                                                                                                              +                                                                                                                                                               +

                                                                                                                                                              mouse coin purse

                                                                                                                                                              • leather
                                                                                                                                                              - Several oak-leaf-shaped leather patches with stitching holes punched around the edges. + 2 image collage. Both images show different sides of a small black leather mouse-shaped coin purse. There is a rainbow zipper that travels along the 'spine' of the mouse, and the zipper pull becomes the tail.
                                                                                                                                                            2. - -

                                                                                                                                                              circle bag

                                                                                                                                                              +                                                                                                                                                               +

                                                                                                                                                              sora's collar

                                                                                                                                                              • leather
                                                                                                                                                              - A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + 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. - -

                                                                                                                                                              piñatex wallet with zipper

                                                                                                                                                              +                                                                                                                                                               +

                                                                                                                                                              vertical zipper card wallet

                                                                                                                                                              • leather
                                                                                                                                                              - 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 collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
                                                                                                                                                              4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                              - + diff --git a/leather-keychains/index.html b/leather-keychains/index.html index 43b12664..f148c1dc 100644 --- a/leather-keychains/index.html +++ b/leather-keychains/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1617,34 +1766,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                -
                                                                                                                                                              1. - -

                                                                                                                                                                leatherworking favorites

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

                                                                                                                                                                sunflower

                                                                                                                                                                - -
                                                                                                                                                                  - -
                                                                                                                                                                • leather
                                                                                                                                                                  • - -
                                                                                                                                                                - A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . - -                                                                                                                                                                 -
                                                                                                                                                                3. -

                                                                                                                                                              3. piñatex wallet with zipper

                                                                                                                                                                @@ -1659,6 +1780,34 @@ if (window.innerWidth > 650) {
                                                                                                                                                                4. +
                                                                                                                                                              4. + +

                                                                                                                                                                circle bag

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

                                                                                                                                                                x-acto knife sheath

                                                                                                                                                                + +
                                                                                                                                                                  + +
                                                                                                                                                                • leather
                                                                                                                                                                  • + +
                                                                                                                                                                + 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. + +                                                                                                                                                                 +
                                                                                                                                                                6. +
                                                                                                                                                              @@ -1687,9 +1836,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                              - + diff --git a/leather-lighter-case/index.html b/leather-lighter-case/index.html index e0dd0929..dad35ce7 100644 --- a/leather-lighter-case/index.html +++ b/leather-lighter-case/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,33 +1759,29 @@ if (window.innerWidth > 650) {
                                                                                                                                                              1. - -

                                                                                                                                                                bag strap

                                                                                                                                                                +                                                                                                                                                                 +

                                                                                                                                                                eight pocket bifold

                                                                                                                                                                • leather
                                                                                                                                                                - A nylon webbing shoulder strap in bright teal with clips on each end. + 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. - -

                                                                                                                                                                tooled leather patches

                                                                                                                                                                +                                                                                                                                                                 +

                                                                                                                                                                leather keychains

                                                                                                                                                                • leather
                                                                                                                                                                  • -
                                                                                                                                                                • gender
                                                                                                                                                                  • - -
                                                                                                                                                                • patch
                                                                                                                                                                  • -
                                                                                                                                                                - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + 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. @@ -1683,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                - + diff --git a/leather-long-stitch-journals/index.html b/leather-long-stitch-journals/index.html index 9105a024..ce74b974 100644 --- a/leather-long-stitch-journals/index.html +++ b/leather-long-stitch-journals/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,43 +1764,47 @@ if (window.innerWidth > 650) {
                                                                                                                                                                1. - -

                                                                                                                                                                  eight pocket bifold

                                                                                                                                                                  +                                                                                                                                                                   +

                                                                                                                                                                  proud dad wallet

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

                                                                                                                                                                  vertical bifold

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

                                                                                                                                                                  square watercolor pad

                                                                                                                                                                  +                                                                                                                                                                   +

                                                                                                                                                                  black and red journal

                                                                                                                                                                  • book
                                                                                                                                                                    • +
                                                                                                                                                                  • leather
                                                                                                                                                                    • +
                                                                                                                                                                  - A two panel collage showing a square book with a tan cover and blue and gold endpapers. + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + +                                                                                                                                                                   +
                                                                                                                                                                  4. + +
                                                                                                                                                                4. + +

                                                                                                                                                                  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.
                                                                                                                                                                  5. @@ -1684,9 +1837,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                  - + diff --git a/leather-strap-journal/index.html b/leather-strap-journal/index.html index 08d0eca0..3b41dd12 100644 --- a/leather-strap-journal/index.html +++ b/leather-strap-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,17 +1769,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                  1. - -

                                                                                                                                                                    leather long-stitch journals

                                                                                                                                                                    +                                                                                                                                                                     +

                                                                                                                                                                    Acadia coloring 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 five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.
                                                                                                                                                                    2. @@ -1650,15 +1797,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                  2. - -

                                                                                                                                                                    lined notebook

                                                                                                                                                                    +                                                                                                                                                                     +

                                                                                                                                                                    tiny books

                                                                                                                                                                    • book
                                                                                                                                                                    - A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. + A three panel collage showing a book held in the palm of a hand.
                                                                                                                                                                    3. @@ -1691,9 +1838,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                    - + diff --git a/leatherworking-favorites/index.html b/leatherworking-favorites/index.html index 7b1f618d..771d6922 100644 --- a/leatherworking-favorites/index.html +++ b/leatherworking-favorites/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1738,45 +1887,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                    1. - -

                                                                                                                                                                      triangle pouch

                                                                                                                                                                      +                                                                                                                                                                       +

                                                                                                                                                                      vertical card wallet

                                                                                                                                                                      • leather
                                                                                                                                                                      - 5 small triangular pouches made of leather in two sizes and various colors. + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket.
                                                                                                                                                                    2. - -

                                                                                                                                                                      designing a bag

                                                                                                                                                                      +                                                                                                                                                                       +

                                                                                                                                                                      piñatex wallet with zipper

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

                                                                                                                                                                      double bill pocket bifold

                                                                                                                                                                      +                                                                                                                                                                       +

                                                                                                                                                                      vertical bifold

                                                                                                                                                                      • leather
                                                                                                                                                                      - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket.
                                                                                                                                                                      4. @@ -1809,9 +1956,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                      - + diff --git a/light-grey-jacobs-handspun/index.html b/light-grey-jacobs-handspun/index.html index f4839029..029a0a06 100644 --- a/light-grey-jacobs-handspun/index.html +++ b/light-grey-jacobs-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,6 +1758,34 @@ if (window.innerWidth > 650) {
                                                                                                                                                                        +
                                                                                                                                                                      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. + +

                                                                                                                                                                        hand-dyed gold 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. +

                                                                                                                                                                      3. handspun yarn in party mix and orange-gold

                                                                                                                                                                        @@ -1623,36 +1800,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                        4. -
                                                                                                                                                                      4. - -

                                                                                                                                                                        rambouillet handspun

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

                                                                                                                                                                        handcombed jacobs handspun

                                                                                                                                                                        - -
                                                                                                                                                                          - -
                                                                                                                                                                        • yarn
                                                                                                                                                                          • - -
                                                                                                                                                                        - a skein of dark grey handspun yarn - -                                                                                                                                                                         -
                                                                                                                                                                        6. -
                                                                                                                                                                      @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                      - + diff --git a/lined-notebook/index.html b/lined-notebook/index.html index a9231672..cd14d814 100644 --- a/lined-notebook/index.html +++ b/lined-notebook/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,6 +1771,20 @@ if (window.innerWidth > 650) {
                                                                                                                                                                        +
                                                                                                                                                                      1. + +

                                                                                                                                                                        Acadia coloring journal

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

                                                                                                                                                                      2. green memo pad

                                                                                                                                                                        @@ -1637,31 +1800,17 @@ if (window.innerWidth > 650) {
                                                                                                                                                                      3. - -

                                                                                                                                                                        orange green journal

                                                                                                                                                                        +                                                                                                                                                                         +

                                                                                                                                                                        brooke's notebook

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

                                                                                                                                                                        black and red journal

                                                                                                                                                                        - -
                                                                                                                                                                          - -
                                                                                                                                                                        • book
                                                                                                                                                                          • - -
                                                                                                                                                                        • leather
                                                                                                                                                                          • +
                                                                                                                                                                        • highlight
                                                                                                                                                                        - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
                                                                                                                                                                        5. @@ -1694,9 +1843,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                        - + diff --git a/little-critter-pouch/index.html b/little-critter-pouch/index.html index befe1bef..5e4f50b5 100644 --- a/little-critter-pouch/index.html +++ b/little-critter-pouch/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,43 +1764,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                        1. - -

                                                                                                                                                                          brooke's suspenders

                                                                                                                                                                          +                                                                                                                                                                           +

                                                                                                                                                                          eight pocket bifold

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

                                                                                                                                                                          o-ring bracelet

                                                                                                                                                                          +                                                                                                                                                                           +

                                                                                                                                                                          zipper bifold (green)

                                                                                                                                                                          • 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 collage showing a green leather wallet with a zippered pocket built into one external side.
                                                                                                                                                                        3. - -

                                                                                                                                                                          vertical zipper card wallet

                                                                                                                                                                          +                                                                                                                                                                           +

                                                                                                                                                                          sora's collar

                                                                                                                                                                          • leather
                                                                                                                                                                          - 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 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. @@ -1684,9 +1833,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                          - + diff --git a/lobstah/index.html b/lobstah/index.html index 5f381cf8..71e7ce3c 100644 --- a/lobstah/index.html +++ b/lobstah/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,6 +1758,20 @@ if (window.innerWidth > 650) {
                                                                                                                                                                            +
                                                                                                                                                                          1. + +

                                                                                                                                                                            foldy wallet with thumb slide

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

                                                                                                                                                                          2. vertical zipper card wallet

                                                                                                                                                                            @@ -1624,33 +1787,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                          3. - -

                                                                                                                                                                            tooled leather patches

                                                                                                                                                                            - -
                                                                                                                                                                              - -
                                                                                                                                                                            • leather
                                                                                                                                                                              • - -
                                                                                                                                                                            • gender
                                                                                                                                                                              • - -
                                                                                                                                                                            • patch
                                                                                                                                                                              • - -
                                                                                                                                                                            - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. - -                                                                                                                                                                             -
                                                                                                                                                                            4. - -
                                                                                                                                                                          4. - -

                                                                                                                                                                            leather chest harness

                                                                                                                                                                            +                                                                                                                                                                             +

                                                                                                                                                                            nine pocket bifold

                                                                                                                                                                            • leather
                                                                                                                                                                            - Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + 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. @@ -1683,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                            - + diff --git a/log-cabin-dishtowels/index.html b/log-cabin-dishtowels/index.html index 174b1723..515ba743 100644 --- a/log-cabin-dishtowels/index.html +++ b/log-cabin-dishtowels/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1666,9 +1815,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                            - + diff --git a/long-zipper-bifold/index.html b/long-zipper-bifold/index.html index 275330e1..45737986 100644 --- a/long-zipper-bifold/index.html +++ b/long-zipper-bifold/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,29 +1759,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                            1. - -

                                                                                                                                                                              leather keychains

                                                                                                                                                                              +                                                                                                                                                                               +

                                                                                                                                                                              aaron's mask

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

                                                                                                                                                                              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. + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
                                                                                                                                                                              3. @@ -1651,6 +1786,20 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                            3. + +

                                                                                                                                                                              lobstah

                                                                                                                                                                              + +
                                                                                                                                                                                + +
                                                                                                                                                                              • leather
                                                                                                                                                                                • + +
                                                                                                                                                                              + Two red leather lobster ornaments, about 4-5 in long each. + +                                                                                                                                                                               +
                                                                                                                                                                              4. +
                                                                                                                                                                            @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                            - + diff --git a/loon/index.html b/loon/index.html index 42e17101..bad1faac 100644 --- a/loon/index.html +++ b/loon/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,22 +1758,22 @@ if (window.innerWidth > 650) {
                                                                                                                                                                            1. - -

                                                                                                                                                                              tiny mushrooms

                                                                                                                                                                              +                                                                                                                                                                               +

                                                                                                                                                                              become unbutterable

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

                                                                                                                                                                              fat raccoon

                                                                                                                                                                              +                                                                                                                                                                               +

                                                                                                                                                                              killdeer

                                                                                                                                                                                @@ -1632,26 +1781,24 @@ if (window.innerWidth > 650) {
                                                                                                                                                                              • card
                                                                                                                                                                                • -
                                                                                                                                                                              • shirt
                                                                                                                                                                                • -
                                                                                                                                                                              - A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + A print of a killdeer in black ink.
                                                                                                                                                                            3. - -

                                                                                                                                                                              quorbs

                                                                                                                                                                              +                                                                                                                                                                               +

                                                                                                                                                                              five of them

                                                                                                                                                                              • 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 five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing.
                                                                                                                                                                              4. @@ -1684,9 +1831,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                              - + diff --git a/loud-table-runner/index.html b/loud-table-runner/index.html index 717f5256..50c88a8d 100644 --- a/loud-table-runner/index.html +++ b/loud-table-runner/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,20 +1759,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                -
                                                                                                                                                                              1. - -

                                                                                                                                                                                pink, lime, and grey shawl

                                                                                                                                                                                - -
                                                                                                                                                                                  - -
                                                                                                                                                                                • weaving
                                                                                                                                                                                  • - -
                                                                                                                                                                                - 2 image collage. Top image shows a shawl folded once on a large table, with three cones of yarn on top. It is plain weave with lime and pink warp and grey weft with alternating lime and pink stripes, and has about 4 inches of fringe at both ends. Bottom image is a closer picture of the weave. - -                                                                                                                                                                                 -
                                                                                                                                                                                2. -

                                                                                                                                                                              2. rainbow shawl

                                                                                                                                                                                @@ -1638,6 +1773,20 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                3. +
                                                                                                                                                                              3. + +

                                                                                                                                                                                pink, lime, and grey shawl

                                                                                                                                                                                + +
                                                                                                                                                                                  + +
                                                                                                                                                                                • weaving
                                                                                                                                                                                  • + +
                                                                                                                                                                                + 2 image collage. Top image shows a shawl folded once on a large table, with three cones of yarn on top. It is plain weave with lime and pink warp and grey weft with alternating lime and pink stripes, and has about 4 inches of fringe at both ends. Bottom image is a closer picture of the weave. + +                                                                                                                                                                                 +
                                                                                                                                                                                4. +
                                                                                                                                                                              @@ -1666,9 +1815,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                              - + diff --git a/luminescent/index.html b/luminescent/index.html index d5c01bab..92519008 100644 --- a/luminescent/index.html +++ b/luminescent/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,44 +1764,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                              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. - -

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

                                                                                                                                                                                flicker

                                                                                                                                                                                +                                                                                                                                                                                 +

                                                                                                                                                                                fat raccoon

                                                                                                                                                                                  @@ -1663,7 +1776,37 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                • shirt
                                                                                                                                                                                - 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 block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + +                                                                                                                                                                                 +
                                                                                                                                                                                4. + +
                                                                                                                                                                              4. + +

                                                                                                                                                                                printmaking paper notes

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

                                                                                                                                                                                congrats on the autism/adhd

                                                                                                                                                                                + +
                                                                                                                                                                                  + +
                                                                                                                                                                                • print
                                                                                                                                                                                  • + +
                                                                                                                                                                                • 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.
                                                                                                                                                                                6. @@ -1696,9 +1839,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                - + diff --git a/lupine/index.html b/lupine/index.html index 1472514c..ac5843b5 100644 --- a/lupine/index.html +++ b/lupine/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,8 +1776,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                1. - -

                                                                                                                                                                                  trans wrongs skull

                                                                                                                                                                                  +                                                                                                                                                                                   +

                                                                                                                                                                                  nonbinary flag

                                                                                                                                                                                    @@ -1636,42 +1785,44 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                  • card
                                                                                                                                                                                    • -
                                                                                                                                                                                  • sticker
                                                                                                                                                                                    • +
                                                                                                                                                                                  • gender
                                                                                                                                                                                    • -
                                                                                                                                                                                  • pin
                                                                                                                                                                                    • +
                                                                                                                                                                                  + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + +                                                                                                                                                                                   +
                                                                                                                                                                                  2. + +
                                                                                                                                                                                2. + +

                                                                                                                                                                                  booby (congrats on the top surgery)

                                                                                                                                                                                  + +
                                                                                                                                                                                    + +
                                                                                                                                                                                  • print
                                                                                                                                                                                    • + +
                                                                                                                                                                                  • card
                                                                                                                                                                                  • gender
                                                                                                                                                                                  - A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + A landscape-oriented white card with a two-color print of a blue-footed booby.
                                                                                                                                                                                3. - -

                                                                                                                                                                                  tiny mushrooms

                                                                                                                                                                                  +                                                                                                                                                                                   +

                                                                                                                                                                                  junco

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

                                                                                                                                                                                  become unbutterable

                                                                                                                                                                                  - -
                                                                                                                                                                                    - -
                                                                                                                                                                                  • print
                                                                                                                                                                                    • +
                                                                                                                                                                                  • card
                                                                                                                                                                                  - 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 junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia.
                                                                                                                                                                                  5. @@ -1704,9 +1855,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                  - + diff --git a/makers-mark-keychain/index.html b/makers-mark-keychain/index.html index 04a4ded5..c91210e0 100644 --- a/makers-mark-keychain/index.html +++ b/makers-mark-keychain/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,15 +1759,17 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                  1. - -

                                                                                                                                                                                    double bill pocket bifold

                                                                                                                                                                                    +                                                                                                                                                                                     +

                                                                                                                                                                                    proud dad wallet

                                                                                                                                                                                    • leather
                                                                                                                                                                                      • +
                                                                                                                                                                                    • gender
                                                                                                                                                                                      • +
                                                                                                                                                                                    - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + A brown leather wallet with a subtle trans flag stitching across the top.
                                                                                                                                                                                    2. @@ -1638,15 +1789,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                  2. - -

                                                                                                                                                                                    vix collar

                                                                                                                                                                                    +                                                                                                                                                                                     +

                                                                                                                                                                                    leather lighter case

                                                                                                                                                                                    • leather
                                                                                                                                                                                    - 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 bic lighter wrapped in leather and hand-stitched up one side.
                                                                                                                                                                                    3. @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                    - + diff --git a/mom-bag/index.html b/mom-bag/index.html index e7119fd3..012e963c 100644 --- a/mom-bag/index.html +++ b/mom-bag/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                    1. - -

                                                                                                                                                                                      black and red journal

                                                                                                                                                                                      +                                                                                                                                                                                       +

                                                                                                                                                                                      shrimp cat toy

                                                                                                                                                                                        -
                                                                                                                                                                                      • book
                                                                                                                                                                                        • -
                                                                                                                                                                                      • leather
                                                                                                                                                                                      - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange.
                                                                                                                                                                                    2. - -

                                                                                                                                                                                      brooke's suspenders

                                                                                                                                                                                      +                                                                                                                                                                                       +

                                                                                                                                                                                      mouse coin purse

                                                                                                                                                                                      • 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. + 2 image collage. Both images show different sides of a small black leather mouse-shaped coin purse. There is a rainbow zipper that travels along the 'spine' of the mouse, and the zipper pull becomes the tail.
                                                                                                                                                                                    3. - -

                                                                                                                                                                                      brooke's collar

                                                                                                                                                                                      +                                                                                                                                                                                       +

                                                                                                                                                                                      little critter pouch

                                                                                                                                                                                      • leather
                                                                                                                                                                                        • +
                                                                                                                                                                                      • highlight
                                                                                                                                                                                        • +
                                                                                                                                                                                      - A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
                                                                                                                                                                                      4. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                      - + diff --git a/moss-harness/index.html b/moss-harness/index.html index a9c0c4c1..243333fe 100644 --- a/moss-harness/index.html +++ b/moss-harness/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1611,45 +1760,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                      1. - -

                                                                                                                                                                                        little critter pouch

                                                                                                                                                                                        +                                                                                                                                                                                         +

                                                                                                                                                                                        triangle 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. + 5 small triangular pouches made of leather in two sizes and various colors.
                                                                                                                                                                                      2. - -

                                                                                                                                                                                        circle bag

                                                                                                                                                                                        +                                                                                                                                                                                         +

                                                                                                                                                                                        o-ring bracelet

                                                                                                                                                                                        • leather
                                                                                                                                                                                        - A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps.
                                                                                                                                                                                      3. - -

                                                                                                                                                                                        bag strap

                                                                                                                                                                                        +                                                                                                                                                                                         +

                                                                                                                                                                                        shrimp cat toy

                                                                                                                                                                                        • leather
                                                                                                                                                                                        - A nylon webbing shoulder strap in bright teal with clips on each end. + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange.
                                                                                                                                                                                        4. @@ -1682,9 +1829,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                        - + diff --git a/mouse-coin-purse/index.html b/mouse-coin-purse/index.html index da2d98e1..f7451d00 100644 --- a/mouse-coin-purse/index.html +++ b/mouse-coin-purse/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1604,8 +1753,40 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                        1. - -

                                                                                                                                                                                          little critter pouch

                                                                                                                                                                                          +                                                                                                                                                                                           +

                                                                                                                                                                                          proud dad wallet

                                                                                                                                                                                          + +
                                                                                                                                                                                            + +
                                                                                                                                                                                          • leather
                                                                                                                                                                                            • + +
                                                                                                                                                                                          • gender
                                                                                                                                                                                            • + +
                                                                                                                                                                                          + A brown leather wallet with a subtle trans flag stitching across the top. + +                                                                                                                                                                                           +
                                                                                                                                                                                          2. + +
                                                                                                                                                                                        2. + +

                                                                                                                                                                                          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. + +

                                                                                                                                                                                          patchwork wallet

                                                                                                                                                                                            @@ -1614,35 +1795,7 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                          • highlight
                                                                                                                                                                                          - A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. - -                                                                                                                                                                                           -
                                                                                                                                                                                          4. - -
                                                                                                                                                                                        4. - -

                                                                                                                                                                                          snap pouch

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

                                                                                                                                                                                          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'. + 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.
                                                                                                                                                                                          6. @@ -1675,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                          - + diff --git a/mousie/index.html b/mousie/index.html index ebb92a17..1d99ea01 100644 --- a/mousie/index.html +++ b/mousie/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                          1. - -

                                                                                                                                                                                            zipper bifold (green)

                                                                                                                                                                                            +                                                                                                                                                                                             +

                                                                                                                                                                                            leather keychains

                                                                                                                                                                                            • leather
                                                                                                                                                                                            - A collage showing a green leather wallet with a zippered pocket built into one external side. + 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. - -

                                                                                                                                                                                            dragon mask

                                                                                                                                                                                            +                                                                                                                                                                                             +

                                                                                                                                                                                            designing a bag

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

                                                                                                                                                                                            aaron's mask

                                                                                                                                                                                            +                                                                                                                                                                                             +

                                                                                                                                                                                            shrimp cat toy

                                                                                                                                                                                            • leather
                                                                                                                                                                                            - A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange.
                                                                                                                                                                                            4. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                            - + diff --git a/moving-images/index.html b/moving-images/index.html index bcbd12f2..91a5d49d 100644 --- a/moving-images/index.html +++ b/moving-images/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1682,45 +1831,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                            1. - -

                                                                                                                                                                                              azure locations and file crawling

                                                                                                                                                                                              +                                                                                                                                                                                               +

                                                                                                                                                                                              visual site builders and 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. + Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.
                                                                                                                                                                                            2. - -

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

                                                                                                                                                                                              intro to wireframing

                                                                                                                                                                                              +                                                                                                                                                                                               +

                                                                                                                                                                                              backend accessibility

                                                                                                                                                                                              • 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. + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font.
                                                                                                                                                                                              4. @@ -1753,9 +1900,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                              - + diff --git a/my-favorite-git-flag/index.html b/my-favorite-git-flag/index.html index 195ad0cb..ff1fbb1e 100644 --- a/my-favorite-git-flag/index.html +++ b/my-favorite-git-flag/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1633,43 +1782,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                              1. - -

                                                                                                                                                                                                visual site builders and accessibility

                                                                                                                                                                                                +                                                                                                                                                                                                 +

                                                                                                                                                                                                moving images

                                                                                                                                                                                                • software
                                                                                                                                                                                                - Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus. + 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. - -

                                                                                                                                                                                                backend accessibility

                                                                                                                                                                                                +                                                                                                                                                                                                 +

                                                                                                                                                                                                eleventy lessons

                                                                                                                                                                                                • software
                                                                                                                                                                                                - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + Image unrelated to post. Close up on a pale green hellebore flower.
                                                                                                                                                                                              3. - -

                                                                                                                                                                                                redirections

                                                                                                                                                                                                +                                                                                                                                                                                                 +

                                                                                                                                                                                                domain and site setup

                                                                                                                                                                                                • software
                                                                                                                                                                                                - Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets. + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass.
                                                                                                                                                                                                4. @@ -1702,9 +1851,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                - + diff --git a/networks-of-trans-care/index.html b/networks-of-trans-care/index.html index 8d0778dc..75b2d7d7 100644 --- a/networks-of-trans-care/index.html +++ b/networks-of-trans-care/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1624,6 +1773,38 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                  +
                                                                                                                                                                                                1. + +

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

                                                                                                                                                                                                  rope (one) (mature)

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

                                                                                                                                                                                                3. luminescent (mature)

                                                                                                                                                                                                  @@ -1640,36 +1821,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                  4. -
                                                                                                                                                                                                4. - -

                                                                                                                                                                                                  on pronouns

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

                                                                                                                                                                                                  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. - -                                                                                                                                                                                                   -
                                                                                                                                                                                                  6. -
                                                                                                                                                                                                @@ -1698,9 +1849,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                - + diff --git a/nine-pocket-bifold/index.html b/nine-pocket-bifold/index.html index 939bac8d..dbe63f90 100644 --- a/nine-pocket-bifold/index.html +++ b/nine-pocket-bifold/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                1. - -

                                                                                                                                                                                                  triangle pouch

                                                                                                                                                                                                  +                                                                                                                                                                                                   +

                                                                                                                                                                                                  leaf patches

                                                                                                                                                                                                  • leather
                                                                                                                                                                                                  - 5 small triangular pouches made of leather in two sizes and various colors. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                                                                                                                                                2. - -

                                                                                                                                                                                                  fishhook pride keychains

                                                                                                                                                                                                  +                                                                                                                                                                                                   +

                                                                                                                                                                                                  shrimp cat toy

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

                                                                                                                                                                                                  piñatex wallet with zipper

                                                                                                                                                                                                  +                                                                                                                                                                                                   +

                                                                                                                                                                                                  gradient purse strap

                                                                                                                                                                                                  • leather
                                                                                                                                                                                                  - 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 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. @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                  - + diff --git a/no-politics-wip/index.html b/no-politics-wip/index.html index cbc7aea9..ffc1d13d 100644 --- a/no-politics-wip/index.html +++ b/no-politics-wip/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1669,9 +1818,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                  - + diff --git a/nonbinary-flag/index.html b/nonbinary-flag/index.html index 58dbc070..ad366eb5 100644 --- a/nonbinary-flag/index.html +++ b/nonbinary-flag/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,37 +1776,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                    stellar's jay

                                                                                                                                                                                                    +                                                                                                                                                                                                     +

                                                                                                                                                                                                    on pronouns

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

                                                                                                                                                                                                    happy biHRTday

                                                                                                                                                                                                    - -
                                                                                                                                                                                                      - -
                                                                                                                                                                                                    • print
                                                                                                                                                                                                      • - -
                                                                                                                                                                                                    • card
                                                                                                                                                                                                      • -
                                                                                                                                                                                                    • gender
                                                                                                                                                                                                    - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder.
                                                                                                                                                                                                    3. @@ -1680,6 +1807,22 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                  3. + +

                                                                                                                                                                                                    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. + +                                                                                                                                                                                                     +
                                                                                                                                                                                                    4. +
                                                                                                                                                                                                  @@ -1708,9 +1851,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                  - + diff --git a/not-a-drill/index.html b/not-a-drill/index.html index 39403940..7cac30bb 100644 --- a/not-a-drill/index.html +++ b/not-a-drill/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,8 +1764,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                    spotted towhee

                                                                                                                                                                                                    +                                                                                                                                                                                                     +

                                                                                                                                                                                                    trans rights skull

                                                                                                                                                                                                      @@ -1624,44 +1773,44 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                    • card
                                                                                                                                                                                                      • -
                                                                                                                                                                                                    - A block print of a spotted towhee mid-leap. - -                                                                                                                                                                                                     -
                                                                                                                                                                                                    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 print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
                                                                                                                                                                                                  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. + +
                                                                                                                                                                                                  4. + +

                                                                                                                                                                                                    luminescent (mature)

                                                                                                                                                                                                    + +
                                                                                                                                                                                                      + +
                                                                                                                                                                                                    • print
                                                                                                                                                                                                      • + +
                                                                                                                                                                                                    • gender
                                                                                                                                                                                                      • + +
                                                                                                                                                                                                    + A print of a tattooed woman in bright highlighter yellow underwear.
                                                                                                                                                                                                    5. @@ -1694,9 +1843,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                    - + diff --git a/o-ring-bracelet/index.html b/o-ring-bracelet/index.html index 9695a319..c5a28ea2 100644 --- a/o-ring-bracelet/index.html +++ b/o-ring-bracelet/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,43 +1764,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                      leather lighter case

                                                                                                                                                                                                      +                                                                                                                                                                                                       +

                                                                                                                                                                                                      double bill pocket bifold

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

                                                                                                                                                                                                      vix collar

                                                                                                                                                                                                      +                                                                                                                                                                                                       +

                                                                                                                                                                                                      piñatex wallet with zipper

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

                                                                                                                                                                                                      swoop wallet

                                                                                                                                                                                                      +                                                                                                                                                                                                       +

                                                                                                                                                                                                      leather long-stitch journals

                                                                                                                                                                                                      • leather
                                                                                                                                                                                                        • +
                                                                                                                                                                                                      • book
                                                                                                                                                                                                        • +
                                                                                                                                                                                                      - 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 stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                                      4. @@ -1684,9 +1835,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                      - + diff --git a/on-pronouns/index.html b/on-pronouns/index.html index ad2bb352..c5e04383 100644 --- a/on-pronouns/index.html +++ b/on-pronouns/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1853,47 +2002,55 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                        proud dad wallet

                                                                                                                                                                                                        - -
                                                                                                                                                                                                          - -
                                                                                                                                                                                                        • leather
                                                                                                                                                                                                          • - -
                                                                                                                                                                                                        • gender
                                                                                                                                                                                                          • - -
                                                                                                                                                                                                        - A brown leather wallet with a subtle trans flag stitching across the top. - -                                                                                                                                                                                                         -
                                                                                                                                                                                                        2. - -
                                                                                                                                                                                                      2. - -

                                                                                                                                                                                                        give to trans orgs and people

                                                                                                                                                                                                        +                                                                                                                                                                                                         +

                                                                                                                                                                                                        fd signifier & oppositional sexism

                                                                                                                                                                                                        • 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. + Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field.
                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                        luminescent (mature)

                                                                                                                                                                                                        +                                                                                                                                                                                                         +

                                                                                                                                                                                                        girldick (mature)

                                                                                                                                                                                                        • print
                                                                                                                                                                                                          • +
                                                                                                                                                                                                        • sticker
                                                                                                                                                                                                          • + +
                                                                                                                                                                                                        • shirt
                                                                                                                                                                                                          • + +
                                                                                                                                                                                                        • pin
                                                                                                                                                                                                          • +
                                                                                                                                                                                                        • gender
                                                                                                                                                                                                        - A print of a tattooed woman in bright highlighter yellow underwear. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + +                                                                                                                                                                                                         +
                                                                                                                                                                                                        4. + +
                                                                                                                                                                                                      4. + +

                                                                                                                                                                                                        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.
                                                                                                                                                                                                        5. @@ -1926,9 +2083,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                        - + diff --git a/on-the-shoulders-of-giants/index.html b/on-the-shoulders-of-giants/index.html index e016642b..eb8c1d57 100644 --- a/on-the-shoulders-of-giants/index.html +++ b/on-the-shoulders-of-giants/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1614,20 +1763,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                          -
                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                          fediZineFest 2025

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

                                                                                                                                                                                                        2. pink socks

                                                                                                                                                                                                          @@ -1643,17 +1778,29 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                          pride dice bags

                                                                                                                                                                                                          +                                                                                                                                                                                                           +

                                                                                                                                                                                                          knit shrimp

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

                                                                                                                                                                                                          brooke's scarf

                                                                                                                                                                                                          + +
                                                                                                                                                                                                            + +
                                                                                                                                                                                                          • knit
                                                                                                                                                                                                          - 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 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. @@ -1686,9 +1833,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                          - + diff --git a/on-the-ubiquity-of-enby/index.html b/on-the-ubiquity-of-enby/index.html index ae858cc2..51a1dc6c 100644 --- a/on-the-ubiquity-of-enby/index.html +++ b/on-the-ubiquity-of-enby/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1624,49 +1773,57 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                            gender?

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

                                                                                                                                                                                                            geese/trans wrongs

                                                                                                                                                                                                            +                                                                                                                                                                                                             +

                                                                                                                                                                                                            congrats on the gay

                                                                                                                                                                                                            • print
                                                                                                                                                                                                              • -
                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                              • +
                                                                                                                                                                                                            • card
                                                                                                                                                                                                            • 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 greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!'
                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                            pride dice bags

                                                                                                                                                                                                            +                                                                                                                                                                                                             +

                                                                                                                                                                                                            queer

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

                                                                                                                                                                                                            proud dad wallet

                                                                                                                                                                                                            + +
                                                                                                                                                                                                              + +
                                                                                                                                                                                                            • leather
                                                                                                                                                                                                              • + +
                                                                                                                                                                                                            • gender
                                                                                                                                                                                                              • + +
                                                                                                                                                                                                            + A brown leather wallet with a subtle trans flag stitching across the top.
                                                                                                                                                                                                            5. @@ -1699,9 +1856,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                            - + diff --git a/orange-green-journal/index.html b/orange-green-journal/index.html index 4d2c0f21..5b798971 100644 --- a/orange-green-journal/index.html +++ b/orange-green-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,31 +1769,17 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                              Acadia coloring journal

                                                                                                                                                                                                              +                                                                                                                                                                                                               +

                                                                                                                                                                                                              brooke's 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. - -                                                                                                                                                                                                               -
                                                                                                                                                                                                              2. - -
                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                              leather long-stitch journals

                                                                                                                                                                                                              - -
                                                                                                                                                                                                                - -
                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                • - -
                                                                                                                                                                                                              • book
                                                                                                                                                                                                                • +
                                                                                                                                                                                                              • highlight
                                                                                                                                                                                                              - A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
                                                                                                                                                                                                              3. @@ -1663,6 +1798,22 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                            3. + +

                                                                                                                                                                                                              black and red journal

                                                                                                                                                                                                              + +
                                                                                                                                                                                                                + +
                                                                                                                                                                                                              • book
                                                                                                                                                                                                                • + +
                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                • + +
                                                                                                                                                                                                              + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + +                                                                                                                                                                                                               +
                                                                                                                                                                                                              4. +
                                                                                                                                                                                                            @@ -1691,9 +1842,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                            - + diff --git a/orange-journal/index.html b/orange-journal/index.html index fc0879d0..8ad75454 100644 --- a/orange-journal/index.html +++ b/orange-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,43 +1775,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                              orange green journal

                                                                                                                                                                                                              +                                                                                                                                                                                                               +

                                                                                                                                                                                                              baseball journal

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

                                                                                                                                                                                                              stampede journal

                                                                                                                                                                                                              +                                                                                                                                                                                                               +

                                                                                                                                                                                                              flocked notebook

                                                                                                                                                                                                              • book
                                                                                                                                                                                                              - A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + A two panel collage showing the cover and endpapers of a thick notebook.
                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                              square watercolor pad

                                                                                                                                                                                                              +                                                                                                                                                                                                               +

                                                                                                                                                                                                              black and red journal

                                                                                                                                                                                                              • book
                                                                                                                                                                                                                • +
                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                • +
                                                                                                                                                                                                              - A two panel collage showing a square book with a tan cover and blue and gold endpapers. + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART
                                                                                                                                                                                                              4. @@ -1695,9 +1846,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                              - + diff --git a/orion-handspun/index.html b/orion-handspun/index.html index 9a46c2b1..9ef653ff 100644 --- a/orion-handspun/index.html +++ b/orion-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                hand-dyed gold handspun

                                                                                                                                                                                                                +                                                                                                                                                                                                                 +

                                                                                                                                                                                                                petrichor 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, 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. - -

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

                                                                                                                                                                                                                BFL/silk handspun

                                                                                                                                                                                                                +                                                                                                                                                                                                                 +

                                                                                                                                                                                                                spinner's dream handspun

                                                                                                                                                                                                                • yarn
                                                                                                                                                                                                                - a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + a skein of a lightly variegated grey yarn in about a sport or DK weight.
                                                                                                                                                                                                                4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                - + diff --git a/palette/index.html b/palette/index.html index d8e5391a..e1c153e7 100644 --- a/palette/index.html +++ b/palette/index.html @@ -121,6 +121,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -264,7 +271,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -603,6 +610,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -865,6 +977,8 @@ pre[class*=language-]::selection { } } + + +export { HeadingAnchors } +const THEME = "theme"; + +const saveTheme = (themeValue) => { + localStorage.setItem(THEME, themeValue); +}; + +const themeLight = document.getElementById("theme-light"); +themeLight.addEventListener("input", (e) => { + saveTheme(themeLight.value); +}); + +const themeAuto = document.getElementById("theme-auto"); +themeAuto.addEventListener("input", (e) => { + saveTheme(themeAuto.auto); +}); + +const themeDark = document.getElementById("theme-dark"); +themeDark.addEventListener("input", (e) => { + saveTheme(themeDark.value); +}); + +var currentThemeValue = localStorage.getItem(THEME); +switch (currentThemeValue) { + case "light": + themeLight.checked = true; + break; + case "auto": + themeAuto.checked = true; + break; + case "dark": + themeDark.checked = true; + break; + default: + themeAuto.checked = true; +} @@ -1188,9 +1337,30 @@ export { HeadingAnchors } + +
                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                - + diff --git a/patchwork-wallet/index.html b/patchwork-wallet/index.html index bd81e864..ba854bca 100644 --- a/patchwork-wallet/index.html +++ b/patchwork-wallet/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,45 +1764,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                  brooke's cuff bracelets

                                                                                                                                                                                                                  +                                                                                                                                                                                                                   +

                                                                                                                                                                                                                  brooke's suspenders

                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                  - Olive green leather cuffs with silver spikes and a shearling lining. + 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.
                                                                                                                                                                                                                2. - -

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

                                                                                                                                                                                                                  black and red journal

                                                                                                                                                                                                                  +                                                                                                                                                                                                                   +

                                                                                                                                                                                                                  bag strap

                                                                                                                                                                                                                    -
                                                                                                                                                                                                                  • book
                                                                                                                                                                                                                    • -
                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                  - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + A nylon webbing shoulder strap in bright teal with clips on each end.
                                                                                                                                                                                                                  4. @@ -1686,9 +1833,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                                  - + diff --git a/petrichor-handspun/index.html b/petrichor-handspun/index.html index ef7ac2dc..ffe6658d 100644 --- a/petrichor-handspun/index.html +++ b/petrichor-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,29 +1759,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                    icelandic lamb handspun

                                                                                                                                                                                                                    +                                                                                                                                                                                                                     +

                                                                                                                                                                                                                    handcombed jacobs handspun

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

                                                                                                                                                                                                                    hand-dyed gold 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
                                                                                                                                                                                                                    3. @@ -1653,6 +1788,20 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                                  3. + +

                                                                                                                                                                                                                    fire & ice 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. + +                                                                                                                                                                                                                     +
                                                                                                                                                                                                                    4. +
                                                                                                                                                                                                                  @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                                  - + diff --git a/pinatex-wallet-with-zipper/index.html b/pinatex-wallet-with-zipper/index.html index 0eca87da..98b0e516 100644 --- a/pinatex-wallet-with-zipper/index.html +++ b/pinatex-wallet-with-zipper/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,15 +1759,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                    mom bag

                                                                                                                                                                                                                    +                                                                                                                                                                                                                     +

                                                                                                                                                                                                                    circle bag

                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                    - A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.
                                                                                                                                                                                                                    2. @@ -1638,15 +1787,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                                    x-acto knife sheath

                                                                                                                                                                                                                    +                                                                                                                                                                                                                     +

                                                                                                                                                                                                                    brooke's suspenders

                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                    - 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. + 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.
                                                                                                                                                                                                                    3. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                    - + diff --git a/pink-lime-and-grey-shawl/index.html b/pink-lime-and-grey-shawl/index.html index e8b43028..22a97dbf 100644 --- a/pink-lime-and-grey-shawl/index.html +++ b/pink-lime-and-grey-shawl/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1611,15 +1760,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                      loud table runner

                                                                                                                                                                                                                      +                                                                                                                                                                                                                       +

                                                                                                                                                                                                                      log cabin dishtowels

                                                                                                                                                                                                                      • weaving
                                                                                                                                                                                                                      - Folded long piece of fabric on a table. It is randomly mixed magenta, lime green, and wine purple, with occasional stripes of something glittery, fuzzy, or satiny in a variety of complementary colors. The ends have twisted fringe. + A two image collage. Image one shows 1 dishtowel fully laid out and 2 folded next to the yarn used in them. They are navy blue, yellow, and beige and in the log cabin pattern, which alternates blocks of horizontal and vertical light-dark stripes (light is yellow or beige depending, dark is always navy). They have a fringed hem on two opposing sides. Image 2 is a closeup on the pattern.
                                                                                                                                                                                                                      2. @@ -1639,15 +1788,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                      log cabin dishtowels

                                                                                                                                                                                                                      +                                                                                                                                                                                                                       +

                                                                                                                                                                                                                      loud table runner

                                                                                                                                                                                                                      • weaving
                                                                                                                                                                                                                      - A two image collage. Image one shows 1 dishtowel fully laid out and 2 folded next to the yarn used in them. They are navy blue, yellow, and beige and in the log cabin pattern, which alternates blocks of horizontal and vertical light-dark stripes (light is yellow or beige depending, dark is always navy). They have a fringed hem on two opposing sides. Image 2 is a closeup on the pattern. + Folded long piece of fabric on a table. It is randomly mixed magenta, lime green, and wine purple, with occasional stripes of something glittery, fuzzy, or satiny in a variety of complementary colors. The ends have twisted fringe.
                                                                                                                                                                                                                      3. @@ -1680,9 +1829,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                      - + diff --git a/pink-socks/index.html b/pink-socks/index.html index d42c1b13..140aadb1 100644 --- a/pink-socks/index.html +++ b/pink-socks/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,29 +1759,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                        acadia mitts

                                                                                                                                                                                                                        +                                                                                                                                                                                                                         +

                                                                                                                                                                                                                        knit shrimp

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

                                                                                                                                                                                                                        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. + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.
                                                                                                                                                                                                                        3. @@ -1653,6 +1788,20 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                                      3. + +

                                                                                                                                                                                                                        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. + +                                                                                                                                                                                                                         +
                                                                                                                                                                                                                        4. +
                                                                                                                                                                                                                      @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                      - + diff --git a/pins/index.html b/pins/index.html index 98acbcc5..e8690ac7 100644 --- a/pins/index.html +++ b/pins/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1611,8 +1760,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                        boypussy (mature)

                                                                                                                                                                                                                        +                                                                                                                                                                                                                         +

                                                                                                                                                                                                                        anarchy autism

                                                                                                                                                                                                                          @@ -1624,30 +1773,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                        • pin
                                                                                                                                                                                                                          • -
                                                                                                                                                                                                                        • gender
                                                                                                                                                                                                                          • -
                                                                                                                                                                                                                        - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. - -                                                                                                                                                                                                                         -
                                                                                                                                                                                                                        2. - -
                                                                                                                                                                                                                      2. - -

                                                                                                                                                                                                                        shrimp

                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                        • card
                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                        • sticker
                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                        • pin
                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                        - A print of a small shrimp with slender little leggies in orange ink. + A print in rainbow ink that says autism with the anarchy A.
                                                                                                                                                                                                                        3. @@ -1674,6 +1801,26 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                                      3. + +

                                                                                                                                                                                                                        shrimp

                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                        • card
                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                        • sticker
                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                        • pin
                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                        + A print of a small shrimp with slender little leggies in orange ink. + +                                                                                                                                                                                                                         +
                                                                                                                                                                                                                        4. +
                                                                                                                                                                                                                      @@ -1702,9 +1849,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                      - + diff --git a/pride-dice-bags/index.html b/pride-dice-bags/index.html index e8c5fb62..3fa8dcff 100644 --- a/pride-dice-bags/index.html +++ b/pride-dice-bags/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1633,24 +1782,42 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                        proud dad wallet

                                                                                                                                                                                                                        +                                                                                                                                                                                                                         +

                                                                                                                                                                                                                        pronoun patches

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

                                                                                                                                                                                                                        boypussy (mature)

                                                                                                                                                                                                                        +                                                                                                                                                                                                                         +

                                                                                                                                                                                                                        rope (one) (mature)

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

                                                                                                                                                                                                                        girldick (mature)

                                                                                                                                                                                                                          @@ -1665,21 +1832,7 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                        • gender
                                                                                                                                                                                                                        - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. - -                                                                                                                                                                                                                         -
                                                                                                                                                                                                                        4. - -
                                                                                                                                                                                                                      4. - -

                                                                                                                                                                                                                        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. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font.
                                                                                                                                                                                                                        5. @@ -1712,9 +1865,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                        - + diff --git a/printing-press-notes/index.html b/printing-press-notes/index.html index 94f34a88..e914a91c 100644 --- a/printing-press-notes/index.html +++ b/printing-press-notes/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1644,9 +1793,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                        - + diff --git a/printmaking-paper-notes/index.html b/printmaking-paper-notes/index.html index 0aefbee2..3f1fcf4f 100644 --- a/printmaking-paper-notes/index.html +++ b/printmaking-paper-notes/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1661,8 +1810,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                          heron

                                                                                                                                                                                                                          +                                                                                                                                                                                                                           +

                                                                                                                                                                                                                          happy biHRTday

                                                                                                                                                                                                                            @@ -1670,33 +1819,17 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                          • 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. - -

                                                                                                                                                                                                                          luminescent (mature)

                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                          • print
                                                                                                                                                                                                                            • -
                                                                                                                                                                                                                          • gender
                                                                                                                                                                                                                          - A print of a tattooed woman in bright highlighter yellow underwear. + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'
                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                          swallowtail on snowdrops

                                                                                                                                                                                                                          +                                                                                                                                                                                                                           +

                                                                                                                                                                                                                          fat raccoon

                                                                                                                                                                                                                            @@ -1707,7 +1840,25 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                          • shirt
                                                                                                                                                                                                                          - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + +                                                                                                                                                                                                                           +
                                                                                                                                                                                                                          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. @@ -1740,9 +1891,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                          - + diff --git a/pronoun-patches/index.html b/pronoun-patches/index.html index f38cbf8b..2a99f807 100644 --- a/pronoun-patches/index.html +++ b/pronoun-patches/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1641,53 +1790,55 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                            swallowtail on snowdrops

                                                                                                                                                                                                                            +                                                                                                                                                                                                                             +

                                                                                                                                                                                                                            tiny mushrooms

                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                            - A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + 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.
                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                            hummingbird become ungovernable

                                                                                                                                                                                                                            +                                                                                                                                                                                                                             +

                                                                                                                                                                                                                            slightly weird man club

                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                            - 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 that reads 'slightly weird man club' in a nonbinary flag colored gradient
                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                            not a drill

                                                                                                                                                                                                                            +                                                                                                                                                                                                                             +

                                                                                                                                                                                                                            boypussy (mature)

                                                                                                                                                                                                                            • print
                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                            • sticker
                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                            • pin
                                                                                                                                                                                                                              • + +
                                                                                                                                                                                                                            • gender
                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                            - 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 butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.
                                                                                                                                                                                                                            4. @@ -1720,9 +1871,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                                            - + diff --git a/proud-dad-wallet/index.html b/proud-dad-wallet/index.html index d167e166..19cdaaf1 100644 --- a/proud-dad-wallet/index.html +++ b/proud-dad-wallet/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,49 +1764,47 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                              in the news

                                                                                                                                                                                                                              +                                                                                                                                                                                                                               +

                                                                                                                                                                                                                              snap pouch

                                                                                                                                                                                                                                -
                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                              - 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 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather.
                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                              coming out

                                                                                                                                                                                                                              +                                                                                                                                                                                                                               +

                                                                                                                                                                                                                              x-acto knife sheath

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

                                                                                                                                                                                                                              luminescent (mature)

                                                                                                                                                                                                                              +                                                                                                                                                                                                                               +

                                                                                                                                                                                                                              tooled leather patches

                                                                                                                                                                                                                                -
                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              • patch
                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                              - A print of a tattooed woman in bright highlighter yellow underwear. + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets.
                                                                                                                                                                                                                              4. @@ -1690,9 +1837,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                              - + diff --git a/queer-book-list/index.html b/queer-book-list/index.html index 97629a8c..1dee1f80 100644 --- a/queer-book-list/index.html +++ b/queer-book-list/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1604,8 +1753,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                trans wrongs skull

                                                                                                                                                                                                                                +                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                queer

                                                                                                                                                                                                                                  @@ -1620,47 +1769,39 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                • 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.
                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                trans rights skull

                                                                                                                                                                                                                                +                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                bottom growth (mature)

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

                                                                                                                                                                                                                                tooled leather patches

                                                                                                                                                                                                                                +                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                pride dice bags

                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                • knit
                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                • patch
                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + 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. @@ -1693,9 +1834,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                - + diff --git a/queer/index.html b/queer/index.html index bf4159dd..8266c38f 100644 --- a/queer/index.html +++ b/queer/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1636,40 +1785,38 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                  pronoun patches

                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                  bottom growth (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 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. - -

                                                                                                                                                                                                                                  fix your hearts

                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                  queer book list

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

                                                                                                                                                                                                                                  hummingbird become ungovernable

                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                  swallowtail on snowdrops

                                                                                                                                                                                                                                    @@ -1680,7 +1827,7 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                  • 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 block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower.
                                                                                                                                                                                                                                  4. @@ -1713,9 +1860,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                  - + diff --git a/quorbs/index.html b/quorbs/index.html index 2039d4b2..eba40290 100644 --- a/quorbs/index.html +++ b/quorbs/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,8 +1764,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                    spotted towhee

                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                    seedling

                                                                                                                                                                                                                                      @@ -1625,39 +1774,39 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                    - A block print of a spotted towhee mid-leap. + 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.
                                                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                                                    printmaking paper notes

                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                    rope (one) (mature)

                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                    - Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + A print of a nude trans woman in an asymmetrical rope harness.
                                                                                                                                                                                                                                  3. - -

                                                                                                                                                                                                                                    hummingbird become ungovernable

                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                    greeting quorbs

                                                                                                                                                                                                                                      -
                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                    • shirt
                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                    - 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 pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail.
                                                                                                                                                                                                                                    4. @@ -1690,9 +1839,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                    - + diff --git a/rachels-bracelets/index.html b/rachels-bracelets/index.html index 095cdbe1..58b3a87e 100644 --- a/rachels-bracelets/index.html +++ b/rachels-bracelets/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                      little critter pouch

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      leatherworking favorites

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

                                                                                                                                                                                                                                      shrimp cat toy

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      zipper bifold

                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                      - Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side.
                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                      zipper bifold (green)

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      brooke's collar

                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                      - A collage showing a green leather wallet with a zippered pocket built into one external side. + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.
                                                                                                                                                                                                                                      4. @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                      - + diff --git a/rainbow-shawl/index.html b/rainbow-shawl/index.html index 242a60c2..cc95c3d4 100644 --- a/rainbow-shawl/index.html +++ b/rainbow-shawl/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,20 +1771,6 @@ if (window.innerWidth > 650) { -
                                                                                                                                                                                                                                    4. - -

                                                                                                                                                                                                                                      loud table runner

                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                      • weaving
                                                                                                                                                                                                                                        • - -
                                                                                                                                                                                                                                      - Folded long piece of fabric on a table. It is randomly mixed magenta, lime green, and wine purple, with occasional stripes of something glittery, fuzzy, or satiny in a variety of complementary colors. The ends have twisted fringe. - -                                                                                                                                                                                                                                       -
                                                                                                                                                                                                                                      5. -

                                                                                                                                                                                                                                    5. pink, lime, and grey shawl

                                                                                                                                                                                                                                      @@ -1650,6 +1785,20 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                      6. +
                                                                                                                                                                                                                                    6. + +

                                                                                                                                                                                                                                      loud table runner

                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                      • weaving
                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                      + Folded long piece of fabric on a table. It is randomly mixed magenta, lime green, and wine purple, with occasional stripes of something glittery, fuzzy, or satiny in a variety of complementary colors. The ends have twisted fringe. + +                                                                                                                                                                                                                                       +
                                                                                                                                                                                                                                      7. +
                                                                                                                                                                                                                                    @@ -1678,9 +1827,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                    - + diff --git a/rambouillet-handspun/index.html b/rambouillet-handspun/index.html index a5b329db..545b0f9b 100644 --- a/rambouillet-handspun/index.html +++ b/rambouillet-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1615,45 +1764,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                      ruby the alpaca handspun

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      handcombed jacobs handspun

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

                                                                                                                                                                                                                                      azure locations and file crawling

                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                      little critter pouch

                                                                                                                                                                                                                                        -
                                                                                                                                                                                                                                      • software
                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                      • 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 leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
                                                                                                                                                                                                                                    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. @@ -1686,9 +1835,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                      - + diff --git a/recommendations-and-favorites/index.html b/recommendations-and-favorites/index.html index 8aea6844..c084b9d6 100644 --- a/recommendations-and-favorites/index.html +++ b/recommendations-and-favorites/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1645,6 +1794,22 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                      1. + +

                                                                                                                                                                                                                                        core CSS

                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                                        • software
                                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                                        • highlight
                                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                                        + A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley. + +                                                                                                                                                                                                                                         +
                                                                                                                                                                                                                                        2. +

                                                                                                                                                                                                                                      2. azure locations and file crawling

                                                                                                                                                                                                                                        @@ -1662,26 +1827,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                      3. - -

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

                                                                                                                                                                                                                                        butch hands pattern

                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                        textures unite

                                                                                                                                                                                                                                          @@ -1690,7 +1837,7 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                        • highlight
                                                                                                                                                                                                                                        - Hands wearing a pair of pink and grey gloves with convertable mitten tops. + 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.
                                                                                                                                                                                                                                        5. @@ -1723,9 +1870,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/redirections/index.html b/redirections/index.html index 0e84b414..8b223a44 100644 --- a/redirections/index.html +++ b/redirections/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1687,15 +1836,19 @@ heredoc> tempest.md
                                                                                                                                                                                                                                      5. - -

                                                                                                                                                                                                                                        handedness toggle

                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                        gender in data models

                                                                                                                                                                                                                                          +
                                                                                                                                                                                                                                        • gender
                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                        • software
                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                        • highlight
                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                        - A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + Image unrelated to post. A light pink peony in full bloom, close up.
                                                                                                                                                                                                                                        6. @@ -1728,9 +1881,30 @@ heredoc> tempest.md + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/reference/1/index.html b/reference/1/index.html index 02bdb344..c02a5269 100644 --- a/reference/1/index.html +++ b/reference/1/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1351,9 +1499,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/reference/2/index.html b/reference/2/index.html index fb431f3c..f94734c3 100644 --- a/reference/2/index.html +++ b/reference/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1355,9 +1503,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/reference/3/index.html b/reference/3/index.html index 283d23a2..37a40a2e 100644 --- a/reference/3/index.html +++ b/reference/3/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1191,9 +1339,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/reference/index.html b/reference/index.html index c4757091..9aea9b25 100644 --- a/reference/index.html +++ b/reference/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1345,9 +1493,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/rescue-trans-rescue/index.html b/rescue-trans-rescue/index.html index c022bab4..07d392c2 100644 --- a/rescue-trans-rescue/index.html +++ b/rescue-trans-rescue/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1623,9 +1772,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/resume/index.html b/resume/index.html index a0aa4832..a84ac197 100644 --- a/resume/index.html +++ b/resume/index.html @@ -145,6 +145,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -288,7 +295,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -627,6 +634,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -889,7 +1001,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1253,9 +1401,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/rope-one/index.html b/rope-one/index.html index 58e11452..37c3933b 100644 --- a/rope-one/index.html +++ b/rope-one/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,37 +1771,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                          euphorbia

                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                          networks of trans care

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

                                                                                                                                                                                                                                          queer

                                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                          • print
                                                                                                                                                                                                                                            • - -
                                                                                                                                                                                                                                          • card
                                                                                                                                                                                                                                            • - -
                                                                                                                                                                                                                                          • sticker
                                                                                                                                                                                                                                            • - -
                                                                                                                                                                                                                                          • pin
                                                                                                                                                                                                                                            • -
                                                                                                                                                                                                                                          • gender
                                                                                                                                                                                                                                          - A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk.
                                                                                                                                                                                                                                          3. @@ -1673,6 +1800,22 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                                                        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. +
                                                                                                                                                                                                                                        @@ -1701,9 +1844,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/ruby-the-alpaca-handspun/index.html b/ruby-the-alpaca-handspun/index.html index 1e740e05..cc290437 100644 --- a/ruby-the-alpaca-handspun/index.html +++ b/ruby-the-alpaca-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,6 +1758,34 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                          +
                                                                                                                                                                                                                                        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. + +

                                                                                                                                                                                                                                          spinner's dream handspun

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

                                                                                                                                                                                                                                        3. light grey jacobs handspun

                                                                                                                                                                                                                                          @@ -1623,36 +1800,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                          4. -
                                                                                                                                                                                                                                        4. - -

                                                                                                                                                                                                                                          rambouillet handspun

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

                                                                                                                                                                                                                                          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. - -                                                                                                                                                                                                                                           -
                                                                                                                                                                                                                                          6. -
                                                                                                                                                                                                                                        @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/scrap-patches/index.html b/scrap-patches/index.html index 9c298e24..2f38c5ae 100644 --- a/scrap-patches/index.html +++ b/scrap-patches/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1608,24 +1757,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                          -
                                                                                                                                                                                                                                        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. tooled leather patches

                                                                                                                                                                                                                                          @@ -1644,6 +1775,24 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                          3. +
                                                                                                                                                                                                                                        3. + +

                                                                                                                                                                                                                                          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. + +                                                                                                                                                                                                                                           +
                                                                                                                                                                                                                                          4. +
                                                                                                                                                                                                                                        @@ -1672,9 +1821,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                        - + diff --git a/screen-reader-optimizations/index.html b/screen-reader-optimizations/index.html index d518a4ac..ffadc94b 100644 --- a/screen-reader-optimizations/index.html +++ b/screen-reader-optimizations/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1662,45 +1811,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                          backend accessibility

                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                          designing a bag

                                                                                                                                                                                                                                            +
                                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                                            • +
                                                                                                                                                                                                                                          • software
                                                                                                                                                                                                                                          - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + 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.
                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                          core CSS

                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                          moving images

                                                                                                                                                                                                                                          • software
                                                                                                                                                                                                                                            • -
                                                                                                                                                                                                                                          • highlight
                                                                                                                                                                                                                                            • -
                                                                                                                                                                                                                                          - A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley. + 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.
                                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                                          handedness toggle

                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                          visual site builders and accessibility

                                                                                                                                                                                                                                          • software
                                                                                                                                                                                                                                          - A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.
                                                                                                                                                                                                                                          4. @@ -1733,9 +1882,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                          - + diff --git a/seedling/index.html b/seedling/index.html index 597cec87..628f0618 100644 --- a/seedling/index.html +++ b/seedling/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,8 +1771,24 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                            artisans cooperative cards

                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                            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. + +

                                                                                                                                                                                                                                            stellar's jay

                                                                                                                                                                                                                                              @@ -1631,48 +1796,28 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                            • card
                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                            • shirt
                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                            - 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 + A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch
                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                            boypussy (mature)

                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                            trans the world

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

                                                                                                                                                                                                                                            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. + 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. @@ -1705,9 +1850,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                            - + diff --git a/shirt-making-notes/index.html b/shirt-making-notes/index.html index d6f6241a..bb918a34 100644 --- a/shirt-making-notes/index.html +++ b/shirt-making-notes/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1662,9 +1811,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                            - + diff --git a/shirts/index.html b/shirts/index.html index b50af766..7a269bf6 100644 --- a/shirts/index.html +++ b/shirts/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1614,39 +1763,19 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                              girldick (mature)

                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                              heron

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

                                                                                                                                                                                                                                              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 in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.
                                                                                                                                                                                                                                              3. @@ -1669,6 +1798,24 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                                                            3. + +

                                                                                                                                                                                                                                              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!' + +                                                                                                                                                                                                                                               +
                                                                                                                                                                                                                                              4. +
                                                                                                                                                                                                                                            @@ -1697,9 +1844,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                            - + diff --git a/shrimp-cat-toy/index.html b/shrimp-cat-toy/index.html index d10dad93..17c4c861 100644 --- a/shrimp-cat-toy/index.html +++ b/shrimp-cat-toy/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                              snap pouch

                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                              leather chest harness

                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                              - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt.
                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                              vertical bifold

                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                              bag strap

                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                              - A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket. + A nylon webbing shoulder strap in bright teal with clips on each end.
                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                              vertical card wallet

                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                              gradient purse strap

                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                              - A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior 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. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                              - + diff --git a/shrimp/index.html b/shrimp/index.html index b1e4af51..cae25f9e 100644 --- a/shrimp/index.html +++ b/shrimp/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1632,59 +1781,51 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                queer

                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                 +

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

                                                                                                                                                                                                                                                tiny portraits

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

                                                                                                                                                                                                                                                geese/trans wrongs

                                                                                                                                                                                                                                                + +
                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                - A print of the word queer in black ink. The letters are rounded with elongated oval negative space. - -                                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                                4. - -
                                                                                                                                                                                                                                              4. - -

                                                                                                                                                                                                                                                fat raccoon

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

                                                                                                                                                                                                                                                flicker

                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                - 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). + 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!'
                                                                                                                                                                                                                                                6. @@ -1717,9 +1858,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                - + diff --git a/siblinghood-of-the-traveling-greeting-card/index.html b/siblinghood-of-the-traveling-greeting-card/index.html index b851bd52..b688cd46 100644 --- a/siblinghood-of-the-traveling-greeting-card/index.html +++ b/siblinghood-of-the-traveling-greeting-card/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1727,9 +1876,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                - + diff --git a/sideways-canvas-shirt/index.html b/sideways-canvas-shirt/index.html index d36b82ca..abd5e465 100644 --- a/sideways-canvas-shirt/index.html +++ b/sideways-canvas-shirt/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,6 +1759,22 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                  +
                                                                                                                                                                                                                                                1. + +

                                                                                                                                                                                                                                                  butch hands pattern

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

                                                                                                                                                                                                                                                2. pink socks

                                                                                                                                                                                                                                                  @@ -1625,31 +1790,15 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                  brooke's scarf

                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                  knit shrimp

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

                                                                                                                                                                                                                                                  butch hands pattern

                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                  • knit
                                                                                                                                                                                                                                                    • - -
                                                                                                                                                                                                                                                  • highlight
                                                                                                                                                                                                                                                    • - -
                                                                                                                                                                                                                                                  - Hands wearing a pair of pink and grey gloves with convertable mitten tops. + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies.
                                                                                                                                                                                                                                                  5. @@ -1682,9 +1831,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                  - + diff --git a/sitemap.xml b/sitemap.xml index 05276600..0f53480d 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1606,7 +1606,7 @@ https://leecat.art/gallery/ - 2026-09-08 + 2026-09-09 @@ -1614,7 +1614,7 @@ https://leecat.art/ - 2026-09-08 + 2026-09-09 @@ -1622,7 +1622,7 @@ https://leecat.art/tags/gender/ - 2026-09-08 + 2026-09-09 @@ -1630,7 +1630,7 @@ https://leecat.art/tags/ - 2026-09-08 + 2026-09-09 @@ -1638,7 +1638,7 @@ https://leecat.art/about/ - 2026-09-08 + 2026-09-09 @@ -1646,7 +1646,7 @@ https://leecat.art/colophon/ - 2026-09-08 + 2026-09-09 @@ -1654,7 +1654,7 @@ https://leecat.art/contact/ - 2026-09-08 + 2026-09-09 @@ -1662,7 +1662,7 @@ https://leecat.art/guestbook/ - 2026-09-08 + 2026-09-09 @@ -1670,7 +1670,7 @@ https://leecat.art/palette/ - 2026-09-08 + 2026-09-09 @@ -1678,7 +1678,7 @@ https://leecat.art/resume/ - 2026-09-08 + 2026-09-09 @@ -1686,7 +1686,7 @@ https://leecat.art/style/ - 2026-09-08 + 2026-09-09 @@ -1694,7 +1694,7 @@ https://leecat.art/reference/ - 2026-09-08 + 2026-09-09 @@ -1702,7 +1702,7 @@ https://leecat.art/feed.xml - 2026-09-08 + 2026-09-09 diff --git a/sitemap.xsl b/sitemap.xsl index d350c9c1..8bad9656 100644 --- a/sitemap.xsl +++ b/sitemap.xsl @@ -57,6 +57,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -200,7 +207,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } diff --git a/slightly-weird-man-club/index.html b/slightly-weird-man-club/index.html index 73e164a1..3b52b804 100644 --- a/slightly-weird-man-club/index.html +++ b/slightly-weird-man-club/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,8 +1776,40 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                    fat raccoon

                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                    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. + +

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

                                                                                                                                                                                                                                                    nonbinary flag

                                                                                                                                                                                                                                                      @@ -1636,42 +1817,10 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                    • shirt
                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                    - A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. - -                                                                                                                                                                                                                                                     -
                                                                                                                                                                                                                                                    4. - -
                                                                                                                                                                                                                                                  4. - -

                                                                                                                                                                                                                                                    tooled leather patches

                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                    • patch
                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                    - two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. - -                                                                                                                                                                                                                                                     -
                                                                                                                                                                                                                                                    5. - -
                                                                                                                                                                                                                                                  5. - -

                                                                                                                                                                                                                                                    kniphofia

                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                      • - -
                                                                                                                                                                                                                                                    - A print of a brightly colored flower in 4 layers of color + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes.
                                                                                                                                                                                                                                                    6. @@ -1704,9 +1853,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                    - + diff --git a/snap-pouch/index.html b/snap-pouch/index.html index e7c178cb..73984458 100644 --- a/snap-pouch/index.html +++ b/snap-pouch/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                      leatherworking favorites

                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                      black and red journal

                                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                      • 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. + 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART
                                                                                                                                                                                                                                                    2. - -

                                                                                                                                                                                                                                                      aaron's mask

                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                      rachel's bracelets

                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                      - A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + Two pink leather bracelets with stainless steel hardware and aqua stitching.
                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                      vertical zipper card wallet

                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                      long zipper bifold

                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                      - A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + A collage showing an orange leather wallet with a long zipper running the length of the outside.
                                                                                                                                                                                                                                                      4. @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                      - + diff --git a/soras-collar/index.html b/soras-collar/index.html index 8fe7536f..9806801b 100644 --- a/soras-collar/index.html +++ b/soras-collar/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                                                        triangle pouch

                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                        bag strap

                                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                                        - 5 small triangular pouches made of leather in two sizes and various colors. + A nylon webbing shoulder strap in bright teal with clips on each end.
                                                                                                                                                                                                                                                      2. - -

                                                                                                                                                                                                                                                        mousie

                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                        leather keychains

                                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                                        - A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. + 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. - -

                                                                                                                                                                                                                                                        piñatex wallet with zipper

                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                        leatherworking favorites

                                                                                                                                                                                                                                                        • leather
                                                                                                                                                                                                                                                        - 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. + 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.
                                                                                                                                                                                                                                                        4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                        - + diff --git a/spinners-dream-handspun/index.html b/spinners-dream-handspun/index.html index e6e6193e..a0ba05ad 100644 --- a/spinners-dream-handspun/index.html +++ b/spinners-dream-handspun/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,34 +1758,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                          -
                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                          handcombed jacobs handspun

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

                                                                                                                                                                                                                                                        3. icelandic lamb handspun

                                                                                                                                                                                                                                                          @@ -1651,6 +1772,34 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                          4. +
                                                                                                                                                                                                                                                        4. + +

                                                                                                                                                                                                                                                          ruby the alpaca handspun

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

                                                                                                                                                                                                                                                          handcombed jacobs handspun

                                                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                                                            • + +
                                                                                                                                                                                                                                                          + a skein of dark grey handspun yarn + +                                                                                                                                                                                                                                                           +
                                                                                                                                                                                                                                                          6. +
                                                                                                                                                                                                                                                        @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                        - + diff --git a/spinning-plants/index.html b/spinning-plants/index.html index 6f7708a5..23ed44ab 100644 --- a/spinning-plants/index.html +++ b/spinning-plants/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1735,43 +1884,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                          handspun yarn in party mix and orange-gold

                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                          fire & ice handspun

                                                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                                                          - 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight.
                                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                                          ruby the alpaca handspun

                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                          dyeing fiber

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

                                                                                                                                                                                                                                                          handcombed jacobs handspun

                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                          petrichor handspun

                                                                                                                                                                                                                                                          • yarn
                                                                                                                                                                                                                                                          - a skein of dark grey 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. @@ -1804,9 +1953,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                          - + diff --git a/spotted-towhee/index.html b/spotted-towhee/index.html index 9d28280f..e0bb010a 100644 --- a/spotted-towhee/index.html +++ b/spotted-towhee/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1622,8 +1771,22 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                            junco

                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                            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. + +

                                                                                                                                                                                                                                                            killdeer

                                                                                                                                                                                                                                                              @@ -1632,28 +1795,14 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                            • 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 print of a killdeer in black ink.
                                                                                                                                                                                                                                                          3. - -

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

                                                                                                                                                                                                                                                            lupine

                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                            chanterelle

                                                                                                                                                                                                                                                              @@ -1661,10 +1810,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                            • 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. + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.
                                                                                                                                                                                                                                                            5. @@ -1697,9 +1844,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                            - + diff --git a/square-watercolor-pad/index.html b/square-watercolor-pad/index.html index 9e046c9d..a9eb9673 100644 --- a/square-watercolor-pad/index.html +++ b/square-watercolor-pad/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,43 +1775,47 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                                              blue and brown leather journal

                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                              brooke's notebook

                                                                                                                                                                                                                                                              • book
                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                              • highlight
                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                              - A three panel collage showcasing a blue and brown leather-covered journal. + A six panel collage showing the covers, endpapers, and some of the pages of a notebook.
                                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                                              flocked notebook

                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                              striped journal

                                                                                                                                                                                                                                                              • book
                                                                                                                                                                                                                                                              - A two panel collage showing the cover and endpapers of a thick notebook. + A three panel collage showcasing a journal with a striped cover.
                                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                                              stampede journal

                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                              leather long-stitch journals

                                                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                              • book
                                                                                                                                                                                                                                                              - A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                                                                                              4. @@ -1695,9 +1848,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                              - + diff --git a/squarsh/index.html b/squarsh/index.html index 58935b9c..209f125b 100644 --- a/squarsh/index.html +++ b/squarsh/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,38 +1758,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                -
                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                tiny mushrooms

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

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

                                                                                                                                                                                                                                                              3. block printing transfer method

                                                                                                                                                                                                                                                                @@ -1655,6 +1772,42 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                4. +
                                                                                                                                                                                                                                                              4. + +

                                                                                                                                                                                                                                                                luminescent (mature)

                                                                                                                                                                                                                                                                + +
                                                                                                                                                                                                                                                                  + +
                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                + A print of a tattooed woman in bright highlighter yellow underwear. + +                                                                                                                                                                                                                                                                 +
                                                                                                                                                                                                                                                                5. + +
                                                                                                                                                                                                                                                              5. + +

                                                                                                                                                                                                                                                                anarchy autism

                                                                                                                                                                                                                                                                + +
                                                                                                                                                                                                                                                                  + +
                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                + A print in rainbow ink that says autism with the anarchy A. + +                                                                                                                                                                                                                                                                 +
                                                                                                                                                                                                                                                                6. +
                                                                                                                                                                                                                                                              @@ -1683,9 +1836,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                              - + diff --git a/stampede-journal/index.html b/stampede-journal/index.html index 5739d963..9bc4885f 100644 --- a/stampede-journal/index.html +++ b/stampede-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,36 +1769,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                -
                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                Acadia coloring journal

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

                                                                                                                                                                                                                                                                black and red journal

                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                                • book
                                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                                - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART - -                                                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                                                3. -

                                                                                                                                                                                                                                                              3. leather long-stitch journals

                                                                                                                                                                                                                                                                @@ -1666,6 +1785,36 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                4. +
                                                                                                                                                                                                                                                              4. + +

                                                                                                                                                                                                                                                                square watercolor pad

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

                                                                                                                                                                                                                                                                brooke's notebook

                                                                                                                                                                                                                                                                + +
                                                                                                                                                                                                                                                                  + +
                                                                                                                                                                                                                                                                • book
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                • highlight
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                + A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + +                                                                                                                                                                                                                                                                 +
                                                                                                                                                                                                                                                                6. +
                                                                                                                                                                                                                                                              @@ -1694,9 +1843,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                              - + diff --git a/stationery-exchange/index.html b/stationery-exchange/index.html index 059043f1..9ffb9d61 100644 --- a/stationery-exchange/index.html +++ b/stationery-exchange/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1669,9 +1818,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                              - + diff --git a/stellars-jay/index.html b/stellars-jay/index.html index 5a4fe566..f7f78393 100644 --- a/stellars-jay/index.html +++ b/stellars-jay/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,38 +1776,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                rope (one) (mature)

                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                                - A print of a nude trans woman in an asymmetrical rope harness. - -                                                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                                                2. - -
                                                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                                                kniphofia

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

                                                                                                                                                                                                                                                                fat raccoon

                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                queer

                                                                                                                                                                                                                                                                  @@ -1666,10 +1785,52 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                • shirt
                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                • gender
                                                                                                                                                                                                                                                                - A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + +                                                                                                                                                                                                                                                                 +
                                                                                                                                                                                                                                                                4. + +
                                                                                                                                                                                                                                                              4. + +

                                                                                                                                                                                                                                                                spotted towhee

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

                                                                                                                                                                                                                                                                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.
                                                                                                                                                                                                                                                                6. @@ -1702,9 +1863,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                - + diff --git a/stephanie-collar/index.html b/stephanie-collar/index.html index 124fd3bd..d77ea6a5 100644 --- a/stephanie-collar/index.html +++ b/stephanie-collar/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                                  vix collar

                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                  aaron's mask

                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                  - 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 brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
                                                                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                                                                  maker's mark keychain

                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                  leaf patches

                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                  - A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it. + Several oak-leaf-shaped leather patches with stitching holes punched around the edges.
                                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                                  shrimp cat toy

                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                  lobstah

                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                  - Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + Two red leather lobster ornaments, about 4-5 in long each.
                                                                                                                                                                                                                                                                  4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                  - + diff --git a/stickers/index.html b/stickers/index.html index 4c3fa811..46236be1 100644 --- a/stickers/index.html +++ b/stickers/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1624,21 +1773,23 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                    anarchy autism

                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                    trans rights skull

                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                                    • sticker
                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                    • card
                                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                                    • shirt
                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                    • sticker
                                                                                                                                                                                                                                                                    • pin
                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                                      • +
                                                                                                                                                                                                                                                                    - A print in rainbow ink that says autism with the anarchy A. + 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. @@ -1666,8 +1817,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                  2. - -

                                                                                                                                                                                                                                                                    boypussy (mature)

                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                    anarchy autism

                                                                                                                                                                                                                                                                      @@ -1679,10 +1830,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                    • pin
                                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                                    • gender
                                                                                                                                                                                                                                                                      • -
                                                                                                                                                                                                                                                                    - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + A print in rainbow ink that says autism with the anarchy A.
                                                                                                                                                                                                                                                                    3. @@ -1715,9 +1864,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                    - + diff --git a/striped-journal/index.html b/striped-journal/index.html index 81508128..8014865a 100644 --- a/striped-journal/index.html +++ b/striped-journal/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,17 +1776,29 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                                      black and red journal

                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                      blue and brown leather journal

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

                                                                                                                                                                                                                                                                      baseball journal

                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                                      - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
                                                                                                                                                                                                                                                                      3. @@ -1658,20 +1819,6 @@ if (window.innerWidth > 650) { -
                                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                                      lined notebook

                                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                                                      • book
                                                                                                                                                                                                                                                                        • - -
                                                                                                                                                                                                                                                                      - A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. - -                                                                                                                                                                                                                                                                       -
                                                                                                                                                                                                                                                                      4. -
                                                                                                                                                                                                                                                                    @@ -1700,9 +1847,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                    - + diff --git a/style/index.html b/style/index.html index 72351523..bff12709 100644 --- a/style/index.html +++ b/style/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,6 +945,8 @@ pre[class*=language-]::selection { } } + + +export { HeadingAnchors } +const THEME = "theme"; + +const saveTheme = (themeValue) => { + localStorage.setItem(THEME, themeValue); +}; + +const themeLight = document.getElementById("theme-light"); +themeLight.addEventListener("input", (e) => { + saveTheme(themeLight.value); +}); + +const themeAuto = document.getElementById("theme-auto"); +themeAuto.addEventListener("input", (e) => { + saveTheme(themeAuto.auto); +}); + +const themeDark = document.getElementById("theme-dark"); +themeDark.addEventListener("input", (e) => { + saveTheme(themeDark.value); +}); + +var currentThemeValue = localStorage.getItem(THEME); +switch (currentThemeValue) { + case "light": + themeLight.checked = true; + break; + case "auto": + themeAuto.checked = true; + break; + case "dark": + themeDark.checked = true; + break; + default: + themeAuto.checked = true; +} @@ -1251,9 +1400,30 @@ This is supposed to be a new paragraph, but it isn't.

                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                    - + diff --git a/sunflower/index.html b/sunflower/index.html index bdb84b1e..bc77ee9a 100644 --- a/sunflower/index.html +++ b/sunflower/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,31 +1759,29 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                                      leaf patches

                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                      gradient purse strap

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

                                                                                                                                                                                                                                                                      designing a bag

                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                      wrap bracelets

                                                                                                                                                                                                                                                                      • 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. + 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. @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                      - + diff --git a/swallowtail-on-snowdrops/index.html b/swallowtail-on-snowdrops/index.html index 48da9a17..d5e1a8a5 100644 --- a/swallowtail-on-snowdrops/index.html +++ b/swallowtail-on-snowdrops/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1627,47 +1776,53 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                                                                        fix your hearts

                                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                                        heron

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

                                                                                                                                                                                                                                                                        greeting loons

                                                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                                                          -
                                                                                                                                                                                                                                                                        • card
                                                                                                                                                                                                                                                                          • -
                                                                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                                        • highlight
                                                                                                                                                                                                                                                                          • +
                                                                                                                                                                                                                                                                        • shirt
                                                                                                                                                                                                                                                                        - 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 in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet.
                                                                                                                                                                                                                                                                      3. - -

                                                                                                                                                                                                                                                                        brown creeper

                                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                                        hair

                                                                                                                                                                                                                                                                        • 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 in black ink of belly hair. + +                                                                                                                                                                                                                                                                         +
                                                                                                                                                                                                                                                                        4. + +
                                                                                                                                                                                                                                                                      4. + +

                                                                                                                                                                                                                                                                        fat raccoon

                                                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                                                                        • card
                                                                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                                                                        • shirt
                                                                                                                                                                                                                                                                          • + +
                                                                                                                                                                                                                                                                        + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
                                                                                                                                                                                                                                                                        5. @@ -1700,9 +1855,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                        - + diff --git a/swoop-wallet/index.html b/swoop-wallet/index.html index 30ae4580..77cd8dd7 100644 --- a/swoop-wallet/index.html +++ b/swoop-wallet/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                                          brooke's suspenders

                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                          sunflower

                                                                                                                                                                                                                                                                          • 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 sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center .
                                                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                                                          black and red journal

                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                          leatherworking favorites

                                                                                                                                                                                                                                                                            -
                                                                                                                                                                                                                                                                          • book
                                                                                                                                                                                                                                                                            • -
                                                                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                                                                          - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + 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.
                                                                                                                                                                                                                                                                        3. - -

                                                                                                                                                                                                                                                                          x-acto knife sheath

                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                          piñatex wallet with zipper

                                                                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                                                                          - 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. + 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. @@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/all/index.html b/tag/all/index.html index 7ffe0c96..cda5c007 100644 --- a/tag/all/index.html +++ b/tag/all/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/blur/index.html b/tag/blur/index.html index 60add335..a2933dc6 100644 --- a/tag/blur/index.html +++ b/tag/blur/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/book/index.html b/tag/book/index.html index a7b3365e..be5a73c5 100644 --- a/tag/book/index.html +++ b/tag/book/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/card/index.html b/tag/card/index.html index 6756b234..8499a121 100644 --- a/tag/card/index.html +++ b/tag/card/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/gallery/index.html b/tag/gallery/index.html index ed96ba68..615f4b40 100644 --- a/tag/gallery/index.html +++ b/tag/gallery/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/gender/index.html b/tag/gender/index.html index 2e67b5fb..bb0e2eea 100644 --- a/tag/gender/index.html +++ b/tag/gender/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/highlight/index.html b/tag/highlight/index.html index a727ab8f..a7d33c35 100644 --- a/tag/highlight/index.html +++ b/tag/highlight/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/knit/index.html b/tag/knit/index.html index f1c3f046..e9a4dffd 100644 --- a/tag/knit/index.html +++ b/tag/knit/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/leather/index.html b/tag/leather/index.html index d02ea206..ec7c17ea 100644 --- a/tag/leather/index.html +++ b/tag/leather/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/patch/index.html b/tag/patch/index.html index da1e572d..ce968ce7 100644 --- a/tag/patch/index.html +++ b/tag/patch/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/pin/index.html b/tag/pin/index.html index 4038108e..a5fd67ef 100644 --- a/tag/pin/index.html +++ b/tag/pin/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/posts/index.html b/tag/posts/index.html index 136034f9..6fdf1f7a 100644 --- a/tag/posts/index.html +++ b/tag/posts/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/print/index.html b/tag/print/index.html index 51e30dc7..5cde38b2 100644 --- a/tag/print/index.html +++ b/tag/print/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/reference/index.html b/tag/reference/index.html index 19a88e07..d34c475c 100644 --- a/tag/reference/index.html +++ b/tag/reference/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/shirt/index.html b/tag/shirt/index.html index 9d181ae6..46743967 100644 --- a/tag/shirt/index.html +++ b/tag/shirt/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/software/index.html b/tag/software/index.html index e1c17641..c6210afd 100644 --- a/tag/software/index.html +++ b/tag/software/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/stationery/index.html b/tag/stationery/index.html index 02cfe138..daccf4e0 100644 --- a/tag/stationery/index.html +++ b/tag/stationery/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/sticker/index.html b/tag/sticker/index.html index 62f84c86..83982d6d 100644 --- a/tag/sticker/index.html +++ b/tag/sticker/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/tagpagination/index.html b/tag/tagpagination/index.html index c364d02c..8d932eaa 100644 --- a/tag/tagpagination/index.html +++ b/tag/tagpagination/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/weaving/index.html b/tag/weaving/index.html index d8cf0d3f..7702944c 100644 --- a/tag/weaving/index.html +++ b/tag/weaving/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/yarn/index.html b/tag/yarn/index.html index 77582f7a..23972e55 100644 --- a/tag/yarn/index.html +++ b/tag/yarn/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tag/zine/index.html b/tag/zine/index.html index 1a05abb1..bd209808 100644 --- a/tag/zine/index.html +++ b/tag/zine/index.html @@ -89,6 +89,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -232,7 +239,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -571,6 +578,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -833,7 +945,43 @@ pre[class*=language-]::selection { } } - + + + @@ -914,9 +1062,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/book/2/index.html b/tags/book/2/index.html index b276a693..4159a111 100644 --- a/tags/book/2/index.html +++ b/tags/book/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1207,9 +1355,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/book/index.html b/tags/book/index.html index 4cfdcc3d..86725408 100644 --- a/tags/book/index.html +++ b/tags/book/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1353,9 +1501,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/card/2/index.html b/tags/card/2/index.html index d56daf99..0041b46b 100644 --- a/tags/card/2/index.html +++ b/tags/card/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1401,9 +1549,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/card/3/index.html b/tags/card/3/index.html index 84df1e99..c14800dc 100644 --- a/tags/card/3/index.html +++ b/tags/card/3/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1231,9 +1379,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/card/index.html b/tags/card/index.html index bee46917..5d68b295 100644 --- a/tags/card/index.html +++ b/tags/card/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1405,9 +1553,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/gender/2/index.html b/tags/gender/2/index.html index d37c24b7..e369149e 100644 --- a/tags/gender/2/index.html +++ b/tags/gender/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1417,9 +1565,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/gender/3/index.html b/tags/gender/3/index.html index 16f9dc0a..fa9abbc9 100644 --- a/tags/gender/3/index.html +++ b/tags/gender/3/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1261,9 +1409,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/gender/index.html b/tags/gender/index.html index eef12be7..7b461f77 100644 --- a/tags/gender/index.html +++ b/tags/gender/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1373,9 +1521,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/highlight/2/index.html b/tags/highlight/2/index.html index b1f67e27..985cb3b9 100644 --- a/tags/highlight/2/index.html +++ b/tags/highlight/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1195,9 +1343,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/highlight/index.html b/tags/highlight/index.html index c9100d63..f5634a7f 100644 --- a/tags/highlight/index.html +++ b/tags/highlight/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1377,9 +1525,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/index.html b/tags/index.html index 8a8e2fcf..a00f22f1 100644 --- a/tags/index.html +++ b/tags/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1652,9 +1800,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/knit/index.html b/tags/knit/index.html index c12dce73..24094c2a 100644 --- a/tags/knit/index.html +++ b/tags/knit/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1312,9 +1460,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/leather/2/index.html b/tags/leather/2/index.html index 6ead9cde..b77ae159 100644 --- a/tags/leather/2/index.html +++ b/tags/leather/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1359,9 +1507,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/leather/3/index.html b/tags/leather/3/index.html index e60215d7..8426c03a 100644 --- a/tags/leather/3/index.html +++ b/tags/leather/3/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1361,9 +1509,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/leather/4/index.html b/tags/leather/4/index.html index 8d1ba041..a58b60a6 100644 --- a/tags/leather/4/index.html +++ b/tags/leather/4/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1349,9 +1497,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/leather/index.html b/tags/leather/index.html index 779a6024..0a4aaaa0 100644 --- a/tags/leather/index.html +++ b/tags/leather/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1355,9 +1503,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/patch/index.html b/tags/patch/index.html index 0fce7d4d..74ca7f8c 100644 --- a/tags/patch/index.html +++ b/tags/patch/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1200,9 +1348,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/pin/index.html b/tags/pin/index.html index 121baa6e..2339a29d 100644 --- a/tags/pin/index.html +++ b/tags/pin/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1314,9 +1462,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/print/2/index.html b/tags/print/2/index.html index b3d0bf57..3cd71080 100644 --- a/tags/print/2/index.html +++ b/tags/print/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1397,9 +1545,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/print/3/index.html b/tags/print/3/index.html index 36119f9d..ed94a74c 100644 --- a/tags/print/3/index.html +++ b/tags/print/3/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1409,9 +1557,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/print/4/index.html b/tags/print/4/index.html index 5a9bbe60..0cdfc50e 100644 --- a/tags/print/4/index.html +++ b/tags/print/4/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1397,9 +1545,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/print/5/index.html b/tags/print/5/index.html index 4c185af9..73e4e4b3 100644 --- a/tags/print/5/index.html +++ b/tags/print/5/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1263,9 +1411,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/print/index.html b/tags/print/index.html index f8bfe6d0..737bb935 100644 --- a/tags/print/index.html +++ b/tags/print/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1367,9 +1515,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/shirt/2/index.html b/tags/shirt/2/index.html index 66f295ca..9c4f24c7 100644 --- a/tags/shirt/2/index.html +++ b/tags/shirt/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1291,9 +1439,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/shirt/index.html b/tags/shirt/index.html index 6bdd0105..53595618 100644 --- a/tags/shirt/index.html +++ b/tags/shirt/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1399,9 +1547,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/software/2/index.html b/tags/software/2/index.html index 26ccb8ff..c73da56c 100644 --- a/tags/software/2/index.html +++ b/tags/software/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1241,9 +1389,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/software/index.html b/tags/software/index.html index a81039ed..6b33c392 100644 --- a/tags/software/index.html +++ b/tags/software/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1351,9 +1499,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/stationery/index.html b/tags/stationery/index.html index 926787e7..5e99bfb4 100644 --- a/tags/stationery/index.html +++ b/tags/stationery/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1192,9 +1340,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/sticker/index.html b/tags/sticker/index.html index f7634922..e6ef9a81 100644 --- a/tags/sticker/index.html +++ b/tags/sticker/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1314,9 +1462,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/weaving/index.html b/tags/weaving/index.html index 8bf91610..01bc891a 100644 --- a/tags/weaving/index.html +++ b/tags/weaving/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1206,9 +1354,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/yarn/2/index.html b/tags/yarn/2/index.html index df20b7f1..c5effe32 100644 --- a/tags/yarn/2/index.html +++ b/tags/yarn/2/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1207,9 +1355,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/yarn/index.html b/tags/yarn/index.html index 46cf908a..fe7b3b4d 100644 --- a/tags/yarn/index.html +++ b/tags/yarn/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1349,9 +1497,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tags/zine/index.html b/tags/zine/index.html index b45a7603..9df7b7f3 100644 --- a/tags/zine/index.html +++ b/tags/zine/index.html @@ -311,6 +311,13 @@ --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -454,7 +461,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -793,6 +800,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1055,7 +1167,43 @@ pre[class*=language-]::selection { } } - + + + @@ -1214,9 +1362,30 @@ pre[class*=language-]::selection { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/textures-unite/index.html b/textures-unite/index.html index c4b48f2c..1e758658 100644 --- a/textures-unite/index.html +++ b/textures-unite/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1616,33 +1765,17 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                                            patchwork wallet

                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                            butch hands pattern

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

                                                                                                                                                                                                                                                                            core CSS

                                                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                                                            • software
                                                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                                                            • highlight
                                                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                                                            - A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley. + Hands wearing a pair of pink and grey gloves with convertable mitten tops.
                                                                                                                                                                                                                                                                            3. @@ -1663,6 +1796,22 @@ if (window.innerWidth > 650) { +
                                                                                                                                                                                                                                                                          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. +
                                                                                                                                                                                                                                                                          @@ -1691,9 +1840,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                          - + diff --git a/tiny-books/index.html b/tiny-books/index.html index 200cb63b..14117a92 100644 --- a/tiny-books/index.html +++ b/tiny-books/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1625,45 +1774,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                                            green memo pad

                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                            baseball journal

                                                                                                                                                                                                                                                                            • book
                                                                                                                                                                                                                                                                            - A three panel collage showcasing a small green memo pad. + A 3-part collage of a leather-covered book with baseball-style stitching across the spine.
                                                                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                                                                            brooke's notebook

                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                            striped journal

                                                                                                                                                                                                                                                                            • book
                                                                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                                                                            • highlight
                                                                                                                                                                                                                                                                              • -
                                                                                                                                                                                                                                                                            - A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + A three panel collage showcasing a journal with a striped cover.
                                                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                                                            lined notebook

                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                            flocked notebook

                                                                                                                                                                                                                                                                            • book
                                                                                                                                                                                                                                                                            - A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. + A two panel collage showing the cover and endpapers of a thick notebook.
                                                                                                                                                                                                                                                                            4. @@ -1696,9 +1843,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                            - + diff --git a/tiny-mushrooms/index.html b/tiny-mushrooms/index.html index e543608f..94299a7a 100644 --- a/tiny-mushrooms/index.html +++ b/tiny-mushrooms/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,8 +1759,36 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                                                              happy biHRTday

                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                              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. + +

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

                                                                                                                                                                                                                                                                              killdeer

                                                                                                                                                                                                                                                                                @@ -1619,40 +1796,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                              • card
                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                              - A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' - -                                                                                                                                                                                                                                                                               -
                                                                                                                                                                                                                                                                              4. - -
                                                                                                                                                                                                                                                                            4. - -

                                                                                                                                                                                                                                                                              luminescent (mature)

                                                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                                                                • - -
                                                                                                                                                                                                                                                                              • gender
                                                                                                                                                                                                                                                                                • - -
                                                                                                                                                                                                                                                                              - A print of a tattooed woman in bright highlighter yellow underwear. - -                                                                                                                                                                                                                                                                               -
                                                                                                                                                                                                                                                                              5. - -
                                                                                                                                                                                                                                                                            5. - -

                                                                                                                                                                                                                                                                              printmaking paper notes

                                                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                              • print
                                                                                                                                                                                                                                                                                • - -
                                                                                                                                                                                                                                                                              - Image unrelated to post. A very fluffed up killdeer stands on a rocky beach. + A print of a killdeer in black ink.
                                                                                                                                                                                                                                                                              6. @@ -1685,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                              - + diff --git a/tiny-portraits/index.html b/tiny-portraits/index.html index 70a311c2..d0b92254 100644 --- a/tiny-portraits/index.html +++ b/tiny-portraits/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,8 +1759,8 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                                big pidge

                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                fat raccoon

                                                                                                                                                                                                                                                                                  @@ -1622,41 +1771,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                • 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. + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.
                                                                                                                                                                                                                                                                              2. - -

                                                                                                                                                                                                                                                                                greeting loons

                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                trans rights skull

                                                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                • highlight
                                                                                                                                                                                                                                                                                  • +
                                                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                                • sticker
                                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                                • pin
                                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                                • 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 in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'
                                                                                                                                                                                                                                                                              3. - -

                                                                                                                                                                                                                                                                                greeting quorbs

                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                brown creeper

                                                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                                                • card
                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                • print
                                                                                                                                                                                                                                                                                - A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail. + 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.
                                                                                                                                                                                                                                                                                4. @@ -1689,9 +1840,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                - + diff --git a/tooled-leather-patches/index.html b/tooled-leather-patches/index.html index 0aea2a44..c95269e4 100644 --- a/tooled-leather-patches/index.html +++ b/tooled-leather-patches/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1620,45 +1769,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                                                  bag strap

                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                  queer book list

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

                                                                                                                                                                                                                                                                                  luminescent (mature)

                                                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                                                    - -
                                                                                                                                                                                                                                                                                  • print
                                                                                                                                                                                                                                                                                    • -
                                                                                                                                                                                                                                                                                  • gender
                                                                                                                                                                                                                                                                                  - A print of a tattooed woman in bright highlighter yellow underwear. + A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order
                                                                                                                                                                                                                                                                                3. - -

                                                                                                                                                                                                                                                                                  maker's mark keychain

                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                  gradient purse strap

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

                                                                                                                                                                                                                                                                                  bowtie

                                                                                                                                                                                                                                                                                  + +
                                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                                    • + +
                                                                                                                                                                                                                                                                                  + A black leather bow tie with black stitching.
                                                                                                                                                                                                                                                                                  5. @@ -1691,9 +1838,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                  - + diff --git a/trans-rights-skull/index.html b/trans-rights-skull/index.html index da0d2f4a..44cc805f 100644 --- a/trans-rights-skull/index.html +++ b/trans-rights-skull/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1639,47 +1788,47 @@ prints/cards: black with blue and pink letters

                                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                                    not a drill

                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                    pronoun patches

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

                                                                                                                                                                                                                                                                                    give to trans orgs and people

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

                                                                                                                                                                                                                                                                                    luminescent (mature)

                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                     +

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

                                                                                                                                                                                                                                                                                    loon

                                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                                    • print
                                                                                                                                                                                                                                                                                    - A print of a tattooed woman in bright highlighter yellow underwear. + A print of a loon rearing up with wings spread
                                                                                                                                                                                                                                                                                    5. @@ -1712,9 +1861,30 @@ prints/cards: black with blue and pink letters

                                                                                                                                                                                                                                                                                    + +
                                                                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                    - + diff --git a/trans-the-world/index.html b/trans-the-world/index.html index 9f2c1283..3b9122b4 100644 --- a/trans-the-world/index.html +++ b/trans-the-world/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1626,47 +1775,51 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                    1. - -

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

                                                                                                                                                                                                                                                                                      on pronouns

                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                      networks of trans care

                                                                                                                                                                                                                                                                                      • gender
                                                                                                                                                                                                                                                                                      - Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder. + Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk.
                                                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                                                      flatfish

                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                      girldick (mature)

                                                                                                                                                                                                                                                                                      • print
                                                                                                                                                                                                                                                                                        • -
                                                                                                                                                                                                                                                                                      • card
                                                                                                                                                                                                                                                                                        • +
                                                                                                                                                                                                                                                                                      • sticker
                                                                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                                                                      • shirt
                                                                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                                                                      • pin
                                                                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                                                                      • gender
                                                                                                                                                                                                                                                                                      - A print of a simple flatfish design inked in sepia. + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + +                                                                                                                                                                                                                                                                                       +
                                                                                                                                                                                                                                                                                      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. @@ -1699,9 +1852,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                      - + diff --git a/trans-wrongs-skull/index.html b/trans-wrongs-skull/index.html index 636afdd9..29ab2053 100644 --- a/trans-wrongs-skull/index.html +++ b/trans-wrongs-skull/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1637,51 +1786,49 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                      1. - -

                                                                                                                                                                                                                                                                                        boypussy (mature)

                                                                                                                                                                                                                                                                                        +                                                                                                                                                                                                                                                                                         +

                                                                                                                                                                                                                                                                                        hummingbird become ungovernable

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

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

                                                                                                                                                                                                                                                                                        pride dice bags

                                                                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                                                                          + +
                                                                                                                                                                                                                                                                                        • knit
                                                                                                                                                                                                                                                                                        • gender
                                                                                                                                                                                                                                                                                        - A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. - -                                                                                                                                                                                                                                                                                         -
                                                                                                                                                                                                                                                                                        4. - -
                                                                                                                                                                                                                                                                                      4. - -

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

                                                                                                                                                                                                                                                                                        tiny mushrooms

                                                                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                                                                          - -
                                                                                                                                                                                                                                                                                        • print
                                                                                                                                                                                                                                                                                          • - -
                                                                                                                                                                                                                                                                                        - 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.
                                                                                                                                                                                                                                                                                        6. @@ -1714,9 +1861,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                        + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                        - + diff --git a/triangle-pouch/index.html b/triangle-pouch/index.html index b60c7519..0773470b 100644 --- a/triangle-pouch/index.html +++ b/triangle-pouch/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                        1. - -

                                                                                                                                                                                                                                                                                          gradient purse strap

                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                          mom bag

                                                                                                                                                                                                                                                                                          • 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 leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp.
                                                                                                                                                                                                                                                                                        2. - -

                                                                                                                                                                                                                                                                                          eight pocket bifold

                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                          foldy wallet

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

                                                                                                                                                                                                                                                                                          long zipper bifold

                                                                                                                                                                                                                                                                                          +                                                                                                                                                                                                                                                                                           +

                                                                                                                                                                                                                                                                                          vertical zipper card wallet

                                                                                                                                                                                                                                                                                          • leather
                                                                                                                                                                                                                                                                                          - A collage showing an orange leather wallet with a long zipper running the length of the outside. + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch.
                                                                                                                                                                                                                                                                                          4. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                          - + diff --git a/vertical-bifold/index.html b/vertical-bifold/index.html index 63f1700e..d36ef7ca 100644 --- a/vertical-bifold/index.html +++ b/vertical-bifold/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,34 +1758,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                            -
                                                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                                                            brooke's cuff bracelets

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

                                                                                                                                                                                                                                                                                            lobstah

                                                                                                                                                                                                                                                                                            - -
                                                                                                                                                                                                                                                                                              - -
                                                                                                                                                                                                                                                                                            • leather
                                                                                                                                                                                                                                                                                              • - -
                                                                                                                                                                                                                                                                                            - Two red leather lobster ornaments, about 4-5 in long each. - -                                                                                                                                                                                                                                                                                             -
                                                                                                                                                                                                                                                                                            3. -

                                                                                                                                                                                                                                                                                          3. x-acto knife sheath

                                                                                                                                                                                                                                                                                            @@ -1651,6 +1772,36 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                            4. +
                                                                                                                                                                                                                                                                                          4. + +

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

                                                                                                                                                                                                                                                                                            gradient purse strap

                                                                                                                                                                                                                                                                                            + +
                                                                                                                                                                                                                                                                                              + +
                                                                                                                                                                                                                                                                                            • 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. + +                                                                                                                                                                                                                                                                                             +
                                                                                                                                                                                                                                                                                            6. +
                                                                                                                                                                                                                                                                                          @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                          + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                          - + diff --git a/vertical-card-wallet/index.html b/vertical-card-wallet/index.html index d48f41a8..0c8ac243 100644 --- a/vertical-card-wallet/index.html +++ b/vertical-card-wallet/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,22 +1759,24 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                          1. - -

                                                                                                                                                                                                                                                                                            double bill pocket bifold

                                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                                            little critter pouch

                                                                                                                                                                                                                                                                                            • leather
                                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                                            • highlight
                                                                                                                                                                                                                                                                                              • +
                                                                                                                                                                                                                                                                                            - A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap.
                                                                                                                                                                                                                                                                                          2. - -

                                                                                                                                                                                                                                                                                            fishhook pride keychains

                                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                                            proud dad wallet

                                                                                                                                                                                                                                                                                              @@ -1634,21 +1785,21 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                            • 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 brown leather wallet with a subtle trans flag stitching across the top.
                                                                                                                                                                                                                                                                                          3. - -

                                                                                                                                                                                                                                                                                            leatherworking favorites

                                                                                                                                                                                                                                                                                            +                                                                                                                                                                                                                                                                                             +

                                                                                                                                                                                                                                                                                            bowtie

                                                                                                                                                                                                                                                                                            • 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 black leather bow tie with black stitching.
                                                                                                                                                                                                                                                                                            4. @@ -1681,9 +1832,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                            + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                            - + diff --git a/vertical-zipper-card-wallet/index.html b/vertical-zipper-card-wallet/index.html index 2ffb4efe..9d177b50 100644 --- a/vertical-zipper-card-wallet/index.html +++ b/vertical-zipper-card-wallet/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                            1. - -

                                                                                                                                                                                                                                                                                              little critter pouch

                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                              leather long-stitch journals

                                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                                                • -
                                                                                                                                                                                                                                                                                              • highlight
                                                                                                                                                                                                                                                                                                • +
                                                                                                                                                                                                                                                                                              • book
                                                                                                                                                                                                                                                                                              - A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures.
                                                                                                                                                                                                                                                                                            2. - -

                                                                                                                                                                                                                                                                                              snap pouch

                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                              brooke's collar

                                                                                                                                                                                                                                                                                              • leather
                                                                                                                                                                                                                                                                                              - 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.
                                                                                                                                                                                                                                                                                            3. - -

                                                                                                                                                                                                                                                                                              o-ring bracelet

                                                                                                                                                                                                                                                                                              +                                                                                                                                                                                                                                                                                               +

                                                                                                                                                                                                                                                                                              moss harness

                                                                                                                                                                                                                                                                                              • 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 nylon webbing harness in bright teal laid out on a desk.
                                                                                                                                                                                                                                                                                              4. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                              - + diff --git a/visual-site-builders-and-accessibility/index.html b/visual-site-builders-and-accessibility/index.html index e8ae190a..813aa8ac 100644 --- a/visual-site-builders-and-accessibility/index.html +++ b/visual-site-builders-and-accessibility/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -2287,15 +2436,29 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                                                framer accessibility

                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                handedness toggle

                                                                                                                                                                                                                                                                                                • software
                                                                                                                                                                                                                                                                                                - A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features. + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + +                                                                                                                                                                                                                                                                                                 +
                                                                                                                                                                                                                                                                                                2. + +
                                                                                                                                                                                                                                                                                              2. + +

                                                                                                                                                                                                                                                                                                accessible image modals

                                                                                                                                                                                                                                                                                                + +
                                                                                                                                                                                                                                                                                                  + +
                                                                                                                                                                                                                                                                                                • software
                                                                                                                                                                                                                                                                                                  • + +
                                                                                                                                                                                                                                                                                                + Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth.
                                                                                                                                                                                                                                                                                                3. @@ -2316,20 +2479,6 @@ if (window.innerWidth > 650) { -
                                                                                                                                                                                                                                                                                              3. - -

                                                                                                                                                                                                                                                                                                eleventy lessons

                                                                                                                                                                                                                                                                                                - -
                                                                                                                                                                                                                                                                                                  - -
                                                                                                                                                                                                                                                                                                • software
                                                                                                                                                                                                                                                                                                  • - -
                                                                                                                                                                                                                                                                                                - Image unrelated to post. Close up on a pale green hellebore flower. - -                                                                                                                                                                                                                                                                                                 -
                                                                                                                                                                                                                                                                                                4. -
                                                                                                                                                                                                                                                                                              @@ -2358,9 +2507,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                              + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                              - + diff --git a/vix-collar/index.html b/vix-collar/index.html index e1db8e10..54dfa593 100644 --- a/vix-collar/index.html +++ b/vix-collar/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                              1. - -

                                                                                                                                                                                                                                                                                                foldy wallet

                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                patchwork wallet

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

                                                                                                                                                                                                                                                                                                lobstah

                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                gradient purse strap

                                                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                                                - Two red leather lobster ornaments, about 4-5 in long each. + 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.
                                                                                                                                                                                                                                                                                              3. - -

                                                                                                                                                                                                                                                                                                black and red journal

                                                                                                                                                                                                                                                                                                +                                                                                                                                                                                                                                                                                                 +

                                                                                                                                                                                                                                                                                                aaron's mask

                                                                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                                                                • book
                                                                                                                                                                                                                                                                                                  • -
                                                                                                                                                                                                                                                                                                • leather
                                                                                                                                                                                                                                                                                                - 3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.
                                                                                                                                                                                                                                                                                                4. @@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                                + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                                - + diff --git a/wrap-bracelets/index.html b/wrap-bracelets/index.html index fcda934a..71471b86 100644 --- a/wrap-bracelets/index.html +++ b/wrap-bracelets/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,43 +1758,47 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                                1. - -

                                                                                                                                                                                                                                                                                                  zipper bifold (green)

                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                  patchwork wallet

                                                                                                                                                                                                                                                                                                  • leather
                                                                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                                                                  • highlight
                                                                                                                                                                                                                                                                                                    • +
                                                                                                                                                                                                                                                                                                  - A collage showing a green leather wallet with a zippered pocket built into one external side. + 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.
                                                                                                                                                                                                                                                                                                2. - -

                                                                                                                                                                                                                                                                                                  piñatex wallet with zipper

                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                  proud dad wallet

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

                                                                                                                                                                                                                                                                                                  sora's collar

                                                                                                                                                                                                                                                                                                  +                                                                                                                                                                                                                                                                                                   +

                                                                                                                                                                                                                                                                                                  foldy wallet

                                                                                                                                                                                                                                                                                                  • 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 four part collage showing a single piece of deep red leather folding up to become a card wallet.
                                                                                                                                                                                                                                                                                                  4. @@ -1678,9 +1831,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                                  + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                                  - + diff --git a/x-acto-knife-sheath/index.html b/x-acto-knife-sheath/index.html index b3756c3b..6e6e23cf 100644 --- a/x-acto-knife-sheath/index.html +++ b/x-acto-knife-sheath/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,29 +1759,29 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                                  1. - -

                                                                                                                                                                                                                                                                                                    brooke's suspenders

                                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                                    leaf patches

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

                                                                                                                                                                                                                                                                                                    foldy wallet

                                                                                                                                                                                                                                                                                                    +                                                                                                                                                                                                                                                                                                     +

                                                                                                                                                                                                                                                                                                    long zipper bifold

                                                                                                                                                                                                                                                                                                    • leather
                                                                                                                                                                                                                                                                                                    - A four part collage showing a single piece of deep red leather folding up to become a card wallet. + A collage showing an orange leather wallet with a long zipper running the length of the outside.
                                                                                                                                                                                                                                                                                                    3. @@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                                    - + diff --git a/zipper-bifold-green/index.html b/zipper-bifold-green/index.html index 93bb14e9..a36bd147 100644 --- a/zipper-bifold-green/index.html +++ b/zipper-bifold-green/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1609,34 +1758,6 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                                      -
                                                                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                                                                      brooke's suspenders

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

                                                                                                                                                                                                                                                                                                      mousie

                                                                                                                                                                                                                                                                                                      - -
                                                                                                                                                                                                                                                                                                        - -
                                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                                        • - -
                                                                                                                                                                                                                                                                                                      - A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. - -                                                                                                                                                                                                                                                                                                       -
                                                                                                                                                                                                                                                                                                      3. -

                                                                                                                                                                                                                                                                                                    3. sunflower

                                                                                                                                                                                                                                                                                                      @@ -1651,6 +1772,36 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                                      4. +
                                                                                                                                                                                                                                                                                                    4. + +

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

                                                                                                                                                                                                                                                                                                      proud dad wallet

                                                                                                                                                                                                                                                                                                      + +
                                                                                                                                                                                                                                                                                                        + +
                                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                                                                                      • gender
                                                                                                                                                                                                                                                                                                        • + +
                                                                                                                                                                                                                                                                                                      + A brown leather wallet with a subtle trans flag stitching across the top. + +                                                                                                                                                                                                                                                                                                       +
                                                                                                                                                                                                                                                                                                      6. +
                                                                                                                                                                                                                                                                                                    @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                                    + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                                    - + diff --git a/zipper-bifold/index.html b/zipper-bifold/index.html index f293b6bf..ef57a36f 100644 --- a/zipper-bifold/index.html +++ b/zipper-bifold/index.html @@ -478,6 +478,13 @@ body:has(dialog[open]) { --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light)); } +:root:has(#theme-light:checked) { + color-scheme: light; +} +:root:has(#theme-dark:checked) { + color-scheme: dark; +} + /* Base */ * { @@ -621,7 +628,7 @@ ul, ol, dl, li { } li { - line-height: 1.2 5; + line-height: 1.2; margin-top: .65rem; margin-bottom: .65rem; } @@ -960,6 +967,111 @@ footer a:focus-visible { outline-color: var(--color-pink); } +/* color picker */ +#theme { + display: flex; + justify-content: center; + margin: .5rem auto 0; + padding: 0 .75rem .5rem; + width: fit-content; + border: .125rem solid var(--color-teal); + border-radius: 2rem; +} + +#theme legend { + margin: 0 auto; + color: var(--color-teal); +} + +footer label { + cursor: pointer; + border: .125rem solid var(--color-pink); + padding: 0 .25rem; + color: var(--color-pink); + background-color: var(--color-bg); /* this stops the box shadows from showing through */ + box-shadow: .15em .15em var(--color-shadow); + /* Click animation handling */ + position: relative; + top: 0; + left: 0; + transition: top .05s ease-in, left .05s ease-in; +} + +footer input:checked + label { + color: var(--color-blue); + border-color: var(--color-blue); +} + +footer label i { + color: var(--color-teal); +} + +footer input:checked + label i { + color: var(--color-pink); +} + +@media (any-hover: hover) { + footer label:hover, + footer input:checked + label:hover, + footer label:hover i, + footer input:checked + label:hover i { + color: var(--color-bg); + } + + footer label:hover { + background-color: var(--color-pink); + } + + footer input:checked + label:hover { + background-color: var(--color-teal); + } +} + +footer input:focus-visible + label, +footer input:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-pink); + border-color: var(--color-pink); +} + +footer input:checked:focus-visible + label, +footer input:checked:focus-visible + label i { + color: var(--color-bg); + background-color: var(--color-teal); + border-color: var(--color-teal); +} + +footer label:active { + top: .09em; + left: .09em; + box-shadow: .05em .05em var(--color-shadow); +} + +label.theme-light { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-right: none; + padding-left: .35rem; +} + +label.theme-auto { +} + +label.theme-dark { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + border-left: none; + padding-right: .35rem; +} + +footer input { + /* To allow screen reader to still access these. */ + /* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */ + opacity: 0; + position: absolute; + pointer-events: none; +} + /* Pagination */ .pagination, .pagination li { @@ -1222,6 +1334,8 @@ pre[class*=language-]::selection { } } + + @@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
                                                                                                                                                                                                                                                                                                    1. - -

                                                                                                                                                                                                                                                                                                      nine pocket bifold

                                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                                      fishhook pride keychains

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

                                                                                                                                                                                                                                                                                                      mousie

                                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                                      swoop wallet

                                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                                      - A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. + 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.
                                                                                                                                                                                                                                                                                                    3. - -

                                                                                                                                                                                                                                                                                                      shrimp cat toy

                                                                                                                                                                                                                                                                                                      +                                                                                                                                                                                                                                                                                                       +

                                                                                                                                                                                                                                                                                                      snap pouch

                                                                                                                                                                                                                                                                                                      • leather
                                                                                                                                                                                                                                                                                                      - Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather.
                                                                                                                                                                                                                                                                                                      4. @@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) { + +
                                                                                                                                                                                                                                                                                                      + color scheme + + + + + + + + + +
                                                                                                                                                                                                                                                                                                      - +