movw-0x16.cf


Mktt.tk redux

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, 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

Submit a comment

?