从零设计一个博客首页

/* ① 令牌层 */
  :root {
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --accent: #1f6b64;
    --line: #e6e2da;
  }

  /* ② 骨架层：Grid 决定区域位置 */
  .f-shell {
    display: grid;
    gap: var(--space-5);
    max-width: 1180px;
    margin-inline: auto;
    padding: var(--space-4);
  }

  .f-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stream" "side";
  }
  .f-rail { display: none; }
  .f-stream { grid-area: stream; min-width: 0; }
  .f-side { grid-area: side; min-width: 0; }

  /* ③ 组件层：Flex 处理组件内部 */
  .f-post {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .f-thumb {
    width: 64px;
    aspect-ratio: 1;                       /* 固定比例：加载不跳动 */
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #7fb8ae);
  }

  .f-hero h1 {
    font-size: clamp(22px, 3.4vw + 8px, 40px);   /* 流体字号：少一个断点 */
  }

  /* ④ 断点层：集中在文件末尾，只做增强 */
  @media (min-width: 600px) {
    .f-grid {
      grid-template-columns: minmax(0, 1fr) 220px;
      grid-template-areas: "stream side";
      gap: var(--space-6);
    }
  }

  @media (min-width: 900px) {
    .f-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .f-post:first-child { grid-column: 1 / -1; }   /* 首篇通栏，形成节奏 */
  }

  @media (min-width: 1200px) {
    .f-grid {
      grid-template-columns: 180px minmax(0, 1fr) 240px;
      grid-template-areas: "rail stream side";
    }
    .f-rail { display: grid; align-content: start; gap: 4px; }
  }
  

// 文案集中在一个配置对象里，切换语言只做一件事：遍历带 data-k 的元素
  const DICT = {
    en: {
      nav1: "Writing", nav2: "Notes", nav3: "About",
      h1: "Settling a homepage with grids and whitespace",
      streamTitle: "Latest writing"
    }
  };

  const params = new URLSearchParams(location.search);
  const lang = params.get("lang") === "en" ? "en" : "zh";
  const state = params.get("state") === "before" ? "before" : "after";

  // state=before 用于「改造前 / 改造后」对比，只切一个 class
  if (state === "before") document.body.classList.add("is-before");

  if (lang === "en") {
    document.querySelectorAll("[data-k]").forEach(function (el) {
      const value = DICT.en[el.dataset.k];
      if (value != null) el.textContent = value;   // 中文原文写在 HTML 里，缺译文时自然退回中文
    });
  }