blog/src/pages/moments/index.astro

---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';

const moments = (await getCollection('moments')).sort(
  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
);
const iso = (d: Date) => d.toISOString();
---

<BaseLayout title="瞬间 · wait4x">
  <h1 class="page-title">瞬间</h1>
  <p class="page-note">零碎的记录：随手拍、一句话感想、开源动态。</p>
  <ol class="tl">
    {moments.map((m) => (
      <li class="tl-item">
        <time class="tl-date" datetime={iso(m.data.pubDate)}>
          {iso(m.data.pubDate).slice(0, 10)}
        </time>
        <div class="mom-card">
          {m.data.image && (
            <figure
              class:list={[
                'mom-fig',
                (m.data.image.width ?? 0) < (m.data.image.height ?? 0) && 'vt',
              ]}
            >
              <Image
                src={m.data.image}
                alt={m.data.text ?? m.data.tags.join(' ')}
                widths={[480, 840]}
                sizes="(min-width: 760px) 420px, calc(100vw - 140px)"
              />
            </figure>
          )}
          {m.data.text && <p>{m.data.text}</p>}
          {m.data.tags.length > 0 && (
            <p class="mom-tags">
              {m.data.tags.map((tag) => <code class="tag">{`#${tag}`}</code>)}
            </p>
          )}
        </div>
      </li>
    ))}
  </ol>
</BaseLayout>

<style>
  .page-title {
    font-size: var(--text-h1);
    line-height: var(--leading-heading);
    color: var(--ink-1);
    margin-top: var(--space-5);
    text-wrap: balance;
  }
  .page-note {
    font-size: 13px;
    color: var(--ink-4);
    margin-block: var(--space-1) var(--space-4);
  }
  .tl {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
  }
  /* 时间线骨架：左 mono 日期 + 竖线 + --accent 节点 + 右侧内容卡 */
  .tl-item {
    position: relative;
    margin: 0 0 var(--space-4) calc(var(--space-5) + var(--space-4));
    padding-left: var(--space-4);
    border-left: 1px solid var(--line);
  }
  .tl-item:last-child { margin-bottom: 0; }
  .tl-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg);
  }
  .tl-date {
    position: absolute;
    left: calc(-1 * (var(--space-5) + var(--space-4)));
    top: 4px;
    width: var(--space-5);
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }
  .mom-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-soft);
  }
  .mom-card > p { font-size: 15px; color: var(--ink-2); }
  .mom-fig {
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 var(--space-2);
    max-width: 420px;
  }
  .mom-fig.vt { max-width: 260px; }
  .mom-fig :global(img) { width: 100%; height: auto; }
  .mom-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
  }
  .tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    background: var(--bg);
    border-radius: 5px;
    padding: 1px 7px;
    white-space: nowrap;
  }
  /* 窄屏：日期卡到卡片上方，竖线左移收窄 */
  @media (max-width: 760px) {
    .tl-item { margin-left: var(--space-3); }
    .tl-date {
      position: static;
      display: block;
      width: auto;
      text-align: left;
      margin-bottom: var(--space-1);
    }
  }
  @media (max-width: 560px) {
    .mom-card { padding: var(--space-2) var(--space-3); }
    .mom-fig { max-width: 100%; }
  }
</style>