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: slight improvement to GitHub header link styles #9634

Merged
merged 2 commits into from
Dec 15, 2023

Conversation

nickofthyme
Copy link
Contributor

@nickofthyme nickofthyme commented Dec 14, 2023

This PR tweaks the GitHub header link to match the overall theming. Tiny change, take it or leave it 😄

Pre-flight checklist

Motivation

I wanted to add the GitHub logo to my personal docusaurus site like you have done, but while coping your approach of assign the logo setting the background to a data URI of the svg logo. But you are setting the hover affect to change the opacity instead of the standard link behavior of changing the color on hover. This changes the approach to use the same logo but sets the proper color base on dark/light theme and on hover.

Notice the GitHub icon nav link now adopts the theme color from --ifm-navbar-link-color and is not hardcoded to white in the svg, and the icon hover styles now match the other nav links by assigning the --ifm-navbar-link-hover-color color.

Test Plan

Test links

Deploy preview: https://deploy-preview-9634--docusaurus-2.netlify.app/

This PR tweaks the GitHub header link to match the overall theming. Tiny change, take it or leave it 😄
@nickofthyme nickofthyme requested a review from slorber as a code owner December 14, 2023 18:16
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 14, 2023
Copy link

netlify bot commented Dec 14, 2023

[V2]

Name Link
🔨 Latest commit 891b292
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/657c322f8a39ea00098084aa
😎 Deploy Preview https://deploy-preview-9634--docusaurus-2.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.

Copy link

github-actions bot commented Dec 14, 2023

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🔴 44 🟢 98 🟢 100 🟢 100 🟠 89 Report
/docs/installation 🟠 88 🟢 98 🟢 100 🟢 100 🟠 89 Report
/docs/category/getting-started 🟠 76 🟢 100 🟢 100 🟢 90 🟠 89 Report
/blog 🟠 75 🟢 100 🟢 100 🟢 90 🟠 89 Report
/blog/preparing-your-site-for-docusaurus-v3 🟠 65 🟢 97 🟢 100 🟢 100 🟠 89 Report
/blog/tags/release 🟠 74 🟢 100 🟢 100 🟠 80 🟠 89 Report
/blog/tags 🟠 74 🟢 100 🟢 100 🟢 90 🟠 89 Report

@slorber slorber added the pr: documentation This PR works on the website or other text documents in the repo. label Dec 15, 2023
@slorber
Copy link
Collaborator

slorber commented Dec 15, 2023

Thanks 👍 happy to dedupe this svg string

I'm not 100% sure it's better to use the color instead of opacity (cf color toggle doesn't change color) but why not, we'll see.

@slorber slorber merged commit 28e7298 into facebook:main Dec 15, 2023
10 checks passed
@nickofthyme nickofthyme deleted the patch-1 branch December 16, 2023 21:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: documentation This PR works on the website or other text documents in the repo.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants