2026-02-20 11:57:19 -08:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
< title > butch hands pattern | hello hello< / title >
< meta name = "description" content = "Lee Cattarin... on the internet!" >
< link rel = "alternate" href = "/feed.xml" type = "application/atom+xml" title = "hello hello" >
< meta property = "og:title" content = "butch hands pattern" >
< meta property = "og:type" content = "website" >
< meta property = "og:description" content = "Lee Cattarin... on the internet!" >
< meta property = "og:site_name" content = "hello hello" >
< meta property = "og:image" content = "/img/butch-hands.jpg" >
< meta property = "og:image:alt" content = "Hands wearing a pair of pink and grey gloves with convertable mitten tops." >
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
< meta name = "generator" content = "Eleventy v3.1.2" >
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin = "" >
< link href = "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel = "stylesheet" >
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
< script src = "https://kit.fontawesome.com/884dded219.js" crossorigin = "anonymous" > < / script >
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
< style > . p o s t - m e t a d a t a {
2026-02-19 21:09:25 -08:00
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: baseline;
margin: 1.5rem 0 .5rem;
}
.post-metadata p {
font-size: .9rem;
margin: 0;
}
.post-tags {
display: flex;
flex-flow: row wrap;
gap: .5rem;
list-style: none;
margin: 0;
}
.post-tags li {
margin: 0;
}
.post-tags li a {
text-decoration: none;
color: var(--color-teal);
padding: 0 .5rem;
border-radius: 1rem;
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
line-height: 2;
/* Click animation handling */
position: relative;
top: 0;
left: 0;
transition: top .1s ease-in, left .1s ease-in;
}
.post-tags li a:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.post-tags li a:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.post-tags li a:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.post-tags li a:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.post-tags li a:active {
top: .1rem;
left: .1rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
/* Adapted from PrismJS 1.30.0 Tomorrow Night theme
https://prismjs.com/download
*/
code,
pre,
code[class*=language-],
pre[class*=language-] {
font-family: var(--font-family-code);
background-color: var(--color-bg-alt);
font-size: .9rem;
text-shadow: 0 1px var(--color-shadow);
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre,
pre[class*=language-] {
margin: 1rem 0;
padding: 1rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word;
border-radius: .5rem;
overflow: auto;
}
:not(pre)>code,
:not(pre)>code[class*=language-] {
padding: .2rem;
border-radius: .25rem;
white-space: normal;
}
/* Selected text */
code ::-moz-selection,
code::-moz-selection,
pre ::-moz-selection,
pre::-moz-selection,
code[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
pre[class*=language-]::-moz-selection,
code ::selection,
code::selection,
pre ::selection,
pre::selection,
code[class*=language-] ::selection,
code[class*=language-]::selection,
pre[class*=language-] ::selection,
pre[class*=language-]::selection {
text-shadow: none;
background-color: var(--color-bg);
}
/* Syntax highlighting */
.token.namespace {
opacity: .7;
}
.token.bold,
.token.important {
font-weight:700
}
.token.italic {
font-style:italic
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog,
.token.punctuation {
color: var(--color-grey);
}
.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag {
color: var(--color-red);
}
.token.boolean,
.token.function,
.token.number {
color: var(--color-orange);
}
.token.class-name,
.token.constant,
.token.property,
.token.symbol {
color: var(--color-yellow);
}
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable,
.token.inserted {
color: var(--color-green);
}
.token.entity,
.token.operator,
.token.url,
.token.function-name {
color:var(--color-blue);
}
.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
color: var(--color-purple);
}
2026-02-20 08:36:56 -08:00
#postlist,
#taglist {
list-style: none;
}
#postlist, .post,
#taglist, .tag {
margin: 0;
}
/* Odd-numbered posts & tag layout/coloration */
.post:nth-child(odd) .postlink,
.tag:nth-child(odd) .taglink {
grid-template-areas:
'img h2'
'img info'
'img .';
grid-template-columns: 45% auto;;
--color-primary: var(--color-teal);
--color-accent: var(--color-pink);
}
/* Even-numbered posts & tags layout/coloration */
.post:nth-child(even) .postlink,
.tag:nth-child(even) .taglink {
grid-template-areas:
'h2 img'
'info img'
'. img';
grid-template-columns: auto 45%;
--color-primary: var(--color-pink);
--color-accent: var(--color-teal);
}
/* Layout for all posts on mobile */
@media (max-width: 650px) {
.post:nth-child(n) .postlink,
.tag:nth-child(n) .taglink {
grid-template-areas:
'img'
'h2'
'info';
grid-template-columns: auto;
}
}
/* Link */
.postlink,
.taglink {
display: grid;
border: .25rem solid var(--color-primary);
border-radius: 1.25rem;
box-shadow: .35rem .35rem var(--color-shadow);
margin: 2rem 0;
text-decoration: none;
/* Click animation handling */
position: relative;
top: 0;
left: 0;
transition: top .05s ease-in, left .05s ease-in;
}
.postlink:focus-visible,
.taglink:focus-visible {
background-color: var(--color-primary);
outline: none;
}
@media (any-hover: hover) {
.postlink:hover,
.taglink:hover {
background-color: var(--color-primary);
}
}
/* Forced colors */
@media (forced-colors: active) {
.postlink:focus-visible,
.taglink:focus-visible {
outline-offset: .25rem;
outline: .25rem solid;
}
@media (any-hover: hover) {
.postlink:hover,
.taglink:hover {
outline-offset: .25rem;
outline: .25rem solid;
}
}
}
/* Click animation */
.postlink:active,
.taglink:active {
box-shadow: none;
top: .2rem;
left: .2rem;
box-shadow: .15rem .15rem var(--color-shadow);
}
/* Post & tag elements */
.post h2, .post img,
.post ul, .post li,
.tag h2, .tag p,
.tag img {
margin: 0;
}
.post h2,
.tag h2 {
grid-area: h2;
padding: .25rem .5rem;
text-transform: uppercase;
font-size: 1.5rem;
color: var(--color-primary);
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
.post:nth-child(even) h2,
.tag:nth-child(even) h2 {
text-align: right;
}
.postlink:focus-visible h2,
.taglink:focus-visible h2 {
color: var(--color-bg);
border-color: var(--color-bg);
}
@media (any-hover: hover) {
.postlink:hover h2,
.taglink:hover h2 {
color: var(--color-bg);
border-color: var(--color-bg);
}
}
/* Images */
.post img,
.tag-imgs {
grid-area: img;
}
.tag-imgs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .15rem;
}
.tag-imgs img {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.missing-image {
width: 100%;
aspect-ratio: 3 / 2;
background-color: var(--color-bg-alt);
border-radius: calc(1rem);
}
.taglink:focus-visible .missing-image {
opacity: .7;
}
@media (any-hover: hover) {
.taglink:hover .missing-image {
opacity: .7;
}
}
/* Post tags */
.postlist-tags {
grid-area: info;
list-style: none;
display: flex;
flex-flow: row wrap;
gap: .5rem;
padding: .5rem;
}
.post:nth-child(odd) .postlist-tags {
justify-content: flex-end;
}
.postlist-tags li,
.tagcount {
background-color: var(--color-primary);
color: var(--color-bg);
padding: 0 .5rem;
border-radius: 1rem;
}
.postlink:focus-visible .postlist-tags li,
.taglink:focus-visible .tagcount {
background-color: var(--color-bg);
color: var(--color-primary);
}
@media (any-hover: hover) {
.postlink:hover .postlist-tags li,
.taglink:hover .tagcount {
background-color: var(--color-bg);
color: var(--color-primary);
}
}
/* Tag count */
.tag p {
grid-area: info;
padding: .5rem;
}
.tag:nth-child(odd) p {
text-align: right;
}
2026-02-19 21:09:25 -08:00
:root {
color-scheme: light dark;
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
--color-dark: #2e303e;
--color-dark-alt: #3c3f52;
--color-light: #ebeeef;
--color-light-alt: #dbe1e3;
--color-teal-dark: #18737b;
--color-teal-light: #25b0bc;
--color-pink-dark: #94195d;
--color-pink-light: #ee9fcb;
--color-shadow: rgba(2, 10, 40, .25);
/* Used for syntax highlighting */
2026-02-20 12:24:10 -08:00
--color-red-light: #f195aa;
2026-02-19 21:09:25 -08:00
--color-orange-light: #fab795;
--color-yellow-light: #fbe6bc;
--color-green-light: #29d398;
--color-blue-light: #26bbd9;
--color-purple-light: #ddaeea;
--color-grey-light: #b9c3c6;
--color-red-dark: #991433;
--color-orange-dark: #883206;
--color-yellow-dark: #6a4906;
--color-green-dark: #125940;
--color-blue-dark: #125663;
--color-purple-dark: #722999;
--color-grey-dark: #4a4b64;
--color-text: light-dark(var(--color-dark), var(--color-light));
--color-bg: light-dark(var(--color-light), var(--color-dark));
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
--color-teal: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
--color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light));
--color-yellow: light-dark(var(--color-yellow-dark), var(--color-yellow-light));
--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
}
/* Base */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-family);
color: var(--color-text);
background-color: var(--color-bg);
}
main {
width: 60vw;
max-width: 1000px;
margin: 0 auto;
2026-02-20 08:36:56 -08:00
scroll-margin-top: 7rem;
2026-02-19 21:09:25 -08:00
}
@media (max-width: 1050px) {
main {
width: 75vw;
}
}
@media (max-width: 650px) {
main {
width: 92vw;
}
}
/* Headers */
h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
color: var(--color-teal);
}
h1 {
margin-top: 3rem;
font-size: 3.5rem;
text-align: center;
}
2026-02-20 08:36:56 -08:00
h2, h3, h4, h5, h6 {
scroll-margin-top: 5rem;
}
2026-02-19 21:09:25 -08:00
h2 {
margin-top: 2rem;
font-size: 2.2rem;
}
h3 {
margin-top: 1.5rem;
font-size: 1.6rem;
}
@media (max-width: 650px) {
h1 { font-size: 2.8rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.35rem; }
}
h4, h5, h6 {
margin-top: 1rem;
font-size: 1.2rem;
}
/* Images */
img {
display: block;
max-width: 100%;
height: auto;
border-radius: 1rem;
}
/* Paragraphs */
p {
margin: 1.25rem 0;
line-height: 1.4;
}
strong,
b {
font-weight: 900;
}
/* Links */
a {
color: var(--color-text);
border-radius: .25rem;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .2em;
text-decoration-color: var(--color-teal);
transition: text-decoration-thickness .5s;
}
a:focus-visible {
text-decoration: none;
outline: .15rem solid var(--color-teal);
}
@media (any-hover: hover) {
a:hover {
text-decoration-thickness: .4em;
}
}
a:active {
text-decoration-thickness: .4em;
}
/* Heading anchors */
a.ha,
span.ha-placeholder {
color: var(--color-pink);
}
span.ha-placeholder {
2026-02-20 12:24:10 -08:00
opacity: .55;
2026-02-19 21:09:25 -08:00
}
/* Lists */
::marker {
color: var(--color-pink);
}
ul, ol, dl, li {
margin-left: 1rem;
}
li {
line-height: 1.2 5;
margin-top: .65rem;
margin-bottom: .65rem;
}
li ul, li ol {
margin: .5rem 0;
}
dt {
font-weight: 900;
margin-top: .5rem;
}
dd {
margin-left: 2rem;
margin-bottom: .75rem;
}
/* Blockquotes */
blockquote {
margin: .5rem 0;
padding: 0 1rem;
border-radius: .25rem 1rem 1rem .25rem;
line-height: 1.25;
border-left: .5rem solid var(--color-pink);
}
blockquote,
blockquote p,
blockquote ol,
blockquote ul {
background-color: var(--color-bg-alt);
padding: .5rem;
}
blockquote p {
margin: 0;
}
/* Tables */
table {
width: 100%;
border-spacing: 0; /* border collapse doesn't play nice with radii */
border-radius: .3rem;
border: thin solid var(--color-pink);
}
th {
color: var(--color-bg);
background-color: var(--color-pink);
}
th code {
color: var(--color-text); /* Yes, I actually do this somewhere */
}
th, td {
padding: .5rem;
text-align: left;
}
tr:nth-child(even) { background-color: var(--color-bg-alt); }
th:not(:first-child) { border-left: thin solid var(--color-bg); }
th:first-child { border-top-left-radius: .25rem; }
th:last-child { border-top-right-radius: .25rem; }
td:not(:first-child) { border-left: thin solid var(--color-pink); }
/* Times */
time {
color: var(--color-grey);
}
/* Horizontal rules */
hr {
2026-02-20 08:36:56 -08:00
border: .25rem solid var(--color-pink);
2026-02-19 21:09:25 -08:00
margin: 2rem 0;
}
/* Used on home, reference, gallery pages */
.centered {
text-align: center;
}
/* Currently only used for resume, but it's generalizable */
.upper {
text-transform: uppercase;
}
/* Header */
header {
position: sticky;
top: 0;
background-color: var(--color-bg);
padding: .75rem 0;
z-index: 10;
2026-02-20 08:46:50 -08:00
border-bottom: thick solid var(--color-teal);
2026-02-20 08:36:56 -08:00
box-shadow: 0 .25rem .15rem var(--color-shadow);
2026-02-19 21:09:25 -08:00
}
/* Header links, pagination links */
header a,
.pagination a,
.webring ul a {
border-radius: 1rem;
border: .125rem solid var(--color-pink);
color: var(--color-pink);
text-decoration: none;
padding: 0 .25rem;
box-shadow: .15rem .15rem var(--color-shadow);
font-size: 1.2rem;
/* Click animation handling */
position: relative;
top: 0;
left: 0;
transition: top .05s ease-in, left .05s ease-in;
}
header a,
.pagination .older a,
.webring .prev a,
.webring .rand a {
padding-right: .35rem;
}
.pagination .newer a,
.webring .next a,
.webring .rand a {
padding-left: .35rem;
}
header a:focus-visible,
.pagination a:focus-visible,
.webring ul a:focus-visible {
color: var(--color-bg);
border-color: var(--color-pink);
background-color: var(--color-pink);
outline: none;
}
@media (any-hover: hover) {
header a:hover,
.pagination a:hover,
.webring ul a:hover {
color: var(--color-bg);
border-color: var(--color-pink);
background-color: var(--color-pink);
}
}
@media (forced-colors: active) {
header a:focus-visible,
.pagination a:focus-visible,
.webring ul a:focus-visible {
outline-offset: .125rem;
outline: .125rem solid;
}
@media (any-hover: hover) {
header a:hover,
.pagination a:hover,
.webring ul a:hover {
outline-offset: .125rem;
outline: .125rem solid;
}
}
}
/* Click animation */
header a:active,
.pagination a:active,
.webring ul a:active {
top: .1rem;
left: .1rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
/* Current page */
header a[aria-current="page"] {
border-color: var(--color-teal);
color: var(--color-teal);
}
header a[aria-current="page"]:focus-visible {
color: var(--color-bg);
border-color: var(--color-teal);
background-color: var(--color-teal);
}
@media (any-hover: hover) {
header a[aria-current="page"]:hover {
color: var(--color-bg);
background-color: var(--color-teal);
border-color: var(--color-teal);
}
}
/* Header link icons, pagination icons */
header i,
.pagination i,
.webring ul i {
color: var(--color-teal);
}
header i,
.pagination .older i,
.webring .prev i,
.webring .rand i:nth-child(1) {
padding-left: .25rem;
}
.pagination .newer i,
.webring .next i,
.webring .rand i:nth-child(2) {
padding-right: .25rem;
}
header a[aria-current="page"] i {
color: var(--color-pink);
}
header a:focus-visible i,
a[aria-current="page"] a:focus-visible i,
.pagination a:focus-visible i,
.webring ul a:focus-visible i {
color: var(--color-bg);
}
@media (any-hover: hover) {
header a:hover i,
header a[aria-current="page"]:hover i,
.pagination a:hover i,
.webring ul a:hover i {
color: var(--color-bg);
}
}
/* Skip link */
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
}
#skip:focus-visible {
display: inline-block;
left: auto;
top: auto;
width: auto;
height: auto;
overflow: auto;
margin: 0 10%;
z-index: 999;
}
/* Nav */
header ul {
display: flex;
list-style: none;
gap: 1rem;
justify-content: center;
}
header ul,
header li {
margin: 0;
}
@media (max-width: 650px) {
.menu-text {
display: none; /* Icons only on small screens */
}
header a {
padding: .15rem .5rem;
}
header i {
padding: 0;
}
}
/* Footer */
footer {
padding: 1rem 0;
font-size: .9rem;
2026-02-20 08:46:50 -08:00
border-top: thick solid var(--color-pink);
2026-02-19 21:09:25 -08:00
}
footer ul {
display: flex;
list-style: none;
gap: .5rem;
justify-content: center;
margin: 0;
}
footer li {
margin: 0;
}
footer li:nth-child(2)::before,
footer li:nth-child(2)::after {
content: " ● " / "";
color: var(--color-teal);
}
@media (max-width: 650px) {
footer ul {
flex-flow: column;
text-align: center;
}
footer li:nth-child(2)::before,
footer li:nth-child(2)::after {
content: none;
}
}
footer a {
text-decoration-color: var(--color-pink);
}
footer a:focus-visible {
outline-color: var(--color-pink);
}
/* Pagination */
.pagination,
.pagination li {
margin: 0;
}
.pagination {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "older newer";
list-style: none;
margin-top: 3rem;
}
@media (max-width: 650px) {
.post-pagination {
grid-template-columns: 1fr;
grid-template-areas:
"older"
"newer";
gap: .75rem;
}
}
.pagination .older {
grid-area: older;
}
.pagination .newer {
grid-area: newer;
text-align: right;
}
/* webring navigation */
.webring {
margin-bottom: 3rem;
}
.webring ul {
display: flex;
flex-flow: row wrap;
list-style: none;
justify-content: space-around;
gap: .35rem;
}
.webring ul,
.webring li {
margin-left: 0;
}
@media print {
/* Nav elements */
header,
footer,
nav {
display: none !important;
}
/* Base */
body {
background-color: #fff;
color: #000;
}
main {
width: 95vw;
}
h1,h2,h3,h4,h5,h6 {
color: #000;
}
/* Links */
/* Hover is not really necessary, but it's annoying when testing otherwise */
a,
a:hover {
text-decoration-style: dotted;
text-decoration-thickness: .1rem;
text-decoration-color: #000;
}
a::after{
content: " (" attr(href) ")";
}
/* Code */
code,
pre,
code[class*=language-],
pre[class*=language-] {
text-shadow: none;
background-color: var(--color-light);
color: #000 !important;
}
.token.namespace {
opacity: 1;
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog,
.token.punctuation,
.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag,
.token.boolean,
.token.function,
.token.number,
.token.class-name,
.token.constant,
.token.property,
.token.symbol,
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable,
.token.inserted,
.token.entity,
.token.operator,
.token.url,
.token.function-name,
.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
color: #000;
}
}< / style >
2026-02-20 11:57:19 -08:00
< script type = "module" > / / T h a n k y o u t o h t t p s : / / g i t h u b . c o m / d a v i d d a r n e s / h e a d i n g - a n c h o r s
2026-02-19 21:09:25 -08:00
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
let globalInstanceIndex = 0;
class HeadingAnchors extends HTMLElement {
static register(tagName = "heading-anchors", registry = window.customElements) {
if(registry & & !registry.get(tagName)) {
registry.define(tagName, this);
}
}
static attributes = {
exclude: "data-ha-exclude",
prefix: "prefix",
content: "content",
}
static classes = {
anchor: "ha",
placeholder: "ha-placeholder",
srOnly: "ha-visualhide",
}
static defaultSelector = "h2,h3,h4,h5,h6";
static css = `
.${HeadingAnchors.classes.srOnly} {
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.${HeadingAnchors.classes.anchor} {
position: absolute;
left: var(--ha_offsetx);
top: var(--ha_offsety);
text-decoration: none;
opacity: 0;
}
.${HeadingAnchors.classes.placeholder} {
opacity: .3;
}
.${HeadingAnchors.classes.anchor}:is(:focus-within, :hover) {
opacity: 1;
}
.${HeadingAnchors.classes.anchor},
.${HeadingAnchors.classes.placeholder} {
display: inline-block;
padding: 0 .25em;
/* Disable selection of visually hidden label */
-webkit-user-select: none;
user-select: none;
}
@supports (anchor-name: none) {
.${HeadingAnchors.classes.anchor} {
position: absolute;
left: anchor(left);
top: anchor(top);
}
}`;
get supports() {
return "replaceSync" in CSSStyleSheet.prototype;
}
get supportsAnchorPosition() {
return CSS.supports("anchor-name: none");
}
constructor() {
super();
if(!this.supports) {
return;
}
let sheet = new CSSStyleSheet();
sheet.replaceSync(HeadingAnchors.css);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
this.headingStyles = {};
this.instanceIndex = globalInstanceIndex++;
}
connectedCallback() {
if (!this.supports) {
return;
}
this.headings.forEach((heading, index) => {
if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) {
let anchor = this.getAnchorElement(heading);
let placeholder = this.getPlaceholderElement();
// Prefers anchor position approach for better accessibility
// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
if(this.supportsAnchorPosition) {
let anchorName = `--ha_${this.instanceIndex}_${index}`;
placeholder.style.setProperty("anchor-name", anchorName);
anchor.style.positionAnchor = anchorName;
}
heading.appendChild(placeholder);
heading.after(anchor);
}
});
}
// Polyfill-only
positionAnchorFromPlaceholder(placeholder) {
if(!placeholder) {
return;
}
let heading = placeholder.closest("h1,h2,h3,h4,h5,h6");
if(!heading.nextElementSibling) {
return;
}
// TODO next element could be more defensive
this.positionAnchor(heading.nextElementSibling);
}
// Polyfill-only
positionAnchor(anchor) {
if(!anchor || !anchor.previousElementSibling) {
return;
}
// TODO previous element could be more defensive
let heading = anchor.previousElementSibling;
this.setFontProp(heading, anchor);
if(this.supportsAnchorPosition) {
// quit early
return;
}
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
if(placeholder) {
anchor.style.setProperty("--ha_offsetx", `${placeholder.offsetLeft}px`);
anchor.style.setProperty("--ha_offsety", `${placeholder.offsetTop}px`);
}
}
setFontProp(heading, anchor) {
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
if(placeholder) {
let style = getComputedStyle(placeholder);
let props = ["font-weight", "font-size", "line-height", "font-family"];
let [weight, size, lh, family] = props.map(name => style.getPropertyValue(name));
anchor.style.setProperty("font", `${weight} ${size}/${lh} ${family}`);
let vars = style.getPropertyValue("font-variation-settings");
if(vars) {
anchor.style.setProperty("font-variation-settings", vars);
}
}
}
getAccessibleTextPrefix() {
// Useful for i18n
return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
}
getContent() {
if(this.hasAttribute(HeadingAnchors.attributes.content)) {
return this.getAttribute(HeadingAnchors.attributes.content);
}
return "#";
}
// Placeholder nests inside of heading
getPlaceholderElement() {
let ph = document.createElement("span");
ph.setAttribute("aria-hidden", true);
ph.classList.add(HeadingAnchors.classes.placeholder);
let content = this.getContent();
if(content) {
ph.innerHTML = content; // CHANGED HERE
}
ph.addEventListener("mouseover", (e) => {
let placeholder = e.target.closest(`.${HeadingAnchors.classes.placeholder}`);
if(placeholder) {
this.positionAnchorFromPlaceholder(placeholder);
}
});
return ph;
}
getAnchorElement(heading) {
let anchor = document.createElement("a");
anchor.href = `#${heading.id}`;
anchor.classList.add(HeadingAnchors.classes.anchor);
let content = this.getContent();
anchor.innerHTML = `< span class = "${HeadingAnchors.classes.srOnly}" > ${this.getAccessibleTextPrefix()}: ${heading.textContent}< / span > ${content ? `< span aria-hidden = "true" > ${content}< / span > ` : ""}`;
anchor.addEventListener("focus", e => {
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
if(anchor) {
this.positionAnchor(anchor);
}
});
anchor.addEventListener("mouseover", (e) => {
// when CSS anchor positioning is supported, this is only used to set the font
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
this.positionAnchor(anchor);
});
return anchor;
}
get headings() {
return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
}
get selector() {
return this.getAttribute("selector") || HeadingAnchors.defaultSelector;
}
}
HeadingAnchors.register();
export { HeadingAnchors }< / script >
2026-02-20 11:57:19 -08:00
< / head >
< body >
< header >
2026-02-19 21:09:25 -08:00
2026-02-20 12:24:10 -08:00
< a href = "#main" id = "skip" title = "skip to main content" >
2026-02-19 21:09:25 -08:00
< i class = "fa-solid fa-forward" aria-hidden = "true" > < / i > skip
< / a >
< nav aria-label = "main navigation" >
< ul >
< li >
2026-02-20 11:57:19 -08:00
< a href = "/reference/" title = "read reference posts" >
2026-02-19 21:09:25 -08:00
< i class = "fa-regular fa-folder-open" aria-hidden = "true" > < / i >
< span class = "menu-text" > reference< / span >
< / a >
< / li >
< li >
2026-02-20 11:57:19 -08:00
< a href = "/gallery/" title = "view the gallery" >
2026-02-19 21:09:25 -08:00
< i class = "fa-regular fa-images" aria-hidden = "true" > < / i >
< span class = "menu-text" > gallery< / span >
< / a >
< / li >
< li >
2026-02-20 11:57:19 -08:00
< a href = "/" title = "" >
2026-02-19 21:09:25 -08:00
< i class = "fa fa-solid fa-crow" aria-hidden = "true" > < / i >
< span class = "menu-text" > home< / span >
< / a >
< / li >
< li >
2026-02-20 11:57:19 -08:00
< a href = "/about/" title = "about Lee" >
2026-02-19 21:09:25 -08:00
< i class = "fa-regular fa-user" aria-hidden = "true" > < / i >
< span class = "menu-text" > about< / span >
< / a >
< / li >
< li >
2026-02-20 11:57:19 -08:00
< a href = "/contact/" title = "contact Lee" >
2026-02-19 21:09:25 -08:00
< i class = "fa-solid fa-envelope-open-text" aria-hidden = "true" > < / i >
< span class = "menu-text" > contact< / span >
< / a >
< / li >
< / ul >
< / nav >
< / header >
2026-02-20 11:57:19 -08:00
< main id = "main" >
2026-02-19 21:09:25 -08:00
2026-02-20 08:36:56 -08:00
2026-02-19 21:09:25 -08:00
< heading-anchors content = "<i class='fa-solid fa-anchor'></i>" >
< article >
< h1 id = "butch-hands-pattern" > butch hands pattern< / h1 >
< div class = "post-metadata" >
< p >
posted on
< time datetime = "2023-02-13" > February 13, 2023< / time >
by Lee Cattarin
< / p >
< ul class = "post-tags" >
< li >
< a href = "/tags/knit/" > knit< / a >
< / li >
< li >
< a href = "/tags/highlight/" > highlight< / a >
< / li >
< / ul >
< / div >
< img src = "/img/butch-hands.jpg" alt = "Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading = "lazy" decoding = "async" width = "1000" height = "750" >
< p > This pattern is a < strong > Work in Progress< / strong > and will be updated with more information as I make a second pair of these.< / p >
< h2 id = "authorship-and-attribution" > Authorship and attribution< / h2 >
< ul >
< li > Created: 12 March 2021< / li >
< li > Last updated: 13 February 2023< / li >
< / ul >
< p > This pattern was built on the < a href = "https://www.ravelry.com/patterns/library/podster-gloves" target = "_blank" rel = "external" > Podster Gloves pattern< / a > by Glenna C. on Ravelry. I highly recommend reading and following that pattern to fill in gaps with this one.< / p >
< h2 id = "materials-and-tools" > Materials and tools< / h2 >
< ul >
< li > bulky yarn< / li >
< li > fingering yarn< / li >
< li > Needles: size 8 DPNs, size 1.5 DPNs< / li >
< / ul >
< h2 id = "outline" > Outline< / h2 >
< p > These gloves are built in two parts: bulky yarn section, then fingering. First, with bulky yarn and larger needles, the ribbed < strong > cuff< / strong > is knit in the round. From the cuff we build the < strong > back of the hand< / strong > by working a portion of the stitches flat in stockinette. The back of the hand then forms the < strong > mitten top< / strong > by making additional stitches and joining to work in the round again, then knitting until a taper and grafting the ends with Kitchener stitch.< / p >
< p > With fingering yarn and smaller needles, we work from the leftover cuff stitches up to build the < strong > palm< / strong > , using decreases to connect the edges of the bulky and fingering sections. A < strong > thumb gusset< / strong > is built with increases, then put onto waste yarn to work later. When the palm is knit to the point it aligns with the start of the mitten top, we pick up stitches from the inside edge of the mitten top and join to knit the rest of the < strong > hand and fingers< / strong > in the round. Finally, we split off < strong > fingers< / strong > and work each separately, including returning to finish the < strong > thumb< / strong > .< / p >
< h2 id = "directions" > Directions< / h2 >
< h3 id = "cuff" > Cuff< / h3 >
< p > With larger needles and bulky yarn, CO 28 (N) stitches and join to work in the round, placing a BOR marker. Work in k1p1 rib or your preferred rib until desired length of cuff is reached, then stop at BOR.< / p >
< h3 id = "back-of-hand" > Back of hand< / h3 >
< p > Remove BOR marker. Turn to work WS.< / p >
< p > p15 (N/2 + 1) stitches. Place a locking stitch marker into the first and last stitches of this row for a reference point later. Turn to work RS.< / p >
< p > Back of hand repeat:< / p >
< ul >
< li > RS: k15< / li >
< li > WS: p15< / li >
< / ul >
< p > Repeat until work sits just below the knuckles, ending with a RS row.< / p >
< p > Thread a piece of waste yarn through all back of hand stitches. This is used as a reference point later to pick up stitches for the hand.< / p >
< h3 id = "mitten-top" > Mitten top< / h3 >
< p > At the end of a RS row, place a BOR marker, then make 13 (N/2 -1) stitches using the backwards loop cast on or your preferred method. Join to work in the round.< / p >
< p > Establish a ribbed cuff on the palm side of the mitten top while leaving the back of the hand in stockinette:< / p >
< ul >
< li > (k1, p1) x7, k1 (15 stitches in rib)< / li >
< li > k13< / li >
< / ul >
< p > Repeat for 4 rows or your desired length.< / p >
< p > Knit in stockinette until work is about level with the end of the pinky finger.< / p >
< p > Mitten top decreases:< / p >
< ul >
< li > Row 1: (k1, ssk, k7, k2tog, k1) x2 (4 stitches decreased, 22 stitches remaining)< / li >
< li > Row 2: k all stitches< / li >
< li > Row 3: (k1, ssk, k5, k2tog, k1) x2 (4 stitches decreased, 18 stitches remaining)< / li >
< li > Row 4: k all stitches< / li >
< li > Row 5: (k1, ssk, k3, k2tog, k1) x2 (4 stitches decreased, 14 stitches remaining)< / li >
< / ul >
< p > Place first 7 stitches onto one needle and second 7 stitches on to another. Graft together using Kitchener stitch or your preferred method.< / p >
< p > You can alternately begin the decreases on the pinky side of the hand earlier than on the pointer side - this will make the mitten top fit the hand closer.< / p >
< h3 id = "establishing-the-palm" > Establishing the palm< / h3 >
< p > You will now start to work with the other stitches left by the cuff, on the RS. Use smaller needles and fingering weight yarn.< / p >
< p > Start by making 1 from the yarn between the back of hand (BOH) stitches and your first stitch. Then kfb (or your preferred increase) across all remaining cuff stitches. Make 1 more stitch from the yarn between your stitches and the BOH. You should have 28 (N) stitches.< / p >
< p > At the end of your RS row, pick up the selvedge stich < em > below< / em > the stitch we marked earlier. Then turn your work.< / p >
< p > k2tog - the selvedge stitch and your last stitch. purl across to the last stitch in the row, then ssk that stitch together with, again, the selvedge stitch < em > below< / em > the marked stitch. Turn your work.< / p >
< p > Palm repeat:< / p >
< ul >
< li > RS: sl1 wyif, knit to last stitch, sl1 wyif, pick up next selvedge stitch< / li >
< li > WS: k2tog (selvedge stitch and last stitch), purl to last stitch, ssk (last stitch and picked up selvedge stitch)< / li >
< / ul >
< p > You only need to do this one or two times before starting the thumb gusset.< / p >
< h3 id = "thumb-gusset" > Thumb gusset< / h3 >
< p > I diverge slightly from the Podster Gloves pattern here in that there is only one line of increases going up this thumb, and so we increase more frequently.< / p >
< p > Follow right or left hand instructions accordingly until you have added 16-20 stitches depending on thumb size.< / p >
< h4 id = "right-hand-thumb" > Right hand thumb< / h4 >
< ul >
< li > RS: sl1 wyif, k2, knit all added gusset stitches, m1R, knit to end according to Palm< / li >
< li > WS: follow Palm instructions< / li >
< / ul >
< p > If you would like to place a marker for the increases, I recommend setting that up as follows:< / p >
< ul >
< li > RS: sl1 wyif, k2, [knit 0 gusset stitches,] m1R, k1, place marker, ...< / li >
< / ul >
< p > and then on future RS:< / p >
< ul >
< li > RS: sl1 wyif, knit to one stitch before marker, m1R, k1, slip marker, ...< / li >
< / ul >
< p > This ensures that you are not doing your make ones with a marker in the way. But I generally don't use the marker and just knit all the " new" stitches before doing the m1R.< / p >
< h4 id = "left-hand-thumb" > Left hand thumb< / h4 >
< p > To be continued...< / p >
< / article >
< nav aria-label = "pagination" >
< ol class = "pagination post-pagination" >
< li class = "older" >
< a href = "/iris/" >
< i class = "fa-solid fa-hand-point-left" aria-hidden = "true" > < / i > iris
< / a >
< / li >
< li class = "newer" >
< a href = "/chanterelle/" >
chanterelle < i class = "fa-solid fa-hand-point-right" aria-hidden = "true" > < / i >
< / a >
< / li >
< / ol >
< / nav >
2026-02-20 08:36:56 -08:00
< hr >
< section class = "related-posts" >
< h2 id = "related-posts" > related posts< / h2 >
< ol id = "postlist" >
< li class = "post" >
2026-02-20 14:35:54 -08:00
< a class = "postlink" href = "/textures-unite/" >
2026-02-20 08:36:56 -08:00
2026-02-20 14:35:54 -08:00
< img src = "/img/textures-unite.jpg" alt = "a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading = "lazy" decoding = "async" width = "1000" height = "1334" >
2026-02-20 08:36:56 -08:00
2026-02-20 14:35:54 -08:00
< h2 id = "textures-unite" > textures unite< / h2 >
2026-02-20 08:36:56 -08:00
< ul class = "postlist-tags" >
2026-02-20 14:35:54 -08:00
< li > knit< / li >
2026-02-20 08:36:56 -08:00
< li > highlight< / li >
< / ul >
< / a >
< / li >
< li class = "post" >
2026-02-20 14:35:54 -08:00
< a class = "postlink" href = "/pink-socks/" >
2026-02-20 08:36:56 -08:00
2026-02-20 14:35:54 -08:00
< img src = "/img/pink-socks.jpg" alt = "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." loading = "lazy" decoding = "async" width = "1000" height = "1333" >
2026-02-20 08:36:56 -08:00
2026-02-20 14:35:54 -08:00
< h2 id = "pink-socks" > pink socks< / h2 >
2026-02-20 08:36:56 -08:00
< ul class = "postlist-tags" >
2026-02-20 14:35:54 -08:00
< li > knit< / li >
2026-02-20 08:36:56 -08:00
< / ul >
< / a >
< / li >
< li class = "post" >
2026-02-20 14:35:54 -08:00
< a class = "postlink" href = "/happy-solstice-2025/" >
2026-02-20 08:36:56 -08:00
2026-02-20 14:35:54 -08:00
< img src = "/img/solstice-2025.jpg" alt = "front and back of our solstice card from this year, designed in postcard format. long alt incoming... front - 4 picture collage. 1 - i'm standing in the woods, looking to one side, wearing an elaborate knit scarf. 2 - silhouetted thistle-like flowers in front of a pink-purple sky. 3 - my wife brooke crouches down to draw a heart in charcoal on a beach log, with 'L + B' written inside. 4 - brooke stands on a driftwood-covered beach looking hella cool in mirrored shades. our dog kes stands in front of her and looks off to one side eagerly. overlaid is the words 'happy solstice' in cursive. back - split down the center like the back of a postcard. on the left side, a 5 picture collage. 1 - i stand on a rock at the edge of a calm alpine lake. overlaid is the words 'lee, brooke, kestrel, & the flock' in print lettering. 2 - an early spring fern curl. 3 - our six ducks, all facing to the left, not in a row but still very organized. 4 - brooke grins at the camera while hugging kestrel's head. kestrel looks maybe a bit distraught. 5 - silhouette of a heron in flight across an early morning blue sky. on the address side, i've added a dahlia to represent the stamp, and written 'you!' in the field that would normally hold the mailing address." loading = "lazy" decoding = "async" width = "1000" height = "1346" >
2026-02-20 08:36:56 -08:00
2026-02-20 14:35:54 -08:00
< h2 id = "happy-solstice-2025" > happy solstice 2025< / h2 >
2026-02-20 08:36:56 -08:00
< ul class = "postlist-tags" >
2026-02-20 12:24:10 -08:00
< li > highlight< / li >
2026-02-20 08:36:56 -08:00
< / ul >
< / a >
< / li >
< / ol >
< / section >
< / heading-anchors >
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
< / main >
2026-02-19 21:09:25 -08:00
2026-02-20 11:57:19 -08:00
< footer >
2026-02-19 21:09:25 -08:00
< ul >
< li >
2026-02-20 12:24:10 -08:00
< a href = "/colophon/" >
2026-02-19 21:09:25 -08:00
colophon
< / a >
< / li >
< li >
< a href = "/" title = "go home" aria-label = "go home | hello hello from Lee Cattarin in 2026" >
hello hello from Lee Cattarin in 2026< / a >
< / li >
< li >
< a href = "https://heckin.technology/inherentlee/leecat.art" title = "source code" aria-label = "source code" target = "_blank" rel = "external" >
src
< / a >
< / li >
< / ul >
< / footer >
2026-02-20 14:35:54 -08:00
<!-- This page `/butch - hands - pattern/` was built on 2026 - 02 - 20T22:35:37.904Z -->
2026-02-20 11:57:19 -08:00
< body >
< / body > < / body > < / html >
