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

Docs anchors #3047

Merged
merged 7 commits into from
Dec 23, 2024
Merged

Docs anchors #3047

merged 7 commits into from
Dec 23, 2024

Conversation

yawaramin
Copy link
Contributor

Fix the 'Configuring Response Handling Examples' header link and move anchor links to the right of headers to make sure they don't get cut off on certain display sizes. Also use link emoji as anchor link text rather than hashtag.

@yawaramin
Copy link
Contributor Author

Screenshot:

Screenshot 2024-11-29 at 00 34 05

@Telroshan Telroshan added documentation Improvements or additions to documentation website Non-documentation website issues labels Nov 29, 2024
Copy link
Collaborator

@Telroshan Telroshan left a comment

Choose a reason for hiding this comment

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

Not a code change request, just a personal opinion ; I prefer the link anchors on the left as it makes for a predictable display where if you want to copy the link to a section of the docs, it's always at the same X position (whereas on the right, it depends on the title's text length)
Looking at how the website behaves with different resolutions, it seems that we could maybe simply add a media query that resets the negative left margin of the anchors, below ~700px of screen width ? So that it doesn't go out of the window and is still at a predictable horizontal position

(Btw, if you want to, feel free to make a separate PR with just the anchor link fix, that I could approve & merge right away while we leave the style change being discussed)

@yawaramin
Copy link
Contributor Author

I can go either way. I think though instead of trying to guess sizes, it's better to just keep the anchor link flush with the margin:

Screenshot 2024-11-29 at 19 28 50

@yawaramin
Copy link
Contributor Author

Btw...too cute? 🤔

Screenshot 2024-11-29 at 19 40 51

@Telroshan
Copy link
Collaborator

I think though instead of trying to guess sizes, it's better to just keep the anchor link flush with the margin

Personal opinion again, but I see value in the anchor being offset to the left ; it stands out more, which helps identifying titles better, while keeping titles' text aligned with text body below them. Very subjective I know, but it looks more readable to me to have the texts aligned when possible.
(So to me, the best looking is anchors aligned + text aligned, then anchors aligned when you can't have both)

670px looks to me to be the very minimum acceptable size for such a display change, and even there, it doesn't look very ideal to me to target these anchors, that feel a bit too close to the window's edge.
700px is then just a rounded value suggestion, to add some margin and let those breathe a bit

As for why that size in particular;

  • An existing media query (under 768px of screen width) applies a max width of 640 px to the page content
  • This page content itselfs adds margin on its sides to be centered
  • The anchor itself is roughly 14px wide (14.2, says my dev tools)
    So, mathematically, when reaching 640 + 14*2 (668 px), you start seeing the anchor going offscreen.

Just to emphasize that it's not some random size guessing, but simply the media queries & the styling that's already being applied to the website by other CSS rules, thus sounds perfectly fine to me to add another media query

@yawaramin
Copy link
Contributor Author

OK how about this: the entire header is a clickable anchor link, and shows the link emoji on hover:

Screenshot 2024-12-01 at 15 52 59

@Telroshan
Copy link
Collaborator

Sure why not, the link color makes it clear it's clickable and makes it stand out from the standard text, sounds good to me.
However, you'll want to fix the dark theme display as the titles are rendered in white on my side (thus don't look like links nor clickable, but like regular text instead)

@yawaramin
Copy link
Contributor Author

Fixed
Screenshot 2024-12-02 at 21 48 50

@1cg
Copy link
Contributor

1cg commented Dec 11, 2024

can you change the link image to just a hash character? i'm all about old-school but that image is a bit much (i though I did that at one point...)

@yawaramin
Copy link
Contributor Author

Sure. I'm not terribly attached to the emoji.

@1cg 1cg merged commit fb3b6a1 into bigskysoftware:master Dec 23, 2024
1 check passed
@yawaramin yawaramin deleted the docs-anchors branch December 23, 2024 17:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation website Non-documentation website issues
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants