🐛 Fix § section/collapse indicators

ebullient · Dec 7, 2023 · cca1dfb · cca1dfb
1 parent e69ddd0
commit cca1dfb
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 21 deletions.
diff --git a/src/fragments/_00-stylesettings.scss b/src/fragments/_00-stylesettings.scss
@@ -15,6 +15,12 @@ settings:
     description: Set this to true if you are going to use your own tag snippet
     type: class-toggle
     default: false
+  -
+    id: ebullientworks-nix-heading-marker
+    title: Suppress/Remove leading § from headings
+    description: Set this to true to remove the § from headings in reading mode
+    type: class-toggle
+    default: false
   -
     id: ebullientworks-reverse-view-header-actions
     title: View header actions to the left

diff --git a/src/fragments/_04-headings-hr-tags.scss b/src/fragments/_04-headings-hr-tags.scss
@@ -62,28 +62,50 @@ h1,
   @include variants-caps-header-one;
 }
 
+@mixin section-icon {
+  content: "\00a0\00a7\00a0";
+  font-size: 0.5em;
+  font-weight: 200;
+  position: relative;
+  vertical-align: middle;
+  font-family: var(--font-default);
+  visibility: visible;
+}
+
 @mixin before-header-one {
-  h1::before,
-  h2::before,
-  h3::before,
-  h4::before,
-  h5::before,
-  h6::before {
-    content: "\00a7\00a0";
-    font-size: 0.5em;
-    font-weight: 200;
-    position: relative;
-    vertical-align: middle;
-    font-family: var(--font-default);
+  &:not(:has(.collapse-indicator))::before {
+    @include section-icon;
+  }
+  .collapse-indicator {
+    opacity: 1;
+    visibility: hidden;
+    margin-left: var(--ebw-collapse-icon-width);
+    &:hover {
+      visibility: visible;
+    }
+    &:after {
+      @include section-icon;
+    }
   }
 }
 
-.markdown-rendered,
+/* Mark headers as sections § */
+body:not(.ebullientworks-nix-heading-marker) {
+  .markdown-rendered,
   .print {
-    @include before-header-one;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      --ebw-collapse-icon-width: -28px;
+      @include before-header-one;
+    }
   }
+}
 
-  /* Tag formatting */
+/* Tag formatting */
 body:not(.ebullientworks-nix-tags) {
   --tag-background: transparent;
   --tag-background-hover: transparent;

diff --git a/src/fragments/_04a-headings-hr-tags-app.scss b/src/fragments/_04a-headings-hr-tags-app.scss
@@ -5,14 +5,15 @@
   @include head.variants-caps-header-one;
 }
 
-.HyperMD-header,
-.workspace {
-  .is-live-preview .HyperMD-header .cm-header::before,
-  .workspace {
-    @include head.before-header-one;
+/* Mark headers as sections § */
+body:not(.ebullientworks-nix-heading-marker) {
+  .is-live-preview {
+    .HyperMD-header {
+      --ebw-collapse-icon-width: -26px;
+      @include head.before-header-one;
+    }
   }
 }
-
 .cm-s-obsidian {
   .cm-header.cm-inline-code {
     font-weight: var(--font-extralight);