www.git

www

~ Personal site — projects, posts, about. Built with sqzass.
git clone https://github.com/debuman/www.git
commit 07c79bbbda6312058691ff040354823643333aab
parent d9fd02de19096b9834cc37cd03a8725672e1b2f0
Author: sqzer <110329244+sqzer-x@users.noreply.github.com>
Date: Wed, 5 Aug 2026 00:57:45 +0900

The rail's line is the signature orange, and the colophon is shorter

The read portion of the rail is now #e4a242 in both themes. This is the one
place on the site where that colour stands at rest — everywhere else it appears
only under a cursor — and it is the right exception, because what it marks here
is how much of the piece you have read, which is a fact about you rather than a
piece of chrome.

One colour, not two. Progress is a single hue growing monotonically: the
sections above are full, the section you are in is the only partial one, the
ones below are an empty hairline. An earlier version drew the read sections in
ink and the current one in orange, which put the past at twice the weight of the
present and gave a reader two variables to rank with no way to order them. The
current section is identified by being the only bar that is neither full nor
empty, and by its name being the only one set in full ink.

The line is 6px from the window edge now instead of 10.

In light the orange sits at 2.12:1 against the page, which is low. That is the
cost of the colour and it is accepted knowingly: the rail is a supplementary
indicator, the table of contents that has to work is the one rendered in the
document for narrow screens and for no JavaScript at all, and the current
section is announced by aria-current rather than by hue.

The colophon loses about a quarter of its height — padding from 3/4rem to
2/2.5rem, row gap from 1.25 to 0.9rem, 262px down to 201px. Chrome is the way
out of a page, not another page; at full height it read as somewhere the
document started over.

Diffstat:
Mstatic/css/main.css | 38++++++++++++++++++++++++--------------
Mstatic/js/ui.js | 9++++-----
2 files changed, 28 insertion(+), 19 deletion(-)

diff --git a/static/css/main.css b/static/css/main.css
@@ -1015,7 +1015,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
     /* 눈금과 창 끝 사이. 스크롤 막대 바로 옆이 이 물건의 자리다 — 멀어질수록
        본문 여백에 떠 있는 장식으로 보이고, 붙을수록 스크롤 가구로 읽힌다.
        포커스 링이 2px 테두리에 3px 오프셋이라 그만큼은 남긴다. */
-    padding-right: 0.5rem;
+    padding-right: 0.3rem;
     top: 50%; transform: translateY(-50%);
     height: min(64vh, 34rem);
     /* 마스트헤드(30) 아래. 올라온 이름이 크롬을 덮으면 안 된다. */
@@ -1023,22 +1023,29 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
   }
 
   /* 눈금은 세 단의 밝기다: 아직 안 읽은 것, 읽은 것, 지금 읽는 것. 색조는 한
-     가지뿐이라 2px 에서도 순서가 읽힌다 — 주황을 섞었더니 지금 자리가 이 열에서
-     제일 어두운 표시가 됐고(2.1:1), 읽은 자리가 그보다 두 배 진했다. 과거가
-     현재보다 크게 그려지면 그건 위치 표시가 아니다. */
+     가지뿐이라 2px 에서도 순서가 읽힌다. 한때 읽은 자리를 잉크로, 지금 자리를
+     주황으로 칠한 적이 있는데 그때는 과거가 현재보다 두 배 진했다 — 두 색을
+     섞으면 어느 쪽이 앞인지 정할 방법이 없다. 색은 하나고, 순서는 길이가 짓는다. */
+  /* 아직 안 읽은 자리. 중립 헤어라인이라 주황이 지나간 자리와 안 지나간 자리가
+     색조로 갈린다. */
   .rail-seg { background: var(--rule-3); }
 
-  /* 읽은 만큼. 높이는 ui.js 가 스크롤에서 직접 쓴다 — 전환을 걸면 화면보다 한
-     박자 늦게 따라와 거짓말을 한다. 이미 연속값에 매인 것은 애니메이션하지
-     않는다. 색은 상태라서 전환한다. */
+  /* 읽은 만큼. 이 사이트의 유일한 색이고, 여기가 그 색이 상시로 서는 유일한
+     자리다 — 다른 데서는 손이 닿을 때만 나온다. 진행은 한 가지 색이 단조롭게
+     자라는 것으로만 말한다: 위는 다 차고, 지금 절만 덜 찼고, 아래는 비어 있다.
+     "지금"을 다른 색으로 칠하지 않는 이유가 그거다. 덜 찬 칸이 이 열에 하나뿐이라
+     색을 더 쓰면 읽는 사람이 순서를 매길 수 없는 두 번째 변수가 생긴다.
+
+     라이트에서 이 주황은 바탕 대비 2.12:1 이다. 낮다 — 그래서 이 레일은 보조
+     표시이고, 실제 목차는 좁은 화면과 스크립트가 없을 때 그대로 나오는 본문의
+     목록이 진다. 이름의 현재 표시는 색이 아니라 aria-current 와 잉크가 진다.
+
+     높이는 ui.js 가 스크롤에서 직접 쓴다 — 전환을 걸면 화면보다 한 박자 늦게
+     따라와 거짓말을 한다. 이미 연속값에 매인 것은 애니메이션하지 않는다. */
   .rail-fill {
     display: block; width: 100%; height: 0;
-    background: var(--ink-3);
-    transition: background-color var(--tr-ink);
+    background: var(--accent);
   }
-  /* 지금 절이 이 열에서 제일 진하고, 유일하게 덜 찬 칸이다. 색 하나로만 말하지
-     않는다. */
-  .rail-fill.is-now { background: var(--ink); }
 
   .rail-label {
     align-self: start;
@@ -1197,11 +1204,14 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
 
 /* ---------- colophon ---------- */
 
-.colophon { border-top: 1px solid var(--rule); padding-block: 3rem 4rem; }
+/* 여백은 세 줄을 서로 떼어 놓을 만큼만. 크롬은 읽는 물건이 아니라 나가는
+   길이라, 본문만 한 자리를 차지하면 페이지가 거기서 한 번 더 시작하는 것처럼
+   보인다. */
+.colophon { border-top: 1px solid var(--rule); padding-block: 2rem 2.5rem; }
 .colophon-in {
   max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter);
   display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
-  gap: 1.25rem 2rem; text-align: center;
+  gap: 0.9rem 2rem; text-align: center;
 }
 .colophon-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; }
 .colophon-nav a {
diff --git a/static/js/ui.js b/static/js/ui.js
@@ -227,12 +227,11 @@
       if (done) now = rows.length - 1;
 
       if (now === at) return;
-      if (at >= 0) {
-        rows[at].label.removeAttribute("aria-current");
-        rows[at].fill.classList.remove("is-now");
-      }
+      /* 눈금에는 표시를 따로 안 단다. 지금 절은 이 열에서 유일하게 덜 찬 칸이고,
+         그게 이미 표시다. 이름에는 aria-current 가 붙는다 — 보조기술이 읽는 것도
+         그것이고, 색은 거기서 나온다. */
+      if (at >= 0) rows[at].label.removeAttribute("aria-current");
       rows[now].label.setAttribute("aria-current", "true");
-      rows[now].fill.classList.add("is-now");
       at = now;
     }