Drop the "You are reading content from Scuttlebutt" banner

Upstream ssb-viewer printed it above every page, aimed at people who had
arrived at a stray scuttlebutt message and needed context. On cust.ooo the
context is the site itself, so it was explaining the wrong thing.

Removes the function, all four call sites and the now-dead .top-tip CSS.

Adds a "Changing how pages look" section to the README, since the real
question was where this lives. There is no template directory - pages are
built as strings in render.js with one <style> block - so the answer is
"grep for the text you can see", and the table maps each visible piece to the
function that emits it. It also records the two things that will bite an
editor: hyperscript silently drops attributes it mistakes for DOM properties
(why loading="lazy" uses setAttribute), and only text passed through h() is
escaped.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0192zBTNZKZn5svyJ5HTnYds

render.js

@@ -120,24 +120,31 @@ function wrap(before, after) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Page furniture. These are the bits of chrome wrapped around every page, and
+// they are the things most likely to want changing.
+//
+//   callToAction()  the "Join Scuttlebutt now" button at the foot of a page
+//   footer          just below it: licence, repo name, deployed commit
+//   styles          the single <style> block; .item-* rules are the grid
+//   itemsHeader()   the /items title, count and search box
+//
+// Removed already: toolTipTop(), which printed "You are reading content from
+// Scuttlebutt" above every page. It is in the git history if it is ever wanted
+// back.
+// ---------------------------------------------------------------------------
+
 function callToAction() {
   return h('a.call-to-action',
            { href: 'https://www.scuttlebutt.nz' },
            'Join Scuttlebutt now').outerHTML
 }
 
-function toolTipTop() {
-  return h('span.top-tip',
-           'You are reading content from ',
-           h('a', { href: 'https://www.scuttlebutt.nz' },
-             'Scuttlebutt')).outerHTML
-}
-
 function renderAbout(opts, about, showAllHTML = "") {
   if (about.publicWebHosting === false || (about.publicWebHosting == null && opts.requireOptIn)) {
     return pull(
       pull.map(renderMsg.bind(this, opts, '')),
-      wrap(toolTipTop() + '<main>', '</main>' + callToAction())
+      wrap('<main>', '</main>' + callToAction())
     )
   }
 
@@ -145,7 +152,7 @@ function renderAbout(opts, about, showAllHTML = "") {
   figCaption.innerHTML = 'Feed of ' + escape(about.name) + '<br>' + marked(String(about.description || ''), opts.marked)
   return pull(
     pull.map(renderMsg.bind(this, opts, '')),
-    wrap(toolTipTop() + '<main>' +
+    wrap('<main>' +
          h('article',
            h('header',
              h('figure',
@@ -162,7 +169,7 @@ function renderAbout(opts, about, showAllHTML = "") {
 function renderThread(opts, id, showAllHTML = "") {
   return pull(
     pull.map(renderMsg.bind(this, opts, id)),
-    wrap(toolTipTop() + '<main>', 
+    wrap('<main>', 
          showAllHTML + '</main>' + callToAction())
   )
 }
@@ -239,15 +246,6 @@ var styles = `
     }
     a { color: #364fc7; }
 
-    .top-tip, .top-tip a {
-      color: #868e96;
-    }
-    .top-tip {
-      text-align: center;
-      display: block;
-      margin-bottom: 10px;
-      font-size: 14px;
-    }
     main { margin: 0 auto; max-width: 40rem; }
     main article:first-child { border-radius: 3px 3px 0 0; }
     main article:last-child { border-radius: 0 0 3px 3px; }
@@ -717,7 +715,7 @@ function renderShowAll(showAll, url) {
 function renderItemGrid(opts, meta) {
   return pull(
     pull.map(renderItemCard.bind(this, opts)),
-    wrap(toolTipTop() + itemsHeader(opts, meta) + '<main class="item-grid">',
+    wrap(itemsHeader(opts, meta) + '<main class="item-grid">',
          '</main>' + itemsFooter(opts, meta) + callToAction())
   )
 }