markdownViewr/docs/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>markdownViewr</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #f5f5f7;
      color: #1d1d1f;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
    }

    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 1200px;
    }

    .icon {
      width: 128px;
      height: 128px;
      margin-bottom: 24px;
      border-radius: 22%;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }

    .screenshot-wrap {
      margin-top: 48px;
      width: 100%;
      max-width: 780px;
    }

    .screenshot-wrap img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    }

    h1 {
      font-size: 2.4rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .tagline {
      font-size: 1.15rem;
      color: #555;
      line-height: 1.5;
      margin-bottom: 32px;
    }

    .download-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #0071e3;
      color: #fff;
      text-decoration: none;
      font-size: 1rem;
      font-weight: 600;
      padding: 14px 28px;
      border-radius: 980px;
      transition: background 0.15s;
    }

    .download-btn:hover { background: #0077ed; }

    .download-btn svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .req {
      margin-top: 12px;
      font-size: 0.82rem;
      color: #888;
    }

    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 40px;
      max-width: 1200px;
    }

    .feature {
      background: #fff;
      border-radius: 12px;
      padding: 10px 16px;
      font-size: 0.88rem;
      color: #444;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    footer {
      margin-top: 56px;
      font-size: 0.8rem;
      color: #aaa;
    }

    footer a { color: #aaa; }

    @media (prefers-color-scheme: dark) {
      body { background: #1c1c1e; color: #f5f5f7; }
      .tagline { color: #aaa; }
      .feature { background: #2c2c2e; color: #ccc; box-shadow: none; }
      .req { color: #666; }
      footer, footer a { color: #555; }
    }
  </style>
</head>
<body>
  <div class="hero">
    <img class="icon" src="icon.png" alt="markdownViewr icon">

    <h1>markdownViewr</h1>

    <p class="tagline">
      A fast, beautiful markdown viewer for macOS.<br>
      Open any markdown file. Live-reloads as you edit.
    </p>

    <a class="download-btn"
       href="https://github.com/darinkelkhoff/markdownViewr/releases/latest/download/markdownViewr.dmg">
      <svg viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v9.586l2.293-2.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V3a1 1 0 011-1zM3 16a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"/></svg>
      Download for Mac
    </a>

    <p class="req">macOS 13 Ventura or later &nbsp;·&nbsp; Free &nbsp;·&nbsp; <a href="https://github.com/darinkelkhoff/markdownViewr" style="color:inherit">View on GitHub</a></p>

    <p class="req" style="margin-top:8px">Also available via Homebrew: <code style="font-size:0.82rem">brew install --cask darinkelkhoff/tap/markdownviewr</code></p>

    <div class="features">
      <span class="feature">GitHub Flavored Markdown</span>
      <span class="feature">Themed code blocks</span>
      <span class="feature">Fully customizable themes</span>
      <span class="feature">Table of contents</span>
      <span class="feature">Markdown source view</span>
      <span class="feature">Live file watching</span>
      <span class="feature">Vim navigation keys</span>
      <span class="feature">Find in document</span>
      <span class="feature">YAML frontmatter support</span>
      <span class="feature">Open in external editor</span>
      <span class="feature">Automatic updates</span>
    </div>
  </div>

  <div class="screenshot-wrap">
    <img src="screenshot.png" alt="markdownViewr showing a markdown document">
  </div>

  <footer>
    <a href="privacy.html">Privacy Policy</a> &nbsp;·&nbsp;
    <a href="https://github.com/darinkelkhoff/markdownViewr">GitHub</a>
  </footer>

</body>
</html>