119 lines
4.0 KiB
HTML
119 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ book.title }} · Album</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
html { background: #0a0a0a; }
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
line-height: 1.6;
|
|
color: #e5e5e5;
|
|
background: #15803d;
|
|
}
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.logo { width: 64px; height: 64px; color: white; }
|
|
h1 { font-size: 2rem; margin: 0; color: white; }
|
|
.tagline {
|
|
color: rgba(255,255,255,0.85);
|
|
margin-bottom: 2rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
|
padding-bottom: 2rem;
|
|
}
|
|
section {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
margin: 1.5rem 0;
|
|
border-radius: 12px;
|
|
color: #1a1a1a;
|
|
}
|
|
section h2 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1.2rem;
|
|
color: #15803d;
|
|
}
|
|
.composition {
|
|
background: #f0fdf4;
|
|
border: 2px solid #15803d;
|
|
padding: 1rem;
|
|
border-radius: 12px;
|
|
}
|
|
.composition h3 { margin: 0 0 0.75rem 0; font-size: 1.1rem; color: #15803d; }
|
|
.components {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
.component {
|
|
background: white;
|
|
border: 1px solid #bbf7d0;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: #1a1a1a;
|
|
transition: all 0.15s;
|
|
display: block;
|
|
}
|
|
.component:hover {
|
|
border-color: #15803d;
|
|
box-shadow: 0 4px 12px rgba(21, 128, 61, 0.15);
|
|
}
|
|
.component h4 { margin: 0 0 0.5rem 0; font-size: 1rem; color: #15803d; }
|
|
.component p { margin: 0; font-size: 0.9rem; color: #666; }
|
|
.component .arrow { float: right; color: #15803d; font-size: 1.2rem; }
|
|
footer {
|
|
margin-top: 3rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid rgba(255,255,255,0.3);
|
|
font-size: 0.85rem;
|
|
color: rgba(255,255,255,0.7);
|
|
}
|
|
footer a { color: white; text-decoration: none; }
|
|
footer a:hover { text-decoration: underline; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<svg class="logo" viewBox="0 0 48 48" fill="currentColor">
|
|
<path d="M4 8 C4 8 12 6 24 10 L24 42 C12 38 4 40 4 40 Z" opacity="0.3"/>
|
|
<path d="M44 8 C44 8 36 6 24 10 L24 42 C36 38 44 40 44 40 Z" opacity="0.5"/>
|
|
<path d="M4 8 C4 8 12 6 24 10 M44 8 C44 8 36 6 24 10" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M4 40 C4 40 12 38 24 42 M44 40 C44 40 36 38 24 42" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="24" y1="10" x2="24" y2="42" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<h1>{{ book.title }}</h1>
|
|
</header>
|
|
<p class="tagline">Templated book</p>
|
|
|
|
<section>
|
|
<div class="composition">
|
|
<h3>{{ book.title }}</h3>
|
|
<div class="components">
|
|
<a href="/book/{{ book.slug }}/template/" class="component">
|
|
<span class="arrow">→</span>
|
|
<h4>{{ book.template.title }}</h4>
|
|
</a>
|
|
<a href="/book/{{ book.slug }}/larder/" class="component">
|
|
<span class="arrow">→</span>
|
|
<h4>{{ book.larder.title }}</h4>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<a href="/">← Album</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|