Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use proper logos and better positioning in the footers #1268

Merged
merged 5 commits into from Mar 29, 2024

Conversation

hedyhli
Copy link
Member

@hedyhli hedyhli commented Mar 22, 2024

Closes #662, and as part of it, also closes #458.

Relevant #dev-contrib discussion: https://discord.com/channels/267624335836053506/635950537262759947/1220627130644434996

Changes

Footer logos and positioning:

  • Switch from CSS filtering to actual logos with white text.
  • Adjust positioning to align all text in the logos with baseline and ensure they're center aligned with a uniform side spacing.

- Switch from CSS filtering to actual logos with white text.
- Adjust positioning to align all text in the logos with baseline and
  ensure they're center aligned with a uniform side spacing.
@hedyhli hedyhli added area: frontend Related to site content and user interaction s: needs review Author is waiting for someone to review and approve labels Mar 22, 2024
Copy link

netlify bot commented Mar 22, 2024

Deploy Preview for pydis-static ready!

Name Link
🔨 Latest commit 88a0c2e
🔍 Latest deploy log https://app.netlify.com/sites/pydis-static/deploys/66022bc9c13929000860a811
😎 Deploy Preview https://deploy-preview-1268--pydis-static.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@coveralls
Copy link

coveralls commented Mar 22, 2024

Coverage Status

coverage: 100.0%. remained the same
when pulling 88a0c2e on fix/footer-logo-filtering
into f3f78ed on main.

Copy link
Contributor

@wookie184 wookie184 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text alignment still isn't perfect for me (firefox on windows), is it the same for you?
Before:
image
After:
image

The other changes seem good though.

There doesn't seem to be a way (say relative units, etc) to make it look
good on both worlds. We'll prioritize windows for now since most of our
users come from there.
@hedyhli
Copy link
Member Author

hedyhli commented Mar 26, 2024

It should be alright in both windows and android now.

On iOS, it's pretty misaligned vertically if I zoom in, but it's probably somewhat subtle otherwise.

Since this isn't such a major issue (I've made sure no part of the image is cut off on all platforms) we'll just make sure it looks good for the majority of our users for now, as lemon suggested in the linked discussion. Considering that this is web dev, I wonder if a cross-platform solution even exists.

Descenders in Django and Netcup which is what caused the issue can't really be fixed without hardcoding the vertical offsets, but I've cropped the linode icon and switched to the text-only Bulma logo (both of which has no descenders) so it will show up aligned on all platforms.

@hedyhli hedyhli requested a review from wookie184 March 26, 2024 01:33
This ensures no vertical positioning for this image is required because
the image is cropped to fit the text.
Don't mind me, just being a little overly excited with this one as this
is my most ingenius idea yet!
Copy link
Contributor

@wookie184 wookie184 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks really good for me now
image

I agree with that it's not massively important so whatever balance you think seems best between different platforms is good with me.

@hedyhli
Copy link
Member Author

hedyhli commented Mar 26, 2024

Of course, wookie, I hacked into your computer to test it! ;P

But yes, since they're fairly small logos in the footer I don't think the offsets on iOS are that noticeable. We could see if anyone complains.

@jchristgit jchristgit self-assigned this Mar 29, 2024
@jchristgit jchristgit self-requested a review March 29, 2024 10:30
Copy link
Member

@jchristgit jchristgit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@jchristgit jchristgit merged commit 782114c into main Mar 29, 2024
12 checks passed
@jchristgit jchristgit deleted the fix/footer-logo-filtering branch March 29, 2024 10:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: frontend Related to site content and user interaction s: needs review Author is waiting for someone to review and approve
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve logos on the landing page. Django logo is not aligned with baseline of text in the footer
4 participants