added progress indicator container

themes/hello-friend-ng/assets/scss/_single.scss

@@ -42,7 +42,7 @@
   }
 
   &-content {
-    margin-top: 30px;
+    // margin-top: 10px;
     text-align: justify;
     h2 {
       text-align: center;
@@ -223,6 +223,16 @@
   }
 }
 
+#progress-bar-container {
+  height: .9rem;
+  position: sticky;
+  top: 0;
+  background-color: $light-background;
+  .dark-theme & {
+    background-color: $dark-background;
+  }
+}
+
 #progress-bar {
   --scrollAmount: 0%;
     background-color: $light-color-secondary;
@@ -231,6 +241,6 @@
   }
   width: var(--scrollAmount);
   height: .5rem;
+  top: .2rem;
   position: sticky;
-  top: 0;
 }

themes/hello-friend-ng/layouts/stories/single.html

@@ -28,7 +28,9 @@
                 <img src="/{{ . }}" class="post-cover" />
             {{ end }}
             
-            <div id="progress-bar"></div>
+            <div id="progress-bar-container">
+               <div id="progress-bar"></div>
+            </div>
             
             <div class="post-content story">
                 {{ .Content }}