updated the installation page with tab based navigation

[Musharraffaijaz]

Kindly check the changes, all the installation steps are changed into tab-based navigation
The PR resolves the Issue: DOC: update installation page #811

[netlify]

✅ Deploy Preview for scipy-org ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	6a096bf
🔍 Latest deploy log	https://app.netlify.com/sites/scipy-org/deploys/67a36afe2636db0008ebc836
😎 Deploy Preview	https://deploy-preview-608--scipy-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 Accessibility: 100 Best Practices: 100 SEO: 100 PWA: - View the detailed breakdown and full score reports

---

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

[Musharraffaijaz]

The PR resolves the Issue: DOC: update installation page #811

[lucascolley]

I think the widget in its current state leaves too little space for text on smaller screens, which is a problem on mobile:

[jarrodmillman]

@Musharraffaijaz Please use the theme's built-in shortcode for tabs: https://theme.scientific-python.org/shortcodes/#tabs

If there are issues with the styling of the built-in tabs, it should be addressed here https://github.com/pydata/pydata-sphinx-theme/

[Musharraffaijaz]

Alright, will do the changes.

[Musharraffaijaz]

The latest commits are done using the theme's in build shortcode for tabs. Kindly check the Screen Shot below

[Musharraffaijaz]

@jarrodmillman is it possible if we could change the styling of the tabs a bit maybe? Instead of having a border at the top can we just change it to bottom border only and a highlighting on hover?

[lucascolley]

I really like how this looks now! One thing - please could you keep the type stubs section separate (i.e. not as a tab)? It's basically something extra to look at after already understanding one of the tabs, rather than instead of the tabs.

addressed

[Musharraffaijaz]

Great to know you liked it, sure will keep the type stubs separate.

[jarrodmillman]

@jarrodmillman is it possible if we could change the styling of the tabs a bit maybe? Instead of having a border at the top can we just change it to bottom border only and a highlighting on hover?

We are using the pydata-sphinx-theme styling for the scientific-python-hugo-theme. So you will need to get the changes to the tab styling implemented here: https://github.com/pydata/pydata-sphinx-theme/

[mattip]

I really like this layout, in my opinion it is better UX

[lucascolley]

the hyperlinks on lines 17 to 20 don't work any more - I think they can just be removed now

[Musharraffaijaz]

The latest changes includes:
Moved the Type stubes from the tab based navigation
Removed the hyper links from line 17 - 20
Moved the "Try Scipy" out of the tab based navigation

[Musharraffaijaz]

@lucascolley is there anything else which needs to be done here?

[lucascolley]

thanks @Musharraffaijaz, this looks good to me and is a nice improvement!

[Musharraffaijaz]

thanks @Musharraffaijaz, this looks good to me and is a nice improvement!

Thanks @lucascolley, I'm glad it was helpful. I'm always looking to learn and improve, so I'd be keen to discuss any other areas in the projects where I could contribute.

[lucascolley]

alright, merging - thanks again @Musharraffaijaz !