zenn/ghost.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.24 메인 피드 스타일 정리

Browse Source
This commit is contained in:
zenn
2026-04-14 10:59:43 +09:00
parent 615dd8968d
commit 21897b8fd3
11 changed files with 170 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
assets/built/screen.css
View File

@@ -296,10 +296,7 @@ body.left-sidebar-collapsed .sidebar--left {
.menu-link__marker {
position: relative;
flex: 0 0 auto;
width: 6px;
height: 18px;
border-radius: 999px;
background: color-mix(in srgb, var(--border) 92%, #ffffff 8%);
background: color-mix(in srgb, var(--border) 88%, #ffffff 12%);
transform-origin: center;
transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
}
@@ -319,8 +316,8 @@ body.left-sidebar-collapsed .sidebar--left {
.menu-group__trigger:hover .menu-link__marker,
.menu-group__trigger[aria-expanded="true"] .menu-link__marker,
.menu-group__link:hover .menu-link__marker {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
border-radius: 999px;
background: #cfc7be;
transform: translateX(1px);
@@ -776,21 +773,30 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
}
.hero {
display: grid;
justify-items: center;
gap: 16px;
padding: 42px 20px 28px;
padding: 28px 0 18px;
text-align: center;
border-bottom: 1px solid var(--border);
}
.home-hero__inner {
max-width: 720px;
margin: 0 auto;
}
.home-hero__content {
display: grid;
justify-items: center;
gap: 14px;
padding: 20px 18px 10px;
}
.hero__title {
max-width: 680px;
max-width: 760px;
margin: 0;
font-size: clamp(2rem, 3vw, 3.1rem);
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 800;
font-size: clamp(1.85rem, 2.4vw, 2.55rem);
line-height: 1.12;
letter-spacing: -0.035em;
font-weight: 760;
}
.hero__title em {
@@ -800,11 +806,11 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.hero__description,
.section-description {
max-width: 620px;
max-width: 520px;
margin: 0;
color: var(--text-soft);
font-size: 15px;
line-height: 1.62;
line-height: 1.55;
}
.subscribe-form,
@@ -831,10 +837,26 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.subscribe-form--hero {
justify-content: center;
width: min(100%, 420px);
}
.subscribe-form--hero .gh-subscribe-form {
justify-content: center;
}
.subscribe-form--hero .gh-subscribe-input {
min-height: 44px;
border-radius: 12px;
background: var(--surface);
}
.subscribe-form--hero button {
min-height: 44px;
border-radius: 12px;
}
.stack-section {
padding: 18px 0;
padding: 18px 0 0;
}
.section-header {
@@ -864,30 +886,36 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
align-items: flex-end;
justify-content: space-between;
gap: 14px;
padding-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.tab-row {
display: flex;
flex-wrap: wrap;
gap: 22px;
gap: 6px;
}
.tab-row__button {
padding: 10px 0;
padding: 9px 14px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
border-radius: 14px;
background: transparent;
color: var(--text-soft);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.22s ease, color 0.22s ease;
}
.tab-row__button:hover {
background: var(--surface-muted);
color: var(--text);
}
.tab-row__button.is-active {
color: var(--text);
border-color: var(--accent);
background: var(--surface-muted);
}
.view-toggle {
@@ -952,18 +980,19 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.post-card {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 16px;
padding: 16px 0;
grid-template-columns: 112px minmax(0, 1fr);
gap: 18px;
padding: 18px 0;
border-bottom: 1px solid var(--border);
align-items: start;
}
.post-card__media img,
.post-card__media-fallback {
width: 96px;
height: 72px;
width: 112px;
height: 112px;
object-fit: cover;
border-radius: 10px;
border-radius: 14px;
background: var(--surface-muted);
}
@@ -979,8 +1008,8 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.post-card__content h2 {
margin: 0 0 6px;
font-size: 15px;
line-height: 1.28;
letter-spacing: -0.01em;
line-height: 1.32;
letter-spacing: -0.015em;
}
.post-card__content h2 a {
@@ -999,7 +1028,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.post-card__content p {
margin: 0 0 8px;
color: var(--text-soft);
font-size: 14px;
font-size: 13px;
line-height: 1.45;
}
@@ -1015,8 +1044,8 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.meta-pill {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
padding: 2px 8px;
border-radius: 6px;
background: color-mix(in srgb, var(--tag-accent, var(--surface-muted)) 12%, var(--surface));
color: var(--text);
font-size: 11px;
@@ -1045,16 +1074,33 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
color: var(--text-dim);
}
.meta-item--access {
font-weight: 600;
}
.category-overview {
display: grid;
}
.category-overview__row {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: 24px;
padding: 20px 0;
border-bottom: 1px solid var(--border);
position: relative;
padding-left: 16px;
}
.category-overview__row::before {
content: "";
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
width: 3px;
border-radius: 999px;
background: var(--tag-accent, var(--accent));
}
.category-overview__row h2 {
@@ -1069,9 +1115,36 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.category-overview__row ol {
margin: 0;
padding-left: 18px;
padding-left: 0;
display: grid;
gap: 10px;
gap: 12px;
}
.category-overview__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-soft);
font-size: 13px;
font-weight: 700;
}
.category-overview__posts a {
display: block;
font-size: 14px;
line-height: 1.45;
color: var(--text-soft);
}
.category-overview__posts a::before {
content: attr(data-number);
color: var(--text);
font-weight: 700;
}
.category-overview__posts a:hover,
.category-overview__link:hover {
color: var(--text);
}
.site-icon,
@@ -1590,6 +1663,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
.tab-row-wrap {
align-items: center;
flex-wrap: wrap;
}
}
@@ -1673,6 +1747,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
gap: 10px;
}
.tab-row {
width: 100%;
}
.view-toggle {
padding: 8px;
}

2
assets/built/tailwind.css
View File

File diff suppressed because one or more lines are too long

3
docs/history.md
View File

@@ -1,5 +1,8 @@
# 의사결정 이력
## 2026-04-14 v0.1.24
홈 메인 영역은 기존 단순 카드 레이아웃에서 벗어나 원본의 정보 밀도와 간격을 더 직접적으로 따르기로 했다. 다만 좌측 네비게이션과 마찬가지로 즉시 전환보다 현재 선호하는 부드러운 동작과 기존 Ghost 헬퍼 호환성을 유지해야 했기 때문에, 전체 구조를 새로 갈아엎기보다 `hero`, `tabbed-feed`, `post-items` partial 단위로 시각 표현만 단계적으로 끌어올리는 방향을 선택했다.
## 2026-04-14 v0.1.23
좌측 네비게이션은 원본의 Tailwind/Alpine 구조를 더 직접적으로 따르되, 기존 구현에서 선호한 열고 닫히는 애니메이션은 유지하기로 했다. 또한 `/tags/`, `/authors/`는 Ghost 기본 라우트가 아니므로, 페이지 슬러그 방식뿐 아니라 `routes.yaml` 커스텀 라우트 방식도 함께 지원할 수 있도록 별도 인덱스 템플릿과 예시 라우트 파일을 추가했다.

6
docs/map.md
View File

@@ -1,7 +1,7 @@
# 파일-화면 매핑 가이드
## 현재 버전
- `v0.1.23`
- `v0.1.24`
## 공통 레이아웃
- [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸과 공통 자산 로드
@@ -17,8 +17,8 @@
- [home.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/home.hbs): 메인 홈
- [index.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/index.hbs): 기본 목록 진입
- [partials/home/hero.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/hero.hbs): 홈 히어로 영역
- [partials/home/tabbed-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/tabbed-feed.hbs): Latest/Featured/Updated/Categories 탭
- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): 리스트형 포스트 카드
- [partials/home/tabbed-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/tabbed-feed.hbs): Latest/Featured/Updated/Categories 탭과 카테고리 개요 행
- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): 리스트형 포스트 카드, 메타 정보, 멤버 전용 표시
## 상세 및 아카이브
- [post.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/post.hbs): 포스트 상세

4
docs/spec.md
View File

@@ -1,7 +1,7 @@
# 기술 명세
## 현재 버전
- `v0.1.23`
- `v0.1.24`
## 테마 개요
- Ghost `v5` 대응 커스텀 테마
@@ -16,11 +16,13 @@
- Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드
- Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
- 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
- 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용
- 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용
- `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용
- `page-tags.hbs`, `page-authors.hbs`는 각각 `slug=tags`, `slug=authors` 페이지에 연결 가능
- 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준
- `tags-index.hbs`, `authors-index.hbs`는 `routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능
- 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
## 주요 스타일 방향
- 밝은 크림톤 배경 + 오렌지 포인트

7
docs/update.md
View File

@@ -1,5 +1,12 @@
# 업데이트 로그
## v0.1.24 - 2026-04-14
- 좌측 네비게이션 마커 hover 형태를 카테고리 마커와 동일하게 수정.
- 홈 히어로 문구 강조 및 구독 폼 레이아웃 재정리.
- 홈 피드 탭 버튼 스타일을 원본 기준으로 재정리.
- 리스트형 포스트 카드 썸네일 비율, 메타 배지, 간격 수정.
- 카테고리 탭 목록 행 스타일 및 순번 링크 표현 수정.
## v0.1.23 - 2026-04-14
- 좌측 네비게이션 Tailwind/Alpine 구조로 재정리.
- 네비게이션 아코디언 슬라이드 애니메이션 유지.

2
package.json
View File

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

24
partials/home/hero.hbs
View File

@@ -1,11 +1,15 @@
<section class="hero">
<h1 class="hero__title">Ideas <em>published</em> for meaningful conversation, discussed and shaped by the community</h1>
{{#if @site.description}}
<p class="hero__description">{{@site.description}}</p>
{{/if}}
{{subscribe_form
placeholder="Your email"
button_class="button button--light"
form_class="subscribe-form subscribe-form--hero"
}}
<section class="hero home-hero" data-home-hero>
<div class="home-hero__inner">
<div class="home-hero__content">
<h1 class="hero__title">Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community</h1>
{{#if @site.description}}
<p class="hero__description">{{@site.description}}</p>
{{/if}}
{{subscribe_form
placeholder="Your email"
button_class="button button--light button--subscribe"
form_class="subscribe-form subscribe-form--hero"
}}
</div>
</div>
</section>

20
partials/home/tabbed-feed.hbs
View File

@@ -1,12 +1,12 @@
<section class="stack-section" data-tabs>
<div class="tab-row-wrap">
<div class="tab-row" role="tablist" aria-label="Homepage sections">
<section class="stack-section home-feed" data-tabs data-home-content>
<div class="tab-row-wrap home-feed__toolbar">
<div class="tab-row home-feed__tabs" role="tablist" aria-label="Homepage sections">
<button class="tab-row__button is-active" type="button" data-tab-trigger="latest">Latest</button>
<button class="tab-row__button" type="button" data-tab-trigger="featured">Featured</button>
<button class="tab-row__button" type="button" data-tab-trigger="updated">Updated</button>
<button class="tab-row__button" type="button" data-tab-trigger="categories">Categories</button>
</div>
<button class="view-toggle" type="button" aria-label="Change view">
<button class="view-toggle home-feed__view-toggle" type="button" aria-label="Change view">
<span class="view-toggle__grid"></span>
<span class="view-toggle__chevron">⌄</span>
</button>
@@ -30,22 +30,22 @@
<div class="tab-panel" data-tab-panel="categories">
<div class="category-overview">
{{#get "tags" limit="4" include="count.posts"}}
{{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
{{#foreach tags}}
<section class="category-overview__row">
<div>
<section class="category-overview__row"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
<div class="category-overview__intro">
<h2>{{name}}</h2>
{{#if description}}
<p>{{description}}</p>
{{else}}
<p>{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
{{/if}}
<a href="{{url}}">View all ↗</a>
<a class="category-overview__link" href="{{url}}">View all ↗</a>
</div>
<ol>
<ol class="category-overview__posts">
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
{{#foreach posts}}
<li><a href="{{url}}">{{title}}</a></li>
<li><a href="{{url}}" data-number="{{@number}}. ">{{title}}</a></li>
{{/foreach}}
{{/get}}
</ol>

12
partials/lists/post-items.hbs
View File

@@ -1,6 +1,6 @@
<div class="post-list">
<div class="post-list home-post-list">
{{#foreach posts}}
<article class="post-card">
<article class="post-card{{#if featured}} is-featured{{/if}}">
<a class="post-card__media" href="{{url}}">
{{#if feature_image}}
<img src="{{img_url feature_image size="s"}}" alt="{{title}}">
@@ -9,7 +9,7 @@
{{/if}}
</a>
<div class="post-card__content">
<h2>
<h2 class="post-card__title">
<a href="{{url}}">
{{#if featured}}
<img class="post-card__featured-icon" src="{{asset "icons/bolt.svg"}}" alt="">
@@ -17,7 +17,7 @@
<span>{{title}}</span>
</a>
</h2>
{{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}}
{{#if excerpt}}<p class="post-card__excerpt">{{excerpt words="24"}}</p>{{/if}}
<div class="post-card__meta">
<time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
{{#primary_author}}
@@ -28,6 +28,10 @@
<span class="meta-divider">/</span>
<a class="meta-pill" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>{{name}}</a>
{{/primary_tag}}
{{#unless access}}
<span class="meta-divider">/</span>
<span class="meta-item meta-item--access">Members</span>
{{/unless}}
<span class="meta-divider">/</span>
<span class="meta-item meta-item--comments">
<span class="meta-item__icon">◌</span>

8
partials/site/sidebar-left.hbs
View File

@@ -4,7 +4,7 @@
<ul class="menu-groups__list flex flex-col gap-0.75 text-typ text-sm">
<li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': homePagesOpen }" data-label="Home pages" data-slug="home-pages" data-length="10" aria-haspopup="true">
<a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="homePagesOpen = !homePagesOpen" :aria-expanded="homePagesOpen.toString()" aria-haspopup="true">
<span class="menu-link__marker"></span>
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
<span class="menu-link__label">Home pages</span>
</a>
<button class="menu-group__toggle relative cursor-pointer p-2 rounded-r-theme" type="button" title="Menu toggle" aria-label="Toggle submenu" aria-controls="home-pages" :aria-expanded="homePagesOpen.toString()" @click="homePagesOpen = !homePagesOpen" aria-haspopup="true">
@@ -20,21 +20,21 @@
<li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Tags" data-slug="tags" data-length="4">
<a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/tags/">
<span class="menu-link__marker"></span>
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
<span class="menu-link__label">Tags</span>
</a>
</li>
<li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Authors" data-slug="authors" data-length="7">
<a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/authors/">
<span class="menu-link__marker"></span>
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
<span class="menu-link__label">Authors</span>
</a>
</li>
<li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': membersOpen }" data-label="Members" data-slug="members" data-length="7" aria-haspopup="true">
<a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="membersOpen = !membersOpen" :aria-expanded="membersOpen.toString()" aria-haspopup="true">
<span class="menu-link__marker"></span>
<span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
<span class="menu-link__label">Members</span>
</a>
<button class="menu-group__toggle relative cursor-pointer p-2 rounded-r-theme" type="button" title="Menu toggle" aria-label="Toggle submenu" aria-controls="members" :aria-expanded="membersOpen.toString()" @click="membersOpen = !membersOpen" aria-haspopup="true">