From 4e5f7f52d14c2c4184f2bddecb5ddcbff8bea46a Mon Sep 17 00:00:00 2001 From: Lee Cattarin Date: Wed, 7 Jan 2026 14:59:26 -0800 Subject: [PATCH] editorconfig and spaces -> tabs --- .editorconfig | 9 +++ card-one/index.html | 82 +++++++++---------- card-three/index.html | 68 ++++++++-------- card-two/index.html | 76 +++++++++--------- index.html | 172 +++++++++++++++++++-------------------- scripts/nav.js | 134 +++++++++++++++---------------- styles/cards.css | 56 ++++++------- styles/main.css | 182 +++++++++++++++++++++--------------------- styles/nav.css | 90 ++++++++++----------- 9 files changed, 439 insertions(+), 430 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e6237fd --- /dev/null +++ b/.editorconfig @@ -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 diff --git a/card-one/index.html b/card-one/index.html index a9f6d8f..87f785d 100644 --- a/card-one/index.html +++ b/card-one/index.html @@ -1,50 +1,50 @@ - - card one's travels | siblinghood of the traveling greeting card - - - - - - - - - - - - - + + 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

+ 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. Its journey began in late December, 2025.

+

Card one has 16 total recipients. Its journey began in late December, 2025.

-
    -
  1. - -

    California, USA

    - 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. -
    2. -
-
+
    +
  1. + +

    California, USA

    + 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. +
    2. +
+ - - + + diff --git a/card-three/index.html b/card-three/index.html index 83d639d..e8af07f 100644 --- a/card-three/index.html +++ b/card-three/index.html @@ -1,42 +1,42 @@ - - card three's travels | siblinghood of the traveling greeting card - - - - - - - - - - - - - + + card three'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 Three

+ blue and gold icon showing a greeting card with wings + blue and gold icon showing a greeting card with wings +
+
+

The Travels of Card Three

-

4 people are signed up for card three so far.

-
+

4 people are signed up for card three so far.

+ - - + + diff --git a/card-two/index.html b/card-two/index.html index cf71cd9..8a1495a 100644 --- a/card-two/index.html +++ b/card-two/index.html @@ -1,50 +1,50 @@ - - card two's travels | siblinghood of the traveling greeting card - - - - - - - - - - - - - + + 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

+ 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.

+

Card two has 16 total recipients.

  1. - -

    Oregon, USA

    - an open greeting card, blank except for some small writing that reads 'Hello from Oregon, USA! -freddie (#0) -
    2. + +

    Oregon, USA

    + an open greeting card, blank except for some small writing that reads 'Hello from Oregon, USA! -freddie (#0) +
-
+ - - + + diff --git a/index.html b/index.html index 4d836e9..216c222 100644 --- a/index.html +++ b/index.html @@ -1,108 +1,108 @@ - - Siblinghood of the Traveling Greeting Card - - - - - - - - - - - - - - - - - + + 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

+ blue and gold icon showing a greeting card with wings + blue and gold icon showing a greeting card with wings +
-

a community-building project by lee.

+
+

Siblinghood of the Traveling Greeting Card

-

welcome to the siblinghood of the traveling greeting card.

+

a community-building project by lee.

-

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.

+

welcome to the siblinghood of the traveling greeting card.

-

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.

+

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

-

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 .

+

objective

+

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

-

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.

+

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.

-

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.

+

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 .

-

address privacy

-

the only people who will see your address are:

- +

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.

-

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.

+

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.

-

mailing the card

-

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

+

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.

-

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.

+

address privacy

+

the only people who will see your address are:

+ -

what I'll send participants

-

guidelines

-

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

+

what I'll need from participants

-

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.

+

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.

-

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.

+

mailing the card

+

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

-

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.

-
+

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.

+ + + + diff --git a/scripts/nav.js b/scripts/nav.js index f474c7f..8ce9135 100644 --- a/scripts/nav.js +++ b/scripts/nav.js @@ -1,13 +1,13 @@ /* Nav construction */ const cards = [ - { - title: "card one", - href: "/card-one/" - }, - { - title: "card two", - href: "/card-two/" - }, + { + title: "card one", + href: "/card-one/" + }, + { + title: "card two", + href: "/card-two/" + }, { title: "card three", href: "/card-three/" @@ -15,56 +15,56 @@ const cards = [ ] const constructMenuLink = function(title, href) { - const path = window.location.pathname; + const path = window.location.pathname; - const a = document.createElement("a"); - a.href = href; - a.title = title; - a.innerHTML = title; - if (path === href) a.id = "current-page"; + const a = document.createElement("a"); + a.href = href; + a.title = title; + a.innerHTML = title; + if (path === href) a.id = "current-page"; - return a; + return a; } const constructSkipLink = function() { - const a = constructMenuLink("skip to main", "#main"); - a.id = "skip"; + const a = constructMenuLink("skip to main", "#main"); + a.id = "skip"; - return a; + return a; } const constructDropdown = function() { - const div = document.createElement("div"); - div.id = "dropdown"; + const div = document.createElement("div"); + div.id = "dropdown"; - const button = document.createElement("button"); - button.innerHTML = "cards ⮷"; - button.id="drop-button"; - button.ariaLabel = "card submenu"; - button.ariaExpanded = "false"; - button.type = "button"; - button.setAttribute("aria-controls", "drop-content"); - div.append(button); + const button = document.createElement("button"); + button.innerHTML = "cards ⮷"; + button.id="drop-button"; + button.ariaLabel = "card submenu"; + button.ariaExpanded = "false"; + button.type = "button"; + button.setAttribute("aria-controls", "drop-content"); + div.append(button); - const ul = document.createElement("ul"); - ul.id = "drop-content"; - ul.ariaHidden = "true"; + const ul = document.createElement("ul"); + ul.id = "drop-content"; + ul.ariaHidden = "true"; - for (const card of cards) { - const li = document.createElement("li"); - li.append(constructMenuLink(card.title, card.href)); - ul.append(li); - } + for (const card of cards) { + const li = document.createElement("li"); + li.append(constructMenuLink(card.title, card.href)); + ul.append(li); + } - div.append(ul); - return div; + div.append(ul); + return div; } const constructNav = function() { - const nav = document.getElementById("top-nav"); - nav.append(constructSkipLink()); - nav.append(constructMenuLink("home", "/")); - nav.append(constructDropdown()); + const nav = document.getElementById("top-nav"); + nav.append(constructSkipLink()); + nav.append(constructMenuLink("home", "/")); + nav.append(constructDropdown()); } constructNav(); @@ -80,52 +80,52 @@ const firstDropdownItem = dropdownItems[0]; const lastDropdownItem = dropdownItems[dropdownItems.length - 1]; const openDropdown = function() { - dropdownContent.classList.add("show"); - dropdownContent.setAttribute("aria-hidden", "false"); - dropdownButton.setAttribute("aria-expanded", "true"); + dropdownContent.classList.add("show"); + dropdownContent.setAttribute("aria-hidden", "false"); + dropdownButton.setAttribute("aria-expanded", "true"); } const closeDropdown = function() { - if (dropdownButton.ariaExpanded === "true") { - dropdownContent.classList.remove("show"); - dropdownContent.setAttribute("aria-hidden", "true"); - dropdownButton.setAttribute("aria-expanded", "false"); - } + if (dropdownButton.ariaExpanded === "true") { + dropdownContent.classList.remove("show"); + dropdownContent.setAttribute("aria-hidden", "true"); + dropdownButton.setAttribute("aria-expanded", "false"); + } } dropdownButton.addEventListener("click", (event) => { - if (dropdownButton.ariaExpanded === "false") openDropdown(); - else closeDropdown(); + 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(); - } - } + 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(); + } + } }); firstDropdownItem.addEventListener("keydown", (event) => { - if (event.key === "Tab" && event.shiftKey) closeDropdown(); + if (event.key === "Tab" && event.shiftKey) closeDropdown(); }); lastDropdownItem.addEventListener("keydown", (event) => { - if (event.key === "Tab" && !event.shiftKey) closeDropdown(); + if (event.key === "Tab" && !event.shiftKey) closeDropdown(); }); document.addEventListener("keydown", (event) => { - if (event.key === "Escape") { - closeDropdown(); - dropdownButton.focus(); - } + if (event.key === "Escape") { + closeDropdown(); + dropdownButton.focus(); + } }); window.addEventListener("click", (event) => { - if (!event.target.matches("#drop-button")) closeDropdown(); + if (!event.target.matches("#drop-button")) closeDropdown(); }); /* footer */ diff --git a/styles/cards.css b/styles/cards.css index cb68a21..db89a6f 100644 --- a/styles/cards.css +++ b/styles/cards.css @@ -1,57 +1,57 @@ .card { - color: var(--color-accent); + color: var(--color-accent); } p .card { - text-transform: uppercase; - font-weight: 700; + text-transform: uppercase; + font-weight: 700; } .stop { - color: var(--color-accent); - position: relative; - list-style: none; - padding-left: 1.5rem; + color: var(--color-accent); + position: relative; + list-style: none; + padding-left: 1.5rem; } .stop:not(:last-child) { - padding-bottom: 2rem; + padding-bottom: 2rem; } .stop:before { - background-color: var(--color-accent); - width: .1rem; - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; + 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; + 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; - } + svg { + padding-top: .2rem; + } } .stop h2 { - margin: 0; + margin: 0; } .stop img { - width: 100%; + width: 100%; } .stop p { - margin: 0; - color: var(--color-text); - padding-top: .5rem; + margin: 0; + color: var(--color-text); + padding-top: .5rem; } diff --git a/styles/main.css b/styles/main.css index 148043c..ca0e91b 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,181 +1,181 @@ :root { - color-scheme: light dark; + color-scheme: light dark; - --color-blue-light: #c8e5f5; - --color-gold-light: #ecd399; - --color-blue-dark: #02293e; - --color-gold-dark: #715511; + --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)); + --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; + box-sizing: border-box; + margin: 0; + padding: 0; } body { - color: var(--color-text); - background-color: var(--color-bg); - font-family: sans-serif; + color: var(--color-text); + background-color: var(--color-bg); + font-family: sans-serif; } main { - width: 65%; - margin: 0 auto 2rem; - scroll-margin-top: 1.5rem; - min-height: 50vh; + width: 65%; + margin: 0 auto 2rem; + scroll-margin-top: 1.5rem; + min-height: 50vh; } @media (max-width: 650px) { - main { - width: 92%; - } + main { + width: 92%; + } } img { - display: block; + display: block; } h1 { - margin: 3rem auto 1rem; - text-align: center; - font-size: 2.2rem; + margin: 3rem auto 1rem; + text-align: center; + font-size: 2.2rem; } h2, h3 { - margin: 3rem auto .5rem; - color: var(--color-accent); - border-bottom: solid; + margin: 3rem auto .5rem; + color: var(--color-accent); + border-bottom: solid; } h2 { - font-size: 1.8rem; + font-size: 1.8rem; } h3 { - font-size: 1.35rem; - text-align: right; + font-size: 1.35rem; + text-align: right; } @media (max-width: 650px) { - h1 { - font-size: 1.8rem; - } + h1 { + font-size: 1.8rem; + } - h2 { - font-size: 1.5rem; - } + h2 { + font-size: 1.5rem; + } - h3 { - font-size: 1.2rem; - } + h3 { + font-size: 1.2rem; + } } p { - margin: 0 auto 1.5rem; - line-height: 1.5rem; + margin: 0 auto 1.5rem; + line-height: 1.5rem; } @media (max-width: 650px) { - p { - font-size: .9rem; - line-height: 1.3rem; - } + 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; - border-radius: .15rem; + 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; + border-radius: .15rem; } @media (any-hover: hover) { - a:hover { - text-decoration-thickness: .4rem; - } + a:hover { + text-decoration-thickness: .4rem; + } } a:focus-visible { - text-decoration: none; - outline: var(--color-accent) solid .15rem; + text-decoration: none; + outline: var(--color-accent) solid .15rem; } ul { - margin: 0 auto 1.5rem 2rem; - line-height: 1.5rem; + margin: 0 auto 1.5rem 2rem; + line-height: 1.5rem; } @media (max-width: 650px) { - ul { - font-size: .9rem; - line-height: 1.3rem; - } + ul { + font-size: .9rem; + line-height: 1.3rem; + } } time { - font-weight: 700; + font-weight: 700; } button { - cursor: pointer; - background-color: var(--color-bg); + cursor: pointer; + background-color: var(--color-bg); } header img { - max-height: 25vh; - max-width: 100%; - margin: 0 auto; + max-height: 25vh; + max-width: 100%; + margin: 0 auto; } @media (max-width: 650px) { - header img { - max-height: 20vh; - } + header img { + max-height: 20vh; + } } @media (prefers-color-scheme: light) { - #logo-dark { - display: none; - } + #logo-dark { + display: none; + } } @media (prefers-color-scheme: dark) { - #logo-light { - display: none; - } + #logo-light { + display: none; + } } #author { - text-align: right; - margin-bottom: 3rem; - font-style: italic; + text-align: right; + margin-bottom: 3rem; + font-style: italic; } footer { - color: var(--color-bg); - background-color: var(--color-text); - padding: 1rem; + color: var(--color-bg); + background-color: var(--color-text); + padding: 1rem; } footer p { - text-align: center; - margin: 0; + text-align: center; + margin: 0; } footer a { - color: var(--color-bg); - text-decoration-color: var(--color-bg); + color: var(--color-bg); + text-decoration-color: var(--color-bg); } footer a:focus-visible { - outline-color: var(--color-bg); + outline-color: var(--color-bg); } diff --git a/styles/nav.css b/styles/nav.css index 6982820..0d1f8bb 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -1,53 +1,53 @@ nav { - display: flex; - position: relative; - gap: 1rem; - justify-content: center; - margin: 1rem auto; + display: flex; + position: relative; + gap: 1rem; + justify-content: center; + margin: 1rem auto; } nav a, nav button { - font-size: 1.4rem; - border: .1rem solid; - border-radius: .15rem; - padding: .15rem .3rem; - color: var(--color-accent); - text-decoration: none; - line-height: 2rem; - outline-offset: .1rem; + font-size: 1.4rem; + border: .1rem solid; + border-radius: .15rem; + padding: .15rem .3rem; + color: var(--color-accent); + text-decoration: none; + line-height: 2rem; + outline-offset: .1rem; } @media (max-width: 650px) { - nav a, - nav button { - font-size: 1.1rem; - } + nav a, + nav button { + font-size: 1.1rem; + } } @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: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: .1rem solid var(--color-accent); + outline: .1rem solid var(--color-accent); } #skip { left: -999px; - position: absolute; + position: absolute; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: -99; - background-color: var(--color-bg); + background-color: var(--color-bg); } #skip:focus-visible { @@ -59,41 +59,41 @@ nav button:focus-visible { } @media (any-hover: hover) { - #skip:hover { - color: var(--color-bg); - background-color: var(--color-accent); - } + #skip:hover { + color: var(--color-bg); + background-color: var(--color-accent); + } } #current-page { - border-right-width: .5rem; - border-left-width: .5rem; + border-right-width: .5rem; + border-left-width: .5rem; } nav ul { - list-style: none; - display: none; - position: absolute; - z-index: 1; - margin: 0 0 0 1rem; - min-width: 10rem; + list-style: none; + display: none; + position: absolute; + z-index: 1; + margin: 0 0 0 1rem; + min-width: 10rem; } #dropdown { - position: relative; - display: inline-block; - min-width: 3rem; + position: relative; + display: inline-block; + min-width: 3rem; } nav ul.show { - display: block; + display: block; } nav ul li { - margin: .5rem; + margin: .5rem; } nav ul a { - display: inline-block; - background-color: var(--color-bg); + display: inline-block; + background-color: var(--color-bg); }