www

~ Personal site — projects, posts, about. Built with sqzass.

git clone https://github.com/debuman/www.git

commit 228a025383db740cc8734827ffd86995b0f88639
parent d1ebabf7fc74237da8aa33ff206fa84b81464070
Author: sqzer <110329244+sqzer-x@users.noreply.github.com>
Date: Mon, 3 Aug 2026 23:50:10 +0900

Fix paragraph spacing and the brief-tier hero

`.prose p { margin: 0 }` is a class plus a type selector, so it outranked
`.prose > * + *` and killed the gap between every paragraph on the site. Both
rules are now (0,1,0) and source order decides, which is what the cascade is
for. Headings keep their larger top margin because their own rule is still
more specific.

A brief project lives inside the 46rem reading column, and putting the hero
aside in there squeezed the tagline into a narrow gutter — for a project with
no logo, to make room for a square with its own name faintly printed in it.
Brief pages now use the full width and drop the aside.

Diffstat:

static/css/main.css

++++++++++-

1 file changed, 10 insertion(+), 1 deletion(-)

diff --git a/static/css/main.css b/static/css/main.css
@@ -798,6 +798,11 @@ main { display: block; padding-bottom: clamp(4rem, 10vw, 8rem); }
   .hero-aside { display: none; }
 }
 
+/* 브리프는 읽는 폭 안에 산다. 거기에 옆칸까지 넣으면 태그라인이 좁은 기둥으로
+   눌리고, 그 자리를 채우는 것은 로고도 아니고 이름을 흐리게 깐 사각형이다. */
+.project[data-tier="brief"] .hero { grid-template-columns: minmax(0, 1fr); }
+.project[data-tier="brief"] .hero-aside { display: none; }
+
 /* ---------- facts ---------- */
 
 /* 별 개수가 있던 자리. 확인할 수 있는 사실만 들어간다. */
@@ -1003,8 +1008,12 @@ main { display: block; padding-bottom: clamp(4rem, 10vw, 8rem); }
    한 줄이 68rem 이면 눈이 다음 줄의 첫 글자를 못 찾는다. */
 .project .prose, .prose-intro { max-width: 44rem; }
 
+/* 여백은 형제 사이에만 둔다. 초기화를 `.prose p` 같은 타입 셀렉터로 쓰면
+   특정성이 (0,1,1) 이라 (0,1,0) 인 아래 규칙을 이겨 버리고, 문단 사이 여백이
+   통째로 사라진다. 둘 다 (0,1,0) 으로 맞추고 순서로 결정한다. */
+.prose > * { margin: 0; }
 .prose > * + * { margin-top: 1.15rem; }
-.prose p { margin: 0; text-wrap: pretty; }
+.prose p { text-wrap: pretty; }
 
 .prose h2, .prose h3, .prose h4 {
   margin: 2.6rem 0 0;