Broke up the paragraphs, tidying up.

index.html

@@ -44,13 +44,22 @@
             
             <p class="article-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, turpis quis blandit placerat, leo ipsum eleifend nisi, quis pharetra leo ante ut ante.</p>
             <p class="article-text">Curabitur vel accumsan ipsum, at eleifend ipsum. Morbi at ante sed ex hendrerit sollicitudin. Maecenas eleifend urna dui, vel sagittis metus accumsan in.</p>
-            <p class="article-text">Etiam iaculis tristique accumsan. Donec a ante nec urna ullamcorper hendrerit non eu felis. Donec laoreet erat sit amet iaculis rutrum. Aliquam quis lobortis sem. Phasellus quis vestibulum metus. Curabitur ullamcorper feugiat hendrerit. Vestibulum sodales arcu et commodo tincidunt. Morbi vehicula arcu nec sem dapibus vestibulum. Proin consequat nibh dolor, bibendum blandit purus maximus tempus. Suspendisse eget iaculis eros. Mauris at velit et nisi tincidunt laoreet eu tristique elit. Suspendisse eleifend sollicitudin vestibulum.</p>
-            <p class="article-text">Curabitur mattis volutpat libero. Donec ornare vel massa vel dignissim. Quisque nec ex non sapien molestie tristique ac id elit. Aenean vitae pharetra arcu. Proin porttitor ultricies auctor. In vitae facilisis urna. Donec sed vulputate urna. Phasellus consectetur odio vitae ultrices imperdiet.</p>
-            <p class="article-text">Pellentesque sapien odio, lobortis vitae odio elementum, luctus aliquam orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae nisi mauris. Fusce porta, tellus vel aliquet ultrices, odio diam euismod neque, sollicitudin ultricies nisl augue sed lectus. Praesent sodales a metus venenatis condimentum. Integer augue ipsum, volutpat sollicitudin congue quis, aliquam ut lacus. Aliquam dapibus enim id molestie rhoncus. Quisque vel massa in elit tincidunt consectetur sit amet vel ipsum. Praesent maximus mi quis nibh malesuada, in aliquam tellus molestie. Praesent ac cursus nisi. Sed varius mauris ut ultrices tempus.</p>
-            <p class="article-text">Nullam faucibus nibh sit amet faucibus eleifend. Morbi id neque in leo consequat egestas placerat sed ante. Nullam cursus efficitur elit, vel viverra felis tincidunt ac. Praesent ac sem ac lorem pulvinar feugiat a aliquet dui. Proin dictum vitae dolor et efficitur. Aliquam aliquam dictum imperdiet. Mauris scelerisque non ante ac viverra. Aliquam ut arcu sed turpis pretium faucibus. In tincidunt efficitur metus non iaculis. Integer nec turpis id dolor rutrum consectetur ac at ipsum. Donec at ultricies urna. Mauris ac risus neque. Nullam dolor lorem, iaculis eu luctus tempus, mollis nec massa.</p>
-            <p class="article-text">Aliquam erat volutpat. Donec finibus imperdiet purus, eget vestibulum felis tempus eget. Nam aliquet dolor sit amet dui mollis ornare. Mauris accumsan tristique magna quis placerat. Vestibulum dignissim nisi ac erat blandit, vitae facilisis ex finibus. Pellentesque porttitor risus ut scelerisque rutrum. Etiam venenatis ante sem. In hac habitasse platea dictumst. Nullam imperdiet euismod risus id mattis. Pellentesque placerat augue enim, pulvinar venenatis lectus mollis ut. Curabitur eget sodales orci. Proin suscipit dolor nunc, ac tincidunt ante dapibus ac. Proin in enim accumsan urna interdum aliquam. Phasellus sed mattis risus. Donec ligula ante, iaculis finibus blandit scelerisque, hendrerit non erat.</p>
-            <p class="article-text">Cras suscipit facilisis augue in finibus. Nullam tristique eros sed ex placerat aliquet. Nullam in semper nibh. Integer porta maximus elit, a venenatis tellus lacinia a. Cras ac semper sem, non ornare enim. Integer finibus, leo eu convallis efficitur, lorem elit dictum nibh, sed scelerisque mauris mi eu quam. Donec gravida urna et elit tempor, sed pulvinar massa eleifend. Sed a nibh sit amet ipsum finibus sollicitudin vel et ligula. Nulla eget aliquam tellus. Cras tincidunt massa vitae dolor placerat imperdiet. Nunc tellus elit, blandit eget pulvinar eu, cursus ut eros. Nulla id lectus non elit mollis congue. Curabitur faucibus sodales ligula, id porttitor libero viverra egestas. Duis vitae rutrum lorem. Maecenas auctor molestie dolor ut ullamcorper. Cras ornare lobortis dui id hendrerit.</p>
-            <p class="article-text">Integer ultricies lectus a imperdiet sollicitudin. Praesent facilisis, magna vitae volutpat ullamcorper, urna tellus auctor nisl, pharetra efficitur lectus libero eu nibh. Proin vitae fermentum metus. Ut in tincidunt felis. Vestibulum auctor nec diam at ultricies. Nam massa libero, lobortis non ornare eget, ultrices at velit. Ut semper ex libero, molestie iaculis enim blandit id. Phasellus feugiat sapien vitae ligula tincidunt, id hendrerit tortor egestas. Quisque sit amet ligula ante. Mauris scelerisque porttitor dapibus. Mauris mattis et augue vulputate facilisis. In congue, enim at viverra iaculis, neque sapien maximus quam, vitae maximus neque odio vel sapien. Sed auctor odio justo, ac elementum lacus eleifend a. Pellentesque tortor velit, mollis eu felis eget, consequat iaculis nulla. Sed vel nibh enim. Cras ornare lacus volutpat metus vehicula, in molestie massa cursus.</p>
+            <p class="article-text">Etiam iaculis tristique accumsan. Donec a ante nec urna ullamcorper hendrerit non eu felis. Donec laoreet erat sit amet iaculis rutrum. Aliquam quis lobortis sem. Phasellus quis vestibulum metus. Curabitur ullamcorper feugiat hendrerit.</p> 
+            <p class="article-text">Vestibulum sodales arcu et commodo tincidunt. Morbi vehicula arcu nec sem dapibus vestibulum. Proin consequat nibh dolor, bibendum blandit purus maximus tempus.</p>
+            <p class="article-text">Suspendisse eget iaculis eros. Mauris at velit et nisi tincidunt laoreet eu tristique elit. Suspendisse eleifend sollicitudin vestibulum. Curabitur mattis volutpat libero. Donec ornare vel massa vel dignissim. </p>
+            <p class="article-text">Quisque nec ex non sapien molestie tristique ac id elit. Aenean vitae pharetra arcu. Proin porttitor ultricies auctor. In vitae facilisis urna. Donec sed vulputate urna. Phasellus consectetur odio vitae ultrices imperdiet.</p>
+            <p class="article-text">Pellentesque sapien odio, lobortis vitae odio elementum, luctus aliquam orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae nisi mauris.</p>
+            <p class="article-text">Nullam faucibus nibh sit amet faucibus eleifend. Morbi id neque in leo consequat egestas placerat sed ante. Nullam cursus efficitur elit, vel viverra felis tincidunt ac. Praesent ac sem ac lorem pulvinar feugiat a aliquet dui. Proin dictum vitae dolor et efficitur.</p>
+            <p class="article-text">Aliquam erat volutpat. Donec finibus imperdiet purus, eget vestibulum felis tempus eget. Nam aliquet dolor sit amet dui mollis ornare. Mauris accumsan tristique magna quis placerat. Vestibulum dignissim nisi ac erat blandit, vitae facilisis ex finibus.</p>
+            <p class="article-text">Pellentesque porttitor risus ut scelerisque rutrum. Etiam venenatis ante sem. In hac habitasse platea dictumst. Nullam imperdiet euismod risus id mattis. Pellentesque placerat augue enim, pulvinar venenatis lectus mollis ut.</p>
+            <p class="article-text">Curabitur eget sodales orci. Proin suscipit dolor nunc, ac tincidunt ante dapibus ac. Proin in enim accumsan urna interdum aliquam. Phasellus sed mattis risus. Donec ligula ante, iaculis finibus blandit scelerisque, hendrerit non erat.</p>
+            <p class="article-text">Cras suscipit facilisis augue in finibus. Nullam tristique eros sed ex placerat aliquet. Nullam in semper nibh. Integer porta maximus elit, a venenatis tellus lacinia a.</p>
+            <p class="article-text">Cras ac semper sem, non ornare enim. Integer finibus, leo eu convallis efficitur, lorem elit dictum nibh, sed scelerisque mauris mi eu quam. Donec gravida urna et elit tempor, sed pulvinar massa eleifend. Sed a nibh sit amet ipsum finibus sollicitudin vel et ligula.</p>
+            <p class="article-text">Nulla eget aliquam tellus. Cras tincidunt massa vitae dolor placerat imperdiet. Nunc tellus elit, blandit eget pulvinar eu, cursus ut eros. Nulla id lectus non elit mollis congue. Curabitur faucibus sodales ligula, id porttitor libero viverra egestas. </p>
+            <p class="article-text">Duis vitae rutrum lorem. Maecenas auctor molestie dolor ut ullamcorper. Cras ornare lobortis dui id hendrerit.</p>
+            <p class="article-text">Integer ultricies lectus a imperdiet sollicitudin. Praesent facilisis, magna vitae volutpat ullamcorper, urna tellus auctor nisl, pharetra efficitur lectus libero eu nibh. Proin vitae fermentum metus.</p>
+            <p class="article-text">Ut in tincidunt felis. Vestibulum auctor nec diam at ultricies. Nam massa libero, lobortis non ornare eget, ultrices at velit. Ut semper ex libero, molestie iaculis enim blandit id. Phasellus feugiat sapien vitae ligula tincidunt, id hendrerit tortor egestas.</p>
+            <p class="article-text">Quisque sit amet ligula ante. Mauris scelerisque porttitor dapibus. Mauris mattis et augue vulputate facilisis. In congue, enim at viverra iaculis, neque sapien maximus quam, vitae maximus neque odio vel sapien. Sed auctor odio justo, ac elementum lacus eleifend Pellentesque tortor velit, mollis eu felis eget, consequat iaculis nulla. Sed vel nibh enim. Cras ornare lacus volutpat metus vehicula, in molestie massa cursus.</p>
 
             <div class="mt-5">
                 <button class="btn btn-block btn-secondary">Show 89 comments <i class="fa fa-commenting-o"></i></button>
@@ -136,12 +145,8 @@
             const screenWidth = document.querySelector(".article-text").scrollWidth + foldWidth;
             wrapper.scrollLeft = screenWidth * pageNumber;
             
-            // Update the paging button visibility.
-            // For the left button, hide it if we're on the first page (page zero).
-            // For the right button, hide it if we're on the last page.
+            // Hide the "page left" button if we're on the first page (page zero).
             document.querySelector(".paging-btn-left").style.visibility = pageNumber === 0 ? "hidden" : "visible";
-            document.querySelector(".paging-btn-right").style.visibility = pageNumber === 15 ? "hidden" : "visible";
-            console.log("zanz ", article.offsetWidth, document.querySelector(".category").getBoundingClientRect().x);
         }
 
         // Clicking the menu at the top left toggles spanning.
@@ -151,7 +156,8 @@
         document.querySelector(".paging-btn-left").addEventListener("click", () => scrollToPage(currentPage - 1));
         document.querySelector(".paging-btn-right").addEventListener("click", () => scrollToPage(currentPage + 1));
 
-        fakeSetSpanningMode("single-fold-vertical");
+        // Set us to single-fold-vertical by default.
+        // fakeSetSpanningMode("single-fold-vertical");
 
     </script>
 

styles.css

@@ -70,6 +70,7 @@ body {
         padding: 60px 0; /*No padding on the left or right so that the article controls the full area. */
         overflow-x: scroll; 
         scroll-behavior: smooth;
+        overflow-x: hidden;
     }
 
     .article {
@@ -84,8 +85,6 @@ body {
     .article > * {
         max-width: env(fold-left);
         padding: 0 60px;
-        /* margin-left: 8px; */
-        /* margin-left: calc(env(fold-width) / 2); */
         margin-right: env(fold-width);
     }