Live design demo

Art

A bilingual bento journal with MDX notes, projects, and interactive demos — open the live showcase. Navigate inside the frame — you are still on Tawny.

Open in new tab Back to Designs

designs/art

Hugo Lin

2026年6月7日

黑色間距

首頁 bento 網格如何在 RWD 下計算黑色線條——一個 CSS token，不是魔術邊框。

閱讀英文版

仔細看首頁，你會發現每個格子之間有細細的黑線。那不是畫在格子上的 border——而是間距，透出背後黑色背景。

看懂這個技巧後，你就能在任何地方重現：深色画布上的浅色格子，只靠 spacing 分隔。

一個 token 控制全部

整個系統掛在 globals.css 裡的一個 CSS 自訂屬性：

app/globals.css

@theme {
--spacing-bento-gap: 8px;
}

@media (min-width: 768px) {
:root {
  --spacing-bento-gap: 16px;
}
}

Tailwind v4 會把它對應成 gap-bento-gap、p-bento-gap 等工具類。改一次變數，所有 grid、padding 和輪播裝飾都會一起更新。

網格如何運作

home-bento.tsx 裡的首頁 bento 疊了三層：

外殼 — bg-black p-bento-gap 包住整個 grid，padding 形成外框黑邊。
主 grid — 12 欄布局加上 gap-bento-gap bg-black。gap 區域透明，黑色背景從縫隙露出。
格子 — 每個 tile 用 bg-bento-bg（暖色 off-white）。只有格子是浅色，其間一律是黑。

作者／社群區塊是巢狀子 grid，同樣用 gap-bento-gap bg-black，內外間距完全一致。

image-carousel.tsx 的輪播按鈕也重用這個 token——border 寬度設為 var(--spacing-bento-gap)，控制元件與 grid 線對齊。

RWD 排序

手機版 grid 收成單欄。格子用 Tailwind order-* 重新排序，閱讀動線更合理（CTA、主圖落在適當位置），間距 token 不變。

桌面版（md:grid-cols-12）則是嚴格的 50/50 分割：每列 6 + 6 欄，以 col-span-* 和 row-start-* 定位。

斷點	間距	Grid
< 768px	8px	單欄 + CSS order
≥ 768px	16px	12 欄、3 列

動手調整間距

拖曳滑桿或點 preset，感受 gap 大小如何改變 bento 質感：

調整間距

CSS 變數: --spacing-art-bento-gap: 8px

迷你 bento 預覽

接下來

回到首頁並縮放瀏覽器——觀察間距在斷點處從 8px 跳到 16px。想了解完整技術堆疊，請讀打造這本日誌。

About

Art is a bilingual personal journal built around a brutalist bento home grid. It ships with MDX notes and projects, next-intl for English and Chinese, and interactive tiles — weather, location globe, image and tag carousels.

Use the live demo above to explore the full experience inside Tawny. When you are ready to start from the same foundation, scaffold a copy with the create command below, then replace the placeholder author details and sample content.

Get the template

Scaffold a local copy with your preferred package manager.

Terminal

pnpm create tawny@latest art my-app

Template source

Browse every file in templates/art.

templates/art

README.md

# Bento Journal

A bilingual personal journal template — brutalist bento home grid, MDX posts, and an editorial reading experience.

Design by [Hugo Lin](https://1chooo.com).

## Quick start

### Option A — create-next-app (recommended)

```bash
npx create-next-app@latest my-journal \
  --example "https://github.com/1chooo/tawny" \
  --example-path "templates/art"
```

### Option B — create-tawny CLI (interactive prompts)

```bash
npx create-tawny@latest art my-journal
```

Then:

```bash
cd my-journal
pnpm install   # or npm / yarn / bun
cp .env.example .env   # optional: set WEATHER_CITY
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000).

## Start here (sample content)

After scaffolding, read these starter articles in order:

1. **[Hello, world](/en/notes/hello-world)** — tone and basic MDX
2. **[Writing in MDX](/en/notes/writing-in-mdx)** — `postMeta`, images, shortcodes (`Callout`, `CodeBlock`, `TagDemo`, `GapDemo`, etc.)
3. **[Sample Project](/en/projects/sample-project)** — how featured projects appear on the home grid

Delete or replace them once you are comfortable.

## Customize these files

| File | What to change |
|------|----------------|
| `messages/en.json`, `messages/zh.json` | Site title, brand name, about page copy, nav labels |
| `lib/bento-links.ts` | GitHub, email, and location quick links on the home grid |
| `lib/locations.ts` | Cities on the globe page (coordinates + ids) |
| `lib/nav.ts` | Navigation items |
| `content/posts/` | Your notes (`.mdx` files with `postMeta` export) |
| `content/projects/` | Your projects (`projectMeta` export) |
| `public/` | Images — `opengraph-image.png` powers the bento carousel and sample MDX |
| `.env` | `WEATHER_CITY` or `WEATHER_LAT` / `WEATHER_LON` for the home weather tile |

### Placeholders (if you used Option A)

Search for `{{AUTHOR_NAME}}`, `{{AUTHOR_EMAIL}}`, `{{GITHUB_USERNAME}}`, and `{{CITY_NAME}}` across the project and replace them, or use Option B which does this automatically.

## Adding a post

Create `content/posts/my-post.mdx`:

```mdx
export const postMeta = {
  title: "My first note",
  date: "2026-06-06",
  description: "A short summary for listings and SEO.",
  tags: ["journal"],
};

Your MDX content starts here.
```

No manual registry — `lib/posts.ts` scans `content/posts/` at build time.

- `my-post.mdx` → English only
- `my-post.en.mdx` + `my-post.zh.mdx` → bilingual under the same slug

Visit `/en/notes/my-post` (or `/zh/notes/my-post`).

## Stack

- Next.js 16 App Router & React Server Components
- MDX with remark-gfm
- Tailwind CSS v4 & @tailwindcss/typography
- next-intl (English & Chinese)
- Bento home grid with image, tag, and upcoming carousels

## License

MIT — see [LICENSE](./LICENSE).