Issue 180 - Distill Bugfix

[Jongwoo-Shim]

• dark_mode.js was not being loaded on distill blog pages.
• Moved dark_mode.js and jquery.html to head.html to simplify/standardize dark mode/theming for other pages.

[Jongwoo-Shim]

Bug fix can be checked here : https://jongwoo-shim.github.io/al-folio/blog/2018/distill/

[alshedivat]

Thanks for the bug fix, really appreciate it!

While we are at it, do you mind adding some minor dark mode style fixes (1) the text color of authors in the blog post header (in the dark mode, should be white), (2) the color of horizontal lines (should be white in dark mode), and (3) same for the color of footnotes and references?

Thanks again for all your contributions to the theme!!

[Jongwoo-Shim]

@alshedivat No problem. I actually have made most of the fixes and was planning on making a separate branch for it.
The distill template was really problematic, due to the fact that the css was written into the template.v2.js file.

Just need your input on the code blocks : #183, and I'll make a pull request with the fixes.

[alshedivat]

@Jongwoo-Shim, thank you! Let me take a look at the issue you linked.

Re: distill styles and template.v2.js -- I maintain a fork of the distillpub-template which has al-folio branch. It might be easier to make significant style changes there and then re-generate template.v2.js, which is programmatically generated. However, dark mode style overrides do not require significant changes (only adjusting colors in a few places), so the preferred solution is just to override CSS without touching template.v2.js.

[Jongwoo-Shim]

@alshedivat Part of the reason that I started to modify the template.v2.js file was due to the fact that there are several css attributes that are currently hard coded into it. I was finding that it was difficult/impossible to modify certain attributes of the distill template, due to this.

Then again, I'm not particularly great at web-dev so I might be implementing the css incorrectly.

Regardless, I personally think that the css should be stripped from the distill template, and either added to the _base.scss file or added to it's own scss file.

This is due to the fact that :

• It's unintuitive where to look to make css changes for distill pages.
• It forces additional changes to be custom tailored for distill; which I think would be otherwise unnecessary.
  • I believe this will cause scalability issues in the long run.

Unless, there's a specific reason that would restrict the movement of the css from the template. The template that you linked could just be used to create the scaffold of the page, while the css is managed in the al-folio project.

We could merge in the changes to the template.v2.js file as a temporary bug-fix and migrate the css files later down the line.

[Jongwoo-Shim]

@alshedivat Additionally, are you looking for all of the fixes to be in a single merge?

As previously mentioned I was planning to make a separate branch/merge request for it. Which is why I created a separate issue. But I can adjust it if need be.

[alshedivat]

We could merge in the changes to the template.v2.js file as a temporary bug-fix and migrate the css files later down the line.

That sounds good. Let's discuss this in the corresponding issue before making any changes.

@alshedivat Additionally, are you looking for all of the fixes to be in a single merge?

No need to, it's a good idea to stage these changes through multiple PRs. I'll also think more what's the best way to go about altering CSS in template.v2.js. Since that file is generated from distillpub-template, if we are to upgrade to a later version of distillpub styles in the future, it will have to be re-generated, so any changes we make will be lost or have to be re-applied.

[alshedivat]

LGTM