# Mktt.tk redux

##### 2016-06-22 20:10:00 +0000, 2 years 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, http://127.0.0.1:4000/__blog__/mktt.tk-redux.html, 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.

$(document).ready( 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() { hamburger.classList.toggle("is-active"); // Open/close menu$("#wrapper").toggleClass("toggled");
}


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.

Return?