This is my first site using Jekyll, I switched from the old wordpress site hosted elsewhere to Github Pages.

This site is based on minima theme, but overrode tiny details as a start.

I changed the typography and added a small javascript code to make the header sticky. Also added a progress bar on top of the sticky header too, simple enough:

window.onscroll = function () {
  stickyHeaderProgress();
};

var header = document.getElementById("site-header");
var sticky = header.offsetTop;

function stickyHeaderProgress() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }

  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;

  document.getElementById("theProgressBar").style.width = scrolled + "%";
}

And the css:

/**
 * Sticky header with progress bar
 */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .page-content {
  padding-top: $spacing-unit * 3;
}

.progress-container {
  width: 100%;
  height: 5px;
  background: $grey-color-light;
}

.progress-bar {
  height: 5px;
  background: $grey-color-dark;
  width: 0%;
}

And that is pretty much it for a first post.

Cheers!

Edited

There was an issue with the javascript code in chrome mobile browser. As you might know, Chrome for mobile hides the address bar on scroll down, so, to avoid that offset on scrolling, I used window.innerHeight instead of clientHeight on documentElement. This might be basic for frontend developers, but for me is something I just discovered now, LOL:

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - window.innerHeight;
var scrolled = (winScroll / height) * 100;

document.getElementById("theProgressBar").style.width = scrolled + "%";