Update Styling/Alignment on PageIndex Embedding

otterwiki/renderer_embeddings.py

@@ -1196,7 +1196,7 @@ def embedding_render(
                 + '</ul></div>'
             )
 
-        togglediv = f"""<div class="d-inline-block custom-switch font-size-12 mb-10" style="transform: translateY(-36px);float:right;">
+        togglediv = f"""<div class="d-inline-block custom-switch font-size-12 mb-10">
     <input type="checkbox" id="switch-headings" {"checked" if show_toc else ""} value="" onchange="otterwiki.toggleClass(event.target.checked,'pagetoc')"><label for="switch-headings">Toggle page headings</label>
 </div>"""
 

otterwiki/static/css/elements/page.css

@@ -147,3 +147,35 @@
     margin: 0;
     background-color: transparent;
 }
+
+.page .pageindex-header {
+    font-size: var(--content-title-font-size);
+}
+
+/* Embedded PageIndex: move heading toggle into the title row */
+.pageindex-embedding {
+    position: relative;
+}
+
+/* The toggle immediately before an embedded index */
+.pageindex-embedding:before {
+    content: "";
+    display: block;
+}
+
+/* Parent page title + toggle alignment */
+article.page > h1 + .custom-switch {
+    float: right;
+    margin-top: -4.4rem;
+    margin-bottom: 0;
+}
+
+/* Recover the vertical space used by the old toggle position */
+article.page > h1 + .custom-switch + .pageindex-embedding {
+    clear: both;
+    margin-top: -2.75rem;
+}
+
+article.page .pageindex-embedding {
+    padding-top: 0.1rem;
+}

otterwiki/templates/pageindex.html

@@ -13,7 +13,7 @@
 {% block body_attrs %}data-index-path="{{ pagepath | slugify(keep_slashes=True) }}"{% endblock %}
 {% block content %}
     <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-10">
-        <h2 class="mb-0">{{ title }}</h2>
+        <h2 class="my-0">{{ title }}</h2>
 
         <div class="custom-switch font-size-12">
             <input