bên trong motthay — thiết kế một tumblog tĩnh

Dự án

motthay là gì?

Motthay là một tumblog cá nhân tĩnh, đánh số tuần tự, dùng duy nhất font Newsreader cho toàn bộ văn bản. Không border, không card box — phân tách hoàn toàn bằng tương phản màu nền giữa các zone.

Viết bởi một — Sài Gòn, tháng 7/2026

Motthay là một phần của astr0 monorepo — 6 site Astro chia sẻ chung component library.

Motthay chọn sự đơn giản có chủ đích. Một schema duy nhất. Mọi entry là một file Markdown với frontmatter tối thiểu. Không field type. Không discriminated union. Chỉ có title, date, tags, và nội dung. Font Newsreader cho toàn bộ văn bản, JetBrains Mono cho metadata. Hệ thống zone full-width phân tách bằng màu nền.

Typography

Newsreader — một font cho tất cả

Trích dẫn

Blockquote & Pull Quote

Blockquote căn phải, chữ 1.5rem, Newsreader italic. Không dùng border-left — thay vào đó là căn phải để tạo cảm giác như lời trích dẫn được đặt riêng biệt khỏi dòng chảy chính. Dòng nguồn trong thẻ <footer> hiển thị bằng Mono, muted:

Thiết kế không phải là cách nó trông như thế nào. Thiết kế là cách nó hoạt động.

Có ba phản hồi cho một thiết kế — có, không, và WOW! Wow mới là thứ để nhắm tới.

Pull quote căn giữa, 1.75rem, "" tự động qua CSS:

Thư viện ảnh

Gallery + Lightbox

2 cột — .gallery

3 cột — .gallery-3

Featured — .gallery-featured

Horizontal scroll — .scroller

Spotlight

Ảnh nổi bật

So sánh

Side-by-side — .compare

Trước — có border + card box

Sau — zone layout không border

Video

Video nhúng

Code

Syntax Highlight

// Không còn entryNumbers utility — slug là số
export async function getStaticPaths() {
  const entries = await getCollection('entries', ({ data }) => {
    return data.status !== 'draft' || import.meta.env.DEV
  })
  return entries.map(e => ({ params: { slug: e.slug } }))
}

/* Zone layout — không border, không card box */
.entry-card { padding: var(--space-6) 0; }
.entry-card__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
}

Liên kết

Link Cards & Inline Links

Link ngoài trong đoạn văn tự động có mũi tên ↗ — ví dụ: trang https://astro.build">Astro framework hoặc https://pages.cloudflare.com">Cloudflare Pages. Dùng Markdown [text](url) như bình thường, CSS tự thêm mũi tên cho link có href bắt đầu bằng http.

Link card dạng block — chỉ có tiêu đề + mũi tên ↗, gọn và thanh lịch:

Astro — The Web Framework for Content-Driven Websites

Newsreader — Production Type

Cloudflare Pages — Deploy & Hosting

Link inline với arrow — dùng .link-row trong đoạn văn: xem thêm astr0 monorepo trên GitHub để hiểu cấu trúc toàn bộ dự án, hoặc đọc tài liệu Astro để học cách build SSG.

Kiến trúc

Hệ thống Zone

Motthay không dùng border hay card box. Mỗi vùng chức năng là một section full-width với màu nền riêng — gray-50 cho header/hero, gray-100 cho feed, trong suốt cho entry cards. Tương phản giữa các sắc độ xám tạo chiều sâu không cần đường kẻ.

Entry cards hoàn toàn trong suốt — không background, border, hay border-radius. Chỉ text + 3rem gap. Không divider. Hover: title chuyển accent. Cảm giác như đọc danh sách ghi chép trên một tờ giấy dài, thay vì các “thẻ” riêng biệt.

Theme toggle (Moon/Sun) dùng Lucide icons + Alpine.js. Chế độ sáng/tối tự động theo mặt trời Sài Gòn (10.82°N, 106.63°E), kiểm tra mỗi 15 phút và khi tab focus lại.

Tiến trình

Timeline

Chương

Chapter Markers

Xem số lớn nhất trong entries/, tạo file kế tiếp. Không cần nghĩ tên.

title và date bắt buộc. Tags, excerpt, image, pinned đều optional.

Markdown thuần, mở rộng với HTML cho gallery, video, và 30+ class CSS.

Cards

Card Grid

Stack

Công nghệ