commit c6160524da1544c80d7855c8bfb61255c4574ef2 Author: Lee Cattarin Date: Sat Dec 27 09:42:06 2025 -0800 first diff --git a/card-one/index.html b/card-one/index.html new file mode 100644 index 0000000..72fe183 --- /dev/null +++ b/card-one/index.html @@ -0,0 +1,61 @@ + + + + card one's travels | siblinghood of the traveling greeting card + + + + + + + + + + + + + + + + + + +
+ + + blue and gold icon showing a greeting card with wings + blue and gold icon showing a greeting card with wings +
+
+

The Travels of Card One

+ +

Card one has 16 total recipients.

+ +
    +
  1. + +

    location

    + filler photo for testing +
    2. + +
  2. + +

    location

    +

    Some sample text

    +
    3. + +
  3. + +

    location

    + filler photo for testing +

    Some sample text again, this time wrapping to a second line, yeah, let's make it do that.

    +
    4. +
+
+ + diff --git a/card-two/index.html b/card-two/index.html new file mode 100644 index 0000000..74f67cf --- /dev/null +++ b/card-two/index.html @@ -0,0 +1,41 @@ + + + + card two's travels | siblinghood of the traveling greeting card + + + + + + + + + + + + + + + + + + +
+ + + blue and gold icon showing a greeting card with wings + blue and gold icon showing a greeting card with wings +
+
+

The Travels of Card Two

+ +

Card two has 16 total recipients.

+ +
+ + diff --git a/css/cards.css b/css/cards.css new file mode 100644 index 0000000..cb68a21 --- /dev/null +++ b/css/cards.css @@ -0,0 +1,57 @@ +.card { + color: var(--color-accent); +} + +p .card { + text-transform: uppercase; + font-weight: 700; +} + +.stop { + color: var(--color-accent); + position: relative; + list-style: none; + padding-left: 1.5rem; +} + +.stop:not(:last-child) { + padding-bottom: 2rem; +} + +.stop:before { + background-color: var(--color-accent); + width: .1rem; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; +} + +svg { + margin-left: -2.2rem; + width: 2rem; + fill: var(--color-accent); + float: left; + padding: .4rem .5rem 0 0; +} + +@media (max-width: 650px) { + svg { + padding-top: .2rem; + } +} + +.stop h2 { + margin: 0; +} + +.stop img { + width: 100%; +} + +.stop p { + margin: 0; + color: var(--color-text); + padding-top: .5rem; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..07928a5 --- /dev/null +++ b/css/main.css @@ -0,0 +1,211 @@ +:root { + color-scheme: light dark; + + --color-blue-light: #c8e5f5; + --color-gold-light: #ecd399; + --color-blue-dark: #02293e; + --color-gold-dark: #715511; + + --color-bg: light-dark(var(--color-blue-light), var(--color-blue-dark)); + --color-text: light-dark(var(--color-blue-dark), var(--color-blue-light)); + --color-accent: light-dark(var(--color-gold-dark), var(--color-gold-light)); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + color: var(--color-text); + background-color: var(--color-bg); + font-family: sans-serif; +} + +main { + width: 65%; + margin: 0 auto 2rem; +} + +@media (max-width: 650px) { + main { + width: 92%; + } +} + +img { + display: block; +} + +h1 { + margin: 3rem auto 1rem; + text-align: center; + font-size: 2.2rem; +} + +h2, h3 { + margin: 3rem auto .5rem; + color: var(--color-accent); + border-bottom: solid; +} + +h2 { + font-size: 1.8rem; +} + +h3 { + font-size: 1.35rem; + text-align: right; +} + +@media (max-width: 650px) { + h1 { + font-size: 1.8rem; + } + + h2 { + font-size: 1.5rem; + } + + h3 { + font-size: 1.2rem; + } +} + +p { + margin: 0 auto 1.5rem; + line-height: 1.5rem; +} + +@media (max-width: 650px) { + p { + font-size: .9rem; + line-height: 1.3rem; + } +} + +a { + color: var(--color-text); + text-decoration: underline; + text-decoration-style: solid; + text-decoration-thickness: .2rem; + text-decoration-color: var(--color-accent); + transition: text-decoration-thickness .5s; + padding: 0 .15rem; +} + +@media (any-hover: hover) { + a:hover { + text-decoration-thickness: .4rem; + } +} + +a:focus-visible { + text-decoration: none; + outline: var(--color-accent) solid .15rem; + border-radius: .15rem; +} + +ul { + margin: 0 auto 1.5rem 2rem; + line-height: 1.5rem; +} + +@media (max-width: 650px) { + ul { + font-size: .9rem; + line-height: 1.3rem; + } +} + +time { + font-weight: 700; +} + +nav ul { + display: flex; + gap: 1rem; + list-style: none; + justify-content: center; + margin: 1rem auto; +} + +nav a { + font-size: 1.4rem; + border: 1px solid; + border-radius: .15rem; + padding: .15rem .3rem; + color: var(--color-accent); + text-decoration: none; +} + +@media (max-width: 650px) { + nav a { + font-size: 1.2rem; + } +} + +@media (any-hover: hover) { + nav a:hover { + color: var(--color-bg); + background-color: var(--color-accent); + } +} + +nav a:focus-visible { + outline: none; + border-radius: 0; + color: var(--color-bg); + background-color: var(--color-accent); +} + +header img { + max-height: 25vh; + max-width: 100%; + margin: 0 auto; +} + +@media (max-width: 650px) { + header img { + max-height: 20vh; + } +} + +@media (prefers-color-scheme: light) { + #logo-dark { + display: none; + } +} + +@media (prefers-color-scheme: dark) { + #logo-light { + display: none; + } +} + +#author { + text-align: right; + margin-bottom: 3rem; + font-style: italic; +} + +footer { + color: var(--color-bg); + background-color: var(--color-text); + padding: 1rem; +} + +footer p { + text-align: center; + margin: 0; +} + +footer a { + color: var(--color-bg); + text-decoration-color: var(--color-bg); +} + +footer a:focus-visible { + outline-color: var(--color-bg); +} diff --git a/favicon.ico b/favicon.ico new file mode 100755 index 0000000..463f37e Binary files /dev/null and b/favicon.ico differ diff --git a/img/filler0.jpg b/img/filler0.jpg new file mode 100755 index 0000000..c2d9563 Binary files /dev/null and b/img/filler0.jpg differ diff --git a/img/filler1.jpg b/img/filler1.jpg new file mode 100755 index 0000000..bd43bcd Binary files /dev/null and b/img/filler1.jpg differ diff --git a/img/logo-dark.png b/img/logo-dark.png new file mode 100755 index 0000000..fcedef1 Binary files /dev/null and b/img/logo-dark.png differ diff --git a/img/logo-light.png b/img/logo-light.png new file mode 100755 index 0000000..cb29646 Binary files /dev/null and b/img/logo-light.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0e968ba --- /dev/null +++ b/index.html @@ -0,0 +1,110 @@ + + + + Siblinghood of the Traveling Greeting Card + + + + + + + + + + + + + + + + + +
+ + + blue and gold icon showing a greeting card with wings + blue and gold icon showing a greeting card with wings +
+ +
+

Siblinghood of the Traveling Greeting Card

+ +

a community-building project by lee.

+ +

welcome to the siblinghood of the traveling greeting card.

+ +

originated on the fediverse with an idea from noctiluca@scholar.social.

+ +

objective

+

send a greeting card around the world. maybe more than one. we'll see.

+ +

outline

+

from a group of participants, a random list will be formed. every person is given the address of the next person in the list (the last person receives the first person's address). first person picks a greeting card, signs it, and sends it to their designated recipient; that person receives, signs, sends on, etc.

+

this continues on to the last person, who finally signs and sends back to the first, closing the loop and ending the adventure. the first person gets to keep the card they originally sent out.

+

if we want to, this can be easily re-run - add folks who want to be added, drop folks who want to be dropped, scramble the list, and start again.

+ +

timeline

+

applications for round one closed on . You may still put in for future rounds, but be aware future rounds are not confirmed yet and will not be confirmed for at least 6 months.

+

assignments (recipient address, order in loop) have been sent out as of .

+ +

participants

+

any number, but in the case of signups reaching 26 or greater people, the cohort will be split. Why 26? I'd like this to not run significantly longer than a year, and I'm very loosely estimating that each person will add 2 weeks to the timeline.

+

for the round beginning , we have 32 participants and will have two cards in circulation.

+ +

on randomization

+

I will edit the list as needed to accommodate any mailing restrictions. I will also re-roll if I am placed first on the list.

+ +

card guidelines

+

4x6 inches/10x15 centimeters minimum size recommended so there is space for everyone to sign. Must not require an unusual envelope e.g. square or similar.

+ +

address privacy

+

the only people who will see your address are:

+ + +

what I'll need from participants

+ +

signing the card

+

sign in any way you find meaningful. Please don't hog the card space - remember that as many as ~2 dozen people will be signing it!

+

IMPORTANT! Only put a name, nickname, doodle, fedi handle, etc. on the card that you are comfortable having displayed publicly. In any posts that I make, it will not be directly connected to you. However, as there are only 16 signers per card, please be aware that how you sign could be tied back to your fedi account.

+ +

mailing the card

+

this will require a fresh envelope and stamp(s) as needed for postage.

+ +

status checks

+

this is, at the end of the day, pretty flexible, but what I would really, really like is:

+ +

feel free to post your card pictures using the hashtags #siblinghoodOfTheTravelingGreetingCard or #sottgc.

+ +

what I'll send participants

+

guidelines

+

summary/highlights of these guidelines will be repeated over email. Full guidelines will always be available here.

+ +

recipient and loop order assignment

+

each participant will be sent the name and address of the next person in the loop. They will also be sent their place in the loop, numbered from 0.

+ +

reminders

+

I'll be doing my level best to track the card's movement, so as it is sent around (assuming I get check-ins from y'all! please help me out here!) I will send out reminders to folks to either check their mail or make sure the card gets sent out again. Some folks have specifically asked for this support and I don't want to let them down, so more communication is always better.

+ +

I want in!

+

as stated above, signups for the round beginning are closed. However, you may still sign up in case of future rounds.

+

sign up for the siblinghood of the traveling greeting card.

+

if airtable is in any way inaccessible to you, please reach out directly to lee.

+
+ + + +