Red Dot Tracker

导航

标记 
<nav class="f-nav" aria-label="Site">
  <span class="f-nav__brand">Duna Feline</span>
  <a href="/" aria-current="page">Blog</a>
  <a href="/projects/">Projects</a>
</nav>
<!-- Floating over the page: class="f-nav f-nav--fixed" -->

<button class="f-theme-toggle" type="button" data-f-theme-toggle>Auto</button>

按钮

标记 
<button class="f-btn" type="button">Default</button>
<button class="f-btn f-btn--primary" type="button">Primary</button>
<a class="f-btn f-btn--quiet" href="/hairball/">Quiet</a>

标签与分段控件

Purrometheus
标记 
<span class="f-chip">Purrometheus</span>
<button class="f-chip" type="button" aria-pressed="true">Hairball</button>

<div class="f-segmented" role="group" aria-label="View">
  <button type="button" aria-pressed="true">List</button>
  <button type="button" aria-pressed="false">Grid</button>
</div>

输入框

标记 
<input class="f-input" type="text" aria-label="Name your cat" />
<input class="f-input f-search" type="search" aria-label="Search" />

代码

$ curl https://example.com/hairball
200 OK  red dot found
标记 
<pre class="f-code"><span class="f-code__prompt">$ </span>curl https://example.com/hairball
<span class="f-code__out">200 OK</span></pre>

<!-- Inline code inside .f-prose is plain <code>. -->

提示

Info

Purrometheus refreshes every five minutes.

Success

The red dot was caught.

Warning

The Hairball queue is getting long.

Danger

The red dot escaped the tracker.
标记 
<div class="f-alert f-alert--warning">
  <p class="f-alert__title">Warning</p>
  The Hairball queue is getting long.
</div>
<!-- Kinds: f-alert--info, --success, --warning, --danger. -->

卡片

红点追踪器

追踪红点的每一次出没。

毛球

一个收集毛球的小工具。

标记 
<div class="f-cluster" data-f-liquid>
  <article class="f-card">
    <div class="f-card__media" style="background-image: url(board.jpg)"></div>
    <div class="f-card__body">
      <h3>Red Dot Tracker</h3>
      <p>Follows the red dot wherever it hides.</p>
    </div>
  </article>
  <article class="f-card f-card--text">
    <div class="f-card__body">…</div>
  </article>
</div>

面板

新建追踪

Purrometheus 会在红点出现时通知你。
标记 
<dialog class="f-sheet" aria-labelledby="sheet-title">
  <div class="f-sheet__panel">
    <h3 id="sheet-title">New tracker</h3>
    <p>Purrometheus will tell you when the red dot shows up.</p>
    <button class="f-btn" type="button">Close</button>
  </div>
</dialog>
<!-- Open it with dialog.showModal(). -->

媒体开关

标记 
<button class="f-media-toggle" type="button">Pause</button>
<!-- Over a cover or panel video; see the Cover and Panels layouts. -->

目录

标记 
<nav class="f-toc" aria-label="On this page" data-f-scrollspy>
  <a href="#overview">Overview</a>
  <a href="#install">Install</a>
  <a href="#usage">Usage</a>
</nav>

主卡片

用强调色的深色调填充的卡片，两种主题下相同。标题用 h3，因为本页已有自己的 h1。

项目

红点追踪器

记录红点碰过的每一面墙。

了解更多 ↗ 源代码
标记 
<section class="f-hero">
  <div>
    <p class="f-hero__kicker">Project</p>
    <h3 class="f-hero__title">Red Dot Tracker</h3>
    <p class="f-hero__lead">Maps every wall the red dot has touched.</p>
    <div class="f-hero__actions">
      <a class="f-btn f-btn--primary" href="#">Learn more ↗</a>
      <a class="f-btn" href="#">Source</a>
    </div>
  </div>
  <figure class="f-hero__media">…</figure> <!-- optional -->
</section>

社交链接

一排圆形的图标链接。图标在 dist/icons.css 里（需要单独引入），每个链接都有一个视觉上隐藏的名字。

标记 
<link rel="stylesheet" href="…/dist/icons.css" />

<ul class="f-social" aria-label="Elsewhere">
  <li>
    <a class="f-social__link" href="https://github.com/example" rel="me noopener">
      <span class="f-icon f-icon--github" aria-hidden="true"></span>
      <span class="f-visually-hidden">GitHub</span>
    </a>
  </li>
</ul>

分隔线

或者在这些地方找到我

标记 
<p class="f-divider">or find me on</p>

空状态

404

没有找到这只猫

这个页面不存在，也许红点把它带走了。

回到首页 看看博客
标记 
<div class="f-empty">
  <div>
    <div class="f-empty__cat" aria-hidden="true"></div>
    <p class="f-empty__code">404</p>
    <h1>This cat wandered off</h1>
    <p>The page you want is not here.</p>
    <a class="f-btn f-btn--primary" href="/">Back to home</a>
  </div>
</div>

插图

示意图

Soft bands of light over a dark horizon
调整光带。镜片和滤镜把光混在一起。
自带深色圆角底板的 SVG 用 --bare。
标记 
<figure class="f-figure">
  <p class="f-figure__kicker">Diagram</p>
  <img src="aurora.jpg" alt="…" width="1920" height="1080" />
  <figcaption><b>Steer the light.</b> Mirrors and filters mix the bands.</figcaption>
</figure>
<!-- A self-framed SVG or picture: class="f-figure f-figure--bare" -->

变体

  • Board one, modern 看板
  • Board two, modern 另一块看板
标记 
<div>
  <div class="f-segmented" role="group" aria-label="Look" data-f-variants="look" hidden>
    <button type="button" data-variant="modern" aria-pressed="true">Modern</button>
    <button type="button" data-variant="classic" aria-pressed="false">Classic</button>
  </div>
  <img data-f-variant="look:modern" src="modern.jpg" alt="…" />
  <img data-f-variant="look:classic" hidden src="classic.jpg" alt="…" />
</div>