2026-09-23 16:28:48 -07:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Lee C. | Spoonfairies</ title >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta charset = "utf-8" >
<!-- Meta -->
< link rel = "canonical" href = "/" >
< meta name = "description" content = "find the services you need from others who need you" >
< meta name = "robots" content = "index,follow" >
< meta property = "og:title" content = "Lee C. | Spoonfairies" >
< meta property = "og:type" content = "article" >
< meta property = "og:url" content = "https://spoonfairies.help/providers/lee-c/" >
< meta property = "og:description" content = "find the services you need from others who need you" >
< link rel = "icon" type = "image/x-icon" href = "/favicon.ico" >
< meta property = "og:image" content = "https://spoonfairies.help/favicon.ico" >
< meta property = "og:image:alt" content = "the Spoonfairies logo, a spoon with wings" >
< meta name = "generator" content = "Eleventy v3.1.5" >
<!-- Fonts -->
< 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+Next:ital,wght@0,200..800;1,200..800&display=swap" rel = "stylesheet" >
<!-- CSS -->
< style >: root {
color-scheme : light dark ;
--font-family : "Atkinson Hyperlegible Next" , sans-serif ;
/* Theme colors */
--color-light : #fbe8fd ;
--color-dark : #110526 ;
--color-pink-dark : #741189 ;
--color-pink-light : #d972ef ;
--color-purple-dark : #421397 ;
--color-purple-light : #9d6ff4 ;
--color-blue-dark : #1243a7 ;
--color-blue-light : #6586ea ;
/* light/dark mode resolved colors */
--color-bg : light-dark ( var ( -- color - light ), var ( -- color - dark ));
--color-text : light-dark ( var ( -- color - dark ), var ( -- color - light ));
--color-pink : light-dark ( var ( -- color - pink - dark ), var ( -- color - pink - light ));
--color-purple : light-dark ( var ( -- color - purple - dark ), var ( -- color - purple - light ));
--color-blue : light-dark ( var ( -- color - blue - dark ), var ( -- color - blue - light ));
}
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
*, * :: before , * :: after {
box-sizing : border-box ; /* 1. Use a more-intuitive box-sizing model */
}
# root , # __next {
isolation : isolate ; /* 10. Create a root stacking context */
}
@ media ( prefers-reduced-motion : no-preference ) {
html {
interpolate-size : allow-keywords ; /* 3. Enable keyword animations */
}
}
html ,
body {
padding : 0 ;
margin : 0 auto ;
font-family : var ( -- font - family );
color : var ( -- color - text );
background-color : var ( -- color - bg );
}
html {
overflow-y : scroll ;
}
body {
max-width : 40 rem ;
line-height : 1.5 ; /* 4. Increase line-height */
-webkit- font-smoothing : antialiased ; /* 5. Improve text rendering */
}
main {
padding : 1 rem ;
}
section + section {
margin-top : 4 rem ;;
}
img , picture , video , canvas , svg {
display : block ; /* 6. Improve media defaults */
max-width : 100 % ; /* 6. Improve media defaults */
height : auto ; /* 6. Improve media defaults */
}
input , button , textarea , select {
font : inherit ; /* 7. Inherit fonts for form controls */
}
p , h1 , h2 , h3 , h4 , h5 , h6 {
overflow-wrap : break-word ; /* 8. Avoid text overflows */
}
p {
text-wrap : pretty ; /* 9. Improve line wrapping */
}
p : last-child {
margin-bottom : 0 ;
}
p {
line-height : 1.5 ;
}
p + p {
margin-top : 2 rem ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
text-wrap : balance ; /* 9. Improve line wrapping */
}
h1 {
font-size : 2.5 rem ;
margin-top : 0 ;
}
h2 {
font-size : 1.9 rem ;
padding-bottom : .1 rem ;
border-bottom : .1 rem solid var ( -- color - pink );
}
h3 {
font-size : 1.5 rem ;
padding-bottom : .05 rem ;
border-bottom : .05 rem solid var ( -- color - pink );
}
h4 {
font-size : 1.2 rem ;
}
li {
line-height : 1.5 ;
}
. long-items li + li {
margin-top : .75 rem ;
}
a {
color : var ( -- color - text );
text-decoration-thickness : .2 rem ;
text-decoration-color : var ( -- color - blue );
border-radius : .1 rem ;
outline-offset : .1 rem ;
}
a : visited {
text-decoration-color : var ( -- color - purple );
}
a : hover ,
a : active {
text-decoration-color : var ( -- color - pink );
}
a : focus-visible {
text-decoration : none ;
outline : .15 rem solid var ( -- color - pink );
}
a . ha {
color : var ( -- color - pink );
outline-offset : 0 ;
}
span . ha-placeholder {
opacity : .55 ;
}
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
. visually-hidden : not ( : focus ) : not ( : active ) {
clip : rect ( 0 0 0 0 );
clip-path : inset ( 50 % );
height : 1 px ;
overflow : hidden ;
position : absolute ;
white-space : nowrap ;
width : 1 px ;
}
/* name coloration */
. brand {
color : var ( -- color - pink );
font-weight : bold ;
}
/* provider pronouns */
. pronouns :: after {
content : ")" / "" ;
}
. pronouns :: before {
content : "(pronouns: " / "pronouns: " ;
}
. pronouns {
color : var ( -- color - text );
opacity : .75 ;
font-size : .8 em ;
}
/* location spans */
. location :: before {
content : "📍" / "is based out of " ;
}
. online :: before {
content : "🌐" / "is " ;
}
. location ,
. online {
margin : 0 ;
text-align : right ;
color : var ( -- color - text );
font-size : 1 rem ;
font-weight : bold ;
}
/* Posts list */
. providerlist {
padding : 0 ;
}
. providerlist-item {
display : flex ;
flex-wrap : wrap ;
align-items : baseline ;
margin-bottom : 1 rem ;
}
. providerlist-item + . providerlist-item {
border-top : .1 rem dotted ;
margin-top : 2.25 rem ;
padding-top : 1.5 rem ;
}
. providerlist-link {
font-size : 1.35 rem ; /* 19px /16 */
font-weight : 700 ;
flex-basis : 100 % ;
border-bottom : .05 rem solid var ( -- color - pink );
text-decoration : none ;
color : var ( -- color - blue );
display : inline-flex ;
align-items : baseline ;
column-gap : .5 rem ;
flex-flow : row wrap ;
}
. providerlist-link : visited {
color : var ( -- color - purple );
}
. providerlist-link : hover ,
. providerlist-link : active {
color : var ( -- color - pink );
}
. providerlist-link : focus-visible {
border-bottom-color : var ( -- color - bg );
}
. providerlist-link . location ,
. providerlist-link . online {
flex-grow : 5 ;
}
. providerlist-item-active . providerlist-link {
font-weight : bold ;
}
/* Tags */
. post-tag {
display : inline-block ;
font-style : italic ;
}
/* Tags list */
. taglist {
display : inline-flex ;
flex-wrap : wrap ;
column-gap : .5 rem ;
list-style : none ;
padding : 0 ;
margin : 0 ;
}
/* related providers section on provider pages */
. related-providers {
border-top : .1 rem dotted ;
padding-top : 1 rem ;
margin-top : 4 rem ;
}
/* services page */
. service-list {
display : flex ;
flex-flow : row wrap ;
padding-left : 0 ;
column-gap : 1 rem ;
row-gap : 2 rem ;
margin-top : 3 rem ;
}
. service {
list-style : none ;
}
. service a {
border : .1 rem dotted ;
padding : .5 rem ;
border-radius : .75 rem ;
}
. service a : focus-visible {
border-color : var ( -- color - bg );
}
/* post metadata */
. post-metadata {
display : flex ;
flex-flow : column nowrap ;
align-items : flex-end ;
gap : .5 rem ;
}
. post-time {
font-size : .9 rem ;
opacity : .75 ;
margin : 0 ;
}
@ media ( max-width : 500px ) {
. post-metadata . taglist {
justify-content : flex-end ;
}
}
/* provider contact info */
. contacts {
text-align : center ;
padding : 0 ;
}
. contacts li {
list-style : none ;
}
. contacts li + li {
padding-top : .75 rem ;
}
/* team page specific */
. team-contact {
display : block ;
text-align : center ;
}
header {
border-bottom : .2 rem dotted ;
display : flex ;
gap : 1 rem ;
flex-wrap : wrap ;
justify-content : space-between ;
align-items : center ;
padding : 1 rem ;
}
# skip-link {
text-decoration : none ;
background : var ( -- color - bg );
color : var ( -- color - text );
padding : 0.5 rem 1 rem ;
outline-offset : 0 ;
border-radius : .25 rem ;
}
/* Prevent visually-hidden skip link fom pushing content around when focused */
# skip-link . visually-hidden : focus {
position : absolute ;
top : 1 rem ;
left : 1 rem ;
/* Ensure it is positioned on top of everything else when it is shown */
z-index : 999 ;
}
/* logo and title */
. home-link {
font-weight : 700 ;
border-radius : .25 rem ;
display : flex ;
gap : .5 rem ;
outline-offset : .25 rem ;
text-underline-offset : .2 rem ;
}
. home-link : link : not ( : hover ) {
text-decoration : none ;
}
a [ href ] . home-link : focus-visible {
outline-width : .25 rem ;
}
header img {
height : 3 rem !important ;
width : 3 rem !important ;
border-radius : .5 rem ;
}
header h2 {
margin : 0 ;
outline-offset : .25 rem ;
border : none ;
text-transform : lowercase ;
color : var ( -- color - pink );
}
header a : has ( h2 ) : hover {
text-decoration-color : var ( -- color - text );
}
/* Nav */
. nav {
display : flex ;
gap : .5 rem 1 rem ;
padding : 0 ;
margin : 0 ;
list-style : none ;
}
. nav-item {
display : inline-block ;
}
. nav a [ href ][ aria-current = "page" ] {
text-decoration : underline ;
text-decoration-thickness : .2 rem ;
}
. nav a [ href ][ aria-current = "page" ] : hover {
text-decoration-color : var ( -- color - pink );
}
/* Pagination */
. pagination {
display : flex ;
justify-content : space-between ;
gap : 1 rem ;
border-top : .2 rem dotted ;
margin-top : 2.25 rem ;
padding-top : 2 rem ;
padding-left : 0 ;
}
. pagination li {
list-style : none ;
}
. pagination li : not ( : has ( a )),
. pagination a {
display : block ;
border : .1 rem dotted ;
padding : .5 rem ;
border-radius : .75 rem ;
}
/* Footer */
footer {
border-top : .2 rem dotted ;
margin-top : 1.5 rem ;
padding : 1 rem 0 ;
text-align : center ;
}
. footer-links {
display : flex ;
gap : 1 rem ;
justify-content : space-between ;
}
footer p {
margin : 0 ;
}
footer . year {
width : 30 % ;
padding-top : .5 rem ;
margin : 1 rem auto ;
border-top : .05 rem solid ;
}
@ media ( max-width : 500px ) {
. footer-links {
flex-flow : column ;
gap : .1 rem ;
align-items : center ;
}
footer . year {
width : 65 % ;
}
}</ style >
<!-- JS -->
< script type = "module" > // Thank you to https://github.com/daviddarnes/heading-anchors
// 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 . textContent = content ;
}
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 >
</ head >
< body >
< header >
< a href = "/" class = "home-link" title = "home page" >
2026-09-23 23:31:07 +00:00
< img src = "/img/logo.jpg" alt = "the Spoonfairies logo, showing a spoon with fairy wings" loading = "lazy" decoding = "async" width = "585" height = "585" >
2026-09-23 16:28:48 -07:00
< h2 > Spoonfairies</ h2 >
</ a >
< nav aria-label = "main navigation" >
< ul class = "nav" >
< li class = "nav-item" >< a href = "/providers/" > all providers</ a ></ li >
< li class = "nav-item" >< a href = "/services/" > all services</ a ></ li >
< li class = "nav-item" >< a href = "/get-involved/" > get involved</ a ></ li >
</ ul >
</ nav >
</ header >
< main id = "main" >
< article >
< h1 > Lee C.
< span class = "pronouns" > ze/he</ span >
</ h1 >
< div class = "post-metadata" >
< p class = "post-time" > last updated < time datetime = "2026-02-09" > February 9, 2026</ time ></ p >
< p class = "visually-hidden" > services this provider offers are </ p >
< ul class = "taglist" >
< li >< a href = "/services/providers/" class = "post-tag" title = "browse providers who offer providers" > providers</ a > , </ li >
< li >< a href = "/services/webdev/" class = "post-tag" title = "browse providers who offer webdev" > webdev</ a > , </ li >
< li >< a href = "/services/web-accessibility/" class = "post-tag" title = "browse providers who offer web accessibility" > web accessibility</ a > , </ li >
< li >< a href = "/services/spreadsheets/" class = "post-tag" title = "browse providers who offer spreadsheets" > spreadsheets</ a > , </ li >
< li >< a href = "/services/logos/" class = "post-tag" title = "browse providers who offer logos" > logos</ a > , </ li >
< li >< a href = "/services/clothing/" class = "post-tag" title = "browse providers who offer clothing" > clothing</ a > , </ li >
< li >< a href = "/services/art/" class = "post-tag" title = "browse providers who offer art" > art</ a > , </ li >
< li >< a href = "/services/computers/" class = "post-tag" title = "browse providers who offer computers" > computers</ a > , </ li >
< li >< a href = "/services/software/" class = "post-tag" title = "browse providers who offer software" > software</ a ></ li >
</ ul >
< p class = "online" > digital-only</ p >
</ div >
< h2 id = "bio" > bio</ h2 >
< p > multidisciplinary artist and crafter. reluctant computer toucher. big fan of birds.</ p >
< h2 id = "services" > services</ h2 >
< p > web dev with a focus on accessibility, incl. accessibility reviews for your existing website. spreadsheets galore. basic logos, functional leatherwork, block printed clothing with < a href = "https://leecat.art/tag/print" target = "_blank" > existing designs</ a > or your own design (takes more work and resources, add'l cost).</ p >
< h3 id = "payment" > payment</ h3 >
< p > sliding scale or skill swap</ p >
< h3 id = "time-constraints" > time constraints</ h3 >
< p > *shrug emoji*</ p >
< h2 > contact information</ h2 >
< ul class = "contacts" >
< li >
< a href = "https://signal.me/#eu/PcJ86iNQeAbC-SFbxqI00gFQb6zL4Y6QDCsFDU2mokM4K40djsdNYa3hJAee79ll" target = "_blank" > inherentlee.13 on signal</ a >
</ li >
< li >
< a href = "mailto:lee.cattarin@gmail.com?subject=Spoonfairies" target = "_blank" > lee.cattarin [at] gmail [dot] com</ a >
</ li >
< li >
< a href = "https://leecat.art/contact" target = "_blank" > leecat.art/contact</ a >
</ li >
</ ul >
</ article >
< section class = "related-providers" >
</ section >
</ main >
< footer >
< div class = "footer-links" >
< p >< a href = "/attribution" title = "site attribution" > attribution</ a ></ p >
< p >< a href = "/team" title = "meet or contact the Spoonfairies team" > team</ a ></ p >
< p >< a href = "/privacy" title = "data privacy" > privacy</ a ></ p >
< p >< a href = "/accessibility" title = "accessibility statements" > accessibility</ a ></ p >
< p >< a href = "https://heckin.technology/inherentlee/spoonfairies" target = "_blank" title = "source code" > source</ a ></ p >
</ div >
< p class = "year" >< a href = "/" title = "home page" > Spoonfairies 2026</ a ></ p >
</ footer >
2026-09-23 23:31:07 +00:00
<!-- This page `/providers/lee-c/` was built on 2026-09-23T23:30:57.324Z -->
2026-09-23 16:28:48 -07:00
</ body >
</ html >
