Inter, one file where WordPress listed two, and a pin heading on line

Inter (#11): the pages are set in Inter's variable font, served from the
binary at /inter.woff2 as the icon is, with its OFL licence beside it in
web/. Classic keeps Lucida Grande, the 2004 app's face.

Double audio (#12): WordPress numbers each audio player on a page by
adding ?_=N to its file's URL, so a post that embeds the file it encloses
listed it twice, and it was downloaded twice. The parser keeps the first
of an item's enclosures that differ only by that number. At startup the
repeats already stored fold into the first; where only the repeat had
been downloaded its file moves to the first rather than being deleted.

Pin heading (#13): the rows' icon buttons kept the browser's side
padding, which pushed their 16px icon 3px right of centre, and the
heading's icon sat at the left of its column. Both are centred now, and
the heading row takes the pixel of border the rows have, so every
heading sits over its column.

Closes #11, closes #12, closes #13.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/index.html

@@ -7,6 +7,10 @@
 <title>iPodderX</title>
 <link rel="icon" href="/icon.png">
 <style>
+/* Inter, served by ipx itself (/inter.woff2) rather than a font CDN, so the page asks nothing of
+   anyone else. One variable file covers every weight used here; italics are synthesized. Classic
+   keeps Lucida Grande, the 2004 app's face. */
+@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
 /* Palette taken from the 2004 iPodderX icon: the silver device body, the blue
    screen, and the amber EQ bars. Hex values in comments are sampled straight from it. */
 :root {
@@ -91,7 +95,7 @@
 html,body{height:100%}
 body{
   margin:0;background:var(--bg);color:var(--fg);
-  font:14.5px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+  font:14.5px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
   display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden;
   /* iOS Safari's address bar collapses and expands without firing a resize, so 100vh is
      measured against whichever state happened to be current -- sized too tall while the bar
@@ -338,8 +342,10 @@ kbd{font:inherit;font-size:12px;color:var(--fg);background:var(--panel2);border:
   display:grid;gap:8px;align-items:center;
   grid-template-columns:22px 22px minmax(120px,1fr) minmax(0,160px) 56px minmax(0,72px) minmax(0,92px) 64px;
 }
+/* A pixel more side padding than a row's: a row has a 1px border the heading has not, and without
+   it every heading sat a pixel left of its column. */
 .ephead{
-  position:sticky;top:0;z-index:2;background:var(--bg);padding:7px 10px 5px;
+  position:sticky;top:0;z-index:2;background:var(--bg);padding:7px 11px 5px;
   border-bottom:1px solid var(--line);margin-bottom:3px;
   font-size:12px;color:var(--faint);
 }
@@ -351,13 +357,19 @@ kbd{font:inherit;font-size:12px;color:var(--fg);background:var(--panel2);border:
 .ephead .hs .arr .i{width:8px;height:8px}
 .ephead .hs .arr.asc{transform:rotate(-90deg)}
 .ephead .hs .arr.desc{transform:rotate(90deg)}
+/* An icon heading is centred over its column, as the icons under it are, and its caret hangs
+   outside so sorting by it does not push the icon off line. */
+.ephead .hs.h-ic{justify-content:center;position:relative;width:100%}
+.ephead .hs.h-ic .arr{position:absolute;left:100%}
 .ep{padding:4px 10px;border-radius:7px;border:1px solid transparent;cursor:pointer;margin-bottom:1px}
 .ep>*{min-width:0}
 .ep.sel{background:var(--raise);border-color:var(--line)}
 .ep:hover{background:var(--panel)}
 /* Amber means new: the unread dot, the badges and a download under way. Blue is for the one
    primary action and links, so a count no longer looks like a button. */
-.ep .st,.ep .fl{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:11px;color:var(--accent2)}
+/* No padding: a button keeps the browser's side padding, which left too little room for the 16px
+   icon, so it spilled 3px right of centre and off line with its heading. */
+.ep .st,.ep .fl{width:22px;height:22px;padding:0;border-radius:5px;display:grid;place-items:center;font-size:11px;color:var(--accent2)}
 .ep .fl{color:var(--faint);font-size:13px}
 .ep .fl.on{color:var(--fg)}
 /* The icon's EQ bars mark what is playing: standing still, and moving only while it plays. A
@@ -1045,7 +1057,7 @@ const COLS=[['kept','Pinned',ICON.pin],['title','Title'],['feed','Feed'],['type'
 function sortHead(){
   return '<div class="ephead"><span></span>'+COLS.map(([k,label,icon])=>{
     const on=S.sort.col===k;
-    return `<button class="hs${on?' on':''}${k==='feed'?' h-fd':''}" data-sort="${k}"`+
+    return `<button class="hs${on?' on':''}${k==='feed'?' h-fd':''}${icon?' h-ic':''}" data-sort="${k}"`+
       ` title="Sort by ${label.toLowerCase()}" aria-label="Sort by ${label.toLowerCase()}">${icon||label}`+
       `${on?`<span class="arr ${S.sort.dir}">${ICON.caret}</span>`:''}</button>`;
   }).join('')+'<span></span></div>';