diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css index e67e7f8..ba1d9e5 100644 --- a/frontend/src/assets/pagerite.css +++ b/frontend/src/assets/pagerite.css @@ -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 , 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 + , 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; diff --git a/frontend/src/main.js b/frontend/src/main.js index da58d2f..7170dc5 100644 --- a/frontend/src/main.js +++ b/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` } } diff --git a/pagerite/themes/nitro/theme.css b/pagerite/themes/nitro/theme.css index 6300993..e7d4c3d 100644 --- a/pagerite/themes/nitro/theme.css +++ b/pagerite/themes/nitro/theme.css @@ -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;