From ac1ce34e46ba705b1537a786cd7905cbe5c1322b Mon Sep 17 00:00:00 2001
From: Francis Lavoie <lavofr@gmail.com>
Date: Wed, 11 May 2022 00:07:16 -0400
Subject: [PATCH] css: Rework how paper is positioned

On Firefox, we were seeing an extra large horizontal scrollbar. Didn't happen on Chrome though. I think it's an edgecase bug with Firefox... but I think we can take a better approach that can avoid it anyways.

The CSS for `paper` classes was set up so that they would stack/overlap onto eachother. It was using `left: -100%;` and `left: -200%;` on `paper2` and `paper3`, to stack the next two on top of the first one, all three being relative positioned.

The problem comes because I think Firefox calculates the scrollbar width before relative positioning calculations come into play, so because the elements were rendered way off to the right before being moved over, it would "grow" the page really wide. Go to https://caddyserver.com/docs/ on any browser, element inspector, find `#paper2` and `.paper3`, uncheck the `left` CSS prop on both of those. You'll see that they render over to the right.

An alternate way to do the same thing is to use negative margins to stack the elements. I think margins are calculated earlier, so on Firefox this doesn't cause a scrollbar problem.

I did need to use a `calc()` unfortunately to get it pixel-perfect positioning compared to how it was before, because `#paper1` has `margin-left: 20px` and then `#paper2` inherits that margin so it needs to remove the extra 20px to realign. `calc()` is cheap though. It's fine.

Also, need `z-index: -1;` to make sure the BG papers go behind the page content.
---
 src/resources/css/docs.css | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/resources/css/docs.css b/src/resources/css/docs.css
index f870c62..5061f33 100644
--- a/src/resources/css/docs.css
+++ b/src/resources/css/docs.css
@@ -182,8 +182,6 @@ main nav li li a {
 }
 
 .paper {
-	position: relative;
-	flex-shrink: 0;
 	width: 100%;
 
 	background: white;
@@ -198,20 +196,22 @@ main nav li li a {
 }
 
 #paper1 {
-	top: -20px;
-	left: 20px;
+	margin-top: -20px;
+	margin-left: 20px;
 	transform: rotate(3deg);
+	z-index: -1;
 }
 
 #paper2 {
-	top: 30px;
-	left: -100%;
+	margin-top: 30px;
+	margin-left: calc(-100% - 20px);
 	transform: rotate(-5deg);
+	z-index: -1;
 }
 
 .paper3 {
-	top: 20px;
-	left: -200%;
+	margin-top: 20px;
+	margin-left: -100%;
 }
 
 .article-container {
@@ -220,6 +220,7 @@ main nav li li a {
 	flex-grow: 1;
 	min-width: 0;
 	margin: 20px;
+	margin-bottom: 0;
 	width: 100%;
 	max-width: 1100px;
 }