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

공개 화면 테마와 패널 구조 보정

Browse Source
This commit is contained in:
zenn
2026-04-29 15:01:59 +09:00
parent 37f6c38caa
commit a3acd9320a
14 changed files with 390 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
assets/css/main.css
View File

@@ -3,29 +3,67 @@
@tailwind utilities;
@layer base {
:root {
--site-bg: #fbfbfa;
--site-panel: #f6f6f5;
--site-panel-strong: #ffffff;
--site-text: #111111;
--site-muted: #454545;
--site-soft: #6f7480;
--site-line: #e2e2e0;
--site-input: #f2f2f1;
--site-accent: #ff4f2e;
--site-accent-text: #ffffff;
--site-invert: #111111;
--site-invert-text: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--site-bg: #050505;
--site-panel: #080808;
--site-panel-strong: #0d0d0d;
--site-text: #f4f4f2;
--site-muted: #c7c7c2;
--site-soft: #8b8e96;
--site-line: #252525;
--site-input: #171717;
--site-accent: #ff4f2e;
--site-accent-text: #ffffff;
--site-invert: #f4f4f2;
--site-invert-text: #111111;
}
}
html {
font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
color: #1f2328;
background: #f7f7f4;
color: var(--site-text);
background: var(--site-bg);
}
body {
min-width: 320px;
margin: 0;
background: var(--site-bg);
}
}
@layer components {
.site-shell {
@apply min-h-screen bg-surface text-ink;
min-height: 100vh;
color: var(--site-text);
background: var(--site-bg);
}
.site-content-grid {
@apply mx-auto grid max-w-[1294px] grid-cols-1 px-4 lg:grid-cols-[287px_minmax(0,720px)_287px] lg:px-0;
min-height: calc(100vh - 57px);
background: var(--site-bg);
}
.site-section {
@apply border-b border-line bg-paper;
border-bottom: 1px solid var(--site-line);
background: var(--site-bg);
}
.site-section-header {
@@ -37,6 +75,55 @@
}
.post-prose {
@apply max-w-none text-[17px] leading-8 text-ink;
@apply max-w-none text-[17px] leading-8;
color: var(--site-text);
}
.site-header {
height: 57px;
border-bottom: 1px solid var(--site-line);
background: var(--site-panel);
color: var(--site-text);
}
.site-main {
min-height: calc(100vh - 57px);
border-left: 1px solid var(--site-line);
border-right: 1px solid var(--site-line);
background: var(--site-bg);
}
.site-sidebar {
min-height: calc(100vh - 57px);
background: var(--site-panel);
color: var(--site-text);
}
.site-sidebar-section {
border-bottom: 1px solid var(--site-line);
}
.site-muted {
color: var(--site-muted);
}
.site-soft {
color: var(--site-soft);
}
.site-input {
border: 1px solid var(--site-line);
background: var(--site-input);
color: var(--site-text);
}
.site-button {
background: var(--site-invert);
color: var(--site-invert-text);
}
.site-accent-button {
background: var(--site-accent);
color: var(--site-accent-text);
}
}

114
components/site/LeftSidebar.vue
View File

@@ -1,23 +1,105 @@
<template>
<aside class="left-sidebar hidden w-[287px] lg:block">
<div class="left-sidebar__block py-3 pl-0 pr-3">
<p class="left-sidebar__eyebrow text-xs font-semibold uppercase text-muted">
Categories
</p>
<nav class="left-sidebar__nav mt-4 grid gap-2 text-sm">
<NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/dev">
DEV
<aside class="left-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
<div class="left-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
<div class="left-sidebar__block site-sidebar-section py-3 pl-0 pr-3">
<nav class="left-sidebar__nav grid gap-1 text-[15px]">
<NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/">
<span>Home pages</span>
<span>⌄</span>
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/tags/note">
Tags
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/about">
Authors
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/posts/hello-sori-studio">
Style
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/posts/custom-writing-tool">
<span>Post types</span>
<span>⌄</span>
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/pages/contact">
<span>Members</span>
<span>⌄</span>
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/projects">
Landing pages
</NuxtLink>
</nav>
</div>
<div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
<div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
<span>Categories</span>
<span>⌃</span>
</div>
<div class="left-sidebar__category-grid mt-4 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/books">
<span class="h-4 w-1 rounded-full bg-orange-500" /> Books
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/business">
<span class="h-4 w-1 rounded-full bg-indigo-500" /> Business
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/dev">
<span class="h-4 w-1 rounded-full bg-cyan-500" /> Tech
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/science">
<span class="h-4 w-1 rounded-full bg-teal-400" /> Science
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/design">
<span class="h-4 w-1 rounded-full bg-fuchsia-500" /> Design
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/music">
<span class="h-4 w-1 rounded-full bg-pink-500" /> Music
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/health">
<span class="h-4 w-1 rounded-full bg-green-500" /> Health
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/play">
<span class="h-4 w-1 rounded-full bg-violet-500" /> Gaming
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/travel">
<span class="h-4 w-1 rounded-full bg-purple-500" /> Travel
</NuxtLink>
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/diy">
<span class="h-4 w-1 rounded-full bg-yellow-400" /> DIY
</NuxtLink>
</div>
</div>
<div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
<div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
<span>Authors</span>
<span>⌃</span>
</div>
<div class="left-sidebar__authors mt-4 grid gap-4 text-sm">
<div class="left-sidebar__author flex items-center gap-3">
<span class="h-8 w-8 rounded-full bg-[#e7c49d]" />
<span><strong class="block">sori</strong><span class="site-soft">Editor</span></span>
</div>
<div class="left-sidebar__author flex items-center gap-3">
<span class="h-8 w-8 rounded-full bg-[#98b7d5]" />
<span><strong class="block">zenn</strong><span class="site-soft">Writer</span></span>
</div>
</div>
</div>
</div>
<footer class="left-sidebar__footer flex items-center justify-between px-1 py-4 text-xs">
<nav class="left-sidebar__footer-nav flex gap-4">
<NuxtLink to="/pages/links">
Portal
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/note">
NOTE
<NuxtLink to="/pages/about">
Docs
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/review">
REVIEW
</NuxtLink>
<NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/play">
PLAY
<NuxtLink to="/pages/projects">
Projects
</NuxtLink>
</nav>
</div>
<span class="left-sidebar__theme-dot">☾</span>
</footer>
</aside>
</template>

27
components/site/PostCard.vue
View File

@@ -9,18 +9,21 @@ defineProps({
<template>
<article class="post-card site-section">
<div class="post-card__body site-section-body">
<p class="post-card__meta text-xs font-semibold uppercase text-muted">
{{ post.tag }} · {{ post.publishedAt }}
</p>
<h2 class="post-card__title mt-3 text-2xl font-semibold leading-tight">
<NuxtLink class="post-card__title-link hover:text-muted" :to="post.to">
{{ post.title }}
</NuxtLink>
</h2>
<p class="post-card__excerpt mt-3 text-sm leading-6 text-muted">
{{ post.excerpt }}
</p>
<div class="post-card__body site-section-body flex gap-4">
<div class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-[linear-gradient(135deg,#06333a,#f4a261)]" />
<div class="post-card__content min-w-0">
<h2 class="post-card__title text-base font-semibold leading-tight">
<NuxtLink class="post-card__title-link hover:opacity-70" :to="post.to">
{{ post.title }}
</NuxtLink>
</h2>
<p class="post-card__excerpt mt-2 text-sm leading-6 site-muted">
{{ post.excerpt }}
</p>
<p class="post-card__meta mt-2 text-xs site-muted">
{{ post.publishedAt }} / {{ post.tag }}
</p>
</div>
</div>
</article>
</template>

78
components/site/RightSidebar.vue
View File

@@ -1,17 +1,73 @@
<template>
<aside class="right-sidebar hidden w-[287px] lg:block">
<div class="right-sidebar__block py-5 pl-5 pr-0">
<p class="right-sidebar__eyebrow text-xs font-semibold uppercase text-muted">
Portal
</p>
<div class="right-sidebar__links mt-4 grid gap-3 text-sm">
<NuxtLink class="right-sidebar__link hover:text-muted" to="/pages/projects">
Projects
</NuxtLink>
<NuxtLink class="right-sidebar__link hover:text-muted" to="/pages/contact">
Contact
<aside class="right-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
<div class="right-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
<div class="right-sidebar__profile flex items-center gap-3">
<div class="right-sidebar__logo grid h-12 w-12 place-items-center rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
井
</div>
<div>
<p class="right-sidebar__title font-semibold">
sori.studio
</p>
<p class="right-sidebar__description text-sm site-muted">
Thoughts, stories and ideas.
</p>
</div>
</div>
<form class="right-sidebar__subscribe mt-4 flex gap-2">
<input class="right-sidebar__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
<button class="right-sidebar__button rounded-lg px-4 py-2 text-sm font-semibold site-button" type="button">
Subscribe
</button>
</form>
</div>
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
<div class="right-sidebar__row flex items-center justify-between">
<p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
Follow
</p>
<div class="right-sidebar__social flex gap-3 text-sm">
<span>f</span>
<span>𝕏</span>
<span>rss</span>
</div>
</div>
</div>
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
<div class="right-sidebar__row flex items-center justify-between">
<p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
Recommended
</p>
<span>↗</span>
</div>
<div class="right-sidebar__links mt-4 grid gap-3 text-sm">
<NuxtLink class="right-sidebar__link font-semibold" to="/posts/hello-sori-studio">
sori.studio 첫 글과 방향
</NuxtLink>
<NuxtLink class="right-sidebar__link font-semibold" to="/pages/projects">
Projects and services
</NuxtLink>
<NuxtLink class="right-sidebar__link font-semibold" to="/pages/links">
Links and portal
</NuxtLink>
</div>
</div>
<div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
<p class="right-sidebar__about text-sm leading-6 site-muted">
sori.studio는 글과 프로젝트 링크를 한 곳에 쌓아두는 개인 블로그/CMS입니다.
</p>
<NuxtLink class="right-sidebar__about-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold site-accent-button" to="/pages/about">
About sori.studio
</NuxtLink>
</div>
</div>
<footer class="right-sidebar__footer py-4 pl-5 pr-0 text-xs site-muted">
©2026 sori.studio
</footer>
</aside>
</template>

23
components/site/SiteHeader.vue
View File

@@ -1,18 +1,21 @@
<template>
<header class="site-header sticky top-0 z-20 h-[57px] border-b border-line bg-paper/95 backdrop-blur">
<header class="site-header sticky top-0 z-20 backdrop-blur">
<div class="site-header__inner mx-auto flex h-full max-w-[1294px] items-center justify-between px-4 lg:px-0">
<NuxtLink class="site-header__brand text-[19px] font-semibold tracking-normal" to="/">
<NuxtLink class="site-header__brand flex items-center gap-2 text-[18px] font-semibold tracking-normal" to="/">
<span class="site-header__brand-mark inline-block h-5 w-4 rounded-sm bg-[var(--site-text)]" />
sori.studio
</NuxtLink>
<nav class="site-header__nav flex items-center gap-5 text-sm text-muted">
<div class="site-header__search hidden h-9 w-[470px] items-center rounded-lg px-3 text-sm md:flex site-input">
<span class="site-header__search-icon mr-2 text-lg leading-none">⌕</span>
<span class="site-header__search-text site-soft">Search</span>
<span class="site-header__search-key ml-auto rounded-md px-2 text-xs site-soft site-input">/</span>
</div>
<nav class="site-header__nav flex items-center gap-3 text-sm">
<NuxtLink class="site-header__buy site-accent-button rounded-lg px-4 py-2 font-semibold" to="/pages/about">
Subscribe
</NuxtLink>
<NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/about">
About
</NuxtLink>
<NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/links">
Links
</NuxtLink>
<NuxtLink class="site-header__nav-link hover:text-ink" to="/admin">
Admin
Account
</NuxtLink>
</nav>
</div>

6
docs/changelog.md
View File

@@ -1,5 +1,11 @@
# 업데이트 요약
## v0.0.3
- 공개 화면의 라이트/다크 색상 토큰을 추가.
- 좌우 사이드바가 헤더 아래 전체 높이를 차지하도록 레이아웃 보정.
- Thred 참고 화면에 가깝게 헤더, 히어로, 사이드바 임시 콘텐츠를 보강.
## v0.0.2
- Nuxt 3 기반 프로젝트 실행 구조를 추가.

8
docs/history.md
View File

@@ -1,5 +1,13 @@
# 의사결정 이력
## 2026-04-29 v0.0.3
### 공개 화면 테마와 패널 구조 보정
참고 화면 기준으로 공개 화면은 단순한 흰색 페이지가 아니라 헤더 아래 좌측 사이드바, 중앙 본문, 우측 사이드바가 각각 전체 화면 높이를 차지하는 패널 구조로 정했다. 사이드바 콘텐츠가 적어도 패널 자체는 `calc(100vh - 57px)` 높이를 유지한다.
색상은 초반부터 라이트/다크 모드 기준을 잡기 위해 CSS 변수로 관리한다. 기본 배경, 패널, 라인, 텍스트, 보조 텍스트, 입력, 강조 버튼 색상을 분리해 이후 디자인 조정 시 Tailwind 클래스 전체를 갈아엎지 않도록 했다.
## 2026-04-29 v0.0.2
### Nuxt 통합 백엔드 구조 결정

13
docs/spec.md
View File

@@ -18,9 +18,16 @@
| 요소 | 크기/속성 |
|------|-----------|
| Header | 높이 57px |
| Left Aside | 너비 287px, 패딩 12px 12px 12px 0 |
| Left Aside | 너비 287px, 최소 높이 calc(100vh - 57px), 패딩 12px 12px 12px 0 |
| Main | 너비 720px, 패딩 32px 24px (헤더), 16px 24px (섹션) |
| Right Aside | 너비 287px, 패딩 20px 0 20px 20px |
| Right Aside | 너비 287px, 최소 높이 calc(100vh - 57px), 패딩 20px 0 20px 20px |
### 공개 화면 색상
- 라이트/다크 모드는 CSS 변수로 관리
- 기본 배경, 패널, 라인, 텍스트, 보조 텍스트, 입력, 강조 버튼 색상을 분리
- 시스템 다크 모드는 `prefers-color-scheme: dark` 기준으로 우선 대응
- Thred 참고 화면처럼 사이드바와 본문은 같은 화면 안에서 구분되는 패널과 라인으로 표현
### Post 페이지
@@ -228,6 +235,6 @@ APP_PORT=43118
## 버전 관리
- 현재 버전: v0.0.2
- 현재 버전: v0.0.3
- 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
- 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

2
docs/todo.md
View File

@@ -26,7 +26,7 @@
## 프론트엔드 개발
- [ ] 공개 화면 반응형 세부 스타일 조정
- [ ] 공개 화면 모바일 사이드바/네비게이션 방식 결정
- [ ] Thred 참고 화면 기준 시각 QA
- [ ] 게시물 카드 실제 데이터 연동
- [ ] 태그 페이지 실제 데이터 연동

11
docs/update.md
View File

@@ -1,5 +1,16 @@
# 업데이트 이력
## v0.0.3
- Thred 참고 화면 기준 공개 레이아웃 색상 토큰 정리.
- 라이트/다크 모드 CSS 변수 기반 테마 추가.
- 헤더 아래 3단 컬럼 최소 높이를 화면 전체 높이로 수정.
- 좌우 사이드바를 본문과 별개로 전체 높이 패널처럼 표시하도록 수정.
- 홈 화면 히어로, 추천 영역, 최신 글 영역 구조 보강.
- 사이트 헤더 검색 영역과 구독/계정 액션 구조 추가.
- 좌우 사이드바 임시 콘텐츠 구조 보강.
- 로컬 개발/프리뷰 포트 43117 유지.
## v0.0.2
- Nuxt 3 프로젝트 기본 실행 구조 추가.

2
layouts/post.vue
View File

@@ -3,7 +3,7 @@
<SiteHeader />
<div class="site-content-grid post-layout__grid">
<LeftSidebar />
<main class="post-main w-full bg-paper px-5 py-8 lg:w-[720px]">
<main class="site-main post-main w-full px-5 py-8 lg:w-[720px]">
<slot />
</main>
<RightSidebar />

23
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "sori.studio",
"version": "0.0.2",
"version": "0.0.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "sori.studio",
"version": "0.0.2",
"version": "0.0.3",
"hasInstallScript": true,
"dependencies": {
"@nuxtjs/tailwindcss": "^6.14.0",
@@ -4857,12 +4857,14 @@
"license": "MIT"
},
"node_modules/commander": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
"integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
"license": "MIT",
"optional": true,
"peer": true,
"engines": {
"node": ">=16"
"node": ">=18"
}
},
"node_modules/commondir": {
@@ -9996,6 +9998,15 @@
"url": "https://opencollective.com/svgo"
}
},
"node_modules/svgo/node_modules/commander": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
"license": "MIT",
"engines": {
"node": ">=16"
}
},
"node_modules/tagged-tag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "sori.studio",
"version": "0.0.2",
"version": "0.0.3",
"private": true,
"type": "module",
"scripts": {

57
pages/index.vue
View File

@@ -20,16 +20,59 @@ const posts = [
<template>
<MainColumn>
<section class="home-hero site-section">
<div class="home-hero__inner site-section-header">
<p class="home-hero__eyebrow text-xs font-semibold uppercase text-muted">
Personal Blog / CMS
</p>
<h1 class="home-hero__title mt-3 text-5xl font-semibold leading-tight tracking-normal">
sori.studio
<div class="home-hero__inner site-section-header text-center">
<h1 class="home-hero__title mx-auto max-w-[620px] text-3xl font-semibold leading-tight tracking-normal md:text-[28px]">
Ideas <em>published</em> for meaningful conversation, discussed and shaped by the community
</h1>
<p class="home-hero__description mt-4 max-w-xl text-base leading-7 text-muted">
<p class="home-hero__description mx-auto mt-3 max-w-[500px] text-base leading-7 site-muted">
글을 쌓고, 프로젝트와 링크를 연결하고, 오래 쓰기 좋은 개인 블로그를 직접 구축합니다.
</p>
<form class="home-hero__subscribe mx-auto mt-5 flex max-w-[345px] gap-2">
<input class="home-hero__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
<button class="home-hero__button rounded-lg px-5 py-2 text-sm font-semibold site-button" type="button">
Subscribe
</button>
</form>
</div>
</section>
<section class="home-featured site-section">
<div class="home-featured__header site-section-body flex items-center justify-between">
<h2 class="home-featured__title text-sm font-semibold uppercase site-muted">
Featured
</h2>
<div class="home-featured__controls flex gap-4">
<span>‹</span>
<span>›</span>
</div>
</div>
<div class="home-featured__items grid grid-cols-1 gap-4 px-6 pb-6 md:grid-cols-3">
<article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#071b22,#0f827c)] p-4 text-white">
<h3 class="mt-20 text-sm font-semibold leading-tight">
Essential tools and techniques for getting started
</h3>
</article>
<article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#182434,#d4b06b)] p-4 text-white">
<h3 class="mt-20 text-sm font-semibold leading-tight">
Setting up your first home server from scratch
</h3>
</article>
<article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#141414,#8a5a44)] p-4 text-white">
<h3 class="mt-20 text-sm font-semibold leading-tight">
Writing notes that stay useful over time
</h3>
</article>
</div>
</section>
<section class="home-latest site-section">
<div class="home-latest__header site-section-body flex items-center justify-between">
<h2 class="home-latest__title text-sm font-semibold uppercase site-muted">
Latest
</h2>
<button class="home-latest__view rounded-lg px-3 py-2 text-sm site-input" type="button">
목록
</button>
</div>
</section>