I recently started using github fast pages for a school project. I decided I wanted to implement dark mode into my website and after some research was able to implement it pretty easily:
https://srcb.in/FxkcahIMIU - dark-mode.scss file
To implement it into the theme of the Jekyll website, all I had to do was import it:
/*----- ADD YOUR STYLES BELOW -------*/
#import "minima/dark-mode";
into custom-styles.scss
The full file paths for these are _sass/minima/dark-mode.scss, _sass/minima.custom-styles.scss.
While the dark mode works fine, I want to make it possible to toggle dark mode on and off with a switch. Creating this on another website wouldn't be an issue, as I can just use javascript to toggle elements. However, since dark mode is implemented through an import statement in a separate file. I'm not sure how I'd go about this. Is there a way I can use javascript to toggle the import statement? Or maybe create a new import when its switched back to light mode? Thanks in advance!
Related
I am using VS Code to write a document in ASCiiDoc. Part of this document are math formulas.
My problem is that preview of this formulars does not work. For example: If I write
latexmath:[\alpha(t_i)]
the preview is
(\alpha(t_i)).
In Git intepretation of this works, but not locally in preview. How do I fix this?
This problem was discussed in the following GitHub issues:
https://github.com/asciidoctor/asciidoctor-vscode/issues/165
https://github.com/asciidoctor/asciidoctor-vscode/issues/279
The solution appears to be to change the Asciidoc: Change Preview Security Settings to Disable to allow the remote content for the images to load.
I would like to run this D3 visualization
https://beta.observablehq.com/#mbostock/d3-zoomable-sunburst
as a standalone webpage, like this one here
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099
Does Observable have a function to export to a .html file? Or what would I need to change to make it standalone?
Sadly, it's not that easy any more.
They have "archived" bl.ocks.org and are pushing the adoption of ObservableHQ notebooks. You can actually embed notebooks with a little effort, but they are served from https://api.observablehq.com. There are other options, but nothing that lets you easily pull out the html, javascript and css and host it yourself, as bl.ocks.org did. At best, you'll have to cobble a bunch more stuff together now. One method is to click the top-right context menu on some notebooks and select Export > Download code. Another possible option is this tool.
< relevant-humble-opinion > I don't know if d3 bl.ock.org examples just got so good that the suits moved in... or if Mike Bostock (our story's hero) really believed we needed "dataflow"... but things look bad from here... nothing good seems to last... < /relevant-humble-opinion >
On an Observable example page, I clicked the triple three dots next to the fork option. Then chose export and then "download code".
I extracted the tar file to a folder on my machine. In the Readme it suggests that you run
$ npx http-server in a terminal, to run a local server on your machine.
Open up the location in your browser and it should show nearly the same thing as a web page. It should be close enough to what you are looking for.
Observable page used Reusable Choropleth Map
When I open the Sublime Text editor all text colors go white and there is no exact font color tag wise.
Error while opening sublime text editor:
Error loading syntax file "Packages/Laravel Blade
Highlighter/blade.sublime-syntax": Apparent recursion within a
with_prototype action: 25000 context sanity limit hit
I got the same problem few days ago, and I found there is a solution; a CSS 3 package is making trouble working with the Laravel Blade Highlighter package. You should disable the CSS 3 package with Package Control: Disable Package CSS3 on the command palette, restart Sublime Text, and then it will work as expected.
There you can read the comment:
Hi, I'm the author of CSS3. I was able to reproduce the issue when
both the default CSS package and CSS3 were enabled. I recommend
disabling the default CSS package in my install notes, but I
understand that many people can't do that because they use a package
that depends on the default CSS package (like Laravel Blade).
The clumsy workaround is to enable/disable CSS and CSS3. When you're
working on blade files, you can Package Control: Disable Package CSS3
and enable CSS. If you're working primarily with pure CSS files, I
recommend disabling CSS and enabling CSS3.
Sorry, I know that's an awkward solution. If I think of something
better, I'll post it here.
I am using a bootstrap 3 template and have noticed on some that scrolling is not smooth and kind of bumpy. I am not even sure what to look for. This only happens in Chrome. It does NOT happen in Safari or Firefox.
Is this a javascript or css problem? I have never run across this before.
This seems to happen worse in Chrome for mac, but also happens in chrome for windows.
It seems to happen when I make the window smaller and then make it bigger again. If I leave the window the same size, it seems to scroll fine.
Link:
http://demo.phppointofsalestaging.com --> Click Sales then resize the window in Chrome and then scroll down and then up. You will notice it is very bumpy and not smooth
:root { scroll-behavior: auto; }
Add this simple code to your custom CSS file.
"scroll-behavior" declared as "smooth" in bootstrap css/bootstrap.reboot.css.
So we need to overwrite it using our custom css.
The problem is in the jquery.nicescroll plugin that is used with the theme, the function jQuery.fn.scrollTop make the problem, it takes more than 75% from the cpu when run. my solution is :
You are using the jquery.nicescroll plugin version 3.4.0 use the latest version currently version 3.5.0 available.
If not working as expected, downgrade to version 3.2.0 I'm using it with my site without any problem.
Also check that if the hwacceleration in the Configuration parameters of the plugin is set to (default: true).
Update 1:
nicescroll plugin is a solution to have a custom scrollbars compatible with desktop, tablet and phone devices and to override the default scrollbars of the browser " more information her ", "you didn't see the diffrence because the plugin used in your project works when your browser window under 767px" so another solution if you don't need it you can remove the plugin from your files by following this steps:
Delete the plugin file (jquery.nicescroll.js) from your script folder.
Delete the plugin link from all your files.
Delete the plugin function lines (21 to 36), (49 to 66), (149) from (unicorn.js) file.
Update 2:
I made some tweaks for the (unicorn.js), download it from her, then replace your original one.
Hope this will help you.
I am using KendoUI web widgets in my enterprise app. I need to create/customize a Theme as our corporate branding. After reading the docs, I realized that there is a tool called ThemeBuilder for this purpose available here http://demos.kendoui.com/themebuilder/web.html
Now I need to understand the logic behind the color options this tool (ThemeBuilder) shows me. All the Themes are based on 4 primary colors as shown in the selection options. However, when i try to modify/customize any theme, I found that there are more to it? How the ThemeBuilder is calculating all other colors besides the 4 Theme colors?
If I need to create my own corporate theme with 4 primary colors, how do I pick rest of the colors as shown in ThemeBuilder?
On the second note, ThemeBuilder can generate css and less. Is there a way to generate Scss as we are using scss in our organization?
Does Telerik provide scss version of their source styles. I know they provide css and less in their source directory. But converting them to scss looks like a nightmare to me!
Appreciate your help.
Sam
I have to manually convert less into scss.
I have variablized their stuff make it compatible with org's themes and colors.