-- A documentation page: sidebar nav + prose content + code samples.
@page Docs · Getting Started
@lang en
@let ink #0f172a
@let muted #64748b
@let primary #3b82f6
@let code-bg #f1f5f9

@let nav-link $label $href
  @link [
    padding 8, padding-x 12, rounded 6, color $ink,
    hover:background #f1f5f9, transition all 0.1s ease
  ] $href
    $label

@row [min-height 100vh]
  -- Sidebar
  @aside [
    width 240, padding 32, padding-x 20,
    background #fafafa, border-right 1 #e5e7eb, spacing 4
  ]
    @text [bold, size 13, color $muted, text-transform uppercase, letter-spacing 1] Introduction
    @nav-link [label Overview, href #overview]
    @nav-link [label Installation, href #install]
    @nav-link [label First page, href #first-page]
    @text [
      bold, size 13, color $muted, text-transform uppercase, letter-spacing 1,
      margin-block-start 20
    ] Guides
    @nav-link [label Layout, href #layout]
    @nav-link [label Styling, href #styling]
    @nav-link [label Functions, href #functions]

  -- Prose
  @main [padding 48, padding-x 56, max-width 800, spacing 24]
    @text [bold, size 36, color $ink] Getting started

    @paragraph [color $ink, line-height 1.7, size 17]
      htmlang is a minimalist layout language that compiles to a single static
      HTML file. This guide walks through the essentials in about five minutes.

    @text [bold, size 24, color $ink] Installation

    @pre [background $code-bg, padding 16, rounded 8, overflow-x auto]
      cargo install --path .

    @text [bold, size 24, color $ink] Your first page

    @paragraph [color $ink, line-height 1.7]
      Create a file called {@code [background $code-bg, padding 2 6, rounded 4] hello.hl} with:

    @pre [background $code-bg, padding 16, rounded 8, overflow-x auto]
      @page Hello
      @column [padding 40, spacing 16]
        @text [bold, size 32] Hi there

    @paragraph [color $ink, line-height 1.7]
      Compile it:

    @pre [background $code-bg, padding 16, rounded 8, overflow-x auto]
      htmlang hello.hl

    @paragraph [color $ink, line-height 1.7]
      You now have {@code [background $code-bg, padding 2 6, rounded 4] hello.html},
      a single self-contained file with embedded CSS. No dependencies, no
      JavaScript, no build step beyond the one command you just ran.

    @text [bold, size 24, color $ink] Next steps

    @list [spacing 8]
      @item
        @link [color $primary] /docs/layout Learn the layout model
      @item
        @link [color $primary] /docs/styling Customize styling
      @item
        @link [color $primary] /docs/functions Extract reusable components