www.git

www

~ Personal site — projects, posts, about. Built with sqzass.
git clone https://github.com/debuman/www.git
commit 81189e7b43b4e14ac964740c70f038dfe649d39b
parent 53a51e97f8ed015e7d5ad0e1afc2ef3ab36e50b8
Author: sqzer <110329244+sqzer-x@users.noreply.github.com>
Date: Wed, 5 Aug 2026 18:09:56 +0900

Three corrections to the card I just shipped

A review of that commit caught three things, all mine.

The comment justifying text-wrap: pretty said balance forces a title onto one
line. That is not true — measured on a 39-character title, both give three lines
and balance only evens their lengths. Every other title in this sheet is balance;
I had made an exception for a reason that does not exist, so it is balance again
and the comment now records what was actually measured.

The Read post underline went to accent on hover, in a card whose own comment two
rules above says the accent here belongs to the date and nothing else. Two
accents in one box. The underline steps one rung along the hairline ladder now.

The label's padding was capped at 3.2rem, which it reaches at 1507px — long
after the card stops growing at 1349. Between those two widths the box stood
still while its padding kept expanding. Capped at 2.4rem, so both stop together.

And one the review did not catch but the widening caused: .ledger-title had no
maximum, which was fine in a 950px reading measure and is not fine now that the
home page's writing room is 1235 and its body column runs 1080. Capped at 42ch,
the same treatment the description already had at 58ch.

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

diff --git a/static/css/main.css b/static/css/main.css
@@ -721,6 +721,9 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
   font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
   font-weight: var(--w-item); letter-spacing: var(--track-set); line-height: 1.25;
   color: var(--ink-2); transition: color var(--tr-ink); text-wrap: balance;
+  /* 홈의 글 갈래가 넓은 방으로 옮겨 가면서 이 열이 1080px 까지 열렸다. 제목은
+     한 줄로 읽는 물건이라 폭에 상한이 필요하다 — 설명(58ch)에는 이미 있었다. */
+  max-width: 42ch;
 }
 .ledger-link:hover .ledger-title { color: var(--ink); }
 .ledger-desc {
@@ -776,7 +779,9 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
 .feature-label {
   display: flex; flex-direction: column; justify-content: center;
   gap: 1.15rem; min-width: 0;
-  padding: clamp(1.5rem, 3.4vw, 3.2rem);
+  /* 상한은 카드가 자라기를 멈추는 폭(.wrap 이 71rem 에 닿는 1349px)에서 함께
+     닿는다. 더 늦게 잡으면 상자는 그대로인데 여백만 계속 자란다. */
+  padding: clamp(1.5rem, 3.4vw, 2.4rem);
 }
 .feature-date {
   font-family: var(--mono); font-size: 0.7rem;
@@ -789,9 +794,10 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
   font-size: clamp(1.4rem, 1.15rem + 1.35vw, 2.35rem);
   font-weight: var(--w-section); letter-spacing: var(--track-air); line-height: 1.2;
   color: var(--ink-2); transition: color var(--tr-ink);
-  /* balance 가 아니라 pretty 다. balance 는 줄 수를 최소로 맞추려 해서 제목이
-     한 줄에 붙는데, 이 덩이의 무게는 제목이 두 줄로 앉을 때 나온다. */
-  text-wrap: pretty;
+  /* 이 시트의 모든 제목이 balance 다. 한때 여기만 pretty 로 바꿔 두고 "balance 는
+     제목을 한 줄로 붙인다"고 적었는데, 재 보니 39자 제목에서 둘 다 세 줄이고
+     balance 쪽이 줄 길이만 고르게 맞춘다. 틀린 이유로 예외를 만들 뻔했다. */
+  text-wrap: balance;
 }
 .feature:hover .feature-title { color: var(--ink); }
 .feature-desc { margin: 0; max-width: 38ch; font-size: 0.96rem; color: var(--ink-3); text-wrap: pretty; }
@@ -806,7 +812,9 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
   border-bottom: 1px solid var(--rule-2);
   transition: color var(--tr-ink), border-color var(--tr-ink);
 }
-.feature:hover .feature-cta { color: var(--ink-2); border-bottom-color: var(--accent); }
+/* 밑줄은 잉크 사다리에서 한 단만 오른다. 액센트는 이 카드에 하나뿐이고 날짜가
+   그걸 갖는다 — 위 규칙에 그렇게 적어 놓고 여기서 두 번째를 켰었다. */
+.feature:hover .feature-cta { color: var(--ink-2); border-bottom-color: var(--rule-3); }
 
 /* 좁아지면 그림이 위로 올라간다. 옆으로 두면 두 칸 다 못 쓸 만큼 좁아진다. */
 @media (max-width: 46rem) {