editorconfig and spaces -> tabs
This commit is contained in:
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = tab
|
||||||
|
indent_size = 2
|
||||||
@ -1,50 +1,50 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>card one's travels | siblinghood of the traveling greeting card</title>
|
<title>card one's travels | siblinghood of the traveling greeting card</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<!-- Meta -->
|
<!-- Meta -->
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||||
<link rel="canonical" href="/card-one" />
|
<link rel="canonical" href="/card-one" />
|
||||||
<meta name="description" content="card one's travels | siblinghood of the traveling greeting card" />
|
<meta name="description" content="card one's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta name="robots" content="index,follow" />
|
<meta name="robots" content="index,follow" />
|
||||||
<meta property="og:title" content="card one's travels | siblinghood of the traveling greeting card" />
|
<meta property="og:title" content="card one's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta property="og:type" content="article" />
|
<meta property="og:type" content="article" />
|
||||||
<meta property="og:url" content="/card-one" />
|
<meta property="og:url" content="/card-one" />
|
||||||
<meta property="og:description" content="card one's travels | siblinghood of the traveling greeting card" />
|
<meta property="og:description" content="card one's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta property="og:image" content="/img/logo-light.png" />
|
<meta property="og:image" content="/img/logo-light.png" />
|
||||||
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
||||||
|
|
||||||
<!-- CSS -->
|
<!-- CSS -->
|
||||||
<link rel="stylesheet" href="/styles/main.css">
|
<link rel="stylesheet" href="/styles/main.css">
|
||||||
<link rel="stylesheet" href="/styles/cards.css">
|
<link rel="stylesheet" href="/styles/cards.css">
|
||||||
<link rel="stylesheet" href="/styles/nav.css">
|
<link rel="stylesheet" href="/styles/nav.css">
|
||||||
|
|
||||||
<!-- JS -->
|
<!-- JS -->
|
||||||
<script src="/scripts/nav.js" defer></script>
|
<script src="/scripts/nav.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
||||||
|
|
||||||
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
</header>
|
</header>
|
||||||
<main id="main">
|
<main id="main">
|
||||||
<h1>The Travels of <span class="card">Card One</span></h1>
|
<h1>The Travels of <span class="card">Card One</span></h1>
|
||||||
|
|
||||||
<p><span class="card">Card one</span> has 16 total recipients. Its journey began in late December, 2025.</p>
|
<p><span class="card">Card one</span> has 16 total recipients. Its journey began in late December, 2025.</p>
|
||||||
|
|
||||||
<ol>
|
<ol>
|
||||||
<li class="stop">
|
<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>
|
<svg aria-hidden="true" viewBox="0 0 32 32" focusable="false"><circle stroke="none" cx="16" cy="16" r="10"></circle></svg>
|
||||||
<h2>California, USA</h2>
|
<h2>California, USA</h2>
|
||||||
<img src="/img/one/00.jpg" alt="an open pop-up greeting card. the pop-up is an autumnal tree, and the inside of the card has autumn leaf designs. two small figurines sit on the card to hold it open flat."/>
|
<img src="/img/one/00.jpg" alt="an open pop-up greeting card. the pop-up is an autumnal tree, and the inside of the card has autumn leaf designs. two small figurines sit on the card to hold it open flat."/>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,42 +1,42 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>card three's travels | siblinghood of the traveling greeting card</title>
|
<title>card three's travels | siblinghood of the traveling greeting card</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<!-- Meta -->
|
<!-- Meta -->
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||||
<link rel="canonical" href="/card-three" />
|
<link rel="canonical" href="/card-three" />
|
||||||
<meta name="description" content="card three's travels | siblinghood of the traveling greeting card" />
|
<meta name="description" content="card three's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta name="robots" content="index,follow" />
|
<meta name="robots" content="index,follow" />
|
||||||
<meta property="og:title" content="card three's travels | siblinghood of the traveling greeting card" />
|
<meta property="og:title" content="card three's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta property="og:type" content="article" />
|
<meta property="og:type" content="article" />
|
||||||
<meta property="og:url" content="/card-three" />
|
<meta property="og:url" content="/card-three" />
|
||||||
<meta property="og:description" content="card three's travels | siblinghood of the traveling greeting card" />
|
<meta property="og:description" content="card three's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta property="og:image" content="/img/logo-light.png" />
|
<meta property="og:image" content="/img/logo-light.png" />
|
||||||
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
||||||
|
|
||||||
<!-- CSS -->
|
<!-- CSS -->
|
||||||
<link rel="stylesheet" href="/styles/main.css">
|
<link rel="stylesheet" href="/styles/main.css">
|
||||||
<link rel="stylesheet" href="/styles/cards.css">
|
<link rel="stylesheet" href="/styles/cards.css">
|
||||||
<link rel="stylesheet" href="/styles/nav.css">
|
<link rel="stylesheet" href="/styles/nav.css">
|
||||||
|
|
||||||
<!-- JS -->
|
<!-- JS -->
|
||||||
<script src="/scripts/nav.js" defer></script>
|
<script src="/scripts/nav.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
||||||
|
|
||||||
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
</header>
|
</header>
|
||||||
<main id="main">
|
<main id="main">
|
||||||
<h1>The Travels of <span class="card">Card Three</span></h1>
|
<h1>The Travels of <span class="card">Card Three</span></h1>
|
||||||
|
|
||||||
<p>4 people are signed up for <span class="card">card three</span> so far.</p>
|
<p>4 people are signed up for <span class="card">card three</span> so far.</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,50 +1,50 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>card two's travels | siblinghood of the traveling greeting card</title>
|
<title>card two's travels | siblinghood of the traveling greeting card</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<!-- Meta -->
|
<!-- Meta -->
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||||
<link rel="canonical" href="/card-two" />
|
<link rel="canonical" href="/card-two" />
|
||||||
<meta name="description" content="card two's travels | siblinghood of the traveling greeting card" />
|
<meta name="description" content="card two's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta name="robots" content="index,follow" />
|
<meta name="robots" content="index,follow" />
|
||||||
<meta property="og:title" content="card two's travels | siblinghood of the traveling greeting card" />
|
<meta property="og:title" content="card two's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta property="og:type" content="article" />
|
<meta property="og:type" content="article" />
|
||||||
<meta property="og:url" content="/card-two" />
|
<meta property="og:url" content="/card-two" />
|
||||||
<meta property="og:description" content="card two's travels | siblinghood of the traveling greeting card" />
|
<meta property="og:description" content="card two's travels | siblinghood of the traveling greeting card" />
|
||||||
<meta property="og:image" content="/img/logo-light.png" />
|
<meta property="og:image" content="/img/logo-light.png" />
|
||||||
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
||||||
|
|
||||||
<!-- CSS -->
|
<!-- CSS -->
|
||||||
<link rel="stylesheet" href="/styles/main.css">
|
<link rel="stylesheet" href="/styles/main.css">
|
||||||
<link rel="stylesheet" href="/styles/cards.css">
|
<link rel="stylesheet" href="/styles/cards.css">
|
||||||
<link rel="stylesheet" href="/styles/nav.css">
|
<link rel="stylesheet" href="/styles/nav.css">
|
||||||
|
|
||||||
<!-- JS -->
|
<!-- JS -->
|
||||||
<script src="/scripts/nav.js" defer></script>
|
<script src="/scripts/nav.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
||||||
|
|
||||||
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
</header>
|
</header>
|
||||||
<main id="main">
|
<main id="main">
|
||||||
<h1>The Travels of <span class="card">Card Two</span></h1>
|
<h1>The Travels of <span class="card">Card Two</span></h1>
|
||||||
|
|
||||||
<p><span class="card">Card two</span> has 16 total recipients.</p>
|
<p><span class="card">Card two</span> has 16 total recipients.</p>
|
||||||
|
|
||||||
<ol>
|
<ol>
|
||||||
<li class="stop">
|
<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>
|
<svg aria-hidden="true" viewBox="0 0 32 32" focusable="false"><circle stroke="none" cx="16" cy="16" r="10"></circle></svg>
|
||||||
<h2>Oregon, USA</h2>
|
<h2>Oregon, USA</h2>
|
||||||
<img src="/img/two/00.jpg" alt="an open greeting card, blank except for some small writing that reads 'Hello from Oregon, USA! -freddie (#0)"/>
|
<img src="/img/two/00.jpg" alt="an open greeting card, blank except for some small writing that reads 'Hello from Oregon, USA! -freddie (#0)"/>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
172
index.html
172
index.html
@ -1,108 +1,108 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Siblinghood of the Traveling Greeting Card</title>
|
<title>Siblinghood of the Traveling Greeting Card</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<!-- Meta -->
|
<!-- Meta -->
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||||
<link rel="canonical" href="/" />
|
<link rel="canonical" href="/" />
|
||||||
<meta name="description" content="Siblinghood of the Traveling Greeting Card" />
|
<meta name="description" content="Siblinghood of the Traveling Greeting Card" />
|
||||||
<meta name="robots" content="index,follow" />
|
<meta name="robots" content="index,follow" />
|
||||||
<meta property="og:title" content="Siblinghood of the Traveling Greeting Card" />
|
<meta property="og:title" content="Siblinghood of the Traveling Greeting Card" />
|
||||||
<meta property="og:type" content="article" />
|
<meta property="og:type" content="article" />
|
||||||
<meta property="og:url" content="/" />
|
<meta property="og:url" content="/" />
|
||||||
<meta property="og:description" content="Siblinghood of the Traveling Greeting Card" />
|
<meta property="og:description" content="Siblinghood of the Traveling Greeting Card" />
|
||||||
<meta property="og:image" content="/img/logo-light.png" />
|
<meta property="og:image" content="/img/logo-light.png" />
|
||||||
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings" />
|
||||||
|
|
||||||
<!-- CSS -->
|
|
||||||
<link rel="stylesheet" href="/styles/main.css">
|
|
||||||
<link rel="stylesheet" href="/styles/nav.css">
|
|
||||||
|
|
||||||
<!-- JS -->
|
<!-- CSS -->
|
||||||
<script src="/scripts/nav.js" defer></script>
|
<link rel="stylesheet" href="/styles/main.css">
|
||||||
</head>
|
<link rel="stylesheet" href="/styles/nav.css">
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
|
||||||
|
|
||||||
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
<!-- JS -->
|
||||||
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
<script src="/scripts/nav.js" defer></script>
|
||||||
</header>
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav id="top-nav"><!-- auto populated by nav.js --></nav>
|
||||||
|
|
||||||
<main id="main">
|
<img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
<h1>Siblinghood of the Traveling Greeting Card</h1>
|
<img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
|
||||||
|
</header>
|
||||||
|
|
||||||
<p id="author">a community-building project by <a target="_blank" href="https://leecat.art">lee</a>.</p>
|
<main id="main">
|
||||||
|
<h1>Siblinghood of the Traveling Greeting Card</h1>
|
||||||
|
|
||||||
<p>welcome to the siblinghood of the traveling greeting card.</p>
|
<p id="author">a community-building project by <a target="_blank" href="https://leecat.art">lee</a>.</p>
|
||||||
|
|
||||||
<p><a target="_blank" href="https://flipping.rocks/@inherentlee/115645750535211187">originated on the fediverse</a> with an idea from <a target="_blank" href="https://scholar.social/@noctiluca">noctiluca@scholar.social</a>.</p>
|
<p>welcome to the siblinghood of the traveling greeting card.</p>
|
||||||
|
|
||||||
<h2>objective</h2>
|
|
||||||
<p>send a greeting card around the world. maybe more than one. we'll see.</p>
|
|
||||||
|
|
||||||
<h2>outline</h2>
|
<p><a target="_blank" href="https://flipping.rocks/@inherentlee/115645750535211187">originated on the fediverse</a> with an idea from <a target="_blank" href="https://scholar.social/@noctiluca">noctiluca@scholar.social</a>.</p>
|
||||||
<p>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.</p>
|
|
||||||
<p>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.</p>
|
|
||||||
<p>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.</p>
|
|
||||||
|
|
||||||
<h3>timeline</h3>
|
<h2>objective</h2>
|
||||||
<p>applications for round one closed on <time datetime="2025-12-15">December 15th, 2025</time>. 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.</p>
|
<p>send a greeting card around the world. maybe more than one. we'll see.</p>
|
||||||
<p>assignments (recipient address, order in loop) have been sent out as of <time datetime="2025-12-26">December 26th, 2025</time>.</p>
|
|
||||||
|
|
||||||
<h3>participants</h3>
|
<h2>outline</h2>
|
||||||
<p>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.</p>
|
<p>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.</p>
|
||||||
<p>for the round beginning <time datetime="2026-01-01">January 1st, 2026</time>, we have 32 participants and will have two cards in circulation.</p>
|
<p>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.</p>
|
||||||
|
<p>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.</p>
|
||||||
|
|
||||||
<h3>on randomization</h3>
|
<h3>timeline</h3>
|
||||||
<p>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.</p>
|
<p>applications for round one closed on <time datetime="2025-12-15">December 15th, 2025</time>. 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.</p>
|
||||||
|
<p>assignments (recipient address, order in loop) have been sent out as of <time datetime="2025-12-26">December 26th, 2025</time>.</p>
|
||||||
<h3>card guidelines</h3>
|
|
||||||
<p>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.</p>
|
|
||||||
|
|
||||||
<h3>address privacy</h3>
|
<h3>participants</h3>
|
||||||
<p>the only people who will see your address are:</p>
|
<p>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.</p>
|
||||||
<ul>
|
<p>for the round beginning <time datetime="2026-01-01">January 1st, 2026</time>, we have 32 participants and will have two cards in circulation.</p>
|
||||||
<li>me</li>
|
|
||||||
<li>the person who is sending directly to you</li>
|
|
||||||
<li>if you put a return address (which I really would recommend), your recipient</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>what I'll need from participants</h2>
|
<h3>on randomization</h3>
|
||||||
|
<p>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.</p>
|
||||||
<h3>signing the card</h3>
|
|
||||||
<p>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!</p>
|
|
||||||
<p><strong>IMPORTANT!</strong> 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.</p>
|
|
||||||
|
|
||||||
<h3>mailing the card</h3>
|
<h3>card guidelines</h3>
|
||||||
<p>this will require a fresh envelope and stamp(s) as needed for postage.</p>
|
<p>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.</p>
|
||||||
|
|
||||||
<h3>status checks</h3>
|
<h3>address privacy</h3>
|
||||||
<p>this is, at the end of the day, pretty flexible, but what I would really, really like is:</p>
|
<p>the only people who will see your address are:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>2 emails, one on receipt and one on re-sending. This allows me to check in on progress and ensure the card doesn't get too stalled, or lost.</li>
|
<li>me</li>
|
||||||
<li>more optionally, but fun for seeing how things are going: a picture of the card (not the envelope!)</li>
|
<li>the person who is sending directly to you</li>
|
||||||
</ul>
|
<li>if you put a return address (which I really would recommend), your recipient</li>
|
||||||
<p>feel free to post your card pictures using the hashtags #siblinghoodOfTheTravelingGreetingCard or #sottgc.</p>
|
</ul>
|
||||||
|
|
||||||
<h2>what I'll send participants</h2>
|
<h2>what I'll need from participants</h2>
|
||||||
<h3>guidelines</h3>
|
|
||||||
<p>summary/highlights of these guidelines will be repeated over email. Full guidelines will always be available here.</p>
|
|
||||||
|
|
||||||
<h3>recipient and loop order assignment</h3>
|
<h3>signing the card</h3>
|
||||||
<p>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.</p>
|
<p>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!</p>
|
||||||
|
<p><strong>IMPORTANT!</strong> 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.</p>
|
||||||
|
|
||||||
<h3>reminders</h3>
|
<h3>mailing the card</h3>
|
||||||
<p>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.</p>
|
<p>this will require a fresh envelope and stamp(s) as needed for postage.</p>
|
||||||
|
|
||||||
<h2>I want in!</h2>
|
<h3>status checks</h3>
|
||||||
<p>as stated above, signups for the round beginning <time datetime="2026-01-01">January 1st, 2026</time> are <strong>closed</strong>. However, you may still sign up in case of future rounds.</p>
|
<p>this is, at the end of the day, pretty flexible, but what I would really, really like is:</p>
|
||||||
<p><a target="_blank" href="https://airtable.com/appdoHZsRDUzgYu9q/pagsr9LVAqKx29gDl/form">sign up for the siblinghood of the traveling greeting card</a>.</p>
|
<ul>
|
||||||
<p>if airtable is in any way inaccessible to you, please <a target="_blank" href="https://leecat.art/contact">reach out directly to lee</a>.</p>
|
<li>2 emails, one on receipt and one on re-sending. This allows me to check in on progress and ensure the card doesn't get too stalled, or lost.</li>
|
||||||
</main>
|
<li>more optionally, but fun for seeing how things are going: a picture of the card (not the envelope!)</li>
|
||||||
|
</ul>
|
||||||
|
<p>feel free to post your card pictures using the hashtags #siblinghoodOfTheTravelingGreetingCard or #sottgc.</p>
|
||||||
|
|
||||||
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
<h2>what I'll send participants</h2>
|
||||||
</body>
|
<h3>guidelines</h3>
|
||||||
|
<p>summary/highlights of these guidelines will be repeated over email. Full guidelines will always be available here.</p>
|
||||||
|
|
||||||
|
<h3>recipient and loop order assignment</h3>
|
||||||
|
<p>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.</p>
|
||||||
|
|
||||||
|
<h3>reminders</h3>
|
||||||
|
<p>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.</p>
|
||||||
|
|
||||||
|
<h2>I want in!</h2>
|
||||||
|
<p>as stated above, signups for the round beginning <time datetime="2026-01-01">January 1st, 2026</time> are <strong>closed</strong>. However, you may still sign up in case of future rounds.</p>
|
||||||
|
<p><a target="_blank" href="https://airtable.com/appdoHZsRDUzgYu9q/pagsr9LVAqKx29gDl/form">sign up for the siblinghood of the traveling greeting card</a>.</p>
|
||||||
|
<p>if airtable is in any way inaccessible to you, please <a target="_blank" href="https://leecat.art/contact">reach out directly to lee</a>.</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="footer"><!-- auto populated by nav.js --></footer>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
134
scripts/nav.js
134
scripts/nav.js
@ -1,13 +1,13 @@
|
|||||||
/* Nav construction */
|
/* Nav construction */
|
||||||
const cards = [
|
const cards = [
|
||||||
{
|
{
|
||||||
title: "card one",
|
title: "card one",
|
||||||
href: "/card-one/"
|
href: "/card-one/"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "card two",
|
title: "card two",
|
||||||
href: "/card-two/"
|
href: "/card-two/"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "card three",
|
title: "card three",
|
||||||
href: "/card-three/"
|
href: "/card-three/"
|
||||||
@ -15,56 +15,56 @@ const cards = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const constructMenuLink = function(title, href) {
|
const constructMenuLink = function(title, href) {
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname;
|
||||||
|
|
||||||
const a = document.createElement("a");
|
const a = document.createElement("a");
|
||||||
a.href = href;
|
a.href = href;
|
||||||
a.title = title;
|
a.title = title;
|
||||||
a.innerHTML = title;
|
a.innerHTML = title;
|
||||||
if (path === href) a.id = "current-page";
|
if (path === href) a.id = "current-page";
|
||||||
|
|
||||||
return a;
|
return a;
|
||||||
}
|
}
|
||||||
|
|
||||||
const constructSkipLink = function() {
|
const constructSkipLink = function() {
|
||||||
const a = constructMenuLink("skip to main", "#main");
|
const a = constructMenuLink("skip to main", "#main");
|
||||||
a.id = "skip";
|
a.id = "skip";
|
||||||
|
|
||||||
return a;
|
return a;
|
||||||
}
|
}
|
||||||
|
|
||||||
const constructDropdown = function() {
|
const constructDropdown = function() {
|
||||||
const div = document.createElement("div");
|
const div = document.createElement("div");
|
||||||
div.id = "dropdown";
|
div.id = "dropdown";
|
||||||
|
|
||||||
const button = document.createElement("button");
|
const button = document.createElement("button");
|
||||||
button.innerHTML = "cards ⮷";
|
button.innerHTML = "cards ⮷";
|
||||||
button.id="drop-button";
|
button.id="drop-button";
|
||||||
button.ariaLabel = "card submenu";
|
button.ariaLabel = "card submenu";
|
||||||
button.ariaExpanded = "false";
|
button.ariaExpanded = "false";
|
||||||
button.type = "button";
|
button.type = "button";
|
||||||
button.setAttribute("aria-controls", "drop-content");
|
button.setAttribute("aria-controls", "drop-content");
|
||||||
div.append(button);
|
div.append(button);
|
||||||
|
|
||||||
const ul = document.createElement("ul");
|
const ul = document.createElement("ul");
|
||||||
ul.id = "drop-content";
|
ul.id = "drop-content";
|
||||||
ul.ariaHidden = "true";
|
ul.ariaHidden = "true";
|
||||||
|
|
||||||
for (const card of cards) {
|
for (const card of cards) {
|
||||||
const li = document.createElement("li");
|
const li = document.createElement("li");
|
||||||
li.append(constructMenuLink(card.title, card.href));
|
li.append(constructMenuLink(card.title, card.href));
|
||||||
ul.append(li);
|
ul.append(li);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.append(ul);
|
div.append(ul);
|
||||||
return div;
|
return div;
|
||||||
}
|
}
|
||||||
|
|
||||||
const constructNav = function() {
|
const constructNav = function() {
|
||||||
const nav = document.getElementById("top-nav");
|
const nav = document.getElementById("top-nav");
|
||||||
nav.append(constructSkipLink());
|
nav.append(constructSkipLink());
|
||||||
nav.append(constructMenuLink("home", "/"));
|
nav.append(constructMenuLink("home", "/"));
|
||||||
nav.append(constructDropdown());
|
nav.append(constructDropdown());
|
||||||
}
|
}
|
||||||
|
|
||||||
constructNav();
|
constructNav();
|
||||||
@ -80,52 +80,52 @@ const firstDropdownItem = dropdownItems[0];
|
|||||||
const lastDropdownItem = dropdownItems[dropdownItems.length - 1];
|
const lastDropdownItem = dropdownItems[dropdownItems.length - 1];
|
||||||
|
|
||||||
const openDropdown = function() {
|
const openDropdown = function() {
|
||||||
dropdownContent.classList.add("show");
|
dropdownContent.classList.add("show");
|
||||||
dropdownContent.setAttribute("aria-hidden", "false");
|
dropdownContent.setAttribute("aria-hidden", "false");
|
||||||
dropdownButton.setAttribute("aria-expanded", "true");
|
dropdownButton.setAttribute("aria-expanded", "true");
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeDropdown = function() {
|
const closeDropdown = function() {
|
||||||
if (dropdownButton.ariaExpanded === "true") {
|
if (dropdownButton.ariaExpanded === "true") {
|
||||||
dropdownContent.classList.remove("show");
|
dropdownContent.classList.remove("show");
|
||||||
dropdownContent.setAttribute("aria-hidden", "true");
|
dropdownContent.setAttribute("aria-hidden", "true");
|
||||||
dropdownButton.setAttribute("aria-expanded", "false");
|
dropdownButton.setAttribute("aria-expanded", "false");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
dropdownButton.addEventListener("click", (event) => {
|
dropdownButton.addEventListener("click", (event) => {
|
||||||
if (dropdownButton.ariaExpanded === "false") openDropdown();
|
if (dropdownButton.ariaExpanded === "false") openDropdown();
|
||||||
else closeDropdown();
|
else closeDropdown();
|
||||||
});
|
});
|
||||||
|
|
||||||
dropdownButton.addEventListener("keydown", (event) => {
|
dropdownButton.addEventListener("keydown", (event) => {
|
||||||
if (event.key === "Enter" || event.key === " ") { // Space or Enter key
|
if (event.key === "Enter" || event.key === " ") { // Space or Enter key
|
||||||
event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
|
event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
|
||||||
if (dropdownButton.ariaExpanded === "false") {
|
if (dropdownButton.ariaExpanded === "false") {
|
||||||
openDropdown();
|
openDropdown();
|
||||||
} else {
|
} else {
|
||||||
closeDropdown();
|
closeDropdown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
firstDropdownItem.addEventListener("keydown", (event) => {
|
firstDropdownItem.addEventListener("keydown", (event) => {
|
||||||
if (event.key === "Tab" && event.shiftKey) closeDropdown();
|
if (event.key === "Tab" && event.shiftKey) closeDropdown();
|
||||||
});
|
});
|
||||||
|
|
||||||
lastDropdownItem.addEventListener("keydown", (event) => {
|
lastDropdownItem.addEventListener("keydown", (event) => {
|
||||||
if (event.key === "Tab" && !event.shiftKey) closeDropdown();
|
if (event.key === "Tab" && !event.shiftKey) closeDropdown();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener("keydown", (event) => {
|
document.addEventListener("keydown", (event) => {
|
||||||
if (event.key === "Escape") {
|
if (event.key === "Escape") {
|
||||||
closeDropdown();
|
closeDropdown();
|
||||||
dropdownButton.focus();
|
dropdownButton.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener("click", (event) => {
|
window.addEventListener("click", (event) => {
|
||||||
if (!event.target.matches("#drop-button")) closeDropdown();
|
if (!event.target.matches("#drop-button")) closeDropdown();
|
||||||
});
|
});
|
||||||
|
|
||||||
/* footer */
|
/* footer */
|
||||||
|
|||||||
@ -1,57 +1,57 @@
|
|||||||
.card {
|
.card {
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
p .card {
|
p .card {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop {
|
.stop {
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
position: relative;
|
position: relative;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop:not(:last-child) {
|
.stop:not(:last-child) {
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop:before {
|
.stop:before {
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
width: .1rem;
|
width: .1rem;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
margin-left: -2.2rem;
|
margin-left: -2.2rem;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
fill: var(--color-accent);
|
fill: var(--color-accent);
|
||||||
float: left;
|
float: left;
|
||||||
padding: .4rem .5rem 0 0;
|
padding: .4rem .5rem 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
svg {
|
svg {
|
||||||
padding-top: .2rem;
|
padding-top: .2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop h2 {
|
.stop h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop img {
|
.stop img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop p {
|
.stop p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
padding-top: .5rem;
|
padding-top: .5rem;
|
||||||
}
|
}
|
||||||
|
|||||||
182
styles/main.css
182
styles/main.css
@ -1,181 +1,181 @@
|
|||||||
:root {
|
:root {
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
|
|
||||||
--color-blue-light: #c8e5f5;
|
--color-blue-light: #c8e5f5;
|
||||||
--color-gold-light: #ecd399;
|
--color-gold-light: #ecd399;
|
||||||
--color-blue-dark: #02293e;
|
--color-blue-dark: #02293e;
|
||||||
--color-gold-dark: #715511;
|
--color-gold-dark: #715511;
|
||||||
|
|
||||||
--color-bg: light-dark(var(--color-blue-light), var(--color-blue-dark));
|
--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-text: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||||
--color-accent: light-dark(var(--color-gold-dark), var(--color-gold-light));
|
--color-accent: light-dark(var(--color-gold-dark), var(--color-gold-light));
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
width: 65%;
|
width: 65%;
|
||||||
margin: 0 auto 2rem;
|
margin: 0 auto 2rem;
|
||||||
scroll-margin-top: 1.5rem;
|
scroll-margin-top: 1.5rem;
|
||||||
min-height: 50vh;
|
min-height: 50vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
main {
|
main {
|
||||||
width: 92%;
|
width: 92%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 3rem auto 1rem;
|
margin: 3rem auto 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2, h3 {
|
h2, h3 {
|
||||||
margin: 3rem auto .5rem;
|
margin: 3rem auto .5rem;
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
border-bottom: solid;
|
border-bottom: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.35rem;
|
font-size: 1.35rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 auto 1.5rem;
|
margin: 0 auto 1.5rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
p {
|
p {
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
line-height: 1.3rem;
|
line-height: 1.3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-style: solid;
|
text-decoration-style: solid;
|
||||||
text-decoration-thickness: .2rem;
|
text-decoration-thickness: .2rem;
|
||||||
text-decoration-color: var(--color-accent);
|
text-decoration-color: var(--color-accent);
|
||||||
transition: text-decoration-thickness .5s;
|
transition: text-decoration-thickness .5s;
|
||||||
padding: 0 .15rem;
|
padding: 0 .15rem;
|
||||||
border-radius: .15rem;
|
border-radius: .15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (any-hover: hover) {
|
@media (any-hover: hover) {
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration-thickness: .4rem;
|
text-decoration-thickness: .4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus-visible {
|
a:focus-visible {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: var(--color-accent) solid .15rem;
|
outline: var(--color-accent) solid .15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0 auto 1.5rem 2rem;
|
margin: 0 auto 1.5rem 2rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
ul {
|
ul {
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
line-height: 1.3rem;
|
line-height: 1.3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
time {
|
time {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
header img {
|
header img {
|
||||||
max-height: 25vh;
|
max-height: 25vh;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
header img {
|
header img {
|
||||||
max-height: 20vh;
|
max-height: 20vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
#logo-dark {
|
#logo-dark {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
#logo-light {
|
#logo-light {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#author {
|
#author {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
background-color: var(--color-text);
|
background-color: var(--color-text);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer p {
|
footer p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer a {
|
footer a {
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
text-decoration-color: var(--color-bg);
|
text-decoration-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
footer a:focus-visible {
|
footer a:focus-visible {
|
||||||
outline-color: var(--color-bg);
|
outline-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,53 +1,53 @@
|
|||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a,
|
nav a,
|
||||||
nav button {
|
nav button {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
border: .1rem solid;
|
border: .1rem solid;
|
||||||
border-radius: .15rem;
|
border-radius: .15rem;
|
||||||
padding: .15rem .3rem;
|
padding: .15rem .3rem;
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
outline-offset: .1rem;
|
outline-offset: .1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
nav a,
|
nav a,
|
||||||
nav button {
|
nav button {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (any-hover: hover) {
|
@media (any-hover: hover) {
|
||||||
nav a:hover,
|
nav a:hover,
|
||||||
nav button:hover {
|
nav button:hover {
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a:focus-visible,
|
nav a:focus-visible,
|
||||||
nav button:focus-visible {
|
nav button:focus-visible {
|
||||||
outline: .1rem solid var(--color-accent);
|
outline: .1rem solid var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
#skip {
|
#skip {
|
||||||
left: -999px;
|
left: -999px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: auto;
|
top: auto;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: -99;
|
z-index: -99;
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#skip:focus-visible {
|
#skip:focus-visible {
|
||||||
@ -59,41 +59,41 @@ nav button:focus-visible {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (any-hover: hover) {
|
@media (any-hover: hover) {
|
||||||
#skip:hover {
|
#skip:hover {
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#current-page {
|
#current-page {
|
||||||
border-right-width: .5rem;
|
border-right-width: .5rem;
|
||||||
border-left-width: .5rem;
|
border-left-width: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin: 0 0 0 1rem;
|
margin: 0 0 0 1rem;
|
||||||
min-width: 10rem;
|
min-width: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown {
|
#dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 3rem;
|
min-width: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul.show {
|
nav ul.show {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li {
|
nav ul li {
|
||||||
margin: .5rem;
|
margin: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul a {
|
nav ul a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user
