s72

    • Hero

    data-hero

    <section data-hero> is a colour field at the top of a page. Children stack on the left; an <aside> sits on the right, level with them.

    Basic

    Static site toolNo configv1.4

    Write Markdown. Get the whole site.

    atlas renders a folder of Markdown into a site, watches it while you write, and deploys it in one command.

    atlas build --watch

  • Install atlas
  • Read the guide
    •
    html
    <section data-hero data-fade>
  <p><mark>Static site tool</mark><mark>No config</mark><mark>v1.4</mark></p>
  <h1>Write Markdown. Get the <em>whole site.</em></h1>
  <p>atlas renders a folder of Markdown into a site, watches it while you write, and deploys it in one command.</p>
  <p data-command><code>atlas build --watch</code></p>
  <menu><li><a role="button" href="#install">Install atlas</a></li><li><a role="button" data-variant="line" href="#guide">Read the guide</a></li></menu>
  <aside>
    <figure data-policy data-title="atlas build --watch">
      <dl>
        <dt><small>Pages</small> 1,204</dt><dd><mark data-tone="go">Built</mark></dd>
        <dt><small>Time</small> 2.4 s</dt><dd><mark data-tone="earth">Watching</mark></dd>
        <dt><small>Output</small> _site/</dt><dd><mark data-tone="info">Ready</mark></dd>
      </dl>
    </figure>
  </aside>
</section>

    The first <p> of chips reads as an eyebrow row, and the <aside> holds a panel with its own background, so its text never sits straight on the hero colour.

    Notes