www.git

www

~ Personal site — projects, posts, about. Built with sqzass.
git clone https://github.com/debuman/www.git
commit 48884c0e21f472955ff9f726aa16b41c1b11aad3
parent ee2330fa699f09ba969f3e21e6b5e75aac5395bb
Author: sqzer <110329244+sqzer-x@users.noreply.github.com>
Date: Tue, 4 Aug 2026 21:15:57 +0900

Two colour steps in the rail that pointed the wrong way

Both were mine, both from picking a token by name instead of by luminance.

The tick's hover feedback did nothing. --rule-3 to --ink-4 is 1.78:1 to 1.72:1
in light — fainter, not brighter — and 1.76:1 to 1.77:1 in dark, which is
nothing at all. The two tokens sit at almost the same luminance in both themes
and there is no rung between the resting hairline and the ink the read sections
use. So the tick no longer responds to hover: four names appearing at once is
already an unmistakable answer, and when there is no room for a device you
remove it rather than shrink it.

The labels were --ink-3 at 0.72rem, which is 4.23:1 in light — under AA for
13.7px text — and hovering one turned it accent at 2.12:1, so touching a name
made it harder to read. That is the second place in this component where the
accent was doing the opposite of its job. Labels rest at --ink-2 and go to --ink
on hover; the current one is still --ink, and what separates it from a hovered
one is not colour but the tick, which is the only partially filled bar in the
column. The rail now contains no accent at all.

Diffstat:
Mstatic/css/main.css | 18++++++++++++------
Mstatic/js/ui.js | 5+++--
2 files changed, 15 insertion(+), 8 deletion(-)

diff --git a/static/css/main.css b/static/css/main.css
@@ -1049,7 +1049,10 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
     display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
     overflow: hidden;
     font-size: 0.72rem; line-height: 1.35;
-    color: var(--ink-3);
+    /* 13.7px 글자다. --ink-3 은 라이트에서 4.23:1 로 AA 아래이고, 여기서 쓰던
+       hover 액센트는 2.12:1 이라 손을 얹으면 더 안 읽혔다 — 이 열에서 액센트가
+       두 번째로 틀린 자리다. 밝기로만 간다. */
+    color: var(--ink-2);
     opacity: 0; pointer-events: none;
     transition: opacity var(--tr-ink), color var(--tr-ink);
   }
@@ -1059,14 +1062,17 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
      밝아지고 눈금은 색이 한 단 오른다 — 굵어지지도, 밀려나지도 않는다.
      여백 전체가 방아쇠라, 한 번 나온 이름까지 커서가 가는 동안 사라지지 않는다.
      박자는 이 시트의 유일한 박자 하나다. */
+  /* 눈금은 hover 에 반응하지 않는다. --rule-3 에서 --ink-4 로 옮겼더니 라이트에서
+     1.78:1 → 1.72:1 로 오히려 흐려졌고 다크에서는 1.76 → 1.77 로 아무 일도
+     일어나지 않았다 — 두 토큰의 밝기가 두 테마 모두에서 거의 같다. 사이에 낄
+     단이 없고, 이름 넷이 한꺼번에 나타나는 것이 이미 충분한 대답이다.
+     좁아지면 줄이는 게 아니라 뺀다. */
   .rail:hover .rail-label,
   .rail:focus-within .rail-label { opacity: 1; pointer-events: auto; }
-  .rail:hover .rail-seg,
-  .rail:focus-within .rail-seg { background: var(--ink-4); }
 
-  /* 지금 절 위에 손이 올라가도 현재 표시를 지우지 않는다. hover 와 현재를 같게
-     칠하면 목차에 커서를 얹는 것만으로 위치 표시가 사라진다. */
-  .rail-label:not([aria-current]):hover { color: var(--accent); }
+  /* 손이 얹힌 이름은 밝아진다. 지금 절과 같은 잉크가 되지만 둘을 가르는 것은
+     색이 아니라 눈금이다 — 지금 절만 덜 찬 칸을 갖는다. 내비도 같은 규칙이다. */
+  .rail-label:hover { color: var(--ink); }
 
   .has-rail .toc { display: none; }
 }
diff --git a/static/js/ui.js b/static/js/ui.js
@@ -188,8 +188,9 @@
 
       /* 칸의 높이가 그 절의 몫이다. 아래끝을 두면 아주 짧은 절도 사라지지 않고
          두 줄짜리 이름이 옆 칸을 침범하지도 않는다.
-         ponytail: 절이 열두 개를 넘으면 아래끝의 합이 상자보다 커져 넘친다.
-         그때 손댈 곳은 2.2rem 과 min(64vh, 34rem) 둘이다. */
+         ponytail: 절이 열 개를 넘으면(768px 높이 화면) 아래끝의 합이 상자보다
+         커져 넘치고, 그 앞에서 이미 아래끝이 몫을 눌러 두 칸의 순서를 뒤집을 수
+         있다. 그때 손댈 곳은 2.2rem 과 min(64vh, 34rem) 둘이다. */
       var total = tops[tops.length - 1] - tops[0];
       var track = "";
       for (var i = 0; i < rows.length; i++) {