General

So let’s start with some general improvements on te theme.

Clickable mobile menu

When the site is opened on a mobile or a small window, a mobile menu is shown. Unfortunately it is not clickable on a “normal” computer, because it only reacts to touch events, fortunately this is fixable. Open up js/global.js and add the following after line number 20:

$('#navigation-toggle').click(function(){
	$.sidr('toggle', 'sidr-main');
});

Sticky menu bar

I like my menu’s to be fixed on the top, so the user is always able to access it. Open the style.css and add the following to make your top navigation stick:

/* navigation should be fixed */
#site-navigation-wrap {
	display: block;
	top:0px;
	position: fixed;
	z-index:2;
	right:0;
	left:0;
	transition: padding 0.2s linear;
}

/* render nice little shadow */
#site-navigation-wrap:after {
	display:block;
	content: "";
	height: 1px;
	position: fixed;
	top: 3.4em;
	left:0;
	right: 0;
	z-index: 1;
	-webkit-box-shadow: 0px 0px 8px 2px #000;
	   -moz-box-shadow: 0px 0px 8px 2px #000;
	        box-shadow: 0px 0px 8px 2px #000;
}

/* when the menu is open, move the menu button */
.sidr-open #site-navigation { padding-left:320px; }

/* keep some space on top of the content */
#wrap { padding-top:4em; }

/* compensate for admin-bar */
.admin-bar #site-navigation-wrap{ padding-top:32px; }
.admin-bar #site-navigation-wrap:after { top: 80px; }

Cosmetics

Most of the time styling is a matter of opinion and taste. Here are my modifications to the theme. You can copy them and add them to style.css:

/* make heads a tat less spacious */
h1, h2, h3, h4, h5, .site-text-logo a { letter-spacing:-0.05em;	 }

/* justify text by default */
.entry { text-align:justify; }

/* some title are too big, when rendered on two
 * lines, it "feels" like the 2nd line floats:
 * decrease line-height; */
.loop-entry-title { line-height:1.1em; }

/* no bottom margins, 1 line top margin */
.entry h2, .entry h3, .entry h4, .entry h5 { margin-bottom:0; margin-top: 1em; }

/* 2 lines for an h2 */
.entry h2 { margin-top: 2em; }

/* remove space underneath posts */
.entry-footer{ margin-top:0; }

/* show a "hand" cursor, so user knows het can click */
.clickable{ cursor: pointer; }

/* help user to make the text darker on hover */
.clickable:hover { color:#000; }

/* red arrow at the end */
.clickable .read-more { color:#F00; padding-left:0.5rem;}

/* animate the read-more icon */
.clickable:hover .read-more { padding-left:2.5rem; transition:0.5s ease padding-left; }

Getting rid of the green

The theme uses a light-green color for emphasis. You might want your own color. Just open up style.css and replace #49BA86 with your desired color. Need a cool color scheme? Check this color picker by Adobe.