From bbdb740696f0bfdca0582389bf86c2785e7b7cc9 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 8 Jul 2026 20:52:45 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=8B=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9C=20=ED=8F=B0=ED=8A=B8=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B0=80=EB=8F=85=EC=84=B1=20=ED=96=A5=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

html4tree에서 생성되는 index.html 파일의 가독성과 접근성을 높이기 위해, CSS에 system-ui 폰트와 body 패딩을 추가하고, main 컨테이너에 max-width를 적용하여 와이드 스크린에서의 사용자 스캐닝(scanning) 경험을 크게 개선했습니다. 단위 테스트를 추가하여 해당 스타일 변경 사항에 대해 100% 테스트 커버리지를 보장합니다.
---
 .jules/palette.md                     |  3 +++
 src/main/kotlin/html4tree/main.kt     | 10 ++++++++++
 src/test/kotlin/html4tree/MainTest.kt |  6 ++++++
 3 files changed, 19 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index b8df5bd..25217b4 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -13,3 +13,6 @@
 ## 2024-06-25 - Directory Listing Navigation Landmark
 **Learning:** Generated directory listings act as navigation regions, and screen readers benefit when the listing is announced separately from the page's main content.
 **Action:** Wrap generated directory listing `<ul>` elements in `<nav aria-label="Directory listing">` while keeping the surrounding semantic `<main>` structure.
+## 2024-06-03 - [Directory Listing Readability]
+**Learning:** Raw HTML directory listings are difficult to read and scan on wide screens because they span the entire width. Adding a max-width container and using system fonts significantly improves readability and user scanning.
+**Action:** Always define base typography and constrain line lengths for list-heavy interfaces to ensure they are visually pleasing and readable across screen sizes.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 1710d99..e594bc5 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -157,6 +157,16 @@ fun process_dir(curr_dir: File){
 
     val css = """
               <style>
+              body {
+                font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+                padding: 1rem;
+                line-height: 1.5;
+                color: #1f2328;
+              }
+              main {
+                max-width: 800px;
+                margin: 0 auto;
+              }
               ul {
                 list-style-type: none;
                 padding-left: 0;
diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt
index a3f8c76..6824050 100644
--- a/src/test/kotlin/html4tree/MainTest.kt
+++ b/src/test/kotlin/html4tree/MainTest.kt
@@ -161,6 +161,12 @@ class MainTest {
         assertFalse(htmlContent.contains("test.ignore"))
         assertTrue(htmlContent.contains("Content-Security-Policy"))
         assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
+
+        // CSS properties validation for UX improvement
+        assertTrue(htmlContent.contains("font-family: system-ui"))
+        assertTrue(htmlContent.contains("max-width: 800px"))
+        assertTrue(htmlContent.contains("body {"))
+        assertTrue(htmlContent.contains("main {"))
     }
 
     @Test