Improved mobile layout. Banner section gets smaller and editor goes full screen.

frontend/src/TransitionGraph.vue

@@ -8,7 +8,7 @@
  */
 import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
 import { DAY } from './analytics/time.js'
-import { formatCount } from './analytics/format.js'
+import { formatCount, formatReadTime } from './analytics/format.js'
 import {
   TNODE_W,
   TNODE_H,
@@ -151,7 +151,7 @@ onBeforeUnmount(() => cancelAnimationFrame(rafId))
 const fitsPill = (label, fontPx = 19) => label.length * 0.52 * fontPx <= TNODE_W - 16
 
 const countLabel = (n) =>
-  n.readMin ? `${formatCount(n.views)}×${n.readMin}m` : formatCount(n.views)
+  n.readSec ? `${formatCount(n.views)}×${formatReadTime(n.readSec)}` : formatCount(n.views)
 </script>
 
 <template>

frontend/src/analytics/transitions.js

@@ -259,8 +259,8 @@ function sortByNav(root, navOrder) {
   walk(root)
 }
 
-/** Compute median reading time per article in whole minutes. */
-function buildReadMinutes(visits) {
+/** Compute median reading time per article in seconds. */
+function buildReadSeconds(visits) {
   const times = {}
   for (const v of visits || []) {
     for (const [path, sec] of Object.entries(v.read || {})) {
@@ -269,19 +269,19 @@ function buildReadMinutes(visits) {
       }
     }
   }
-  const minutes = {}
+  const seconds = {}
   for (const [path, arr] of Object.entries(times)) {
     arr.sort((a, b) => a - b)
     const mid = Math.floor(arr.length / 2)
     const median =
       arr.length % 2 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2
-    minutes[path] = Math.max(1, Math.round(median / 60))
+    seconds[path] = Math.round(median)
   }
-  return minutes
+  return seconds
 }
 
 /** Compute view counts, labels and hidden flags for each node. */
-function annotateNodes(nodes, viewsData, titles, readMinutes) {
+function annotateNodes(nodes, viewsData, titles, readSeconds) {
   const viewCount = (p) => {
     let n = 0
     for (const c of Object.values(viewsData?.[p] || {})) n += c
@@ -290,7 +290,7 @@ function annotateNodes(nodes, viewsData, titles, readMinutes) {
 
   for (const n of nodes) {
     n.views = viewCount(n.path)
-    n.readMin = readMinutes[n.path] || 0
+    n.readSec = readSeconds[n.path] || 0
     // Article title inside the pill (clipped at the pill border on
     // render), slug as fallback for pages missing from the site tree.
     n.label = titles.get(n.path) || (n.path === '/' ? '🏠︎' : n.path.split('/').pop())
@@ -895,13 +895,13 @@ export function buildTransitionGraph(data, pageTree, visits = [], dayScale = 1)
   const exits = collectExitPairs(data?.transitions)
   const navOrder = buildNavigationOrder(pageTree)
   const titles = buildTitleMap(pageTree)
-  const readMinutes = buildReadMinutes(visits)
+  const readSeconds = buildReadSeconds(visits)
 
   if (!internal.length && !navOrder.size) return null
 
   const { nodes, byPath, root } = buildNodeTree(internal, navOrder)
   sortByNav(root, navOrder)
-  annotateNodes(nodes, data?.views, titles, readMinutes)
+  annotateNodes(nodes, data?.views, titles, readSeconds)
   const { arcs, arcLeft } = layoutGroups(root)
   const placed = nodes.filter((n) => !n.hidden)
   const pairs = aggregatePairs(internal)

frontend/src/assets/pagerite.css

@@ -65,6 +65,11 @@
   box-sizing: border-box;
 }
 
+::selection {
+  background: color-mix(var(--accent) 30%, transparent);
+  color: inherit;
+}
+
 /* Links never underline — including SVG link text, which the UA stylesheet
    underlines by default. */
 a {
@@ -126,7 +131,10 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 13rem;
+  /* Height scales down proportionally on small screens: 13rem at 800px
+     (50rem) viewport, shrinking with the smaller of viewport width/height
+     (vmin) below that, floored at 8rem. */
+  height: clamp(8rem, 26vmin, 13rem);
   box-sizing: content-box;
   background: linear-gradient(135deg, var(--surface), var(--bg));
   border-bottom: 1px solid var(--line);
@@ -192,7 +200,9 @@ body {
 #brand {
   font-family: var(--font-brand);
   font-weight: 700;
-  font-size: 2.4rem;
+  /* Scales down proportionally on small screens, same curve as the banner
+     height: 2.4rem at 800px, shrinking with vmin below that. */
+  font-size: clamp(1.4rem, 4.8vmin, 2.4rem);
   text-decoration: none;
   /* One line always: pagerite.js shrinks the font size to fit instead of
      wrapping (the themed size is the maximum). */
@@ -295,9 +305,10 @@ body.editing #sidebar {
   bottom: 0;
   left: 0;
   width: var(--editor-w);
-  /* Above the sidebar and .edit-link while sliding in/out (the host now
-     lives at the end of <body>, so it needs its own stacking level). */
-  z-index: 3;
+  /* Above the sidebar, .edit-link and the banner's top-right pens
+     (z-index 10) while sliding in/out (the host now lives at the end of
+     <body>, so it needs its own stacking level). */
+  z-index: 10;
 }
 
 .editor-root.overlay {
@@ -931,6 +942,17 @@ article h2 {
     gap: 0.15rem 0.9rem;
   }
 
+  /* The editor panel takes over the entire viewport: no space left for
+     the banner or the page content (main.js pins its top to 0 at these
+     widths). */
+  body.editing #content {
+    margin-left: 0;
+  }
+
+  .editor-host {
+    width: 100vw;
+  }
+
   #content {
     display: flex;
     flex-direction: column;

frontend/src/main.js

@@ -51,10 +51,15 @@ function setEditingClass(enable) {
 // the page: its top is the banner's bottom edge while the banner is visible
 // (= #content's top edge), and the viewport top once the banner has
 // scrolled away. The window keeps scrolling normally while editing.
+// Below 48rem the panel covers the entire viewport (pagerite.css), so its
+// top stays 0 regardless of the banner.
+const narrow = matchMedia('(max-width: 48rem)')
 function trackPanelTop() {
   const content = document.getElementById('content')
   if (host && content) {
-    host.style.top = `${Math.max(0, content.getBoundingClientRect().top)}px`
+    host.style.top = narrow.matches
+      ? '0px'
+      : `${Math.max(0, content.getBoundingClientRect().top)}px`
   }
 }
 

pagerite/themes/corporate/theme.css

@@ -32,11 +32,6 @@
   }
 }
 
-::selection {
-  background: var(--accent);
-  color: #fff;
-}
-
 /* Genuinely large solid brand with a soft blue shadow overlapping the
    artwork — conservative, but unmissable. */
 #brand {

pagerite/themes/nitro/banner.css

@@ -2,12 +2,6 @@
    (inlined by the backend into #page-banner), in neutral dark greys that
    follow the page's color scheme. */
 
-/* Bezier-swept banner with wide orange stripes (inlined SVG), separated
-   from the page by a straight orange blade. */
-#banner {
-  border-bottom: 4px solid var(--accent);
-}
-
 /* Banner artwork dark tones: neutral greys in light mode (retinted to the
    page's violet family by the dark-scheme block below). */
 .nb-base {

pagerite/themes/nitro/theme.css

@@ -63,13 +63,19 @@
 
 ::selection {
   background: var(--accent);
-  color: var(--ink);
+}
+
+/* Any banner used is separated from page by a thick orange line */
+#banner {
+  border-bottom: 4px solid var(--accent);
 }
 
 /* Oversized outlined brand, spilling off the banner edge: orange stroke,
    solid black fill. */
 #brand {
-  font-size: 10rem;
+  /* Scales down proportionally below ~1000px: 10rem at a 62.5rem viewport,
+     shrinking with vmin (smaller of viewport width/height) below that. */
+  font-size: clamp(2.5rem, 16vmin, 10rem);
   line-height: 1.2;
   font-weight: 700;
   letter-spacing: 0.04em;

pagerite/themes/purple/theme.css

@@ -19,11 +19,6 @@
   --font-heading: var(--font-fraunces);
 }
 
-::selection {
-  background: var(--accent2);
-  color: #fff;
-}
-
 /* Oversized tilted brand in the sky→violet gradient. */
 #brand {
   font-size: clamp(3.2rem, 9vw, 7.5rem);

pagerite/themes/summer/theme.css

@@ -57,11 +57,6 @@ body {
   color: var(--text);
 }
 
-::selection {
-  background: var(--sun);
-  color: #3d5223;
-}
-
 /* No separation between banner and page: the frame loses its background,
    border and shadow, and the artwork overflows into the document below,
    masked by a transparency gradient so it cross-fades into the body's fixed