mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-22 04:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

css: Rework how paper is positioned (#230)

Browse source 
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.
This commit is contained in:
Francis Lavoie 2022-05-11 13:28:10 -04:00 • committed by GitHub
parent e0541c0f3f
commit e03cbec7c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/resources/css/docs.css
View file

@ -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;
}