minimal-mistakes | Jekyll theme for building a personal site | Static Site Generator library

I've got a Jekyll private blog (i.e., laboratory notebook) that uses the wonderful minimal-mistakes theme. I make heavy use of tags for each of my blog posts and can see the list of tags.

I also like to keep track of the people I mention in my blog post, so I add additional meta data for each post like this:

jekyll blog(minimal-mistakes thema) has a space to introduce myself.

I want to write on two lines in this space.
For example

QUESTION

Hi, I am creating a simple navigation site, and would like to know how to change / add a class to one of the li elements of the inline toc, on the right, to style it with css

My page so far.

https://startech-enterprises.github.io/docs/data-integration-and-etl/branches-and-loops-local.html

The page behaviour I'd like to achieve: https://docs.microsoft.com/en-us/dotnet/csharp/tutorials/intro-to-csharp/branches-and-loops-local

(if you scroll up and down the main page, you will see the styling of the right side toc element change)

The same behaviour can be seen here: https://startech-enterprises.github.io/minimal-mistakes/docs/quick-start-guide/ (see right hand side toc change as you scroll up and down the page)

I've tried to study the JavaScript behind this pages, but it's difficult to make sense of, and the scripts look overly complicated.

Any ideas?

Thanks,

Sachin

NOTE - QUESTION HAS BEEN ANSWERED AND CODE in link above UPDATED, based on answers given below

CODE USED

The CSS I have so far:

According to this, "Jekyll will read-in a _config.yml at the root of the theme-gem and merge its data into the site’s existing configuration data." But I've created a theme with a config that looks like this:

And I'm referencing the variables like this in my theme's css: (Notice empty frontmatter and liquid tag on last line.)

And the result comes out like this in the rendered site: (Notice the emptystring where my liquid tag used to be.)

If I put the variables in the _config of my site rather than in the one for the theme, everything works as expected. But I want these variables tied to the theme.

To make matters more mysterious, I can find examples in the common minimal-mistakes theme where site variables are defined in the theme and then used, just as I've used these, in theme files with no issues. (Notice site.yadda.yadda, which are defined in the root directory's config.yml.)

I am not creating a full gem; I'm using github-pages' remote_theme feature. I would suspect that were the cause, except that themes like minimal-mistakes work fine by this method.

What is going on?

I'm new to using jekyll and tried installing the minimal-mistakes-jekyll theme as a gem. Added the gem minimal-mistakes-jekyll to my gemfile, updated it with the bundle command, and set it as theme in _config.yml on a directory created by jekyll new mywebsite but it's giving me this error when I try to run bundle exec jekyll serve:

/home/theo/gems/gems/octokit-4.14.0/lib/octokit/middleware/follow_redirects.rb:14:in `': uninitialised constant Faraday::Error::ClientError (NameError) Did you mean? Faraday::ClientError

which persists when I tried using different versions of jekyll. I'm not sure how to fix this, any help would be appreciated! Running Ubuntu 19.04 and ruby 2.5.5, if that's useful.