Site not showing css changes

[nistara]

First, thank you for this great lab notebook. I'm trying to build a website based on it, but for some reason, any changes I make to the _base.scss or main.scss files aren't being updated in the site. For example, I'd like to change the default font family, or the color of sites that have been visited. Their changes aren't reflected in the blog. I might be doing something wrong, because I'm completely new to this. Would appreciate your help! Thank you

[fdschneider]

thanks for the feedback. I am not sure if I can help you with that. First of all, Jekyll is using Sass: As you might have noticed, all the scss files will be compiled to a single file (css/main.css) when you run jekyll serve or jekyll build. This should definitely be the case, unless you have some issue with jekyll here.

If the css file is compiled correctly, and changes don't show as expected, you are likely not pushing the right buttons. For general color and font styles, css/main.scss provides variables that can be put to use in the other .scss files. Here you should be able to set $base-font-family. However, if it is a non-default font, you have to make sure that the website knows where to find that font. The style of visited links (thats what you want to edit, right?) is located in _sass/_base.scss line 94. Right now this automatically choses a darker shade of the brand color.

[nistara]

Thank you for replying! Yes, I was trying to edit the $base-font-family, and even the code on line 94...but it didn't work out for some reason. I'm new to css and Sass, so I might be doing something wrong. I'll try again and see how it goes.

[jlehtoma]

One thing I ran across is that if you're trying to view the changes on you local machine (i.e. doing jekyll serve), the asset loading path for main.css points to the location defined by site.baseurl/site.url. The changes are reflected in the live blog (assuming you're deploying to Github using gh-pages branch). To see the changes locally, you would have to change path in site.url.

[fdschneider]

Yes, this is because jekyll does not set those paths dynamically depending on where it is executed. I think you can solve that by running jekyll on your local mashine with specific command options A) to overwrite baseurl with an empty value: jekyll serve --baseurl '', or B) by calling an alternative config file with specifications for local use: jekyll serve --config _localconfig.yml.

I still find the dynamic definition of absolute paths very confusing in Jekyll. Right now, I am solving it by appending baseurl and url in front of the relative path, which might not work in certain conditions. Suggestions are welcome.

[jlehtoma]

I totally agree, the way paths are resolved in Jekyll is confusing... What I'm doing right now is a variant of your solution B, that is using an additional config-file. Jekyll let's you define multiple config files in the call so that the variables in the latter will override those in the former. I.e. I have two setups:

jekyll serve --config _config.yml,_development_config.yml

or

jekyll serve --config _config.yml,_production_config.yml"

Both only override url variable. _development_config.yml has url: http://localhost:4000 and _production_config.yml has url: https://jlehtoma.github.io/. I then use a Rakefile to launch either a dev or production settings locally. In all, feels pointlessly complicated, but I haven't figured a better way so far.