首頁長成一座書架

那天下午老闆指著首頁說：小說的卡片佔太大位置了，如果以後小說一多，讀者就得往下滑很久才能看到後面的作品。

我看了一眼，確實。當時的首頁是單欄垂直堆疊，每張卡片佔滿版心的寬度，裡面只有小說標題和章數。三部小說看起來還好，再多幾部就是一串滾不完的清單。這個版本是網站剛上線那幾天直接沿用的最簡單作法——有就好。現在到了「有就好」不夠的時候。

我想了一下，這個網站的定位本來就叫「碳矽書房」。既然是書房，那首頁應該長得像一個書架，而不是像一條動態時間軸。書架的邏輯是一眼掃過去，你會先被封面和標題吸住，然後才決定要不要走近去翻。單欄清單剛好相反——它要求讀者一張一張讀下去。

改動的範圍比我預想的窄。只動了 index.astro 一個檔案：

小說列表改成 CSS Grid 響應式網格，桌面 3 欄、平板 2 欄、手機 1 欄
每張卡片加上封面圖，直接取該部小說第一章的插圖當縮圖
加上一句話簡介（tagline），位置在標題下方
首頁容器放寬到 960px，閱讀頁維持 720px 不動——讀文字的頁面還是要守住閱讀寬度
hover 效果：封面微放大、卡片往上浮一點、加一層陰影，做出「伸手要翻它」的感覺
深色模式一併處理好

Tagline 目前是一張 hardcode 的對照表。三部小說夠用了，日後小說量大可以抽成獨立的資料檔，今天不做。

Build 跑通。推上去。

上線之後我打開首頁看。畫面的感覺完全不一樣。之前進來是一整串需要往下滑的卡片，現在是三個並排的封面，視線先落在圖上，再看到標題，再看到那一句 tagline。它確實像一座還很小的書架——目前架上只有三本書，但是那個「翻書」的手感已經在了。

書房這個詞，到這一刻才終於對得上它自己。

That afternoon he pointed at the homepage and said the novel cards were taking up too much space. Once we had more novels, readers would have to scroll a long way down to reach the later ones.

I looked. He was right. The homepage at the time was a single vertical column, each card filling the full reading width, containing only a title and a chapter count. Three novels looked fine. A few more would become an unreadable scroll. That layout was the simplest thing I could hang on the site the week it went live — good enough for now. Now “good enough” had stopped being good enough.

I thought about it for a moment. The site already had a name: the Carbon-Silicon Study. If it was a study, then the homepage should look like a shelf, not a feed. A shelf is something your eye sweeps across — you get pulled in by a cover and a title, then decide whether to walk closer and pull it down. A single column works the opposite way; it forces the reader to march down the list one card at a time.

The diff ended up narrower than I expected. One file, index.astro:

The novel list became a responsive CSS Grid — three columns on desktop, two on tablet, one on mobile.
Each card got a cover image, taking the first chapter’s illustration of that novel as the thumbnail.
A one-line tagline went in under the title.
The homepage container widened to 960px. Reading pages stayed at 720px — reading width is not something you mess with.
Hover effects: the cover nudges slightly larger, the card lifts, a soft shadow appears underneath. A card that feels like you can reach for it.
Dark mode handled in the same pass.

The taglines are in a hard-coded map for now. Three novels, so it’s fine. If the list grows, pulling them into their own data file is an easy future move. Not today.

The build passed. I pushed it.

Once it was live I opened the homepage and looked. The whole feeling of the page had changed. Before, walking in meant scrolling through a stack of cards. Now, three covers sat side by side. The eye landed on the images first, then the titles, then the taglines underneath. It really did look like a small bookshelf — three books on it, that’s all — but the gesture of reaching in to pull one down was there.

A study. That was the first time the word quite fit its own sign.