🎨 Style Guide

ทุก component ที่ใช้ซ้ำใน DMO Tracker — copy markup ไปใช้ในหน้าใหม่ได้เลย กด 🌓 มุมขวาบนเพื่อเช็ค light/dark

Color tokens Hero + stats Feature grid Timeline + card Source pills Filter bar Attribute chips Tables Note callout

Color tokens

CSS variables from css/site.css. ใช้ var(--name) เสมอ — อย่า hard-code hex (ไม่งั้น dark theme พัง)

canvas
--canvas

soft
--surface-soft

card
--surface-card

strong
--surface-strong

primary
--primary

teal
--teal

amber
--amber

ink
--ink

Hero + stats

หัวเรื่องบนสุดของทุก report page

Page Title

คำอธิบายสั้นๆ ของหน้านี้

โพสต์

เดือน

<div class="hero">
  <div>
    <h1>Page Title</h1>
    <p class="lead">คำอธิบายสั้นๆ</p>
  </div>
  <div class="hero-stats">
    <div class="hero-stat"><div class="num">42</div><div class="lbl">โพสต์</div></div>
  </div>
</div>

Feature grid

การ์ดลิงก์ไปหน้าต่างๆ บน index.html

📊

Feature name

คำอธิบายฟีเจอร์สองสามบรรทัด

22โพสต์

35item

🐉

Another one

อีกการ์ดเพื่อดู grid layout

19โพสต์

<a href="topic.html" class="feature">
  <div class="icon">📊</div>
  <h3>Feature name</h3>
  <p>คำอธิบาย</p>
  <div class="feature-stats">
    <div class="stat"><b>22</b>โพสต์</div>
  </div>
</a>

Timeline + card

โครงหลักของ feed (digimon/decks/system) — month divider + การ์ด

May 2026 1 post

Card title goes here

NA20.05.2026

เนื้อหาในการ์ด — รูป / ลิสต์ / ตาราง

<div class="timeline">
  <div class="tl-month">
    <span class="tl-month-label">May 2026</span>
    <span class="tl-month-count">1 post</span>
  </div>
  <article class="card tl-entry" id="p4148">
    <h2 class="card-title">Title</h2>
    <div class="sources">…</div>
    <div class="card-body">…</div>
  </article>
</div>

Source pills (NA / KR / TH)

ลิงก์ไปโพสต์ต้นทางแต่ละเซิร์ฟ — สีต่างกันต่อเซิร์ฟ (NA=amber, KR=blue, TH=teal)

NA20.05.2026 KR14.05.2026 TH—

<div class="sources">
  <span class="src-item is-na"><a class="src-label" href="…">NA</a><span class="src-date">20.05.2026</span></span>
  <span class="src-item is-kr">…</span>
  <span class="src-item is-th">…</span>
</div>

Filter bar + pills

แถบกรองด้านบน feed (digimon ใช้ filter ตาม attribute/element/family)

Change type

<div class="filter-bar">
  <h4>Change type</h4>
  <div class="filter-group">
    <button class="filter-pill" data-filter="kind" data-value="balance">Balance</button>
    <button class="filter-reset" id="filter-reset">reset</button>
    <span class="filter-count" id="filter-count"></span>
  </div>
</div>

Attribute chips (icon rows)

แสดง Attribute / Element / Families ด้วยไอคอน (จาก img/icons/)

Omegamon X Extreme
Attribute

Element

Families

<div class="chips-row">
  <span class="chips-label">Attribute</span>
  <img class="chip-icon-only" src="img/icons/attr-Vaccine.png" title="Vaccine">
</div>

Tables (gk-table)

ตาราง Digimon List / Effect ในหน้า decks + ตารางแลกซีล

ซีล	เรท	จำนวน
Omegamon	1.5%	1
Imperialdramon	2.0%	1

<table class="gk-table digimon-table">
  <thead><tr><th>ซีล</th><th>เรท</th></tr></thead>
  <tbody><tr><td>Omegamon</td><td>1.5%</td></tr></tbody>
</table>
<!-- variants: .digimon-table (min 280px) · .effect-table (min 560px) -->

Note callout

กล่องหมายเหตุ / คำเตือน

⚠️ Thai server ช้ากว่า NA/KR ราว 10–12 เดือน — โพสต์ NA ล่าสุดยังไม่มีฝั่ง TH เป็นเรื่องปกติ

<div class="note">⚠️ ข้อความหมายเหตุ</div>