fix: Use relative position for toc indicator during scroll on mobile (#396)

Co-authored-by: Robert Schuster <77234379+therobrob@users.noreply.github.com>

Author: MoritzWeber0

assets/sass/contentNavigation.scss

@@ -12,14 +12,12 @@
   flex-wrap: wrap;
   height: fit-content;
 
-  ul,
-  ol {
+  ul {
     list-style-type: none;
     list-style-position: outside;
     padding-left: 0;
 
-    ul,
-    ol {
+    ul {
       margin-bottom: 0;
     }
   }
@@ -54,11 +52,33 @@
     list-style-type: none;
   }
 
-  ol {
+  ul {
     padding: 0 0 0 1em;
   }
 
-  > ol {
+  ul a[data-current]::before {
+    left: -2.1rem;
+  }
+
+  ul ul a[data-current]::before {
+    left: calc(-1em - 2.1rem);
+  }
+
+  a[data-current] {
+    font-weight: bold;
+    position: relative;
+
+    &:before {
+      content: "";
+      width: 0.4rem;
+      height: 2.1rem;
+      position: absolute;
+      display: flex;
+      background-color: var(--link-default);
+    }
+  }
+
+  > ul {
     padding-left: 0;
   }
 }
@@ -67,20 +87,6 @@
   display: flex;
 }
 
-.o-aside__toc a[data-current] {
-  font-weight: bold;
-
-  &:before {
-    content: "";
-    width: 0.4rem;
-    height: 2.1rem;
-    position: absolute;
-    display: flex;
-    left: 0;
-    background-color: var(--link-default);
-  }
-}
-
 .o-related {
   &__list {
     list-style-type: none;
@@ -144,8 +150,6 @@
       background: var(--bg-default);
       overflow-y: scroll;
       overscroll-behavior-y: contain;
-      border-left: var(--border);
-      border-right: var(--border);
 
       .o-single__container {
         border: none;
@@ -162,8 +166,10 @@
       flex-direction: column;
       gap: 1.5rem;
       width: 100%;
-      border: var(--border);
+      border-top: var(--border);
       border-bottom: 1px solid #3d444d;
+      border-left: none;
+      border-right: none;
       padding: 1rem;
       height: 6.4rem;
       border-radius: 1rem 1rem 0 0;

layouts/partials/toc.html

@@ -76,10 +76,10 @@
           >{{ .Title | plainify | safeHTML }}</a
         >
         {{- with and (lt .Level $ctx.endLevel) .Headings }}
-          <ol>
+          <ul>
             {{- $ctx = merge $ctx (dict "headings" .) }}
             {{- partial "inline/toc/walk.html" $ctx }}
-          </ol>
+          </ul>
         {{- end }}
       </li>
     {{- else }}