builds/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kestrel's Builds</title>
<link rel="icon" href="favicon.svg">
<meta name="description" content="Things I&#39;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">
<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:site_name" content="Kestrel's Builds">
<meta property="og:image" content="https://builds.kestrelsnest.social/og.png">
<meta property="og:image:alt" content="The Kestrel's Builds front page: the site name over a card for the Green Man mask, a half-mask of painted oak leaves worn with glasses.">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<style>
  /* 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 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 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>
    <p>Part of <a href="https://kestrelsnest.social">Kestrel's Nest</a>.</p>
  </footer>
</div>
</body>
</html>