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

2026-08-26 18:44:17 +00:00
3 changed files with 31 additions and 7 deletions
@@ -131,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);
@@ -197,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). */
@@ -300,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 {
@@ -936,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;
@@ -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`
  }
 }

@@ -73,7 +73,9 @@
 /* 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;