2026-09-17 19:45:05 -07:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > card three' s travels | siblinghood of the traveling greeting card</ title >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta charset = "utf-8" >
<!-- Meta -->
< link rel = "canonical" href = "/" >
< meta name = "description" content = "help a greeting card travel the world" >
< meta name = "robots" content = "index,follow" >
< meta property = "og:title" content = "card three's travels | siblinghood of the traveling greeting card" >
< meta property = "og:type" content = "article" >
< meta property = "og:url" content = "https://siblinghood.quest/card-three/" >
< meta property = "og:description" content = "help a greeting card travel the world" >
< link rel = "icon" type = "image/x-icon" href = "/favicon.ico" >
< meta property = "og:image" content = "https://siblinghood.quest/img/logo-light.png" >
< meta property = "og:image:alt" content = "blue and gold icon showing a greeting card 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+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" >
<!-- CSS -->
< style >: 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 ));
}
/* 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 */
}
* : not ( dialog ) {
margin : 0 ; /* 2. Remove default margin */
padding : 0 ;
}
@ media ( prefers-reduced-motion : no-preference ) {
html {
interpolate-size : allow-keywords ; /* 3. Enable keyword animations */
}
}
# root , # __next {
isolation : isolate ; /* 10. Create a root stacking context */
}
body {
line-height : 1.5 ; /* 4. Increase line-height */
-webkit- font-smoothing : antialiased ; /* 5. Improve text rendering */
color : var ( -- color - text );
background-color : var ( -- color - bg );
font-family : "Atkinson Hyperlegible Next" ;
}
main {
width : 55 % ;
margin : 0 auto 2 rem ;
scroll-margin-top : 1.5 rem ;
min-height : 50 vh ;
padding-bottom : 2 rem ;
max-width : 1200 px ;
}
@ media ( max-width : 650px ) {
main {
width : 92 % ;
}
}
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 */
margin : 0 auto 1.5 rem ;
line-height : 1.5 rem ;
}
@ media ( max-width : 650px ) {
p {
2026-09-18 03:02:08 +00:00
font-size : .95 rem ;
2026-09-17 19:45:05 -07:00
line-height : 1.3 rem ;
}
}
h1 , h2 , h3 , h4 , h5 , h6 {
text-wrap : balance ; /* 9. Improve line wrapping */
}
h1 {
margin : 3 rem auto 1 rem ;
text-align : center ;
font-size : 2.2 rem ;
}
h2 , h3 {
margin : 3 rem auto .5 rem ;
color : var ( -- color - accent );
border-bottom : solid ;
}
h2 {
font-size : 1.8 rem ;
}
h3 {
font-size : 1.35 rem ;
text-align : right ;
}
@ media ( max-width : 650px ) {
h1 {
font-size : 1.8 rem ;
}
h2 {
font-size : 1.5 rem ;
}
h3 {
font-size : 1.2 rem ;
}
}
a {
color : var ( -- color - text );
text-decoration : underline ;
text-decoration-style : solid ;
text-decoration-thickness : .2 rem ;
text-decoration-color : var ( -- color - accent );
transition : text - decoration-thickness .5 s ;
padding : 0 .15 rem ;
border-radius : .15 rem ;
}
@ media ( any-hover : hover ) {
a : hover {
text-decoration-thickness : .4 rem ;
}
}
a : focus-visible {
text-decoration : none ;
outline : var ( -- color - accent ) solid .15 rem ;
}
ul {
margin : 0 auto 1.5 rem 2 rem ;
line-height : 1.5 rem ;
}
@ media ( max-width : 650px ) {
ul {
2026-09-18 03:02:08 +00:00
font-size : .95 rem ;
2026-09-17 19:45:05 -07:00
line-height : 1.3 rem ;
}
}
time {
font-weight : 700 ;
}
button {
cursor : pointer ;
background-color : var ( -- color - bg );
}
header img {
max-height : 25 vh ;
max-width : 100 % ;
width : auto ;
margin : 0 auto ;
}
@ media ( max-width : 650px ) {
header img {
max-height : 20 vh ;
}
}
@ media ( prefers-color-scheme : light ) {
# logo-dark {
display : none ;
}
}
@ media ( prefers-color-scheme : dark ) {
# logo-light {
display : none ;
}
}
# author {
text-align : right ;
margin-bottom : 3 rem ;
font-style : italic ;
}
nav {
display : flex ;
position : relative ;
gap : 1 rem ;
justify-content : center ;
margin : 1 rem auto ;
}
nav a ,
nav button {
font-size : 1.4 rem ;
border : .1 rem solid ;
border-radius : .15 rem ;
padding : .15 rem .3 rem ;
color : var ( -- color - accent );
text-decoration : none ;
line-height : 2 rem ;
outline-offset : .1 rem ;
}
@ media ( max-width : 650px ) {
nav a ,
nav button {
font-size : 1.1 rem ;
}
}
@ media ( any-hover : hover ) {
nav a : hover ,
nav button : hover {
color : var ( -- color - bg );
background-color : var ( -- color - accent );
border-color : var ( -- color - accent );
}
}
nav a : focus-visible ,
nav button : focus-visible {
outline : .1 rem solid var ( -- color - accent );
}
# skip {
left : -999 px ;
position : absolute ;
top : auto ;
width : 1 px ;
height : 1 px ;
overflow : hidden ;
z-index : -99 ;
background-color : var ( -- color - bg );
}
# skip : focus-visible {
left : 1 rem ;
width : auto ;
height : auto ;
overflow : auto ;
z-index : 999 ;
}
@ media ( any-hover : hover ) {
# skip : hover {
color : var ( -- color - bg );
background-color : var ( -- color - accent );
}
}
a [ aria-current = "page" ] {
border-right-width : .5 rem ;
border-left-width : .5 rem ;
}
nav ul {
list-style : none ;
display : none ;
position : absolute ;
z-index : 1 ;
margin : 0 0 0 1 rem ;
min-width : 10 rem ;
}
# dropdown {
position : relative ;
display : inline-block ;
min-width : 3 rem ;
}
nav ul . show {
display : block ;
}
nav ul li {
margin : .5 rem ;
}
nav ul a {
display : inline-block ;
background-color : var ( -- color - bg );
}
footer {
color : var ( -- color - bg );
background-color : var ( -- color - text );
padding : 1 rem ;
}
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 );
}
. card {
color : var ( -- color - accent );
}
p . card {
text-transform : uppercase ;
font-weight : 700 ;
}
ol + p {
margin-top : 1.5 rem ;
}
. stop {
color : var ( -- color - accent );
position : relative ;
list-style : none ;
padding-left : 1.5 rem ;
}
. stop : not ( : last-child ) {
padding-bottom : 2 rem ;
}
. stop : before {
background-color : var ( -- color - accent );
width : .1 rem ;
content : '' ;
position : absolute ;
top : 0 ;
bottom : 0 ;
left : 0 ;
}
svg {
margin-left : -2.2 rem ;
width : 2 rem ;
fill : var ( -- color - accent );
float : left ;
padding : .4 rem .5 rem 0 0 ;
}
@ media ( max-width : 650px ) {
svg {
padding-top : .2 rem ;
}
}
. stop h2 {
margin : 0 ;
}
. stop img {
width : 100 % ;
}
. stop p {
margin : 0 ;
color : var ( -- color - text );
padding-top : .5 rem ;
}
. stop . spacer {
height : 1 rem ;
}</ style >
<!-- JS -->
< script type = "module" > const dropdown = document . getElementById ( "dropdown" );
const dropdownButton = document . getElementById ( "drop-button" );
const dropdownContent = document . getElementById ( "drop-content" );
const dropdownItems = dropdownContent . querySelectorAll ( "a" );
const firstDropdownItem = dropdownItems [ 0 ];
const lastDropdownItem = dropdownItems [ dropdownItems . length - 1 ];
const openDropdown = function () {
dropdownContent . classList . add ( "show" );
dropdownContent . ariaHidden = "false" ;
dropdownButton . ariaExpanded = "true" ;
}
const closeDropdown = function () {
if ( dropdownButton . ariaExpanded === "true" ) {
dropdownContent . classList . remove ( "show" );
dropdownContent . ariaHidden = "true" ;
dropdownButton . ariaExpanded = "false" ;
}
}
dropdownButton . addEventListener ( "click" , ( event ) => {
if ( dropdownButton . ariaExpanded === "false" ) openDropdown ();
else closeDropdown ();
});
dropdownButton . addEventListener ( "keydown" , ( event ) => {
if ( event . key === "Enter" || event . key === " " ) { // Space or Enter key
event . preventDefault (); // Prevent the default action to stop scrolling when pressing Space
if ( dropdownButton . ariaExpanded === "false" ) {
openDropdown ();
} else {
closeDropdown ();
}
} else if ( event . key === "Tab" && event . shiftKey ) closeDropdown ();
});
firstDropdownItem . addEventListener ( "keydown" , ( event ) => {
if ( event . key === "Tab" && event . shiftKey ) closeDropdown ();
});
lastDropdownItem . addEventListener ( "keydown" , ( event ) => {
if ( event . key === "Tab" && ! event . shiftKey ) closeDropdown ();
});
document . addEventListener ( "keydown" , ( event ) => {
if ( event . key === "Escape" && dropdownButton . ariaExpanded === "true" ) {
closeDropdown ();
dropdownButton . focus ();
}
});
window . addEventListener ( "click" , ( event ) => {
if ( ! event . target . matches ( "#drop-button" )) closeDropdown ();
});</ script >
</ head >
< body >
< header >
< nav >
< a id = "skip" href = "#main" > skip to main</ a >
< a href = "/" > home</ a >
< div id = "dropdown" >
< button id = "drop-button" aria-label = "card submenu" aria-expanded = "false" type = "button" aria-controls = "drop-content" > cards ⮷</ button >
< ul id = "drop-content" aria-hidden = "true" >
< li >
< a href = "/card-one/" >
card one
</ a >
</ li >
< li >
2026-09-18 02:48:35 +00:00
< a href = "/card-three/" aria-current = "page" >
card three
2026-09-17 19:45:05 -07:00
</ a >
</ li >
< li >
2026-09-18 02:48:35 +00:00
< a href = "/card-two/" >
card two
2026-09-17 19:45:05 -07:00
</ a >
</ li >
</ ul >
</ div >
</ nav >
< img id = "logo-light" src = "/img/logo-light.png" alt = "blue and gold icon showing a greeting card with wings" loading = "lazy" decoding = "async" width = "1754" height = "1031" >
< img id = "logo-dark" src = "/img/logo-dark.png" alt = "blue and gold icon showing a greeting card with wings" loading = "lazy" decoding = "async" width = "1754" height = "1031" >
</ header >
< main id = "main" >
< h1 > The Travels of < span class = "card" > Card Three</ span ></ h1 >
2026-09-18 03:02:08 +00:00
< p >< span class = "card" > Card three</ span > has 16 total recipients. Its journey began in
< time datetime = "2026-07-20" > late July, 2026</ time > .</ p >
2026-09-17 19:45:05 -07:00
< ol >
< li class = "stop" >
< svg aria-hidden = "true" viewBox = "0 0 32 32" focusable = "false" >
< circle stroke = "none" cx = "16" cy = "16" r = "10" ></ circle >
</ svg >
< h2 > Lousiana, USA</ h2 >
< div class = "spacer" ></ div >
</ li >
</ ol >
</ main >
< footer >
< p > brought to you in 2026 by
< a href = "https://leecat.art" target = "_blank" > lee</ a >
</ p >
< p >< a href = "/attribution" > attribution</ a ></ p >
</ footer >
2026-09-18 03:02:08 +00:00
<!-- This page `/card-three/` was built on 2026-09-18T03:02:04.677Z -->
2026-09-17 19:45:05 -07:00
</ body >
</ html >
