castad/playreel
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(web): 무빙포스터 로고를 Playreel과 같은 세로 락업으로

Browse Source 
ADO2 로고 옆에 워드마크를 붙이던 인라인 배치를 Playreel 셸(.pr-wordmark)과
같은 문법으로 바꾼다 — ADO2 로고가 위, 제품 워드마크가 아래, 아래 줄을 로고
폭에 맞춰 락업이 사각형으로 앉는다.

MOVING POSTER 는 PLAYREEL 보다 글자가 길어 같은 18px 를 쓰면 로고 폭을
넘는다. 브라우저에서 재서 16.4px + 자간 0.14em 으로 잡았다.
자간은 마지막 글자 뒤에도 붙으므로 음수 마진으로 걷어내야 오른쪽 끝이 맞는다.

실측(로고 h24 = 162.54px):
  락업 컨테이너 폭 162.54px — 로고와 정확히 일치
  워드마크 잉크 폭 162.34px — 오른쪽 끝 오차 0.2px
  (참고: Playreel 자체 워드마크는 같은 기준에서 2.75px 어긋나 있다)
  390px 모바일 행: 헤더 71.4px, 메뉴 가로 스크롤 유지, 잘림 없음

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-09-10 12:04:55 +09:00
parent d50dc52c39
commit fb9c84aa62
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app/(ado2)/layout.tsx
View File

@ -14,9 +14,9 @@ export default function Ado2Layout({ children }: { children: React.ReactNode })
<>
<aside className="sidebar">
<div className="sidebar-logo">
<Link href="/" style={{ color: "var(--color-text-white)", display: "inline-flex", alignItems: "baseline", gap: 8, textDecoration: "none" }}>
<Ado2Logo height={20} />
<span className="sidebar-product">MOVING POSTER</span>
<Link href="/" className="mp-wordmark">
<Ado2Logo height={24} />
<span className="mp-mark">MOVING POSTER</span>
</Link>
</div>
<nav className="sidebar-menu">

14
frontend/app/globals.css
View File

@ -419,6 +419,19 @@ body { margin: 0; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em;
.note a { color: var(--color-mint); }
.sidebar-product { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--color-mint); white-space: nowrap; }
/* ── (ado2) 셸 워드마크 — Playreel 락업(.pr-wordmark)과 같은 문법 ──
ADO2 로고 위 · 제품 워드마크 아래. 아래 줄을 로고 폭에 맞춰 락업이 사각형으로 앉는다.
로고 폭은 height × 149/22 이므로 h24 = 162.5px. MOVING POSTER 는 PLAYREEL 보다
글자가 길어 자간·크기를 그 폭에 맞게 따로 잡았다(실측으로 맞춤). */
.mp-wordmark { display: inline-flex; flex-direction: column; gap: 6px; text-decoration: none; align-items: flex-start; }
.mp-wordmark svg { color: var(--color-text-gray-300); }
.mp-mark {
/* 16.4px + 0.14em 에서 글자 잉크 폭이 162.3px — 로고(h24 = 162.5px)와 0.2px 차이다.
자간은 마지막 글자 뒤에도 붙으므로 그만큼 음수 마진으로 걷어내야 오른쪽 끝이 맞는다. */
font-size: 16.4px; font-weight: 800; letter-spacing: 0.14em; margin-right: -0.14em;
color: var(--color-text-white); line-height: 1; white-space: nowrap;
}
.entry-stack { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 560px; margin-top: 1.5rem; }
.entry { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.25rem; position: relative; }
.entry--hot { border-color: var(--color-mint-30); }
@ -471,6 +484,7 @@ body { margin: 0; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em;
.sidebar-menu { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sidebar-menu::-webkit-scrollbar { display: none; }
.sidebar-product { display: none; }
/* 워드마크는 남긴다 — Playreel 셸(.pr-mark)과 같은 처리 */
.playreel-steps { grid-template-columns: repeat(2, 1fr); }
.result-grid { grid-template-columns: 1fr; }
.result-grid .result-video { min-height: 240px; }