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.

Sign up for GitHub

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

Jump to bottom

Fix distill darkmode #299

Merged
merged 6 commits into from
Jul 5, 2021
Merged

Fix distill darkmode #299

merged 6 commits into from
Jul 5, 2021

Conversation

ivanpuhachov
Copy link
Contributor

Fixing the issue with distill darkmode #298

I found out that the problem emerges with numerated lists, table entries, inline math equations, blockquotes (see also #280 ), footnotes, citations, hovering boxes and code highlights. Seems to be fixed now, take a look on al-folio/blog/2021/distill/ when building locally, or online on my page: here

Let me know if something is missing. Cheers!

@alshedivat
Copy link
Owner

Thanks so much for fixes!

@ivanpuhachov
Copy link
Contributor Author

ivanpuhachov commented Jun 7, 2021 •
edited
Loading

Fixes #298

(comment to link pr to issue) (no, it doesn't work

@alshedivat alshedivat linked an issue Jun 11, 2021 that may be closed by this pull request
Distill post darkmode #298
Closed
@alshedivat
Copy link
Owner

@ivanpuhachov, just realized you made changes to assets/js/distillpub/template.v2.js. Thanks for taking the effort!

I'm wondering, would it be hard to factor out these style changes into _sass/_distill.scss instead of directly editing the template.v2.js? The reason is that template.v2.js is currently auto-generated from the al-folio branch of my fork of distillpub template (later, I'm thinking of switching to loading template.v2.js directly from https://distill.pub/template.v2.js). So, I'd strongly prefer treating template.v2.js as read-only and make changes by overriding functionality.

@ivanpuhachov
Copy link
Contributor Author

The problem is that template.v2.js automatically generates style properties for created items and stores them right in the cell (see, i.e. line 1374 in template.v2.js). I tried to override them with scss file and !important flag but I did not succeed. Is there another method to do so? I can try

@alshedivat
Copy link
Owner

alshedivat commented Jun 14, 2021 •
edited
Loading

You are right, it looks like most of distill is written using web components that encapsulate styles using shadow DOM. The styles inside shadow DOM cannot be overridden from outside using CSS, unfortunately (see discussion here). But, these styles can be overridden using javascript without directly modifying template.v2.js.

I added assets/js/distillpub/overrides.js that overrides d-footnote and d-cite styles. Would you mind reverting your changes in template.v2.js and using this method instead?

I hope this doesn't add much extra work and thanks again for contributing these fixes! 🙏

@ivanpuhachov
Copy link
Contributor Author

Great. Will do!

@ivanpuhachov
Copy link
Contributor Author

Done!

@alshedivat alshedivat self-requested a review July 5, 2021 00:23
@alshedivat alshedivat merged commit a5508c7 into alshedivat:master Jul 5, 2021
github-actions bot added a commit that referenced this pull request Jul 5, 2021
@github-actions
Fix distill darkmode (#299)
a2d65e8 
* updating distill post to show fixes done

* fix for colors in numerated lists and tables

* fixing blockquotes

* fixing colors in math, footnotes, references, hover boxes, code highlights

* Add example distill overrides

* reverted back changes in distill template.v2.js

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com> [ci skip]
github-actions bot added a commit to sen-pai/sen-pai.github.io that referenced this pull request Jul 5, 2021
@github-actions
Fix distill darkmode (alshedivat#299)
f53c26e 
* updating distill post to show fixes done

* fix for colors in numerated lists and tables

* fixing blockquotes

* fixing colors in math, footnotes, references, hover boxes, code highlights

* Add example distill overrides

* reverted back changes in distill template.v2.js

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com> [ci skip]
@alshedivat alshedivat mentioned this pull request Jul 5, 2021
Closed
3 tasks
LoryPack pushed a commit to LoryPack/lorypack.github.io that referenced this pull request Jul 7, 2021
@ivanpuhachov @alshedivat
Fix distill darkmode (alshedivat#299)
3e37dac 
* updating distill post to show fixes done

* fix for colors in numerated lists and tables

* fixing blockquotes

* fixing colors in math, footnotes, references, hover boxes, code highlights

* Add example distill overrides

* reverted back changes in distill template.v2.js

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
@alshedivat alshedivat mentioned this pull request Dec 31, 2021
Closed
cverluiseQB pushed a commit to cverluise/cverluise.github.io that referenced this pull request Jan 16, 2023
@ivanpuhachov @alshedivat @cverluise
Fix distill darkmode (alshedivat#299)
61a13d1 
* updating distill post to show fixes done

* fix for colors in numerated lists and tables

* fixing blockquotes

* fixing colors in math, footnotes, references, hover boxes, code highlights

* Add example distill overrides

* reverted back changes in distill template.v2.js

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
pecey pushed a commit to pecey/pecey.github.io that referenced this pull request Jan 27, 2023
@ivanpuhachov @alshedivat @pecey
Fix distill darkmode (alshedivat#299)
5352182 
* updating distill post to show fixes done

* fix for colors in numerated lists and tables

* fixing blockquotes

* fixing colors in math, footnotes, references, hover boxes, code highlights

* Add example distill overrides

* reverted back changes in distill template.v2.js

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
antchristou pushed a commit to antchristou/antchristou.github.io that referenced this pull request Nov 20, 2023
@ivanpuhachov @alshedivat
Fix distill darkmode (alshedivat#299)
9316df2 
* updating distill post to show fixes done

* fix for colors in numerated lists and tables

* fixing blockquotes

* fixing colors in math, footnotes, references, hover boxes, code highlights

* Add example distill overrides

* reverted back changes in distill template.v2.js

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
siantonelli pushed a commit to siantonelli/siantonelli.github.io that referenced this pull request Oct 26, 2024
@ivanpuhachov @alshedivat @siantonelli
Fix distill darkmode (alshedivat#299)
0672f1b 
* updating distill post to show fixes done

* fix for colors in numerated lists and tables

* fixing blockquotes

* fixing colors in math, footnotes, references, hover boxes, code highlights

* Add example distill overrides

* reverted back changes in distill template.v2.js

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alshedivat alshedivat alshedivat approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Distill post darkmode
2 participants
@ivanpuhachov @alshedivat