Add sticky div to Package details template

[johnmhoran]

Reference: #1263

[TG1999]

@johnmhoran thanks ++, can we have some before and after screengrabs for changes done by this PR ?

[johnmhoran]

@TG1999 Here are before and after screenshots. I'll also update main and merge into my 1263 branch and push that shortly.

Before at top:

Before when scrolled:

After at top:

After when scrolled:

[TG1999]

@johnmhoran LGTM! I was thinking if we could use rem instead of px https://austingil.com/px-or-rem-in-css/#:~:text=Pixels%20are%20an%20absolute%20unit,the%20equivalent%20of%2024%20pixels.

[johnmhoran]

@TG1999 Well, with 1263-package-details-sticky-div checked out, in custom.css we have 96 instances of px being used, and 5 instances of px for widths in the template package_details.html.

I could take the time to calculate the rem equivalent (no idea how straightforward that process is), make the changes, then test the UI to check for any odd results -- I gather rem is relative rather than absolute so there likely will be visual changes as a result. Not sure that's a good use of my time right now as I'm trying to finally put my 1228 branch to bed but will turn to the px-rem work if that's what you and @pombredanne want me to focus on now. Please let me know.

[johnmhoran]

Presumably I'd then also need to make the same sorts of changes in my 1228 branch, to the extent not covered in the sticky div branch, right?

[johnmhoran]

@TG1999 Looking more broadly in the files, there seem to be several thousand px references. Change all of them to rem?

[TG1999]

@johnmhoran leave px to rem for now, it can be addressed separately

[TG1999]

LGTM!

[johnmhoran]

@TG1999 OK. But if we need to convert from px to rem then I do want to correct my use of px. Is there a relatively easy and sane way to do that conversion?