排版样张 — Yhazrin Journal

文字负责把事情说清楚，版式负责让人愿意读下去。这里的所有内容都是排版示例，不是正式发布的心得。

普通文字，也要读得舒服

正文保留安静的行距和阅读宽度。支持强调、斜体、~~删除线~~、链接，以及 inline code。长文的目录会跟随当前章节，阅读进度只反映正文，不改变滚动行为。

让阅读停得住，比让每个东西都动起来更重要。

代码，把实现也留下来

代码块有语法高亮和复制按钮。没有识别到的语言会保留为纯文本，不阻断发布。

// 一个独立的运动层，只拥有自己的 transform。
const progress = Math.min(1, Math.max(0, sectionProgress));
paper.style.transform = `translateY(${progress * 24}px)`;

css

@media (prefers-reduced-motion: reduce) {
  .paper { transform: none; transition: none; }
}

表格与任务列表

文章版式	适合内容	阅读特点
随笔 `essay`	观点、复盘、长文	更突出的开篇段落
实践指南 `guide`	步骤、实现、教程	章节序号辅助导航
实验笔记 `notes`	观察、短记录	淡线纸面，保留记录感

标题与段落
表格、代码与脚注
在这里写下你的下一次尝试

图片与并排思考

暖纸上的珊瑚圆形与蓝色星形，展示同一想法的不同表达方式

原创几何示意图 · 图片说明可以用紧随图片的斜体段落。

展开看补充说明

次要过程、长一点的补充或备忘，可以放在可展开的区域。标题仍然可通过键盘操作。

提示、公式与脚注

行内公式： $E = mc^2$ 。独立公式可以帮助解释一个概念：

\operatorname{signal} = \frac{\text{relevant context}}{\text{total context}}

这是一个用于说明版式的示意公式，不是研究结论。更多补充可以放进脚注。¹

内容有自己的样子

下面两个块共用文章的阅读布局，但演示拥有自己的字体、配色和脚本。完整网页按需展开；小实验就地操作，源码与运行文件一致。插入更多内容块时，在注册表登记，不改构建器。

little wonders 学习 Demo 的大字、轮盘场景与独立导航，不是博客界面 — 点击后在独立窗口中操作。字体、颜色、插画和交互保持学习包原貌；它是独立学习示例，不是 Maxima Therapy 网站的源码。
提供的原样素材用户提供的 playful-motion-patterns 1.1.0 · 2026-10-15

只改旋转中心，手感会怎样变化

查看实际运行的源码

实际运行的 CSS

css

/* Geometry only; the shared kit owns typography, controls and working surfaces. */
.lab{max-width:760px;margin:auto}.lab header span{display:none}.controls label{font-size:12px}.reduce{margin-left:auto;display:flex;gap:6px;align-items:center}.scene{height:240px;position:relative}.paper{width:220px;height:164px;position:absolute;left:calc(50% - 110px);top:36px;padding:20px;background:#fff;border:0;border-radius:10px;box-shadow:0 7px 20px #192b4114;transform-origin:100% 100%;transform:rotate(75deg);transition:transform .7s cubic-bezier(.22,1,.36,1)}.paper.open{transform:rotate(-4deg)}.paper-label{font-size:12px;color:var(--jc-muted)}.paper-rule{height:8px;margin:9px 0}.scene .paper p{font-size:20px;line-height:1.4;font-weight:600;margin:0;color:var(--jc-ink)}.pivot{position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;background:#e65d4d;border-radius:50%;outline:3px solid #e65d4d30}.paper.center .pivot{right:calc(50% - 5px);bottom:calc(50% - 5px)}#value{font:12px ui-monospace,monospace;color:var(--jc-muted)}.calm .paper{transition:none}@media(prefers-reduced-motion:reduce){.paper{transition:none}}

实际运行的 JavaScript

(() => {
  const paper=document.querySelector('.paper');
  const origin=document.querySelector('#origin');
  const play=document.querySelector('#play');
  const reset=document.querySelector('#reset');
  const reduce=document.querySelector('#reduce');
  const preference=matchMedia('(prefers-reduced-motion: reduce)');
  let open=false;
  const render=()=>{
    paper.style.transformOrigin=origin.value;
    paper.classList.toggle('center',origin.value==='50% 50%');
    paper.classList.toggle('open',open);
    document.documentElement.classList.toggle('calm',reduce.checked||preference.matches);
    document.querySelector('#state').textContent=`旋转中心：${origin.selectedOptions[0].textContent} · ${open?'展开':'收起'}`;
    document.querySelector('#value').textContent=`transform-origin: ${origin.value};`;
  };
  origin.addEventListener('change',render);
  play.addEventListener('click',()=>{open=!open;render();});
  reset.addEventListener('click',()=>{open=false;origin.value='100% 100%';render();});
  reduce.addEventListener('change',render);
  preference.addEventListener('change',render);
  render();
})();