헤더: topbar 그리드 복구 및 태블릿 2열 정렬 (v0.2.11)

Made-with: Cursor

assets/built/screen.css

@@ -233,6 +233,12 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
     white-space: nowrap;
 }
 
+.brand--topbar img {
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
 .menu-groups {
     display: block;
 }
@@ -665,7 +671,7 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
 
 .topbar__inner {
     display: grid;
-    grid-template-columns: var(--sidebar-left) minmax(var(--topbar-search-min), min(var(--content-column), 1fr)) var(--sidebar-right);
+    grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right);
     gap: 0;
     align-items: center;
     height: 100%;
@@ -674,6 +680,7 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
 }
 
 .topbar__brand,
+.topbar__search,
 .topbar__actions {
     min-width: 0;
 }
@@ -684,7 +691,6 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
     display: flex;
     align-items: center;
     gap: 12px;
-    overflow: hidden;
 }
 
 .topbar__sidebar-toggle {
@@ -754,7 +760,6 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
     padding: 0 18px;
     height: 100%;
     align-items: center;
-    min-width: 0;
     box-sizing: border-box;
 }
 
@@ -772,7 +777,6 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
 }
 
 .search-trigger {
-    min-width: min(var(--topbar-search-min), 100%);
     cursor: pointer;
     box-shadow: none;
 }
@@ -810,6 +814,12 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
     height: 100%;
 }
 
+@media (min-width: 1024px) {
+    .topbar__search {
+        min-width: min(var(--topbar-search-min), 100%);
+    }
+}
+
 .button,
 .gh-subscribe-form button {
     display: inline-flex;
@@ -1918,12 +1928,18 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
 
 @media (max-width: 1023px) {
     .topbar {
-        grid-template-columns: 1fr;
         padding: 0 14px;
         border-left: 0;
         border-right: 0;
     }
 
+    .topbar__inner {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        width: 100%;
+        max-width: none;
+    }
+
     .topbar__brand,
     .topbar__actions,
     .topbar__search {
@@ -1932,7 +1948,9 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
     }
 
     .topbar__brand {
+        grid-column: 1;
         grid-row: 1;
+        min-width: 0;
     }
 
     .topbar__search {
@@ -1940,10 +1958,14 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
     }
 
     .topbar__actions {
-        position: absolute;
-        right: 14px;
-        top: 50%;
-        transform: translateY(-50%);
+        position: static;
+        grid-column: 2;
+        grid-row: 1;
+        align-self: center;
+        justify-self: end;
+        right: auto;
+        top: auto;
+        transform: none;
         gap: 8px;
     }
 

docs/deploy.md

@@ -1,7 +1,7 @@
 # 배포 가이드
 
 ## 현재 버전
-- `v0.2.10`
+- `v0.2.11`
 
 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.

docs/map.md

@@ -1,7 +1,7 @@
 # 파일-화면 매핑 가이드
 
 ## 현재 버전
-- `v0.2.10`
+- `v0.2.11`
 
 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.2.10`
+- `v0.2.11`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -15,7 +15,8 @@
 - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용
 - `@site.accent_color`가 설정된 경우 `default.hbs`의 body 인라인 변수로 전역 `--accent`/`--accent-strong`를 덮어써 테마 포인트 색상을 동기화함
 - `topbar` 브랜드는 `@site.logo`를 우선 렌더링하고, 로고 미설정 시 `@site.title` 텍스트를 fallback으로 사용함
-- 데스크톱 `topbar__inner` 3열 그리드에서 검색 열은 `--topbar-search-min`(260px) 이상을 유지하고, 검색 트리거는 `min-width: min(--topbar-search-min, 100%)`·라벨 말줄임·단축키 비축소로 좁은 폭에서도 레이아웃이 깨지지 않도록 함. 브랜드 영역은 긴 제목 시 말줄임 처리
+- 데스크톱 `topbar__inner`는 `var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right)` 3열 그리드이며, `1024px` 이상에서만 검색 셀(`.topbar__search`)에 `min-width: min(--topbar-search-min, 100%)`를 적용해 중앙 검색 최소 폭을 완만히 보장함. 검색 트리거는 라벨(`.search-trigger__label`) 말줄임·단축키 `flex-shrink: 0` 유지. 브랜드 텍스트는 말줄임, 로고 이미지는 `max-width: 100%`로 축소
+- `1023px` 이하에서는 `topbar__inner`를 `minmax(0, 1fr) auto` 2열로 바꾸고 검색 열을 숨긴 뒤, 브랜드·액션을 각각 1·2열에 배치함(헤더가 3열 정의만 남는 문제 방지)
 - `home` Hero는 `@site.cover_image`가 있을 때 배경 이미지로 적용하며 오버레이와 텍스트 대비를 함께 조정함
 - 좌측 사이드바 `menu-groups`: Primary는 `Home pages` 아코디언 안에 `{{navigation}}`, Secondary(관리자에 항목이 있을 때만)는 그 아래 `More links` 아코디언 안에 `{{navigation type="secondary"}}`로 동일 마크업(`ul.nav`)을 노출함
 - 상단 사용자 메뉴는 멤버 로그인 시에만 드롭다운 상단에 이름/아바타 행을 노출하며, 서버 렌더링 값으로 초기 표시한 뒤 `/members/api/member/` 재조회로 실시간 동기화하고 아바타 미등록 시 fallback 문자(이름/이메일 첫 글자)를 사용함. 비로그인 시 해당 행은 렌더하지 않음

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## v0.2.11 - 2026-04-17
+- `package.json` 버전을 `0.2.11`로 증가.
+- `assets/built/screen.css`: `topbar__inner` 그리드를 `minmax(0, var(--content-column))` 중앙 열로 복구해 데스크톱 3열 배치를 안정화. `minmax(260px, min(720px, 1fr))`·검색 트리거 강제 `min-width` 제거. 브랜드 `overflow: hidden` 제거 및 로고 `max-width: 100%` 보정. `1023px` 이하에서는 `topbar__inner`를 `minmax(0,1fr) auto` 2열로 두고 검색 숨김 시 액션을 그리드 2열에 배치(절대 위치 제거). `1024px` 이상에서만 `.topbar__search`에 `min-width: min(--topbar-search-min, 100%)` 적용.
+- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.11`로 동기화.
+
 ## v0.2.10 - 2026-04-17
 - `package.json` 버전을 `0.2.10`로 증가.
 - `assets/built/screen.css`: `topbar__inner` 가운데 열을 `minmax(--topbar-search-min, min(--content-column, 1fr))`로 두고 `--topbar-search-min`(260px)을 도입해 좁은 뷰에서 검색 트리거가 과도하게 압축되지 않도록 함. 헤더 브랜드 영역 말줄임·검색 라벨 `.search-trigger__label`·단축키 `flex-shrink: 0` 등 보조 스타일 추가.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "private": true,
   "description": "A Ghost theme inspired by the Thred reference layout.",
   "keywords": [