Eric WagonerandClaude Fable 5.2
2dba395059
Static site for builds.kestrelsnest.social: an index page with one card per build, an rsync deploy script modelled on pantry, and the Green Man mask guide with its templates and print files. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GrX9qMoNihcWLX3xoJhabw
84 lines
4.6 KiB
HTML
84 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kestrel's Nest Builds</title>
|
|
<meta name="description" content="Things I've made from foam, filament and paint, written up so you can make them too.">
|
|
|
|
<!-- OpenGraph -->
|
|
<meta property="og:title" content="Kestrel's Nest Builds">
|
|
<meta property="og:description" content="Things I've made from foam, filament and paint, written up so you can make them too.">
|
|
<meta property="og:image" content="https://builds.kestrelsnest.social/og-image.jpg">
|
|
<meta property="og:url" content="https://builds.kestrelsnest.social">
|
|
<meta property="og:type" content="website">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Kestrel's Nest Builds">
|
|
<meta name="twitter:description" content="Things I've made from foam, filament and paint, written up so you can make them too.">
|
|
<meta name="twitter:image" content="https://builds.kestrelsnest.social/og-image.jpg">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Inter:wght@400;600;700&display=swap">
|
|
<style>
|
|
/* layout: a short masthead, then one card per build in a grid that fills as builds are added */
|
|
:root {
|
|
--bg: #f3f5f1; --surface: #ffffff; --fg: #1b201c; --muted: #5d665f; --line: #d3d9d1; --accent: #2c6a31;
|
|
--display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
|
|
--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root { --bg: #141815; --surface: #1c221d; --fg: #e7ece6; --muted: #9aa59b; --line: #313a32; --accent: #7fc27f; color-scheme: dark; }
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.6; }
|
|
.wrap { max-width: 1060px; margin: 0 auto; padding: 48px 16px 80px; }
|
|
header { margin-bottom: 40px; }
|
|
.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; color: var(--accent); margin: 0 0 10px; }
|
|
h1, h2 { font-family: var(--display); line-height: 1.12; margin: 0; text-wrap: balance; }
|
|
h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); letter-spacing: -0.02em; }
|
|
.lead { font-size: 1.15rem; line-height: 1.5; max-width: 60ch; margin: 14px 0 0; }
|
|
.builds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
|
|
.build a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; }
|
|
.build a:hover, .build a:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.build img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
|
|
.build .text { padding: 16px 18px 20px; }
|
|
.build h2 { font-size: 1.35rem; margin-bottom: 6px; }
|
|
.build p { margin: 0; color: var(--muted); font-size: 0.95rem; }
|
|
.build .tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.build .tags span { border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: 0.78rem; color: var(--fg); }
|
|
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }
|
|
footer a { color: var(--accent); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header>
|
|
<p class="kicker">Kestrel's Nest</p>
|
|
<h1>Builds</h1>
|
|
<p class="lead">Things I've made from foam, filament and paint, written up so you can make them too. Each build comes with its templates, print files and a step-by-step guide.</p>
|
|
</header>
|
|
|
|
<main>
|
|
<ul class="builds">
|
|
<!-- One <li class="build"> per build, newest first. See README.md, "Adding a build". -->
|
|
<li class="build">
|
|
<a href="greenman/">
|
|
<img src="greenman/img/finished.jpg" alt="A Green Man half-mask of oak leaves, acorns and bark, worn with glasses and a green knitted hood." width="1100" height="1466">
|
|
<div class="text">
|
|
<h2>Green Man mask</h2>
|
|
<p>A half-mask of oak leaves, acorns and bark, built for people who wear glasses. Foam for the structure, with a handful of 3D-printed details.</p>
|
|
<div class="tags"><span>EVA foam</span><span>3D printing</span><span>Costume</span></div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
|
|
<footer>
|
|
Part of <a href="https://kestrelsnest.social">Kestrel's Nest</a>.
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|