Files
spoonfairies-site/get-involved/index.html
T

813 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>get involved | 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="get involved | Spoonfairies">
<meta property="og:type" content="article">
<meta property="og:url" content="https://spoonfairies.help/get-involved/">
<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: 40rem;
line-height: 1.5; /* 4. Increase line-height */
-webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
}
main {
padding: 1rem;
}
section + section {
margin-top: 4rem;;
}
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: 2rem;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance; /* 9. Improve line wrapping */
}
h1 {
font-size: 2.5rem;
margin-top: 0;
}
h2 {
font-size: 1.9rem;
padding-bottom: .1rem;
border-bottom: .1rem solid var(--color-pink);
}
h3 {
font-size: 1.5rem;
padding-bottom: .05rem;
border-bottom: .05rem solid var(--color-pink);
}
h4 {
font-size: 1.2rem;
}
li {
line-height: 1.5;
}
.long-items li + li {
margin-top: .75rem;
}
a {
color: var(--color-text);
text-decoration-thickness: .2rem;
text-decoration-color: var(--color-blue);
border-radius: .1rem;
outline-offset: .1rem;
}
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: .15rem 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: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* 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: .8em;
}
/* 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: 1rem;
font-weight: bold;
}
/* Posts list */
.providerlist {
padding: 0;
}
.providerlist-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 1rem;
}
.providerlist-item + .providerlist-item {
border-top: .1rem dotted;
margin-top: 2.25rem;
padding-top: 1.5rem;
}
.providerlist-link {
font-size: 1.35rem; /* 19px /16 */
font-weight: 700;
flex-basis: 100%;
border-bottom: .05rem solid var(--color-pink);
text-decoration: none;
color: var(--color-blue);
display: inline-flex;
align-items: baseline;
column-gap: .5rem;
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: .5rem;
list-style: none;
padding: 0;
margin: 0;
}
/* related providers section on provider pages */
.related-providers {
border-top: .1rem dotted;
padding-top: 1rem;
margin-top: 4rem;
}
/* services page */
.service-list {
display: flex;
flex-flow: row wrap;
padding-left: 0;
column-gap: 1rem;
row-gap: 2rem;
margin-top: 3rem;
}
.service {
list-style: none;
}
.service a {
border: .1rem dotted;
padding: .5rem;
border-radius: .75rem;
}
.service a:focus-visible {
border-color: var(--color-bg);
}
/* post metadata */
.post-metadata {
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
gap: .5rem;
}
.post-time {
font-size: .9rem;
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: .75rem;
}
/* team page specific */
.team-contact {
display: block;
text-align: center;
}
header {
border-bottom: .2rem dotted;
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
#skip-link {
text-decoration: none;
background: var(--color-bg);
color: var(--color-text);
padding: 0.5rem 1rem;
outline-offset: 0;
border-radius: .25rem;
}
/* Prevent visually-hidden skip link fom pushing content around when focused */
#skip-link.visually-hidden:focus {
position: absolute;
top: 1rem;
left: 1rem;
/* 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: .25rem;
display: flex;
gap: .5rem;
outline-offset: .25rem;
text-underline-offset: .2rem;
}
.home-link:link:not(:hover) {
text-decoration: none;
}
a[href].home-link:focus-visible {
outline-width: .25rem;
}
header img {
height: 3rem !important;
width: 3rem !important;
border-radius: .5rem;
}
header h2 {
margin: 0;
outline-offset: .25rem;
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: .5rem 1rem;
padding: 0;
margin: 0;
list-style: none;
}
.nav-item {
display: inline-block;
}
.nav a[href][aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: .2rem;
}
.nav a[href][aria-current="page"]:hover {
text-decoration-color: var(--color-pink);
}
/* Pagination */
.pagination {
display: flex;
justify-content: space-between;
gap: 1rem;
border-top: .2rem dotted;
margin-top: 2.25rem;
padding-top: 2rem;
padding-left: 0;
}
.pagination li {
list-style: none;
}
.pagination li:not(:has(a)),
.pagination a {
display: block;
border: .1rem dotted;
padding: .5rem;
border-radius: .75rem;
}
/* Footer */
footer {
border-top: .2rem dotted;
margin-top: 1.5rem;
padding: 1rem 0;
text-align: center;
}
.footer-links {
display: flex;
gap: 1rem;
justify-content: space-between;
}
footer p {
margin: 0;
}
footer .year {
width: 30%;
padding-top: .5rem;
margin: 1rem auto;
border-top: .05rem solid;
}
@media (max-width: 500px) {
.footer-links {
flex-flow: column;
gap: .1rem;
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">
<img src="/img/logo.jpg" alt="the Spoonfairies logo, showing a spoon with fairy wings" loading="lazy" decoding="async" width="585" height="585">
<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/" aria-current="page">get involved</a></li>
</ul>
</nav>
</header>
<main id="main">
<h1>get involved with <span class="brand">Spoonfairies</span></h1>
<section>
<h2 id="location">location</h2>
<p><span class="brand">Spoonfairies</span> is currently focused on Seattle and the Puget Sound, though we can accept digital-only providers from all over. If you're outside of this region and would like to offer physical services, please <a href="/team#core">talk to someone on the core team</a> about extending <span class="brand">Spoonfairies</span>' reach.</p>
</section>
<section>
<h2 id="our-values">our values</h2>
<p>We ask that all providers and clients uphold our core values as part of their participation.</p>
<ul class="long-items">
<li>
<strong>Community:</strong> we aim to create, nurture, and sustain a
community of providers actively seeking to promote collective wellness,
healing, and support for marginalized people.
</li>
<li>
<strong>Adaptability:</strong> we embrace change and challenges with
enthusiasm and creativity. Our core purpose is to cater our model to meet
the needs of those in our community, ever growing and furthering the goals
of social equitability, justice, and wellness. This means our model and all
outreach should be accessible across all identities & needs.
</li>
<li>
<strong>Love:</strong> we approach all interactions wholeheartedly, with
the primary purpose of extending love and kindness into our community.
</li>
<li>
<strong>Health:</strong> we disrupt the cycle of capitalist exploitation
by honoring the health and wellness of our providers and members; we honor
our own health needs and actively encourage our community to prioritize
their well-being over capitalist interest by facilitating livable wages,
communal support, and collective healing.
</li>
<li>
<strong>Dignity:</strong> we create systems and processes that allow for
providers to fully experience the diverse complexities of everyday life.
We believe that every person deserves to have livable wages and sustainable
work/life balance, and we celebrate our providers' "no".
</li>
</ul>
</section>
<section>
<h2 id="as-a-provider">as a provider</h2>
<p>Sign up using <a href="https://airtable.com/appTNSejknPJEEdrN/pagzaSgmO9bnFVgTt/form" target="_blank" rel="external">our sign-up form</a> — or <a href="mailto:tech@spoonfairies.help?subject=Spoonfairies signup"> email Lee</a> if Airtable (our form provider) is inaccessible to you.</p>
</section>
<section>
<h2 id="as-a-client">as a client</h2>
<p>View the <a href="/providers">provider directory</a> or <a href="/services">browse by service</a> to find relevant providers.</p>
<p>If a given provider does not have a contact method that works for you, reach out to <a href="/team">someone on the team</a> and we'll get in contact with them for you.</p>
<p>Overwhelmed by choices? <a href="mailto:info@spoonfairies.help?subject=Spoonfairies service and provider discovery">Email Bex</a> if you need help navigating providers and services.</p>
</section>
<section>
<h2 id="testimonials">testimonials</h2>
<p>Clients and providers are strongly encouraged to submit testimonials about their experiences with a given provider or with the Spoonfairies program as a whole.</p>
<p>You can submit a testimonial using our <a href="https://airtable.com/appTNSejknPJEEdrN/pagBkMSqVTVXDCkAa/form" target="_blank" rel="external">testimonial form</a> — or <a href="mailto:tech@spoonfairies.help?subject=Spoonfairies testimonials">email Lee</a> if Airtable (our form provider) is inaccessible to you.</p>
</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 statement">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">&copy; Spoonfairies 2026</a></p>
</footer>
<!-- This page `/get-involved/` was built on 2026-09-24T16:26:13.169Z -->
</body>
</html>