diff --git a/static/css/main.css b/static/css/main.css
@@ -90,7 +90,7 @@
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--radius: 2px;
- --masthead-h: 4.75rem;
+ --masthead-h: 3.5rem; /* sqzass 문서와 같은 높이. 내용이 아니라 크롬이라 얇아야 한다 */
--gutter: clamp(1.25rem, 5vw, 3rem);
--wide: 71rem;
--read: 44rem;
@@ -306,7 +306,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
margin: 0;
font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
font-weight: 230;
- letter-spacing: 0.012em;
+ letter-spacing: var(--track-air);
line-height: 1.14;
text-wrap: balance;
}
@@ -349,7 +349,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
.room-head h2 {
margin: 0;
font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
- font-weight: 300; letter-spacing: 0.02em; line-height: 1.2;
+ font-weight: var(--w-section); letter-spacing: var(--track-air); line-height: 1.2;
}
.room-head-sub {
margin: -0.75rem auto clamp(1.75rem, 4vw, 2.5rem);
@@ -379,7 +379,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
.statement {
margin: 0; max-width: 20ch;
font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
- font-weight: 250; letter-spacing: 0.01em; line-height: 1.1;
+ font-weight: 250; letter-spacing: var(--track-air); line-height: 1.1;
text-wrap: balance;
}
@@ -460,7 +460,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
.frame-title {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
- font-size: 1.25rem; font-weight: 350; letter-spacing: 0.01em;
+ font-size: 1.25rem; font-weight: var(--w-item); letter-spacing: var(--track-set);
}
.frame-title a { transition: color var(--tr-ink); }
.frame:hover .frame-title a { color: var(--accent); }
@@ -540,7 +540,7 @@ main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
.tile-title {
display: flex; align-items: center; justify-content: center; gap: 0.45rem;
- margin: 0; font-size: 1.05rem; font-weight: 350; letter-spacing: 0.012em;
+ margin: 0; font-size: 1.05rem; font-weight: var(--w-item); letter-spacing: var(--track-set);
color: var(--ink-2); transition: color var(--tr-ink);
}
.tile:hover .tile-title { color: var(--ink); }
@@ -635,7 +635,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
.ledger-title {
display: block;
font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
- font-weight: 300; letter-spacing: 0.012em; line-height: 1.25;
+ 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;
}
.ledger-link:hover .ledger-title { color: var(--ink); }
@@ -659,7 +659,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
.feature-title {
margin: 0.8rem auto 0; max-width: 22ch;
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
- font-weight: 280; letter-spacing: 0.012em; line-height: 1.18;
+ font-weight: var(--w-section); letter-spacing: var(--track-air); line-height: 1.18;
transition: color var(--tr-ink); text-wrap: balance;
}
.feature-desc { margin: 0.7rem auto 0; max-width: 46ch; color: var(--ink-3); }
@@ -724,7 +724,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
.hero-name {
display: flex; align-items: center; gap: 0.6rem; margin: 0;
font-size: clamp(2.6rem, 1.9rem + 2.6vw, 3.8rem);
- font-weight: 250; letter-spacing: 0.01em; line-height: 1.05;
+ font-weight: var(--w-display); letter-spacing: var(--track-air); line-height: 1.05;
}
.hero-name .chip-mark { width: 1.05em; height: 1.05em; }
@@ -781,7 +781,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
.fact:first-child { border-left: 0; }
.fact-value {
font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
- font-weight: 250; letter-spacing: 0.005em; line-height: 1;
+ font-weight: var(--w-display); letter-spacing: 0.005em; line-height: 1;
font-variant-numeric: tabular-nums;
}
.fact-label {
@@ -796,7 +796,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
.block-head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.block-title {
margin: 0; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
- font-weight: 280; letter-spacing: 0.012em; text-wrap: balance;
+ font-weight: var(--w-section); letter-spacing: var(--track-air); text-wrap: balance;
}
.block-intro { margin: 0.8rem auto 0; max-width: 56ch; color: var(--ink-3); }
@@ -828,7 +828,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
transition: color var(--tr-ink);
}
.cell:hover .cell-index { color: var(--accent); }
-.cell-title { margin: 0; font-size: 1rem; font-weight: 400; letter-spacing: 0.012em; }
+.cell-title { margin: 0; font-size: 1rem; font-weight: var(--w-label); letter-spacing: var(--track-set); }
.cell-desc { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--ink-3); text-wrap: pretty; }
/* ---------- terminal ---------- */
@@ -870,7 +870,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
.cta-inner { max-width: 46ch; margin-inline: auto; }
.cta-title {
margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
- font-weight: 250; letter-spacing: 0.012em; text-wrap: balance;
+ font-weight: var(--w-display); letter-spacing: var(--track-air); text-wrap: balance;
}
.cta-text { margin: 0.9rem 0 0; color: var(--ink-3); }
@@ -909,7 +909,7 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4);
margin-bottom: 0.35rem;
}
-.pager-title { display: block; font-size: 1rem; font-weight: 300; color: var(--ink-2); transition: color var(--tr-ink); }
+.pager-title { display: block; font-size: 1rem; font-weight: var(--w-item); color: var(--ink-2); transition: color var(--tr-ink); }
.pager-link:hover .pager-title { color: var(--ink); }
@media (max-width: 40rem) { .pager { flex-direction: column; } }
@@ -1043,12 +1043,16 @@ html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none;
}
.colophon-nav a:hover { color: var(--ink-2); }
/* 갈래 링크와 소셜은 다른 줄에 선다 — 안을 도는 것과 밖으로 나가는 것이다. */
-.colophon-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; flex-basis: 100%; }
+.colophon-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; flex-basis: 100%; }
+/* 아이콘만 남긴다. GitHub 와 Instagram 은 마크만으로 읽히는 몇 안 되는 표지라
+ 낱말이 하는 일이 없다 — 이름은 aria-label 이 진다. */
.colophon-social a {
- display: inline-flex; align-items: center; gap: 0.45rem;
- font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
- color: var(--ink-3); transition: color var(--tr-ink);
+ display: inline-flex; align-items: center; justify-content: center;
+ width: 1.9rem; height: 1.9rem;
+ font-size: 1rem; color: var(--ink-3);
+ transition: color var(--tr-ink), transform var(--tr-ink);
}
+.colophon-social a:hover { transform: scale(0.94); }
.colophon-social a:hover { color: var(--accent); }
.colophon-social svg { flex: none; }
@@ -1071,7 +1075,6 @@ html[lang="ko"] .prose th,
html[lang="ko"] .crumbs,
html[lang="ko"] .palette-crumb,
html[lang="ko"] .colophon-nav a,
-html[lang="ko"] .colophon-social a,
html[lang="ko"] .colophon-note,
html[lang="ko"] .nav a,
html[lang="ko"] .chip,
@@ -1087,19 +1090,21 @@ html[lang="ko"] .tile-meta {
text-transform: none;
}
-/* 초경량은 한글에서도 나오지만, 아주 큰 크기에서만 버틴다. 본문 가까운
- 크기에서는 획이 끊어져 보이므로 한 단계 올린다. */
-html[lang="ko"] .statement { font-weight: 300; }
-html[lang="ko"] .page-title,
-html[lang="ko"] .hero-name,
-html[lang="ko"] .cta-title,
-html[lang="ko"] .fact-value { font-weight: 300; }
-html[lang="ko"] .room-head h2,
-html[lang="ko"] .block-title,
-html[lang="ko"] .feature-title,
-html[lang="ko"] .ledger-title { font-weight: 350; }
-html[lang="ko"] .frame-title,
-html[lang="ko"] .tile-title { font-weight: 400; }
+/* 초경량은 한글에서도 나오지만 아주 큰 크기에서만 버틴다. 한글은 같은 굵기에서
+ 획이 훨씬 많아 라틴보다 먼저 뭉개지고, 작아지면 획이 끊어져 보인다.
+ 사다리 전체를 한 단씩 올린다 — 선택자마다 예외를 적으면 라틴 쪽 사다리를
+ 고칠 때 이쪽이 조용히 어긋난다. */
+html[lang="ko"] {
+ --w-display: 300;
+ --w-section: 350;
+ --w-item: 400;
+ --w-label: 500;
+ /* 자간도 여기서 끈다. letter-spacing 은 한글에서 음절 블록 사이를 벌려
+ 한 낱말이 여러 낱말로 보이게 만든다 — 라틴에서 숨을 주는 그 값이
+ 한글에서는 정확히 반대로 작동한다. */
+ --track-air: 0;
+ --track-set: 0;
+}
/* 숫자와 날짜는 한국어에서도 mono 다. 숫자에는 위 문제가 없고 자릿수가 맞아야
목록이 줄을 이룬다. */
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
@@ -24,8 +24,8 @@
{#- rel="me" 는 이 계정들이 같은 사람이라는 선언이다. Mastodon 류가 이걸 읽고,
읽지 않는 곳에서도 틀린 말이 아니다. #}
<nav class="colophon-social" aria-label="{{ t("elsewhere") }}">
- <a href="https://github.com/sqzer-x" rel="me" target="_blank">{{ i_github() }}<span>GitHub</span></a>
- <a href="https://www.instagram.com/sqzer_x" rel="me" target="_blank">{{ i_instagram() }}<span>Instagram</span></a>
+ <a href="https://github.com/sqzer-x" rel="me" target="_blank" aria-label="GitHub" data-tooltip="GitHub">{{ i_github() }}</a>
+ <a href="https://www.instagram.com/sqzer_x" rel="me" target="_blank" aria-label="Instagram" data-tooltip="Instagram">{{ i_instagram() }}</a>
</nav>
<p class="colophon-note">
|