From 43b841ebb6a5bf41c5328565acfafbfb99436608 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Tue, 18 Aug 2026 22:33:11 +0000
Subject: [PATCH] Add a mobile layout (48rem breakpoint) and the missing
 viewport meta

Pages now declare width=device-width, so phones render at real device
width instead of a scaled-down 980px layout viewport. Below 48rem the
content becomes a single column with the sidebar lifted above the
article as a wrapping link strip; floated .left/.right figures fall back
to plain centered figures (explicit img widths still shrink-wrap) and
.wide keeps its centered full-viewport bleed.
---
 frontend/src/assets/pagerite.css | 49 ++++++++++++++++++++++++++++++++
 pagerite/views.py                |  3 ++
 2 files changed, 52 insertions(+)

diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index 58ecfe9..9a955db 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -855,6 +855,55 @@ article h2 {
   }
 }
 
+/* Phones and other narrow viewports: single-column layout with the
+   sidebar lifted above the article as a wrapping link strip, and no
+   floated figures — .left/.right fall back to plain centered figures
+   (explicit img widths still shrink-wrap), while .wide keeps its full
+   viewport bleed. */
+@media (max-width: 48rem) {
+  #content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #sidebar {
+    position: static;
+    width: auto;
+    max-height: none;
+    overflow-y: visible;
+    border-radius: 0;
+    padding: 0.5rem 1rem;
+  }
+
+  #sidebar ul {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.2rem;
+  }
+
+  figure:has(.right),
+  figure:has(.left) {
+    float: none;
+    width: 100%;
+    max-width: none;
+    margin: 0 auto 1.5rem;
+  }
+
+  /* An explicit img width still shrink-wraps the figure (redeclared: this
+     block comes after the desktop rule at equal specificity). */
+  figure:has(img[width]) {
+    width: fit-content;
+  }
+
+  /* The 102rem sidebar/multicol .wide margins assume a left sidebar
+     column; with the sidebar on top the article is viewport-wide and the
+     plain centered bleed applies again. */
+  body:has(#sidebar):not(.editing) figure:has(.wide),
+  body:has(.multicol) figure:has(.wide) {
+    margin-inline: calc(50% - 50vw);
+  }
+}
+
 /* Scroll reveal (pagerite.js adds .reveal/.in; JS off = fully visible) */
 .reveal {
   opacity: 0;
diff --git a/pagerite/views.py b/pagerite/views.py
index bb17eb4..1a63d30 100644
--- a/pagerite/views.py
+++ b/pagerite/views.py
@@ -128,6 +128,9 @@ def _layout(
     order intact.
     """
     doc = Document(E.Title, lang="en")
+    # Responsive layout (see the 48rem breakpoint in pagerite.css) needs
+    # the real device width, not the default 980px layout viewport.
+    doc.meta(name="viewport", content="width=device-width, initial-scale=1")
     # A custom favicon (from the site editor) is linked explicitly; without
     # one, browsers fall back to the build's /favicon.ico by convention.
     if favicon: