$ ad.hoc.run → ref.hoc.run

What this is

This page defines the rules for building a new ad.hoc.run project. Every project is a single HTML file with a local stylesheet reference and no external dependencies beyond what the tool genuinely requires. Follow this guide exactly and the result will be visually and structurally identical to every other hoc.run tool.

File structure

Skeleton — every page starts here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>X.hoc.run</title>
  <link rel="stylesheet" href="https://ad.hoc.run/global.css">
  <style>
    /* page-specific styles only */
  </style>
</head>
<body>
  <div class="topbar">
    <div class="prompt">$ <a href="https://ad.hoc.run">ad.hoc.run</a> → <span class="path">X.hoc.run</span></div>
    <!-- right side: page populates as needed -->
  </div>
  <div class="page">
    <!-- content -->
  </div>
</body>
</html>

Topbar

The topbar is defined in global.css. It is a flex row: prompt on the left, page-specific controls on the right. To push something to the right, add margin-left: auto to the first right-side element. The topbar divs are locked to 24px tall, dont exceed. Never change their height, padding, or border.

Never redeclare .topbar properties in page-specific styles. The layout is fully handled by global.css. Page styles may only introduce new selectors scoped inside the topbar (e.g. .topbar button, .controls) — never override existing ones.

Content area

Most pages use <div class="page">, which provides flex: 1, padding: 24px 32px, and overflow-y: auto. Add max-width locally when the content should be constrained.

Full-screen tools (like p2paste) skip .page and instead use a direct flex child with flex: 1. They also add html, body { height: 100%; overflow: hidden; } locally.

Colors — only use CSS variables

Hard-coded color values are only acceptable for one-off states with no semantic meaning (e.g. #ff4444 for a destructive error). All structural color must use variables.

Typography

Inputs and buttons

global.css styles all input, textarea, and button elements. Do not restyle them unless the tool has a specific layout need (e.g. removing resize on a textarea). The accent-colored border on focus and the hover fill on buttons are global — do not override them.

Philosophy