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

Fix GitHub icon corner position #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

QuantumAbraham
Copy link

Changed position to fixed for consistent display during scrolling. This ensures the GitHub corner icon stays visible as users scroll the page

Changed position to fixed for consistent display during scrolling. This ensures the GitHub corner icon stays visible as users scroll the page
@getify
Copy link
Member

getify commented Sep 19, 2024

Hmmm I'm not sure position: fixed is actually desired here.

Screenshot_2024-09-19-10-39-09-71_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

See this screenshot from mobile, the corner overlay would cover up useful information like this text.

What concern did you have in making this change?

@QuantumAbraham
Copy link
Author

Thank you for pointing that out! @getify
I was thinking it would be great if the user could access the github icon without having to scroll back to the top

@getify
Copy link
Member

getify commented Sep 19, 2024

I wonder if there's a straightforward CSS way to make the corner icon shrink when scrolling down?

@QuantumAbraham
Copy link
Author

I wonder if there's a straightforward CSS way to make the corner icon shrink when scrolling down?
A pure CSS solution is limited. For more dynamic behavior, such as shrinking based on scroll position, we'll need JavaScript.

@getify
Copy link
Member

getify commented Sep 19, 2024

https://css-tricks.com/how-to-create-a-shrinking-header-on-scroll-without-javascript/

Another limitation? The logo can’t shrink. This is perhaps the biggest drawback, since logos are often the biggest culprit of eating up space. Perhaps one day we’ll be able to apply styles based on the stickiness of an element…

@QuantumAbraham
Copy link
Author

Based on CSS-Tricks blog you just shared, it should be possible to fix it using CSS only.
On the limitation of the logo not shrinking, am happy we are dealing with svg. Lemme try to implement and see what we'll arrive at

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants