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
+  /* Above the sidebar, .edit-link and the banner's top-right pens
-     lives at the end of <body>, so it needs its own stacking level). */
+     (z-index 10) while sliding in/out (the host now lives at the end of
-  z-index: 3;
+     <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;