diff --git a/404.html b/404.html index 26b5e37..6072f53 100644 --- a/404.html +++ b/404.html @@ -28,7 +28,7 @@ } })(); - + @@ -82,6 +82,6 @@ - + diff --git a/hardware.html b/hardware.html index 8510336..9ae26f8 100644 --- a/hardware.html +++ b/hardware.html @@ -34,7 +34,7 @@ } })(); - + + diff --git a/index.html b/index.html index 7bc27aa..e552f0b 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -34,7 +34,7 @@ } })(); - + + diff --git a/privacy.html b/privacy.html index 72ab9b6..6735614 100644 --- a/privacy.html +++ b/privacy.html @@ -33,7 +33,7 @@ } })(); - + + diff --git a/projects.html b/projects.html index a43bb52..a448ebd 100644 --- a/projects.html +++ b/projects.html @@ -34,7 +34,7 @@ } })(); - + + diff --git a/script.js b/script.js index a8e0ba6..e36dedb 100644 --- a/script.js +++ b/script.js @@ -57,6 +57,12 @@ document.addEventListener("keydown", (event) => { if (event.key === "Escape") setOpen(false); }); + + document.addEventListener("click", (event) => { + if (!nav.classList.contains("is-open")) return; + if (nav.contains(event.target) || toggle.contains(event.target)) return; + setOpen(false); + }); } const radar = document.querySelector("[data-radar]"); @@ -157,9 +163,14 @@ const projectCards = document.querySelectorAll(".project-card[data-category]"); if (filterChips.length && projectCards.length) { filterChips.forEach((chip) => { + chip.setAttribute("aria-pressed", chip.classList.contains("is-active") ? "true" : "false"); chip.addEventListener("click", () => { const filter = chip.dataset.filter; - filterChips.forEach((c) => c.classList.toggle("is-active", c === chip)); + filterChips.forEach((c) => { + const on = c === chip; + c.classList.toggle("is-active", on); + c.setAttribute("aria-pressed", on ? "true" : "false"); + }); projectCards.forEach((card) => { const match = filter === "all" || card.dataset.category === filter; card.hidden = !match; @@ -172,9 +183,14 @@ const hwCards = document.querySelectorAll(".hw-card[data-hw-category]"); if (hwChips.length && hwCards.length) { hwChips.forEach((chip) => { + chip.setAttribute("aria-pressed", chip.classList.contains("is-active") ? "true" : "false"); chip.addEventListener("click", () => { const filter = chip.dataset.hwFilter; - hwChips.forEach((c) => c.classList.toggle("is-active", c === chip)); + hwChips.forEach((c) => { + const on = c === chip; + c.classList.toggle("is-active", on); + c.setAttribute("aria-pressed", on ? "true" : "false"); + }); hwCards.forEach((card) => { const match = filter === "all" || card.dataset.hwCategory === filter; card.hidden = !match; diff --git a/style.css b/style.css index a9d0802..43c6ce7 100644 --- a/style.css +++ b/style.css @@ -2306,6 +2306,25 @@ a:hover { .fetch-palette i:nth-child(5) { background: #818cf8; } .fetch-palette i:nth-child(6) { background: #e2e8f0; } +:root[data-theme="light"] .mock-fetch { + background: #f7f8fa; + box-shadow: 0 14px 30px rgba(17, 21, 28, 0.08); +} + +:root[data-theme="light"] .mock-fetch-bar { + color: var(--muted); + background: #eef1f4; + border-bottom-color: var(--line); +} + +:root[data-theme="light"] .mock-fetch-body { + color: var(--ink-soft); +} + +:root[data-theme="light"] .fetch-palette i:nth-child(6) { + box-shadow: inset 0 0 0 1px rgba(17, 21, 28, 0.28); +} + /* Laptop Apple M5 SoC widget */ .mock-soc { width: 100%; @@ -2432,11 +2451,17 @@ a:hover { .server-bays { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: 1fr; gap: 0.45rem; margin-bottom: 0.6rem; } +@media (min-width: 640px) { + .server-bays { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + .server-bay { display: flex; flex-direction: column;