qc-text-builder/web/templates/_shared.gohtml

{{define "nav"}}
<nav>
  <a href="/" {{if eq .Current "/"}}aria-current="page"{{end}}>Home</a>
  <a href="/settings" {{if eq .Current "/settings"}}aria-current="page"{{end}}>Settings</a>
  <a href="/templates" {{if eq .Current "/templates"}}aria-current="page"{{end}}>Templates</a>
  <a href="/builds/new" {{if eq .Current "/builds/new"}}aria-current="page"{{end}}>New Build</a>
</nav>
{{end}}

{{define "head"}}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  :root { color-scheme: light; }
  body { font-family: "Segoe UI", Tahoma, sans-serif; margin: 2rem auto; max-width: 1100px; padding: 0 1rem; line-height: 1.35; }
  nav { margin-bottom: 1rem; display: flex; gap: 1rem; }
  a[aria-current="page"] { font-weight: 700; }
  h1, h2 { margin: .4rem 0 .6rem; }
  table { border-collapse: collapse; width: 100%; margin: .8rem 0 1.2rem; }
  th, td { border: 1px solid #ddd; padding: .45rem .5rem; vertical-align: top; }
  th { background: #f6f6f6; text-align: left; }
  form.inline { display: inline; }
  input[type="text"], input[type="email"], input[type="number"], textarea, select { width: 100%; padding: .4rem; box-sizing: border-box; }
  textarea { min-height: 4rem; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
  .flash { padding: .6rem .8rem; margin-bottom: .8rem; border-radius: 4px; }
  .flash-ok { background: #ecf8ed; border: 1px solid #84c08a; }
  .flash-err { background: #fdecec; border: 1px solid #dc8f8f; }
  .mono { font-family: Consolas, "Courier New", monospace; white-space: pre-wrap; word-break: break-word; }
  .thumb-hover { position: relative; display: inline-block; }
  .thumb-preview {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + .35rem);
    z-index: 20;
    width: 260px;
    max-width: min(70vw, 360px);
    background: #fff;
    border: 1px solid #cfcfcf;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    border-radius: 4px;
    padding: .35rem;
  }
  .thumb-preview img { display: block; width: 100%; height: auto; border-radius: 2px; }
  .thumb-hover:hover .thumb-preview,
  .thumb-hover:focus-within .thumb-preview { display: block; }
</style>
{{end}}