404.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/theme-init.js"></script>
<title>Well, that was unexpected — scriptease.dev</title>
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/style.css">
<style>
  .not-found h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5rem; }
  .not-found .sub { color: var(--muted); margin: 0 0 2.5rem; }
  .suggestions { }
  .suggestions h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 1rem; }
  .suggestions ul { list-style: none; margin: 0; padding: 0; }
  .suggestions li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .suggestions li:last-child { border-bottom: none; }
  .suggestions .entry-link { font-size: 1.15rem; font-weight: 600; color: var(--ink); text-decoration: none; }
  .suggestions .entry-link:hover { color: var(--accent); }
  .suggestions time { display: block; color: var(--muted); font-size: .8rem; margin-top: .2rem; }
  .suggestions .hook { color: var(--muted); font-size: .9rem; margin: .3rem 0 0; }
  .suggestions .read-more { display: block; text-align: right; margin-top: .5rem; font-size: .9rem; font-weight: 600; }
</style>
</head>
<body>
<header class="site">
  <a class="brand" href="/"><img class="brand-shark" src="/shark.png" alt="" width="20" height="20"> scriptease.dev</a>
  <div class="header-actions">
    <div class="site-search" id="site-search">
      <input class="search-input" id="search-input" type="search" placeholder="Search posts…" aria-label="Search posts">
      <button class="search-toggle" id="search-toggle" aria-label="Search" title="Search" aria-expanded="false">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
      </button>
      <div class="search-results" id="search-results" hidden></div>
    </div>
    <a class="rss-link" href="/feed.xml" aria-label="RSS feed" title="RSS feed">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><circle cx="6.2" cy="17.8" r="2.2"/><path d="M4 4v3a13 13 0 0 1 13 13h3A16 16 0 0 0 4 4z"/><path d="M4 10.5v3A6.5 6.5 0 0 1 10.5 20h3A9.5 9.5 0 0 0 4 10.5z"/></svg>
    </a>
    <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
      <svg class="icon-moon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
      <svg class="icon-sun" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6L19 19M19 5l-1.4 1.4M6.4 17.6L5 19"/></svg>
    </button>
    <button class="menu-toggle" id="menu-toggle" aria-label="Menu" aria-expanded="false">☰</button>
  </div>
</header>
<div class="layout">
  <main>
    <div class="not-found">
      <h1>Well, that was unexpected.</h1>
      <p class="sub">The page you're looking for doesn't exist. Maybe I can interest you in one of these?</p>
    </div>
    <div class="suggestions" id="suggestions">
      <h2>Latest posts</h2>
      <ul id="post-list"></ul>
    </div>
  </main>
  <aside class="sidebar" id="sidebar"></aside>
</div>
<footer class="site">
  <span>scriptease.dev — Notes from building with AI, one story at a time. Well, not this story. It wasn't found.</span>
</footer>
<script src="/posts.js"></script>
<script>
(function() {
  var list = document.getElementById('post-list');
  var posts = (window.POSTS || []).slice(0, 5);
  posts.forEach(function(p) {
    var li = document.createElement('li');
    li.innerHTML = '<a class="entry-link" href="/posts/' + p.slug + '/">' + p.title + '</a>'
      + '<time>' + p.date + '</time>'
      + (p.hook ? '<p class="hook">' + p.hook + '</p>' : '')
      + '<a class="read-more" href="/posts/' + p.slug + '/">Read more →</a>';
    list.appendChild(li);
  });
})();
</script>
<noscript><meta http-equiv="refresh" content="5;url=/"></noscript>
<script src="/sidebar.js"></script>
<script>
(function() {
  var cloud = document.querySelector('.side-cloud');
  if (!cloud) return;
  var tag = document.createElement('span');
  tag.textContent = '#404';
  tag.className = 'on';
  tag.style.fontSize = '0.75rem';
  tag.style.color = 'var(--accent)';
  cloud.appendChild(document.createTextNode(' '));
  cloud.appendChild(tag);
})();
</script>
</body>
</html>