<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$if(title)$$title$ - $endif$Caxton ADR</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ADR-specific styles */
.adr-content {
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.adr-content h1 {
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
font-size: 2.5rem;
}
.adr-content h2 {
color: var(--accent-primary);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-md);
}
.adr-content h3 {
color: var(--text-primary);
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
}
.adr-content p {
margin-bottom: var(--spacing-md);
line-height: 1.8;
}
.adr-content ul, .adr-content ol {
margin-bottom: var(--spacing-md);
padding-left: var(--spacing-lg);
}
.adr-content li {
margin-bottom: var(--spacing-xs);
line-height: 1.8;
}
.adr-content code {
background-color: var(--bg-surface);
padding: 0.2em 0.4em;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.875em;
}
.adr-content pre {
background-color: var(--bg-tertiary);
border-radius: 8px;
padding: var(--spacing-md);
overflow-x: auto;
margin-bottom: var(--spacing-md);
}
.adr-content pre code {
background-color: transparent;
padding: 0;
}
.adr-metadata {
color: var(--text-muted);
font-size: 0.875rem;
margin-bottom: var(--spacing-xl);
}
</style>
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="nav-content">
<div class="nav-brand">
<div class="logo-container">
<img src="../img/logo.svg" alt="Caxton Logo" class="logo">
</div>
<span class="brand-text">Caxton</span>
</div>
<div class="nav-links">
<a href="../" class="nav-link">Home</a>
<a href="../#features" class="nav-link">Features</a>
<a href="../#architecture" class="nav-link">Architecture</a>
<a href="../caxton/" class="nav-link">API Docs</a>
<a href="./" class="nav-link">ADRs</a>
<a href="https://github.com/jwilger/caxton" class="nav-link github-link">
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.71-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.56-1.11-4.56-4.93 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02.8-.22 1.65-.33 2.5-.33.85 0 1.7.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85 0 1.34-.01 2.42-.01 2.75 0 .27.18.58.69.48C19.14 20.16 22 16.42 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
GitHub
</a>
</div>
</div>
</div>
</nav>
<div style="height: 80px;"></div>
<main class="adr-content">
$if(date)$
<div class="adr-metadata">
Date: $date$
</div>
$endif$
$body$
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-left">
<img src="../img/logo.svg" alt="Caxton Logo" class="footer-logo">
<p>MIT License</p>
</div>
<div class="footer-links">
<a href="https://github.com/jwilger/caxton">GitHub</a>
<a href="../">Home</a>
<a href="./">All ADRs</a>
<a href="https://github.com/jwilger/caxton/tree/main/docs/adr">View Source</a>
</div>
</div>
</div>
</footer>
<script src="../js/adr-carousel.js"></script>
</body>
</html>