Wed. Jun 22, 08:10PM, 1 year and 3 months ago

Several days later of toiling and expermenting with the Liquid engine and Bootstrap I’ve finally updated the site to version 2.0.

You’ll notice I finally got around to making a mobile view too. Anyways during this update I wanted to make full use of the Liquid engine, this meant throwing out the old custom.css file, which was basically a bunch of overridding styles with !important tacked onto them to make things work. I’m now using stuff like:

base-font-size: 0.5rem;
background-color: #fff;
font-size: $base-font-size /2;
color: darken($background-color, 40%)

I figured it’d just be easier to re-write the whole from scratch, well the site layout anyway, all the content has been moved over, and I got around to converting the Introductory Electronics pages from HTML into a more manageable Markdown. All the Markdown attributes now come from the _layout.scss file, which makes things a lot easier to debug on conflicting styles etc.

I’ve gone to lengths to make everything more user friendly; whilst also vastly reducing the complexity of the site. The sidebar is a new thing, and so too is the top header, specifically where it says ‘blog’ above this post. I’ve made a js script that takes the first folder name of the url, so ‘blog’ in the case of,, this also works for about, contact, and all the notes pages, which releases me from the need to change the header title depending on the page name.

	function pageHeader() {
		// remove dir "/"
		var pgname = location.pathname.split('/')[1]; 
		// replace - with space
		pgname = pgname.replace(/-/g, " ");
		// place in defined div id
		document.getElementById("pageHeader").innerHTML = pgname;

I also made it so that when the navbar is opened, and a link is clicked, the navbar closes automatically, just to keep the site as flowing together as possible, it was jarring to see the nav bar snap away instantly when a different page was loaded:

jQuery( 'li a' )
    /// sidebar links only
    .click(function() {
    	do_the_click( this.href );

// do ya thang
function do_the_click() {
	// Open/close menu

I also increased the mathJAX readability by putting everything into a \begin{align}, like:

$$ \begin{align}
P_d &= I_d^2 \times R_{ds} \\
P_d &= 0.5^2 \times 0.1 \\
P_d &= 0.025W
\end{align} $$

Which renders as:

In order for mathJAX to know where to center, I just add a & before the character I want centered, simple. You can also click on the equations to get an enlarged view, without it being opened in a new tab now.

The display method for notes has been greatly revamped, this part took the longest actually, in previous posts I mentioned that displaying the posts by catagories could be achieved with {\% for posts in site.categories.notes.electronics.ELEC1 %}, well that wasn’t the case, unknown to me, Jekyll sorts catagories by only the parent directory of _posts, this was really annoying to find out considering it wasn’t even on the documentation. Jekyll also displays posts in reverse chronological order, so I just do {\% for post in site.categories.ELEC1 reversed %} and everything works like magic.

Hopefully I should have all the Linux guides up by tommorow, and finished converting ELEC2 into markdown by the end of this week, afterwards I can start on documenting Assembly.


Submit a comment