Refine line-based story scrolling

public/css/style.css

@@ -424,9 +424,17 @@ ol.choice {
 }
 
 #paragraphs {
+    position: relative;
     box-sizing: border-box;
     overflow: visible !important;
     overflow-anchor: none;
+    margin: 0;
+    padding: 0;
+    transition: opacity 220ms ease;
+}
+
+#paragraphs.story-history-fading {
+    opacity: 0;
 }
 
 .story-block-archiving {
@@ -453,20 +461,11 @@ ol.choice {
 
 .story-image-landscape,
 .story-image-square {
-    clear: both;
     margin-left: auto;
     margin-right: auto;
 }
 
 .story-image-portrait {
-    float: left;
-    margin-left: 0;
-    margin-right: 0;
-    shape-outside: inset(0);
-}
-
-.story-image-portrait.story-image-float-right {
-    float: right;
     margin-left: 0;
     margin-right: 0;
 }
@@ -546,6 +545,10 @@ ol.choice {
     pointer-events: auto;
 }
 
+#story_scrollbar[data-dragging="true"] #story_scrollbar_thumb {
+    transition: none;
+}
+
 
 /* ===== Scrollbar CSS ===== */
   /* Firefox */