Rename to Kestrel's Builds, restyle index after Kestrel's Hall
Index copy no longer promises templates or print files for every build. Add tip jar link and back links from the Green Man page to the index. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GrX9qMoNihcWLX3xoJhabw
This commit is contained in:
Eric WagonerandClaude Fable 5.2 committed
1 parent
2dba395059
commit
4dc9a51731
4 files changed
+134
-75
No files matched your search
+120
-65
@@ -1,82 +1,137 @@
|
||||
<!DOCTYPE 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 charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Kestrel's Builds</title>
|
||||
<meta name="description" content="Things I've made, written up so you can make them too. Each build comes with a guide and whatever files the project needs, free to download.">
|
||||
<link rel="canonical" href="https://builds.kestrelsnest.social/">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta property="og:title" content="Kestrel's Builds">
|
||||
<meta property="og:description" content="Things I've made, written up so you can make them too.">
|
||||
<meta property="og:url" content="https://builds.kestrelsnest.social/">
|
||||
<meta property="og:image" content="https://builds.kestrelsnest.social/og-image.jpg">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<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); }
|
||||
/* Sister page to Kestrel's Hall: same ink, bone and gold, same serif, one card per build. */
|
||||
:root {
|
||||
--ink: #14181a;
|
||||
--panel: #1c2124;
|
||||
--line: #2c3236;
|
||||
--bone: #e6dfcf;
|
||||
--bone-dim: #a9a494;
|
||||
--gold: #d2a94a;
|
||||
--gutter: 16px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html { background: var(--ink); color-scheme: dark; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--ink);
|
||||
color: var(--bone);
|
||||
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: var(--gold); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
|
||||
|
||||
header.mast { padding: 56px 0 28px; text-align: center; }
|
||||
header.mast h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 400; letter-spacing: 0.01em; line-height: 1.05; }
|
||||
header.mast p.lede { margin: 14px auto 0; max-width: 38em; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--bone-dim); }
|
||||
header.mast p.lede b { color: var(--bone); font-weight: 500; }
|
||||
|
||||
.builds { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
|
||||
.build {
|
||||
display: flex; flex-direction: column;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.build:hover, .build:focus-visible { border-color: var(--gold); text-decoration: none; outline: none; }
|
||||
.build:hover h2, .build:focus-visible h2 { color: var(--gold); }
|
||||
/* The newest build has the whole width: photo beside the words. */
|
||||
.build.first { grid-column: 1 / -1; flex-direction: row; }
|
||||
.build.first .art { flex: 0 0 55%; aspect-ratio: 2 / 1; }
|
||||
.build.first .body { justify-content: center; padding: 22px 26px; }
|
||||
.build.first h2 { font-size: 1.9rem; }
|
||||
.build .art { aspect-ratio: 5 / 3; background: #222; overflow: hidden; }
|
||||
.build .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.build .art img.greenman { object-position: 50% 27%; }
|
||||
.build .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
|
||||
.build h2 { margin: 0; font-size: 1.45rem; font-weight: 500; }
|
||||
.build .pitch { margin: 0; color: var(--bone); }
|
||||
.build .made { margin: 0; color: var(--bone-dim); font-size: 0.92rem; }
|
||||
.build .kit { margin: 0; color: var(--bone-dim); font-size: 0.85rem; }
|
||||
@media (max-width: 860px) {
|
||||
.builds { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
|
||||
.build.first { flex-direction: column; }
|
||||
.build.first .art { flex: none; aspect-ratio: 5 / 3; }
|
||||
.build.first .body { padding: 16px 18px 18px; }
|
||||
.build.first h2 { font-size: 1.45rem; }
|
||||
}
|
||||
|
||||
section { margin-top: 56px; }
|
||||
section h2 { font-size: 1.6rem; font-weight: 400; margin: 0 0 12px; }
|
||||
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
|
||||
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; gap: 28px; } }
|
||||
section p { margin: 0 0 12px; color: var(--bone-dim); }
|
||||
section p b { color: var(--bone); font-weight: 500; }
|
||||
ul.how { margin: 0; padding-left: 1.2em; color: var(--bone-dim); }
|
||||
ul.how li { margin-bottom: 8px; }
|
||||
ul.how b { color: var(--bone); font-weight: 500; }
|
||||
|
||||
footer { margin-top: 64px; padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--bone-dim); font-size: 0.9rem; }
|
||||
footer p { margin: 0 0 8px; }
|
||||
</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 class="mast">
|
||||
<h1>Kestrel's Builds</h1>
|
||||
<p class="lede"><b>Things I've made, written up so you can make them too.</b> The builds vary. One might be foam and printed parts, another a paint technique, a sewing project or some electronics. Each comes with whatever it takes to finish the project, and all of it is free to download.</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 class="builds">
|
||||
<!-- One <a class="build"> per build, newest first. The newest also takes the class "first". See README.md, "Adding a build". -->
|
||||
<a class="build first" href="greenman/">
|
||||
<div class="art"><img class="greenman" src="greenman/img/finished.jpg" alt="A Green Man half-mask worn with glasses and a green knitted hood: a crown of painted oak leaves above a bark brow ridge, acorns at the temples and a single leaf over the nose."></div>
|
||||
<div class="body">
|
||||
<h2>Green Man mask</h2>
|
||||
<p class="pitch">A half-mask of oak leaves, acorns and bark, built to be worn with glasses.</p>
|
||||
<p class="made">EVA foam and a few 3D-printed parts, about 8 hours over three evenings</p>
|
||||
<p class="kit">Templates, print files, a build guide and a painting guide</p>
|
||||
</div>
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<section class="cols">
|
||||
<div>
|
||||
<h2>What comes with a build</h2>
|
||||
<ul class="how">
|
||||
<li><b>A guide</b> that takes the work in the order it has to happen, with drawings or photos along the way.</li>
|
||||
<li><b>A list of materials and tools,</b> so you know what to gather before you start.</li>
|
||||
<li><b>Whatever files the project calls for.</b> That could be full-size templates, a sewing pattern, print files, a wiring diagram or code. Some builds need none.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Who makes these</h2>
|
||||
<p>I am Eric, and I make these at a workbench in Athens, Georgia. Each one is something I built and wore or used first. The write-up came afterwards, once I knew what worked.</p>
|
||||
<p>I also keep a hall of free board games at <a href="https://gamehall.kestrelsnest.social">Kestrel's Hall</a>, and I roost at <a href="https://blog.kestrelsnest.social">blog.kestrelsnest.social</a>.</p>
|
||||
<h2 style="margin-top:28px">Tip jar</h2>
|
||||
<p>The builds are free and will stay free. Materials and filament do add up, though, and anyone who wants to chip in toward them can do so at <a href="https://ko-fi.com/kestrelsnest" style="white-space:nowrap">ko-fi.com/kestrelsnest</a>. Chipping in unlocks nothing, and every build is the same for everyone.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
Part of <a href="https://kestrelsnest.social">Kestrel's Nest</a>.
|
||||
<p>Part of <a href="https://kestrelsnest.social">Kestrel's Nest</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in new issue
Block a user