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

Adjust custom CSS specificity affected by Infima #158

Merged
merged 2 commits into from
Apr 5, 2023

Conversation

calvellido
Copy link
Member

Description

This PR make some changes on some selectors' specificity. Due to the way Docusaurus build production styles, this could sometimes create a problem through the CSS injection order, making some Infima styles override custom ones. To overcome this, we are using a subtle trick by duplicating the class in our CSS, to increase the specificity of our selectors.

It doesn't seem like an easy task to solve in general for Docusaurus. More info in: facebook/docusaurus#3678

It also adds proper styling for the Table of Contents on mobile.

This closes #147

Preview

imagen
imagen

Copy link
Member

@serras serras left a comment

Choose a reason for hiding this comment

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

CSS magic!

Copy link
Member

@nomisRev nomisRev left a comment

Choose a reason for hiding this comment

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

Awesome work @calvellido 🙌

@nomisRev nomisRev merged commit b4ab2e7 into main Apr 5, 2023
@nomisRev nomisRev deleted the calvellido-custom-css-specifity branch April 5, 2023 15:48
calvellido added a commit that referenced this pull request Apr 6, 2023
### Description

This PR adds a small section with syndication links to the blog posts
listing page.

It also removes some `TODO` code that has deemed to be not successful
for what we wanted to. Basically, after submitting an issue to one of
our library dependencies, I thought that by the uses of the CSS Modules
`composes` feature, we could avoid the CSS injection order problem
present in:

#147
#158
facebook/docusaurus#3678

But it doesn't seem to be the case, so we are in the need of the use of
the double selector trick to successfully override some Infima selectors
styling with our classes.

This closes #153

### Preview


![imagen](https://user-images.githubusercontent.com/7753447/230139114-f5ef7faa-5988-4871-8dd9-60b91caf2352.png)
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.

Text color issue in menu
3 participants