846 lines
21 KiB
HTML
846 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
|
||
|
||
<title>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="Spoonfairies">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:url" content="https://spoonfairies.help/">
|
||
<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/">get involved</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
|
||
<main id="main">
|
||
<section>
|
||
<h1>about <span class="brand">Spoonfairies</span></h1>
|
||
<p><span class="brand">Spoonfairies</span> is a project to connect people: those who need help and those who can provide it, with the ability to move fluidly between these groups or occupy both.</p>
|
||
<p><span class="brand">Spoonfairies</span> is currently focused on Seattle and the Puget Sound region, but digital-only participation can come from all over.</p>
|
||
</section>
|
||
<section>
|
||
<h2 id="ethos">ethos</h2>
|
||
<h3 id="universal-worth">universal worth</h3>
|
||
<p>Everyone needs and deserves help, and everyone has skills that can better their community. Everyone deserves access to the support and income they need to live their best life.</p>
|
||
<h3 id="person-centered-pricing">person-centered pricing</h3>
|
||
<p>We are all of equal value and deserve living wages for expending our time and energy. No service is inherently worth any more than another because no person or their time is worth more than another’s.</p>
|
||
<h3 id="alternatives-to-capitalism">alternatives to capitalism</h3>
|
||
<p>We must build our own support system to build and keep wealth within our communities and provide the services and infrastructures we need to survive.</p>
|
||
</section>
|
||
<section>
|
||
<h2 id="spoonfairies-can-look-like..."><span class="brand">Spoonfairies</span> can look like...</h2>
|
||
<h3 id="client">client</h3>
|
||
<ul>
|
||
<li>J has a sister with long COVID who needs help with some household tasks. He wants to gift her 5 hrs of cleaning services, so he sets her up with a <span class="brand">Spoonfairies</span> provider he's already arranged payment with</li>
|
||
<li>M is a busy parent who can forget to take care of herself. She signs up for a weekly check-in service to ensure her own goals move forward</li>
|
||
<li>X is a tech worker who hates going to the grocery store. Ze finds a provider to help with weekly grocery delivery and a monthly Costco run</li>
|
||
</ul>
|
||
<h3 id="provider">provider</h3>
|
||
<ul>
|
||
<li>L is a stay at home parent with ADHD who loves to cook and provides weekly meal prep & delivery for 25 neurodivergent queerdos in her area at good hourly wage</li>
|
||
<li>Q, a car mechanic, owns a queer/neurodivergent friendly business. She offers 10 hrs of services per month to <span class="brand">Spoonfairies</span> clients at friends-and-family rates</li>
|
||
<li>D has a part-time job bookkeeping for a larger firm. In their free time, they use their skills to provide monthly accounting services to a handful of clients’ small businesses in exchange for business discounts</li>
|
||
</ul>
|
||
<h3 id="or-both">or both</h3>
|
||
<ul>
|
||
<li>Z, an agoraphobic autistic with OCD who is excellent at organization and graphic design, provides admin design services and receives grocery/med delivery and occasional cleaning help.</li>
|
||
<li>C is on disability and navigating income/wealth cap. Xe runs virtual body doubling services and barters some of xe's work for other services.</li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h2 id="example-services">example services</h2>
|
||
<h3 id="executive-function">executive function</h3>
|
||
<h4 id="recurring">recurring</h4>
|
||
<ul>
|
||
<li>Weekly check-ins – "Life Boss"</li>
|
||
<li>Life coach – neurodivergent strategies & resources</li>
|
||
</ul>
|
||
<h4 id="on-demand">on demand</h4>
|
||
<ul>
|
||
<li>Body doubling/errand hangs</li>
|
||
<li>Custom organizers/graphics for household/personal routines</li>
|
||
<li>Neurodivergent advocate/educator (landlords, bosses, families/partners)</li>
|
||
</ul>
|
||
<h3 id="physical-%26-mental-health">physical & mental health</h3>
|
||
<h4 id="recurring-1">recurring</h4>
|
||
<ul>
|
||
<li>Prescription pick-up/renewal reminders</li>
|
||
<li>Transportation to/from appointments</li>
|
||
<li>Medical advocacy at appointments</li>
|
||
<li>Peer counseling</li>
|
||
</ul>
|
||
<h4 id="on-demand-1">on demand</h4>
|
||
<ul>
|
||
<li>Provider research</li>
|
||
<li>Appointment scheduling</li>
|
||
<li>Benefits navigation</li>
|
||
</ul>
|
||
<h3 id="home-and-personal-spaces">home and personal spaces</h3>
|
||
<h4 id="recurring-2">recurring</h4>
|
||
<ul>
|
||
<li>Recurring cleaning/chore help</li>
|
||
<li>Recurring grocery delivery/meal plan/prep</li>
|
||
<li>Recurring appliance/vehicle maintenance</li>
|
||
</ul>
|
||
<h4 id="on-demand-2">on demand</h4>
|
||
<ul>
|
||
<li>Organization/room design</li>
|
||
<li>De-funk your space</li>
|
||
</ul>
|
||
<h3 id="administrative">administrative</h3>
|
||
<h4 id="recurring-3">recurring</h4>
|
||
<ul>
|
||
<li>Email/calendar management</li>
|
||
<li>Scheduling support</li>
|
||
<li>Budget tracking/personal finance support</li>
|
||
</ul>
|
||
<h4 id="on-demand-3">on demand</h4>
|
||
<ul>
|
||
<li>Event planning</li>
|
||
<li>Job search support</li>
|
||
<li>Travel booking/vacation planning</li>
|
||
</ul>
|
||
</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">© Spoonfairies 2026</a></p>
|
||
</footer>
|
||
|
||
<!-- This page `/` was built on 2026-09-24T16:31:45.116Z -->
|
||
</body>
|
||
</html>
|
