List markers: balanced indent via a centered full-indent box (--list-indent), ordered-list counters, task checkboxes seated as markers with label-wrapped toggle text, summer ⚜️ bullets.

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 {

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)

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 {

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);
 }
 

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 {