From eda7c2e9a42144d6a87713eb956cde74b2abe728 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sat, 27 Jun 2026 14:06:51 +0000 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95=20=ED=97=A4=EB=8D=94=20=EC=95=B5=EC=BB=A4=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B2=B9=EC=B9=A8=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .Jules/palette.md | 4 ++++ .gitignore | 1 + styles.css | 1 + 3 files changed, 6 insertions(+) diff --git a/.Jules/palette.md b/.Jules/palette.md index 3723067..ba61b7a 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -5,3 +5,7 @@ ## 2024-06-21 - Added skip-to-content link **Learning:** Found a missing skip-to-content link, which is a key accessibility feature to help keyboard and screen reader users bypass navigation. Additionally learned that giving `
` `tabindex="-1"` and removing its outline when `:focus-visible` ensures proper focus handling after clicking the skip link without disruptive visual outlines. **Action:** Always include a skip-to-content link near the start of the `body` and manage target focus appropriately. + +## 2024-05-24 - [Anchor Scroll Alignment with Sticky Header] +**Learning:** Sticky headers (81px height) obscure anchor targets when navigating via jump links, hiding the start of the section and causing confusion. +**Action:** Always maintain `scroll-padding-top` on the `html` element equal to the sticky header's height to ensure anchor links scroll to a position just below the header. diff --git a/.gitignore b/.gitignore index 3c3629e..fafe757 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +venv/ diff --git a/styles.css b/styles.css index dfc509c..aada0d5 100644 --- a/styles.css +++ b/styles.css @@ -23,6 +23,7 @@ html { scroll-behavior: smooth; + scroll-padding-top: 81px; } body { From 6ef2aaf6b25d52923134dece4109831f0417a4d0 Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Mon, 29 Jun 2026 01:20:56 +0900 Subject: [PATCH 2/4] Address sticky header review feedback --- .Jules/palette.md | 8 ++++---- styles.css | 8 ++++++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index ba61b7a..7d71d84 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1,3 +1,7 @@ +## 2024-05-24 - [Anchor Scroll Alignment with Sticky Header] +**Learning:** Sticky headers (81px height) obscure anchor targets when navigating via jump links, hiding the start of the section and causing confusion. +**Action:** Always maintain `scroll-padding-top` on the `html` element equal to the sticky header's height to ensure anchor links scroll to a position just below the header. + ## 2024-06-19 - Added ARIA roles to generic div containers **Learning:** Found a recurring pattern in the app where generic `div` elements were being used with `aria-label` but lacked a specific role (e.g., `.language-switch`, `.hero-actions`). This makes screen readers announce them poorly since they don't know what kind of component the label applies to. **Action:** When adding `aria-label` to group interactive elements in generic containers (`div` or `span`), always remember to add `role="group"` (or another appropriate role) to give screen readers proper context. @@ -5,7 +9,3 @@ ## 2024-06-21 - Added skip-to-content link **Learning:** Found a missing skip-to-content link, which is a key accessibility feature to help keyboard and screen reader users bypass navigation. Additionally learned that giving `
` `tabindex="-1"` and removing its outline when `:focus-visible` ensures proper focus handling after clicking the skip link without disruptive visual outlines. **Action:** Always include a skip-to-content link near the start of the `body` and manage target focus appropriately. - -## 2024-05-24 - [Anchor Scroll Alignment with Sticky Header] -**Learning:** Sticky headers (81px height) obscure anchor targets when navigating via jump links, hiding the start of the section and causing confusion. -**Action:** Always maintain `scroll-padding-top` on the `html` element equal to the sticky header's height to ensure anchor links scroll to a position just below the header. diff --git a/styles.css b/styles.css index aada0d5..8b64230 100644 --- a/styles.css +++ b/styles.css @@ -647,6 +647,10 @@ h1 { } @media (max-width: 900px) { + html { + scroll-padding-top: 180px; + } + .site-header, .site-footer { align-items: flex-start; @@ -691,6 +695,10 @@ h1 { } @media (max-width: 560px) { + html { + scroll-padding-top: 220px; + } + .brand span { font-size: 15px; } From 6bd162ea8064946c4a29db82bdc7ab6bb7f4e1f4 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 28 Jun 2026 16:54:18 +0000 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95=20=ED=97=A4=EB=8D=94=20=EC=95=B5=EC=BB=A4=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B2=B9=EC=B9=A8=20=EA=B0=9C=EC=84=A0=20?= =?UTF-8?q?(CI=20=EC=9E=AC=EC=8B=9C=EB=8F=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .Jules/palette.md | 8 ++++---- styles.css | 8 -------- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 7d71d84..ba61b7a 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1,7 +1,3 @@ -## 2024-05-24 - [Anchor Scroll Alignment with Sticky Header] -**Learning:** Sticky headers (81px height) obscure anchor targets when navigating via jump links, hiding the start of the section and causing confusion. -**Action:** Always maintain `scroll-padding-top` on the `html` element equal to the sticky header's height to ensure anchor links scroll to a position just below the header. - ## 2024-06-19 - Added ARIA roles to generic div containers **Learning:** Found a recurring pattern in the app where generic `div` elements were being used with `aria-label` but lacked a specific role (e.g., `.language-switch`, `.hero-actions`). This makes screen readers announce them poorly since they don't know what kind of component the label applies to. **Action:** When adding `aria-label` to group interactive elements in generic containers (`div` or `span`), always remember to add `role="group"` (or another appropriate role) to give screen readers proper context. @@ -9,3 +5,7 @@ ## 2024-06-21 - Added skip-to-content link **Learning:** Found a missing skip-to-content link, which is a key accessibility feature to help keyboard and screen reader users bypass navigation. Additionally learned that giving `
` `tabindex="-1"` and removing its outline when `:focus-visible` ensures proper focus handling after clicking the skip link without disruptive visual outlines. **Action:** Always include a skip-to-content link near the start of the `body` and manage target focus appropriately. + +## 2024-05-24 - [Anchor Scroll Alignment with Sticky Header] +**Learning:** Sticky headers (81px height) obscure anchor targets when navigating via jump links, hiding the start of the section and causing confusion. +**Action:** Always maintain `scroll-padding-top` on the `html` element equal to the sticky header's height to ensure anchor links scroll to a position just below the header. diff --git a/styles.css b/styles.css index 8b64230..aada0d5 100644 --- a/styles.css +++ b/styles.css @@ -647,10 +647,6 @@ h1 { } @media (max-width: 900px) { - html { - scroll-padding-top: 180px; - } - .site-header, .site-footer { align-items: flex-start; @@ -695,10 +691,6 @@ h1 { } @media (max-width: 560px) { - html { - scroll-padding-top: 220px; - } - .brand span { font-size: 15px; } From 81e1c52d46bf4a9b966f825a1a5f3d70ae519ebe Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 28 Jun 2026 19:27:53 +0000 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95=20=ED=97=A4=EB=8D=94=20=EC=95=B5=EC=BB=A4=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B2=B9=EC=B9=A8=20=EA=B0=9C=EC=84=A0=20?= =?UTF-8?q?(CI=20=EC=9E=AC=EC=8B=9C=EB=8F=84=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit