Fix: (layouts/partials/footer.html) Alignment

[alphapapa]

This removes the hard-coded padding-left property from these UL elements. It fixes the alignment in a narrow (e.g. smartphone) display, and in a wide (e.g. desktop) display, the difference is insignificant and no worse.

Fixes #192. Thanks to Pamphile Roy (@tupui) for reporting.

Screenshots

Before changes

After changes

[netlify]

✅ Deploy Preview for scientific-python-hugo-theme ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	560f07f
🔍 Latest deploy log	https://app.netlify.com/sites/scientific-python-hugo-theme/deploys/6462dc9b758ab10008b858c8
😎 Deploy Preview	https://deploy-preview-230--scientific-python-hugo-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[alphapapa]

The second commit adjusts margins around the .hero-title and .hero-logo. I'm not sure that this is ideal yet, but it prevents squashing elements too close together or too close to the screen edge.

A noticeable difference is that the "Scientific Python" text is more often split onto separate lines, depending on screen size. At some sizes, this is inevitable, but at wider ones it could be avoided by widening the containing element. But some of this is a matter of style or preference.

@jarrodmillman @tupui What do you think? Thanks.

Screenshots

Before:

After:

[tupui]

Thanks @alphapapa 🚀

For the first commit, it's way better! There still seems to be a slight padding, can this be removed??

For the second commit. I think it looked better with the logo close to the title. Otherwise we have a lot of empty space in between. But in general I do agree that this could be re-designed.

[alphapapa]

Hi Pamphile,

For the first commit, it's way better! There still seems to be a slight padding, can this be removed??

I'm not sure what padding you mean. Would you be more specific please?

For the second commit. I think it looked better with the logo close to the title. Otherwise we have a lot of empty space in between. But in general I do agree that this could be re-designed.

I agree that the spacing seems excessive. I'll try to improve that and then make another commit on this PR.

Thanks for your feedback.

[alphapapa]

I've made some further improvements to the CSS. Here are screenshots showing phone, tablet, and desktop screens:

I also improved the alignment of the "GET STARTED" button and the text above it.

This is much better, I think. The only minor problem I still see is that, in the phone-sized screenshot (the first one), the logo is very small. This could probably be further improved, and the best way to do so would probably be--on narrow screens, specifically--to either put the logo below the text rather than beside it, or decrease the text size to allow more room for the logo.

What do you all think? Thanks.

[stefanv]

I agree with your assessment about the logo on mobile, and the solution proposed (top, perhaps?) sounds good.

[alphapapa]

@stefanv Thanks. I made some more adjustments and I think it looks pretty good now. Here are screenshots at relevant sizes:

[alphapapa]

When approved, this should probably be squash-merged. Thanks.

[stefanv]

LGTM; @jarrodmillman?