www.git

www

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

No grey plate under a hovered listing row

Hovering a post in the ledger no longer paints the row. A grey plate makes that
one row look like a different material, and scanning a list drags it from row to
row — one more thing moving in the place you are trying to read. What changes on
hover is what changed before it anyway: the date goes to accent and the title to
full ink. That is now the only thing that changes, which is what this site's own
rule says hover should do.

Three declarations retire with it: the transition that animated the plate, the
radius that rounded it, and the relative position that stacked it.

The horizontal padding and its matching negative margin stay. They were never
about the plate — they make the target wider than the text while leaving the
text where it sits. Keyboard focus falls through to the global focus ring, which
is a clearer signal than a background tint was.

Diffstat:
Mstatic/css/main.css | 18+++++++++++-------
1 file changed, 11 insertion(+), 7 deletion(-)

diff --git a/static/css/main.css b/static/css/main.css
@@ -690,18 +690,22 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
 }
 .ledger-year:first-child { margin-top: 0; }
 
-/* 행 사이에 선이 없다. 간격과 빛이 나눈다. */
+/* 행 사이에 선이 없다. 간격이 나눈다.
+
+   손이 닿아도 바닥이 안 바뀐다. 회색 판이 깔리면 그 행만 다른 재질이 된 것처럼
+   보이고, 목록을 훑는 동안 판이 행에서 행으로 따라다닌다 — 읽는 자리에서
+   움직이는 것이 하나 생기는 셈이다. 이 사이트의 hover 는 색만 바꾼다는 규칙에
+   맞춰, 여기서도 바뀌는 것은 날짜와 제목의 잉크뿐이다.
+
+   가로 패딩과 같은 크기의 음수 마진이 남아 있는 것은 판을 깔기 위해서가 아니라
+   누를 수 있는 자리를 글자 폭보다 넓게 두기 위해서다. 글은 제자리에 선다.
+   키보드 포커스는 전역 :focus-visible 링이 진다. */
 .ledger-link {
-  position: relative; display: grid;
+  display: grid;
   grid-template-columns: clamp(5rem, 11vw, 8rem) minmax(0, 1fr);
   align-items: baseline; gap: clamp(1rem, 2.5vw, 2rem);
   padding: 1.1rem 1rem; margin-inline: -1rem;
-  border-radius: var(--radius);
-  transition: background var(--tr-ink);
 }
-/* 행은 평평한 한 단만 올라온다. 방향성 wash 는 빛의 어휘이고, 이 테마의
-   어휘는 누름이다. */
-.ledger-link:hover, .ledger-link:focus-visible { background: var(--bg-2); }
 
 .ledger-date {
   font-family: var(--mono); font-size: 0.72rem;