From 77436398123904199400d3183478fd4e3ee7adb2 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Fri, 28 Aug 2026 19:26:51 +0000
Subject: [PATCH] =?UTF-8?q?List=20markers:=20balanced=20indent=20via=20a?=
 =?UTF-8?q?=20centered=20full-indent=20box=20(--list-indent),=20ordered-li?=
 =?UTF-8?q?st=20counters,=20task=20checkboxes=20seated=20as=20markers=20wi?=
 =?UTF-8?q?th=20label-wrapped=20toggle=20text,=20summer=20=E2=9A=9C?=
 =?UTF-8?q?=EF=B8=8F=20bullets.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/pagerite.css | 67 ++++++++++++++++++++++++++------
 pagerite/markdown.py             |  4 +-
 pagerite/themes/nitro/theme.css  |  3 +-
 pagerite/themes/purple/theme.css |  9 +++--
 pagerite/themes/summer/theme.css |  7 ++--
 5 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index 96f5d7c..31b2371 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -625,37 +625,82 @@ article * + h6 {
 }
 
 /* Lists: small diamond emoji markers — blue 🔹 on odd nesting levels,
-   orange 🔸 on even. The marker occupies a 1em outdented box so wrapped
-   lines align. */
-article ul {
+   orange 🔸 on even; ordered lists get muted counters (an explicit
+   [type] attribute keeps the browser's native markers). The marker box
+   spans the whole --list-indent (outdented from the text column,
+   centered), so the space on both sides of the glyph is equal whatever
+   its advance width — emoji diamonds, chevrons, flowers, whatever a
+   theme swaps in. The box is em-sized so it tracks the local text size
+   (e.g. smaller in asides); a theme that shrinks the glyph via
+   font-size must widen the box by the inverse factor (see the purple
+   theme) to keep it spanning the indent. */
+article :is(ul, ol:not([type])) {
   list-style: none;
-  padding-inline-start: 1.8em;
+  padding-left: 0;
+  --list-indent: 2em;
+}
+
+article :is(ul, ol:not([type])) > li {
+  padding-left: var(--list-indent);
 }
 
 article ul li::before {
   content: "🔹";
   display: inline-block;
-  margin-left: -1.3em;
-  width: 1.3em;
+  margin-left: calc(-1 * var(--list-indent));
+  width: var(--list-indent);
+  text-align: center;
 }
 
 article ul ul li::before {
   content: "🔸";
 }
 
-article ul ul ul li::before {
-  content: "🔹";
+article ol:not([type]) {
+  list-style: none;
+  counter-reset: item;
+}
+
+article ol:not([type]) > li {
+  counter-increment: item;
+}
+
+article ol:not([type]) > li::before {
+  content: counter(item) ".";
+  color: var(--muted);
+  display: inline-block;
+  margin-left: calc(-1 * var(--list-indent));
+  width: var(--list-indent);
+  text-align: left;
+}
+
+/* Task lists: real clickable checkboxes. The checkbox stands in for the
+   list marker — taken out of flow, left-aligned in the indent box and
+   centered on the first line's middle, so the item text starts at the
+   same edge as every other list item's. */
+article .task-list-item {
+  position: relative;
 }
 
-/* Task lists: real checkboxes (not emoji), clickable in the public page. */
 article .task-list-item::before {
   content: none;
 }
 
 article .task-list-item-checkbox {
+  position: absolute;
+  left: 0;
+  top: calc(0.5lh - .15ex);
+  translate: 0 -50%;
+  font-size: inherit;
+  line-height: inherit;
   cursor: pointer;
-  margin-inline-end: 0.35em;
-  vertical-align: middle;
+}
+
+/* The item text is a <label for> the checkbox (tasklists label_after):
+   clicking it toggles too — without selecting the text on repeat clicks. */
+article .task-list-item label {
+  cursor: pointer;
+  user-select: none;
 }
 
 article {
diff --git a/pagerite/markdown.py b/pagerite/markdown.py
index f2bfc65..db2ac00 100644
--- a/pagerite/markdown.py
+++ b/pagerite/markdown.py
@@ -412,7 +412,9 @@ md = (
     .use(container_plugin, "block", validate=_container_validate)
     .use(footnote_plugin)
     .use(deflist_plugin)
-    .use(tasklists_plugin, enabled=True)
+    # label_after: the item text is wrapped in <label for> after the
+    # checkbox, so clicking the text toggles it.
+    .use(tasklists_plugin, enabled=True, label=True, label_after=True)
     .use(gfm_autolink_plugin)
     .use(sub_plugin)
     .use(superscript_plugin)
diff --git a/pagerite/themes/nitro/theme.css b/pagerite/themes/nitro/theme.css
index 430aa4e..1c5f8d2 100644
--- a/pagerite/themes/nitro/theme.css
+++ b/pagerite/themes/nitro/theme.css
@@ -183,8 +183,7 @@ article ul ul li::before {
 }
 
 article ul ul ul li::before {
-  content: "»";
-  color: var(--accent);
+  color: var(--muted);
 }
 
 blockquote {
diff --git a/pagerite/themes/purple/theme.css b/pagerite/themes/purple/theme.css
index 69eedf2..65f0af3 100644
--- a/pagerite/themes/purple/theme.css
+++ b/pagerite/themes/purple/theme.css
@@ -60,12 +60,14 @@ article h3 {
 }
 
 /* Theme-colored diamond markers instead of the base emoji (blue/orange
-   clashes with this palette). */
+   clashes with this palette). The text-style ◆ runs heavy at full size,
+   so it's shrunk with font-size, the box is widened to compensate. */
 article ul li::before {
   content: "◆";
   color: var(--accent);
-  font-size: 0.7em;
-  vertical-align: 0.15em;
+  font-size: 0.8em;
+  margin-left: calc(-1 * var(--list-indent) / 0.8);
+  width: calc(var(--list-indent) / 0.8);
 }
 
 article ul ul li::before {
@@ -74,7 +76,6 @@ article ul ul li::before {
 }
 
 article ul ul ul li::before {
-  content: "◆";
   color: var(--accent3);
 }
 
diff --git a/pagerite/themes/summer/theme.css b/pagerite/themes/summer/theme.css
index cb7493f..e0aa3f7 100644
--- a/pagerite/themes/summer/theme.css
+++ b/pagerite/themes/summer/theme.css
@@ -205,12 +205,11 @@ article a:hover {
   color: var(--accent);
 }
 
-/* Flower bullets, one accent per nesting level. */
+/* Fleur-de-lis on the first level, flowers below — one accent per level.
+   (⚜️ renders emoji-style, so it needs no shrinking like the flowers.) */
 article ul li::before {
-  content: "❀";
+  content: "⚜️";
   color: var(--accent3);
-  font-size: 0.8em;
-  vertical-align: 0.1em;
 }
 
 article ul ul li::before {