diff --git a/assets/css/global.css b/assets/css/global.css
index 2e18c77..3c4091b 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -2,18 +2,18 @@
 /* ---------------------------------------------------------- */
 
 :root {
-    /* Colours */
-    --blue: #3eb0ef;
-    --green: #a4d037;
-    --purple: #ad26b4;
-    --yellow: #fecd35;
-    --red: #f05230;
-    --darkgrey: #15171A;
-    --midgrey: #738a94;
-    --lightgrey: #c5d2d9;
-    --whitegrey: #e5eff5;
-    --pink: #fa3a57;
-    --brown: #a3821a;
+  /* Colours */
+  --blue: #3eb0ef;
+  --green: #a4d037;
+  --purple: #ad26b4;
+  --yellow: #fecd35;
+  --red: #f05230;
+  --darkgrey: #15171a;
+  --midgrey: #738a94;
+  --lightgrey: #c5d2d9;
+  --whitegrey: #e5eff5;
+  --pink: #fa3a57;
+  --brown: #a3821a;
 }
 
 /* Reset
@@ -96,220 +96,220 @@ time,
 mark,
 audio,
 video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
 }
 body {
-    line-height: 1;
+  line-height: 1;
 }
 ol,
 ul {
-    list-style: none;
+  list-style: none;
 }
 blockquote,
 q {
-    quotes: none;
+  quotes: none;
 }
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-    content: "";
-    content: none;
+  content: "";
+  content: none;
 }
 table {
-    border-spacing: 0;
-    border-collapse: collapse;
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 img {
-    max-width: 100%;
+  max-width: 100%;
 }
 html {
-    box-sizing: border-box;
-    font-family: sans-serif;
+  box-sizing: border-box;
+  font-family: sans-serif;
 
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 *,
 *:before,
 *:after {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }
 a {
-    background-color: transparent;
+  background-color: transparent;
 }
 a:active,
 a:hover {
-    outline: 0;
+  outline: 0;
 }
 b,
 strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 i,
 em,
 dfn {
-    font-style: italic;
+  font-style: italic;
 }
 h1 {
-    margin: 0.67em 0;
-    font-size: 2em;
+  margin: 0.67em 0;
+  font-size: 2em;
 }
 small {
-    font-size: 80%;
+  font-size: 80%;
 }
 sub,
 sup {
-    position: relative;
-    font-size: 75%;
-    line-height: 0;
-    vertical-align: baseline;
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
 }
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 img {
-    border: 0;
+  border: 0;
 }
 svg:not(:root) {
-    overflow: hidden;
+  overflow: hidden;
 }
 mark {
-    background-color: #fdffb6;
+  background-color: #fdffb6;
 }
 code,
 kbd,
 pre,
 samp {
-    font-family: monospace, monospace;
-    font-size: 1em;
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 button,
 input,
 optgroup,
 select,
 textarea {
-    margin: 0; /* 3 */
-    color: inherit; /* 1 */
-    font: inherit; /* 2 */
+  margin: 0; /* 3 */
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
 }
 button {
-    overflow: visible;
-    border: none;
+  overflow: visible;
+  border: none;
 }
 button,
 select {
-    text-transform: none;
+  text-transform: none;
 }
 button,
 html input[type="button"],
 /* 1 */
 input[type="reset"],
 input[type="submit"] {
-    cursor: pointer; /* 3 */
+  cursor: pointer; /* 3 */
 
-    -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button; /* 2 */
 }
 button[disabled],
 html input[disabled] {
-    cursor: default;
+  cursor: default;
 }
 button::-moz-focus-inner,
 input::-moz-focus-inner {
-    padding: 0;
-    border: 0;
+  padding: 0;
+  border: 0;
 }
 input {
-    line-height: normal;
+  line-height: normal;
 }
 input:focus {
-    outline: none;
+  outline: none;
 }
 input[type="checkbox"],
 input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-    height: auto;
+  height: auto;
 }
 input[type="search"] {
-    box-sizing: content-box; /* 2 */
+  box-sizing: content-box; /* 2 */
 
-    -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield; /* 1 */
 }
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 legend {
-    padding: 0; /* 2 */
-    border: 0; /* 1 */
+  padding: 0; /* 2 */
+  border: 0; /* 1 */
 }
 textarea {
-    overflow: auto;
+  overflow: auto;
 }
 table {
-    border-spacing: 0;
-    border-collapse: collapse;
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 td,
 th {
-    padding: 0;
+  padding: 0;
 }
 
-
 /* ==========================================================================
    Base styles: opinionated defaults
    ========================================================================== */
 
 html {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    font-size: 62.5%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  font-size: 62.5%;
 
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 body {
-    overflow-x: hidden;
-    color: color(var(--midgrey) l(-25%));
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-    font-size: 1.5rem;
-    line-height: 1.6em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: 0;
-    text-rendering: optimizeLegibility;
-    background: #fff;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -moz-font-feature-settings: "liga" on;
+  overflow-x: hidden;
+  color: color(var(--midgrey) l(-25%));
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.6em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: 0;
+  text-rendering: optimizeLegibility;
+  background: #fff;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
 }
 
 ::selection {
-    text-shadow: none;
-    background: color(blue);
+  text-shadow: none;
+  background: color(blue);
 }
 
 hr {
-    position: relative;
-    display: block;
-    width: 100%;
-    margin: 2.5em 0 3.5em;
-    padding: 0;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid color(var(--lightgrey) l(+10%));
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 2.5em 0 3.5em;
+  padding: 0;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid color(var(--lightgrey) l(+10%));
 }
 
 audio,
@@ -318,17 +318,17 @@ iframe,
 img,
 svg,
 video {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 fieldset {
-    margin: 0;
-    padding: 0;
-    border: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
 }
 
 textarea {
-    resize: vertical;
+  resize: vertical;
 }
 
 p,
@@ -336,87 +336,87 @@ ul,
 ol,
 dl,
 blockquote {
-    margin: 0 0 1.5em 0;
+  margin: 0 0 1.5em 0;
 }
 
 ol,
 ul {
-    padding-left: 1.3em;
-    padding-right: 1.5em;
+  padding-left: 1.3em;
+  padding-right: 1.5em;
 }
 
 ol ol,
 ul ul,
 ul ol,
 ol ul {
-    margin: 0.5em 0 1em;
+  margin: 0.5em 0 1em;
 }
 
 ul {
-    list-style: disc;
+  list-style: disc;
 }
 
 ol {
-    list-style: decimal;
+  list-style: decimal;
 }
 
 li {
-    margin: 0.5em 0;
-    padding-left: 0.3em;
-    line-height: 1.6em;
+  margin: 0.5em 0;
+  padding-left: 0.3em;
+  line-height: 1.6em;
 }
 
 dt {
-    float: left;
-    margin: 0 20px 0 0;
-    width: 120px;
-    color: var(--darkgrey);
-    font-weight: 500;
-    text-align: right;
+  float: left;
+  margin: 0 20px 0 0;
+  width: 120px;
+  color: var(--darkgrey);
+  font-weight: 500;
+  text-align: right;
 }
 
 dd {
-    margin: 0 0 5px 0;
-    text-align: left;
+  margin: 0 0 5px 0;
+  text-align: left;
 }
 
 blockquote {
-    margin: 1.5em 0;
-    padding: 0 1.6em 0 1.6em;
-    border-left: var(--whitegrey) 0.5em solid;
+  margin: 1.5em 0;
+  padding: 0 1.6em 0 1.6em;
+  border-left: var(--whitegrey) 0.5em solid;
 }
 
 blockquote p {
-    margin: 0.8em 0;
-    font-size: 1.2em;
-    font-weight: 300;
+  margin: 0.8em 0;
+  font-size: 1.2em;
+  font-weight: 300;
 }
 
 blockquote small {
-    display: inline-block;
-    margin: 0.8em 0 0.8em 1.5em;
-    font-size: 0.9em;
-    opacity: 0.8;
+  display: inline-block;
+  margin: 0.8em 0 0.8em 1.5em;
+  font-size: 0.9em;
+  opacity: 0.8;
 }
 /* Quotation marks */
 blockquote small:before {
-    content: "\2014 \00A0";
+  content: "\2014 \00A0";
 }
 
 blockquote cite {
-    font-weight: bold;
+  font-weight: bold;
 }
 blockquote cite a {
-    font-weight: normal;
+  font-weight: normal;
 }
 
 a {
-    color: color(var(--blue) l(-5%));
-    text-decoration: none;
+  color: color(var(--blue) l(-5%));
+  text-decoration: none;
 }
 
 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 h1,
@@ -425,58 +425,58 @@ h3,
 h4,
 h5,
 h6 {
-    margin-top: 0;
-    line-height: 1.15;
-    font-weight: 700;
-    text-rendering: optimizeLegibility;
+  margin-top: 0;
+  line-height: 1.15;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
 }
 
 h1 {
-    margin: 0 0 0.5em 0;
-    font-size: 5rem;
-    font-weight: 700;
+  margin: 0 0 0.5em 0;
+  font-size: 5rem;
+  font-weight: 700;
 }
 @media (max-width: 500px) {
-    h1 {
-        font-size: 2.2rem;
-    }
+  h1 {
+    font-size: 2.2rem;
+  }
 }
 
 h2 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 2rem;
+  margin: 1.5em 0 0.5em 0;
+  font-size: 2rem;
 }
 @media (max-width: 500px) {
-    h2 {
-        font-size: 1.8rem;
-    }
+  h2 {
+    font-size: 1.8rem;
+  }
 }
 
 h3 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 1.8rem;
-    font-weight: 500;
+  margin: 1.5em 0 0.5em 0;
+  font-size: 1.8rem;
+  font-weight: 500;
 }
 @media (max-width: 500px) {
-    h3 {
-        font-size: 1.7rem;
-    }
+  h3 {
+    font-size: 1.7rem;
+  }
 }
 
 h4 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 1.6rem;
-    font-weight: 500;
+  margin: 1.5em 0 0.5em 0;
+  font-size: 1.6rem;
+  font-weight: 500;
 }
 
 h5 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 1.4rem;
-    font-weight: 500;
+  margin: 1.5em 0 0.5em 0;
+  font-size: 1.4rem;
+  font-weight: 500;
 }
 
 h6 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 1.4rem;
-    font-weight: 500;
+  margin: 1.5em 0 0.5em 0;
+  font-size: 1.4rem;
+  font-weight: 500;
 }
diff --git a/assets/css/navbar.css b/assets/css/navbar.css
index bafce1e..4b194c7 100644
--- a/assets/css/navbar.css
+++ b/assets/css/navbar.css
@@ -1,54 +1,358 @@
-
 /*Navigation bar style */
-.burger_menu{
-  margin-bottom: -20px;
+.burger_menu {
   line-height: 45px;
   font-size: 20px;
 }
-.navbar_collapse a{
-text-align: center;
+.wrapper {
+  padding: 5px;
+}
+
+.navbar_collapse a {
+  text-align: center;
   display: block;
   text-align: center;
   color: #575a60;
   font-weight: normal;
   margin: 30px;
   font-size: 20px;
-  padding :10px;
+  padding: 10px;
   border-bottom: 1px solid gray;
 
   transition: all 0.5s ease;
 }
-.navbar_collapse a:hover{
+.navbar_collapse a:hover {
   color: #3eb0ef;
   border-color: #3eb0ef;
 }
-.navigation_page_open{
-left:0px;
+.navigation_page_open {
+  left: 0px;
 }
-#navbar_close{
+#navbar_close {
   cursor: pointer;
   color: #575a60;
   font-size: 40px;
   position: absolute;
-  top:10px;
-  right:10px;
+  top: 10px;
+  right: 10px;
+}
+
+.dropdown-navbar {
+  position: relative;
+  z-index: 300;
+}
+
+.dropdown-navbar ul {
+  display: flex;
+  position: relative;
+  margin: -11px auto 0 -20px;
+  width: 100%;
+}
+
+.nav-link {
+  padding: 0 1rem;
+}
+.nav-link a {
+  display: flex;
+  opacity: 0.8;
+}
+.nav-link a:hover {
+  opacity: 1;
+}
+
+.dropdown-navbar .nav-link {
+  list-style: none;
+  -webkit-transition: background-color ease-in 300ms;
+  -moz-transition: background-color ease-in 300ms;
+  -ms-transition: background-color ease-in 300ms;
+  -o-transition: background-color ease-in 300ms;
+  transition: background-color ease-in 300ms;
+}
+
+.dropdown-navbar li:hover {
+  opacity: 1;
+}
+
+.dropdown-navbar .nav-link ul {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  padding: 0 470px;
+  margin: 0 -20px;
+  transition: all 0.4s ease-in;
 }
-@media (max-width: 700px) {
-  .navbar-right{
-margin-right: 10px;
-  }
 
+.dropdown {
+  display: flex;
+  flex-direction: column;
+}
+.dropdown li {
+  list-style: none;
+  padding-left: 1rem;
+}
+.dropdown li a {
+  width: 198px;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dropdown-description {
+  color: yellowgreen;
+}
 
-label{
+label.menu-label:after {
+  content: "";
+  display: block;
+}
+label.menu-label {
+  position: relative;
+  width: 100%;
   display: block;
-  margin-right: 0;
-   padding-left: 4vw;
+  padding: 15px 10px 15px 20px;
+  color: #222;
+  font-weight: bold;
+  background-color: #dedede;
+}
+@media (min-width: 700px) {
+  .dropdown-navbar li:hover > .dropdown {
+    visibility: visible;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+  }
+  .nav-links {
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    height: 376px;
+    width: 100%;
+    overflow: auto;
+    background-color: #15171a;
+  }
+}
 
+.link {
+  display: flex;
+}
+.link a {
+  padding-right: 3px;
+}
+input[id^="sub-menu-"] {
+  display: none;
+}
+.arrow-sm {
+  display: none;
+}
+.arrow-lg {
+  display: block;
+}
+.dropdown-title-arrow {
+  display: none;
 }
 
-    .navbar-left {
-        padding-left: 4vw;
-        display: none;
-    }
+#bar-scroll {
+  color: red;
+}
 
+.scroll-down-close {
+  display: none;
+}
+
+/* responsive design */
+@media (max-width: 700px) {
+  .wrapper {
+    position: absolute;
+  }
+
+  .arrow-sm {
+    display: block;
+  }
+  .arrow-lg {
+    display: none;
+  }
+  .dropdown-title-arrow {
+    display: block;
+  }
+  .navbar-right {
+    margin-right: 10px;
+  }
+
+  .navbar-left {
+    padding-left: 4vw;
+    display: none;
+  }
+  .nav-link a {
+    display: flex;
+    width: 70%;
+    border-bottom: 2px solid rebeccapurple;
+  }
+  .nav-link a {
+    display: flex;
+    opacity: 0.8;
+  }
+  .nav-link a:hover {
+    opacity: 1;
+  }
+  .dropdown-navbar {
+    position: fixed;
+    top: 6rem;
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+    transition: transform 0.35s;
+  }
+  .dropdown-navbar ul {
+    flex-direction: column;
+    background-color: #15171a;
+    height: 94vh;
+    width: 100vw;
+    overflow-y: auto;
+    padding: 0;
+    margin: 0;
+  }
+  .dropdown-navbar .nav-link {
+    display: flex;
+    margin: 10px 0 0 0;
+    list-style: none;
+    -webkit-transition: background-color ease-in 300ms;
+    -moz-transition: background-color ease-in 300ms;
+    -ms-transition: background-color ease-in 300ms;
+    -o-transition: background-color ease-in 300ms;
+    transition: background-color ease-in 300ms;
+  }
+  .dropdown-navbar .nav-link ul {
+    visibility: visible;
+    opacity: 1;
+    position: absolute;
+    left: 0;
+    padding: 0;
+    margin: 0;
+    z-index: 9999;
+  }
+  .dropdown {
+    transform: translate3d(-100%, 0, 0);
+    transition: transform 0.35s !important;
+  }
+  input[id^="sub-menu-"]:checked ~ .dropdown {
+    transform: translate3d(0, 0, 0);
+    display: block;
+    background-color: #15171a;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    width: 100vw;
+    flex: wrap;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: 99999;
+  }
+  input[id^="sub-menu-"] {
+    display: block;
+    width: 76px;
+    height: 32px;
+    position: relative;
+    top: 0.1rem;
+    left: 6.8rem;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 999;
+  }
+  #burgertoggle:checked ~ .dropdown-navbar {
+    transform: translate3d(0, 0, 0);
+  }
+
+  /* SIDE DROPDOWN NAVBAR */
+  #burgertoggle {
+    display: block;
+    width: 40px;
+    height: 32px;
+    top: 15px;
+    left: 14px;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 999;
+    position: fixed;
+  }
+  .wrapper .span {
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+  /*hamburger*/
+  .bars {
+    position: fixed;
+    z-index: 101;
+    top: 9px;
+    left: 10px;
+    background: #000;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
+  }
+  .bar {
+    cursor: pointer;
+    display: block;
+    width: 30px;
+    height: 4px;
+    margin-bottom: 5px;
+    position: relative;
+    background: #fff;
+    border-radius: 3px;
+    z-index: 999;
+    transform-origin: 4px 0px;
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
+  }
+
+  .bar:first-child {
+    transform-origin: 0% 0%;
+  }
+  .bar:nth-last-child(2) {
+    transform-origin: 0% 100%;
+  }
+  #burgertoggle:checked ~ .bar {
+    opacity: 1;
+    transform: rotate(45deg) translate(-9px, 7px);
+    background: red;
+  }
+  #burgertoggle:checked ~ .bar:nth-last-child(3) {
+    opacity: 0;
+    transform: rotate(0deg) scale(0.2, 0.2);
+  }
+  #burgertoggle:checked ~ .bar:nth-last-child(2) {
+    opacity: 1;
+    transform: rotate(-45deg) translate(-19px, 3px);
+  }
+
+  label.menu-label:after {
+    content: "";
+    display: block;
+  }
+  label.menu-label {
+    position: relative;
+    width: 100%;
+    display: flex;
+    padding: 15px 10px 15px 20px;
+    color: #222;
+    font-weight: bold;
+    background-color: #dedede;
+  }
+  .dropdown li a {
+    height: 32px;
+    width: 70%;
+    padding: 0;
+    overflow: hidden;
+    position: relative;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
diff --git a/assets/css/screen.css b/assets/css/screen.css
index 706afe4..759e4c1 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -10,6 +10,7 @@ production stylesheet in assets/built/screen.css
 4.  Site Header
 5.  Site Navigation
 6.  Post Feed
+  6.1 side-bar
 7.  Single Post
   7.1. Subscribe Form
   7.2. Post Footer
@@ -23,56 +24,54 @@ production stylesheet in assets/built/screen.css
 
 */
 
-
 /* 1. Global - Set up the things
 /* ---------------------------------------------------------- */
 @import "global.css";
 
 body {
-    background: #f4f8fb;
+  background: #f4f8fb;
 }
 
 .img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background-position: center center;
-    background-size: cover;
-    border-radius: 100%;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 100%;
 }
 
 .hidden {
-    visibility: hidden;
-    position: absolute;
-    text-indent: -9999px;
+  visibility: hidden;
+  position: absolute;
+  text-indent: -9999px;
 }
 
-
 /* 2. Layout - Page building blocks
 /* ---------------------------------------------------------- */
 
 .site-wrapper {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .site-main {
-    z-index: 100;
-    flex-grow: 1;
+  z-index: 100;
+  flex-grow: 1;
 }
 
 /* Full width page blocks */
 .outer {
-    position: relative;
-    padding: 0 4vw;
+  position: relative;
+  padding: 0;
 }
 
 /* Centered content container blocks */
 .inner {
-    margin: 0 auto;
-    max-width: 1040px;
-    width: 100%;
+  margin: 0 auto;
+  max-width: 1040px;
+  width: 90%;
 }
 
 /* Usage:
@@ -89,91 +88,104 @@ body {
 /* ---------------------------------------------------------- */
 
 @media (min-width: 900px) {
-    .home-template .post-feed,
-    .tag-template .post-feed,
-    .author-template .post-feed {
-        margin-top: -70px;
-        padding-top: 0;
-    }
-    .home-template .site-nav {
-        position: relative;
-        top: 0px;
-    }
+  .home-template .post-feed,
+  .tag-template .post-feed,
+  .author-template .post-feed {
+    margin-top: -70px;
+    padding-top: 0;
+  }
+  .home-template .site-nav {
+    position: relative;
+    top: 0px;
+  }
 }
 
-
 /* 4. Site Header
 /* ---------------------------------------------------------- */
 
 .site-header {
-    position: relative;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    color: #fff;
-    background:#351ded no-repeat 50%;
-    background-size:cover;
-    background: #351ded; /* Old browsers */
-    background: -moz-linear-gradient(-45deg, #351ded 0%, #5e46c9 64%, #05abe0 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(-45deg, #351ded 0%,#5e46c9 64%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(135deg, #351ded 0%,#5e46c9 64%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#351ded', endColorstr='#05abe0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+  position: relative;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  color: #fff;
+  background: #351ded no-repeat 50%;
+  background-size: cover;
+  background: #351ded; /* Old browsers */
+  background: -moz-linear-gradient(
+    -45deg,
+    #351ded 0%,
+    #5e46c9 64%,
+    #05abe0 100%
+  ); /* FF3.6-15 */
+  background: -webkit-linear-gradient(
+    -45deg,
+    #351ded 0%,
+    #5e46c9 64%,
+    #05abe0 100%
+  ); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(
+    135deg,
+    #351ded 0%,
+    #5e46c9 64%,
+    #05abe0 100%
+  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#351ded', endColorstr='#05abe0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }
 
 .site-header:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
-    display: block;
-    background: rgba(0,0,0,0.18);
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: block;
+  background: rgba(0, 0, 0, 0.18);
 }
 
 .site-header:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: auto;
-    left: 0;
-    z-index: 10;
-    display: block;
-    height: 80px;
-    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  z-index: 10;
+  display: block;
+  height: 80px;
+  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
 }
 
 .site-header.no-cover:before,
 .site-header.no-cover:after {
-    display: none;
+  display: none;
 }
 
 .site-header-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 10vw 4vw;
-    min-height: 200px;
-    max-height: 450px;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10vw 4vw;
+  min-height: 200px;
+  max-height: 450px;
+  text-align: center;
 }
 
 .site-title {
-    z-index: 10;
-    margin: 0;
-    padding: 0;
-    font-size: 3.8rem;
-    font-weight: 700;
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+  font-size: 3.8rem;
+  font-weight: 700;
 }
 
 .site-logo {
-    max-height: 45px;
+  max-height: 45px;
 }
 
-
-.site-slogan{
+.site-slogan {
   z-index: 10;
   margin: 0;
   padding: 5px 0;
@@ -181,44 +193,42 @@ body {
   letter-spacing: 0.5px;
   opacity: 0.8;
 
-  font-weight:100;
+  font-weight: 100;
 }
 @media (max-width: 500px) {
-    .site-title {
-        font-size: 3rem;
-    }
-    .site-description {
-        font-size: 1.8rem;
-    }
+  .site-title {
+    font-size: 3rem;
+  }
+  .site-description {
+    font-size: 1.8rem;
+  }
 }
 
-
 /* 5. Site Navigation
 /* ---------------------------------------------------------- */
-
 .site-nav {
-    position: relative;
-    z-index: 300;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    overflow-y: hidden;
-    height: 40px;
-    font-size: 1.2rem;
+  position: relative;
+  z-index: 300;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow-y: hidden;
+  height: 40px;
+  font-size: 1.2rem;
 }
 
 .site-nav-left {
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    margin-right: 10px;
-    padding-bottom: 80px;
-    letter-spacing: 0.4px;
-    white-space: nowrap;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  margin-right: 10px;
+  padding-bottom: 80px;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
 
-    -ms-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
 }
 
 /* Site Nav Hack Explanation (above):
@@ -230,251 +240,415 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 */
 
 .site-nav-logo {
-    flex-shrink: 0;
-    display: block;
-    margin-right: 24px;
-    padding: 11px 0;
-    color: #fff;
-    font-size: 1.7rem;
-    line-height: 1em;
-    font-weight: bold;
-    letter-spacing: -0.5px;
+  flex-shrink: 0;
+  display: block;
+  margin-right: 24px;
+  padding: 11px 0;
+  color: #fff;
+  font-size: 1.7rem;
+  line-height: 1em;
+  font-weight: bold;
+  letter-spacing: -0.5px;
 }
 
 .site-nav-logo:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .site-nav-logo img {
-    display: block;
-    width: auto;
-    height: 21px;
+  display: block;
+  width: auto;
+  height: 21px;
 }
 
 .nav {
-    display: flex;
-    margin: 0 0 0 -12px;
-    padding: 0;
-    list-style: none;
+  display: flex;
+  margin: 0 0 0 -12px;
+  padding: 0;
+  list-style: none;
 }
 
 .nav li {
-    display: block;
-    margin: 0;
-    padding: 0;
-    text-transform: uppercase;
+  display: block;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
 }
 
 .nav li a {
-    display: block;
-    margin: 0;
-    padding: 10px 12px;
-    color: #fff;
-    opacity: 0.8;
+  display: block;
+  margin: 0;
+  padding: 10px 12px;
+  color: #fff;
+  opacity: 0.8;
 }
 
 .nav li a:hover {
-    text-decoration: none;
-    opacity: 1;
+  text-decoration: none;
+  opacity: 1;
 }
 
 .site-nav-right {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: 40px;
 }
 
 .social-links {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
 }
 
 .social-links a:last-of-type {
-    padding-right: 20px;
+  padding-right: 20px;
 }
 
 .social-link {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 10px;
-    color: #fff;
-    opacity: 0.8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 10px;
+  color: #fff;
+  opacity: 0.8;
 }
 
 .social-link:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .social-link svg {
-    height: 1.8rem;
-    fill: #fff;
+  height: 1.8rem;
+  fill: #fff;
 }
 
 .social-link-fb svg {
-    height: 1.5rem;
+  height: 1.5rem;
 }
 
 .social-link-wb svg {
-    height: 1.6rem;
+  height: 1.6rem;
 }
 
 .social-link-wb svg path {
-    stroke: #fff;
+  stroke: #fff;
 }
 
 .social-link-rss svg {
-    height: 1.9rem;
+  height: 1.9rem;
 }
 
 .subscribe-button {
-    display: block;
-    padding: 4px 10px;
-    border: #fff 1px solid;
-    color: #fff;
-    font-size: 1.2rem;
-    line-height: 1em;
-    border-radius: 10px;
-    opacity: 0.8;
+  display: block;
+  padding: 4px 10px;
+  border: #fff 1px solid;
+  color: #fff;
+  font-size: 1.2rem;
+  line-height: 1em;
+  border-radius: 10px;
+  opacity: 0.8;
 }
 
 .subscribe-button:hover {
-    text-decoration: none;
-    opacity: 1;
+  text-decoration: none;
+  opacity: 1;
 }
 
 .rss-button {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 
 .rss-button:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .rss-button svg {
-    margin-bottom: 1px;
-    height: 2.1rem;
-    fill: #fff;
+  margin-bottom: 1px;
+  height: 2.1rem;
+  fill: #fff;
 }
 
 @media (max-width: 700px) {
-    .site-header {
-        padding-right: 0;
-        padding-left: 0;
-    }
-    .site-nav-left {
-        margin-right: 0;
-        padding-left: 4vw;
-    }
-    .site-nav-right {
-        display: none;
-    }
+  .site-header {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .site-nav-left {
+    margin-right: 0;
+    padding-left: 4vw;
+  }
+  .site-nav-right {
+    display: none;
+  }
 }
 
-
 /* 6. Post Feed
 /* ---------------------------------------------------------- */
-
 .post-feed {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -20px;
-    padding: 40px 0 0 0;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 40px 0 0 0;
 }
 
 .post-card {
-    flex: 1 1 300px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    margin: 0 20px 40px;
-    min-height: 300px;
-    background: #fff center center;
-    background-size: cover;
-    border-radius: 5px;
-    box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
-    transition: all 0.5s ease;
+  flex: 1 1 300px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0 20px 40px;
+  min-height: 300px;
+  background: #fff center center;
+  background-size: cover;
+  border-radius: 5px;
+  box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px,
+    rgba(39, 44, 49, 0.03) 1px 3px 8px;
+  transition: all 0.5s ease;
 }
 
 .post-card:hover {
-    box-shadow: 0 0 1px rgba(39,44,49,0.10), 0 3px 16px rgba(39, 44, 49,0.07);
-    transition: all 0.3s ease;
-    transform: translate3D(0, -1px, 0);
+  box-shadow: 0 0 1px rgba(39, 44, 49, 0.1), 0 3px 16px rgba(39, 44, 49, 0.07);
+  transition: all 0.3s ease;
+  transform: translate3D(0, -1px, 0);
 }
 
 .post-card-image-link {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    border-radius: 5px 5px 0 0;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 5px 5px 0 0;
 }
 
 .post-card-image {
-    width: auto;
-    height: 200px;
-    background: var(--lightgrey) no-repeat center center;
-    background-size: cover;
+  width: auto;
+  height: 200px;
+  background: var(--lightgrey) no-repeat center center;
+  background-size: cover;
 }
 
 .post-card-content-link {
-    position: relative;
-    display: block;
-    padding: 25px 25px 0;
-    color: var(--darkgrey);
+  position: relative;
+  display: block;
+  padding: 25px 25px 0;
+  color: var(--darkgrey);
 }
 
 .post-card-content-link:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .post-card-tags {
-    display: block;
-    margin-bottom: 4px;
-    color: var(--midgrey);
-    font-size: 1.2rem;
-    line-height: 1.15em;
-    font-weight: 500;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
+  display: block;
+  margin-bottom: 4px;
+  color: var(--midgrey);
+  font-size: 1.2rem;
+  line-height: 1.15em;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
 }
 
 .post-card-title {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .post-card-content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .post-card-excerpt {
-    font-family: Georgia, serif;
+  font-family: Georgia, serif;
 }
 
 .post-card-meta {
-    padding: 0 25px 25px;
+  padding: 0 25px 25px;
 }
 
 .author-profile-image {
-    margin-right: 5px;
-    width: 25px;
-    height: 25px;
-    border-radius: 100%;
+  margin-right: 5px;
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
 
-    object-fit: cover;
+  object-fit: cover;
 }
 
 .post-card-author {
-    font-size: 1.3rem;
-    font-weight: 500;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
+  font-size: 1.3rem;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+/* left-side-bar styling. */
+.left-side-bar-wrapper {
+  position: relative;
+  min-width: 180px;
+  width: 20%;
+}
+
+.left-side-bar-top {
+  border-right: 1px solid #f2f3f4;
+  width: 100%;
+  transition: all 0.2s ease-in;
+  margin-bottom: 1rem;
+  height: 230px;
+}
+.top-side-bar-links {
+  height: 180px;
+  overflow-y: auto;
+}
+.left-side-bar-links {
+  overflow-y: auto;
+  height: calc(100vh - 106px);
+}
+/* .top-left #show-all:checked ~ .top-side-bar-links .left-side-bar-link {
+  display: list-item;
+}
+.top-left #show-all ~ label[for="show-all"] {
+  display: none;
+}
+.top-left {
+  position: relative;
+}
+.top-left #show-all {
+  display: none;
+} */
+/* .top-left label[for="show-all"] {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  bottom: 0;
+  font-size: 0.75em;
+  text-align: center;
+  line-height: 1em;
+  border: 1px solid #ddd;
+  padding: 0.5em;
+  cursor: pointer;
+  text-transform: uppercase;
+  color: #444;
+}
+.top-left label[for="show-all"]:hover {
+  border: 1px solid #aaa;
+}
+.top-left label[for="show-all"]:active {
+  border: 1px solid #222;
+  background-color: #222;
+  color: #fff;
+} */
+
+.second-left {
+  position: relative;
+  z-index: 99;
+}
+.left-side-bar {
+  border-right: 1px solid #f2f3f4;
+  height: calc(100vh - 45px);
+  transition: all 0.2s ease-in;
+  background-color: #fff;
+}
+.left-side-bar-link a {
+  font-size: 14px;
+}
+.left-side-bar-link a:hover {
+  color: var(--blue);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+.main-posts {
+  display: flex;
+}
+.main-posts.fix-bottom .left-side-bar,
+.main-posts.fix-top .left-side-bar {
+  position: fixed;
+  top: 60px;
+}
+.main-posts.flex-bottom {
+  align-items: flex-end;
+}
+
+.left-side-bar-wrapper .tag-title {
+  background-color: #000;
+  padding: 1rem;
+}
+.side-bar-tag-name {
+  color: #fff;
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+/* right-side-bar styling */
+/* .right-side-bar {
+  max-width: 300px;
+  width: 100%;
+}
+
+.right-side-bar-article {
+  background-color: #fff;
+  margin: 1rem 0;
+  border: 1px solid #000;
+  border-radius: 5px;
+}
+
+.right-side-bar-article-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 90%;
+  left: -40px;
+  padding-left: 5px;
+  background-color: #000;
+  color: #fff;
+  font-weight: bold;
+  margin: 1rem 0;
+}
+
+.right-side-bar-article-content {
+  padding-left: 10px;
+  list-style: none;
+}
+
+.right-side-bar-article-content a:hover {
+  color: #05abe0;
+  transition: all ease 0.2s;
+} */
+@media (max-width: 768px) {
+  .second-left {
+    z-index: 99;
+  }
+  .left-side-bar-top {
+    margin-bottom: 0;
+  }
+  .main-posts.fix-bottom .left-side-bar,
+  .main-posts.fix-top .left-side-bar {
+    position: fixed;
+    top: 38px;
+  }
+  .main-posts {
+    position: relative;
+  }
+}
+
+@media (max-width: 600px) {
+  .second-left {
+    z-index: 99;
+  }
+  .left-side-bar-top {
+    margin-bottom: 0;
+  }
+  /* .top-left #show-all:not(:checked) ~ .show-links {
+    z-index: 9;
+  } */
+  .left-side-bar-wrapper {
+    display: none;
+  }
 }
 
 /* Special Styling for home page grid (below):
@@ -484,198 +658,264 @@ The first (most recent) post in the list is styled to be bigger than the others
  */
 
 @media (min-width: 795px) {
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) {
-        flex: 1 1 100%;
-        flex-direction: row;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link {
-        position: relative;
-        flex: 1 1 auto;
-        border-radius: 5px 0 0 5px;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) {
+    flex: 1 1 100%;
+    flex-direction: row;
+  }
+
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-image-link {
+    position: relative;
+    flex: 1 1 auto;
+    border-radius: 5px 0 0 5px;
+  }
+
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content {
-        flex: 0 1 357px;
-    }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-content {
+    flex: 0 1 357px;
+  }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2 {
-        font-size: 2.6rem;
-    }
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) h2 {
+    font-size: 2.6rem;
+  }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p {
-        font-size: 1.8rem;
-        line-height: 1.55em;
-    }
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) p {
+    font-size: 1.8rem;
+    line-height: 1.55em;
+  }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link {
-        padding: 30px 40px 0;
-    }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-content-link {
+    padding: 30px 40px 0;
+  }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta {
-        padding: 0 40px 30px;
-    }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-meta {
+    padding: 0 40px 30px;
+  }
 }
 
 .home-template .site-header:after {
-    display: none;
+  display: none;
 }
 
-
 /* Adjust some margins for smaller screens */
 @media (max-width: 650px) {
-    .post-feed {
-        padding-top: 5vw;
-    }
-    .post-card {
-        margin: 0 20px 5vw;
-    }
+  .post-feed {
+    padding-top: 5vw;
+  }
+  .post-card {
+    margin: 0 20px 5vw;
+  }
 }
 
-
-
 /* 7. Single Post
 /* ---------------------------------------------------------- */
 
 .post-template .site-main,
 .page-template .site-main {
-    padding-bottom: 4vw;
-    background: #fff;
+  padding-bottom: 4vw;
+  background: #fff;
+  overflow-y: hidden;
 }
 
 .post-full {
-    position: relative;
-    z-index: 50;
+  position: relative;
+  z-index: 50;
 }
 /* ^ Required to make .post-full-content:before/after z-index stacking work */
 
 .post-full-header {
-    margin: 0 auto;
-    padding: 2vw 3vw 3vw;
-    max-width: 1040px;
-    text-align: center;
+  margin: 0 auto;
+  padding: 2vw 3vw 3vw;
+  max-width: 1040px;
+  text-align: center;
 }
-@media (max-width: 500px) {
-    .post-full-header {
-        padding: 2vw 3vw 10vw;
-    }
+@media (max-width: 1170px) {
+  .post-full-header {
+    background-color: mediumblue;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 80%;
+    margin-left: 3vw;
+  }
 }
-
-.post-full-meta {
+@media (max-width: 800px) {
+  .post-full-header {
+    padding: 2vw 2vw 10vw 2vw;
+    width: 80%;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
+    /* margin-left: 2vw; */
+  }
+}
+@media (max-width: 500px) {
+  .post-full-header {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    color: var(--midgrey);
-    font-size: 1.4rem;
-    font-weight: 600;
-    text-transform: uppercase;
+    justify-content: center;
+    padding: 2vw 3vw 10vw;
+    margin-left: 0vw;
+  }
+}
+
+.post-full-meta {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--midgrey);
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-transform: uppercase;
 }
 
 .post-full-meta-date {
-    color: var(--blue);
+  color: var(--blue);
 }
 .post-full-title {
-    margin: 20px;
-    color: color(var(--darkgrey) l(-5%));
+  margin: 20px;
+  color: color(var(--darkgrey) l(-5%));
 }
 
 .date-divider {
-    display: inline-block;
-    margin: 0 6px 1px;
+  display: inline-block;
+  margin: 0 6px 1px;
 }
 
-.post-full-image {
-    margin: 0 -10vw -165px;
-    height: 800px;
-    background: var(--lightgrey) center center;
-    background-size: cover;
-    border-radius: 5px;
+/* .post-full-image {
+  margin: 0 -10vw -165px;
+  height: 800px;
+  background: var(--lightgrey) center center;
+  background-size: cover;
+  border-radius: 5px;
 }
 
 @media (max-width: 1170px) {
-    .post-full-image {
-        margin: 0 -4vw -100px;
-        height: 600px;
-        border-radius: 0;
-    }
+  .post-full-image {
+    margin: 0 -4vw -100px;
+    height: 600px;
+    border-radius: 0;
+  }
 }
 
 @media (max-width: 800px) {
-    .post-full-image {
-        height: 400px;
-    }
+  .post-full-image {
+    height: 400px;
+  }
+} */
+
+.post-content {
+  width: 100%;
 }
 
 .post-full-content {
-    position: relative;
-    margin: 0 auto;
-    padding: 20px 100px 0;
-    min-height: 230px;
-    font-family: Arial;
-    font-size: 1.4rem;
-    line-height: 1.6em;
-    background: #fff;
+  position: relative;
+  margin: 0 auto;
+  padding: 20px 100px 0;
+  min-height: 230px;
+  font-family: Arial;
+  font-size: 1.4rem;
+  line-height: 1.6em;
+  background: #fff;
+  width: 90%;
 }
 
 @media (max-width: 1170px) {
-    .post-full-content {
-        padding: 2vw 7vw 0;
-    }
+  .post-content {
+    width: 80%;
+  }
+  .post-full-content {
+    width: 100%;
+    margin-left: 3vw;
+    padding: 20px 40px 0;
+  }
 }
 @media (max-width: 800px) {
-    .post-full-content {
-        font-size: 1.4rem;
-    }
+  .post-content {
+    width: 90%;
+  }
+  .post-full-content {
+    width: 89%;
+    padding: 20px 40px 0;
+    margin-left: 2vw;
+    font-size: 1.4rem;
+  }
+}
+@media (max-width: 500px) {
+  .post-content {
+    width: 100%;
+  }
+  .post-full-content {
+    width: 100%;
+    margin-left: 0vw;
+  }
 }
 
 .post-full-content:before {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: -5px;
-    z-index: -1;
-    display: block;
-    width: 20px;
-    height: 200px;
-    background: rgba(39,44,49,0.15);
-    filter: blur(5px);
-    transform: rotate(-5deg);
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: -5px;
+  z-index: -1;
+  display: block;
+  width: 20px;
+  height: 200px;
+  background: rgba(39, 44, 49, 0.15);
+  filter: blur(5px);
+  transform: rotate(-5deg);
 }
 
 .post-full-content:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    right: -5px;
-    z-index: -1;
-    display: block;
-    width: 20px;
-    height: 200px;
-    background: rgba(39,44,49,0.15);
-    filter: blur(5px);
-    transform: rotate(5deg);
+  content: "";
+  position: absolute;
+  top: 15px;
+  right: -5px;
+  z-index: -1;
+  display: block;
+  width: 20px;
+  height: 200px;
+  background: rgba(39, 44, 49, 0.15);
+  filter: blur(5px);
+  transform: rotate(5deg);
 }
 
 .no-image .post-full-content {
-    padding-top: 0;
+  padding-top: 0;
 }
 
 .no-image .post-full-content:before,
 .no-image .post-full-content:after {
-    display: none;
+  display: none;
 }
 
 .kg-card-markdown {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 920px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 920px;
 }
 
 .post-full-content h1,
@@ -692,60 +932,66 @@ The first (most recent) post in the list is styled to be bigger than the others
 .post-full-content blockquote,
 .post-full-comments,
 .footnotes {
-    min-width: 100%;
+  min-width: 100%;
 }
 
 .post-full-content li {
-    word-break: break-word;
+  word-break: break-word;
 }
 
 .post-full-content li p {
-    margin: 0;
+  margin: 0;
 }
 
 .post-template .kg-card-markdown > p:first-child {
-    font-size: 1.25em;
-    line-height: 1.5em;
+  font-size: 1.25em;
+  line-height: 1.5em;
 }
 
 .post-full-content a {
-    color: #000;
-    box-shadow: var(--blue) 0 -1px 0 inset;
+  color: #000;
+  box-shadow: var(--blue) 0 -1px 0 inset;
 }
 
 .post-full-content a:hover {
-    color: var(--blue);
-    text-decoration: none;
+  color: var(--blue);
+  text-decoration: none;
 }
 
 .post-full-content strong,
 .post-full-content em {
-    color: color(var(--darkgrey) l(-5%));
+  color: color(var(--darkgrey) l(-5%));
 }
 
 .post-full-content small {
-    display: inline-block;
-    line-height: 1.6em;
+  display: inline-block;
+  line-height: 1.6em;
 }
 
 .post-full-content li:first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .post-full-content img,
 .post-full-content video {
-    display: block;
-    margin: 1.5em auto;
-    max-width: 1040px;
+  max-width: 700px;
+  width: 100%;
+}
+.post-full-content img {
+  object-fit: contain;
+  display: block;
+  margin: auto;
 }
 @media (max-width: 1040px) {
-    .post-full-content img,
-    .post-full-content video {
-        width: 100%;
-    }
+  .post-full-content img,
+  .post-full-content video {
+    width: 100%;
+  }
+  .post-full-content img {
+    object-fit: contain;
+  }
 }
 
-
 /* Full bleed images (#full)
 Super neat trick courtesy of @JoelDrapper
 
@@ -755,11 +1001,10 @@ Usage (In Ghost edtior):
 
 */
 .post-full-content img[src$="#full"] {
-    max-width: none;
-    width: 100vw;
+  max-width: none;
+  width: 100vw;
 }
 
-
 /* Image captions
 
 Usage (In Ghost editor):
@@ -769,87 +1014,86 @@ Usage (In Ghost editor):
 
 */
 .post-full-content img + br + small {
-    display: block;
-    margin-top: -3em;
-    margin-bottom: 1.5em;
+  display: block;
+  margin-top: -3em;
+  margin-bottom: 1.5em;
 }
 
-
 .post-full-content iframe {
-    margin: 0 auto;
+  margin: 0 auto;
 }
 
 .post-full-content blockquote {
-    margin: 0 0 1.5em;
-    padding: 0 1.5em;
-    border-left: #3eb0ef 3px solid;
+  margin: 0 0 1.5em;
+  padding: 0 1.5em;
+  border-left: #3eb0ef 3px solid;
 }
 
 .post-full-content blockquote p {
-    margin: 0 0 1em 0;
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    font-style: italic;
+  margin: 0 0 1em 0;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-style: italic;
 }
 
 .post-full-content blockquote p:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .post-full-content code {
-    padding: 0 5px 2px;
-    font-size: 0.8em;
-    line-height: 1em;
-    font-weight: 400!important;
-    background: var(--whitegrey);
-    border-radius: 3px;
+  padding: 0 5px 2px;
+  font-size: 0.8em;
+  line-height: 1em;
+  font-weight: 400 !important;
+  background: var(--whitegrey);
+  border-radius: 3px;
 }
 
 .post-full-content pre {
-    overflow-x: auto;
-    margin: 1.5em 0 3em;
-    padding: 20px;
-    max-width: 100%;
-/*    border: color(var(--darkgrey) l(-10%)) 1px solid;*/
-    color: var(--whitegrey);
-    font-size: 1.4rem;
-    line-height: 1.5em;
+  overflow-x: auto;
+  margin: 1.5em 0 3em;
+  padding: 20px;
+  max-width: 100%;
+  /*    border: color(var(--darkgrey) l(-10%)) 1px solid;*/
+  color: var(--whitegrey);
+  font-size: 1.4rem;
+  line-height: 1.5em;
   /*  background: color(var(--darkgrey) l(-3%));*/
-    border-radius: 5px;
+  border-radius: 5px;
 }
 
 .post-full-content pre code {
-    padding: 0;
-    font-size: inherit;
-    line-height: inherit;
-    background: transparent;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
 }
 
 .post-full-content pre code * {
-    color: inherit;
+  color: inherit;
 }
 
 .post-full-content .fluid-width-video-wrapper {
-    margin: 1.5em 0 3em;
+  margin: 1.5em 0 3em;
 }
 
 .post-full-content hr {
-    margin: 4vw 0;
+  margin: 4vw 0;
 }
 
 .post-full-content hr:after {
-    content: "";
-    position: absolute;
-    top: -15px;
-    left: 50%;
-    display: block;
-    margin-left: -10px;
-    width: 1px;
-    height: 30px;
-    background: color(var(--lightgrey) l(+10%));
-    box-shadow: #fff 0 0 0 5px;
-    transform: rotate(45deg);
+  content: "";
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  display: block;
+  margin-left: -10px;
+  width: 1px;
+  height: 30px;
+  background: color(var(--lightgrey) l(+10%));
+  box-shadow: #fff 0 0 0 5px;
+  transform: rotate(45deg);
 }
 
 .post-full-content h1,
@@ -858,1066 +1102,1080 @@ Usage (In Ghost editor):
 .post-full-content h4,
 .post-full-content h5,
 .post-full-content h6 {
-    color: color(var(--darkgrey) l(-5%));
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  color: color(var(--darkgrey) l(-5%));
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 .post-full-content h1 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 4.6rem;
-    font-weight: 700;
+  margin: 0.5em 0 0.2em 0;
+  font-size: 4.6rem;
+  font-weight: 700;
 }
 @media (max-width: 500px) {
-    .post-full-content h1 {
-        font-size: 2.8rem;
-    }
+  .post-full-content h1 {
+    font-size: 2.8rem;
+  }
 }
 
 .post-full-content h2 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 3.6rem;
-    font-weight: 700;
+  margin: 0.5em 0 0.2em 0;
+  font-size: 3.6rem;
+  font-weight: 700;
 }
 @media (max-width: 500px) {
-    .post-full-content h2 {
-        font-size: 2.6rem;
-    }
+  .post-full-content h2 {
+    font-size: 2.6rem;
+  }
 }
 
 .post-full-content h3 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 2.8rem;
-    font-weight: 700;
+  margin: 0.5em 0 0.2em 0;
+  font-size: 2.8rem;
+  font-weight: 700;
 }
 @media (max-width: 500px) {
-    .post-full-content h3 {
-        font-size: 2.2rem;
-    }
+  .post-full-content h3 {
+    font-size: 2.2rem;
+  }
 }
 
 .post-full-content h4 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 2.8rem;
-    font-weight: 700;
+  margin: 0.5em 0 0.2em 0;
+  font-size: 2.8rem;
+  font-weight: 700;
 }
 @media (max-width: 500px) {
-    .post-full-content h4 {
-        font-size: 2.2rem;
-    }
+  .post-full-content h4 {
+    font-size: 2.2rem;
+  }
 }
 
 .post-full-content h5 {
-    display: block;
-    margin: 0.5em 0;
-    padding: 1em 0 1.5em;
-    border: 0;
-    color: var(--blue);
-    font-family: Georgia,serif;
-    font-size: 3.2rem;
-    line-height: 1.35em;
-    text-align: center;
+  display: block;
+  margin: 0.5em 0;
+  padding: 1em 0 1.5em;
+  border: 0;
+  color: var(--blue);
+  font-family: Georgia, serif;
+  font-size: 3.2rem;
+  line-height: 1.35em;
+  text-align: center;
 }
 @media (min-width: 1180px) {
-    .post-full-content h5 {
-        max-width: 1060px;
-        width: 100vw;
-    }
+  .post-full-content h5 {
+    max-width: 1060px;
+    width: 100vw;
+  }
 }
 @media (max-width: 500px) {
-    .post-full-content h5 {
-        padding: 0 0 0.5em;
-        font-size: 2.2rem;
-    }
+  .post-full-content h5 {
+    padding: 0 0 0.5em;
+    font-size: 2.2rem;
+  }
 }
 
 .post-full-content h6 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 2.3rem;
-    font-weight: 700;
+  margin: 0.5em 0 0.2em 0;
+  font-size: 2.3rem;
+  font-weight: 700;
 }
 @media (max-width: 500px) {
-    .post-full-content h6 {
-        font-size: 2rem;
-    }
+  .post-full-content h6 {
+    font-size: 2rem;
+  }
 }
 
 .footnotes-sep {
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 }
 
 .footnotes {
-    font-size: 1.5rem;
+  font-size: 1.5rem;
 }
 
 .footnotes p {
-    margin: 0;
+  margin: 0;
 }
 
 .footnote-backref {
-    color: var(--blue) !important;
-    font-size: 1.2rem;
-    font-weight: bold;
-    text-decoration: none !important;
-    box-shadow: none !important;
+  color: var(--blue) !important;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-decoration: none !important;
+  box-shadow: none !important;
 }
 
 /* Some grouped styles for smaller viewports */
 @media (max-width: 500px) {
-    .post-full-meta {
-        font-size: 1.2rem;
-        line-height: 1.3em;
-    }
-
-    .post-full-title {
-        font-size: 2.9rem;
-    }
-    .post-full-image {
-        margin-bottom: 4vw;
-        height: 350px;
-    }
-    .post-full-content {
-        padding: 0;
-    }
-    .post-full-content:before,
-    .post-full-content:after {
-        display: none;
-    }
+  .post-full-meta {
+    font-size: 1.2rem;
+    line-height: 1.3em;
+  }
+
+  .post-full-title {
+    font-size: 2.9rem;
+  }
+  .post-full-image {
+    margin-bottom: 4vw;
+    height: 350px;
+  }
+  .post-full-content {
+    padding: 0;
+  }
+  .post-full-content:before,
+  .post-full-content:after {
+    display: none;
+  }
 }
 
 /* Tables */
 .post-full-content table {
-    display: inline-block;
-    overflow-x: auto;
-    margin: 0.5em 0 2.5em;
-    max-width: 100%;
-    width: auto;
-    border-spacing: 0;
-    border-collapse: collapse;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-    font-size: 1.6rem;
-    white-space: nowrap;
-    vertical-align: top;
+  display: inline-block;
+  overflow-x: auto;
+  margin: 0.5em 0 2.5em;
+  max-width: 100%;
+  width: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 1.6rem;
+  white-space: nowrap;
+  vertical-align: top;
 }
 
 .post-full-content table {
-    -webkit-overflow-scrolling: touch;
-    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
-    background-attachment: scroll, scroll;
-    background-size: 10px 100%, 10px 100%;
-    background-repeat: no-repeat;
+  -webkit-overflow-scrolling: touch;
+  background: radial-gradient(
+        ellipse at left,
+        rgba(0, 0, 0, 0.2) 0%,
+        rgba(0, 0, 0, 0) 75%
+      )
+      0 center,
+    radial-gradient(
+        ellipse at right,
+        rgba(0, 0, 0, 0.2) 0%,
+        rgba(0, 0, 0, 0) 75%
+      )
+      100% center;
+  background-attachment: scroll, scroll;
+  background-size: 10px 100%, 10px 100%;
+  background-repeat: no-repeat;
 }
 
 .post-full-content table td:first-child {
-    background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
-    background-size: 20px 100%;
-    background-repeat: no-repeat;
+  background-image: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 20px 100%;
+  background-repeat: no-repeat;
 }
 
 .post-full-content table td:last-child {
-    background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
-    background-position: 100% 0;
-    background-size: 20px 100%;
-    background-repeat: no-repeat;
+  background-image: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-position: 100% 0;
+  background-size: 20px 100%;
+  background-repeat: no-repeat;
 }
 
 .post-full-content table th {
-    color: var(--darkgrey);
-    font-size: 1.2rem;
-    font-weight: 700;
-    letter-spacing: 0.2px;
-    text-align: left;
-    text-transform: uppercase;
-    background-color: color(var(--whitegrey) l(+4%));
+  color: var(--darkgrey);
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  text-align: left;
+  text-transform: uppercase;
+  background-color: color(var(--whitegrey) l(+4%));
 }
 
 .post-full-content table th,
 .post-full-content table td {
-    padding: 6px 12px;
-    border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
+  padding: 6px 12px;
+  border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
 }
 
-
 /* 7.1. Subscribe Form
 /* ---------------------------------------------------------- */
 
 .subscribe-form {
-    margin: 1.5em 0;
-    padding: 6.5vw 7vw 7vw;
-    border: color(var(--whitegrey) l(+2%)) 1px solid;
-    text-align: center;
-    background: color(var(--whitegrey) l(+4%));
-    border-radius: 7px;
+  margin: 1.5em 0;
+  padding: 6.5vw 7vw 7vw;
+  border: color(var(--whitegrey) l(+2%)) 1px solid;
+  text-align: center;
+  background: color(var(--whitegrey) l(+4%));
+  border-radius: 7px;
 }
 
 .subscribe-form-title {
-    margin: 0 0 3px 0;
-    padding: 0;
-    color: var(--darkgrey);
-    font-size: 3.5rem;
-    line-height: 1;
-    font-weight: 700;
+  margin: 0 0 3px 0;
+  padding: 0;
+  color: var(--darkgrey);
+  font-size: 3.5rem;
+  line-height: 1;
+  font-weight: 700;
 }
 
 .subscribe-form p {
-    margin-bottom: 1em;
-    color: var(--midgrey);
-    font-size: 2.2rem;
-    line-height: 1.55em;
-    letter-spacing: 0.2px;
+  margin-bottom: 1em;
+  color: var(--midgrey);
+  font-size: 2.2rem;
+  line-height: 1.55em;
+  letter-spacing: 0.2px;
 }
 
 .subscribe-form form {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 auto;
-    max-width: 420px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 420px;
 }
 
 .subscribe-form .form-group {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .subscribe-email {
-    display: block;
-    padding: 10px;
-    width: 100%;
-    border: color(var(--lightgrey) l(+7%)) 1px solid;
-    color: var(--midgrey);
-    font-size: 1.8rem;
-    line-height: 1em;
-    font-weight: normal;
-    user-select: text;
-    border-radius: 5px;
-    transition: border-color 0.15s linear;
+  display: block;
+  padding: 10px;
+  width: 100%;
+  border: color(var(--lightgrey) l(+7%)) 1px solid;
+  color: var(--midgrey);
+  font-size: 1.8rem;
+  line-height: 1em;
+  font-weight: normal;
+  user-select: text;
+  border-radius: 5px;
+  transition: border-color 0.15s linear;
 
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 .subscribe-email:focus {
-    outline: 0;
-    border-color: color(var(--lightgrey) l(-2%));
+  outline: 0;
+  border-color: color(var(--lightgrey) l(-2%));
 }
 
 .subscribe-form button {
-    display: inline-block;
-    margin: 0 0 0 10px;
-    padding: 0 20px;
-    height: 41px;
-    outline: none;
-    color: #fff;
-    font-size: 1.5rem;
-    line-height: 37px;
-    font-weight: 400;
-    text-align: center;
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
-    background: linear-gradient(
+  display: inline-block;
+  margin: 0 0 0 10px;
+  padding: 0 20px;
+  height: 41px;
+  outline: none;
+  color: #fff;
+  font-size: 1.5rem;
+  line-height: 37px;
+  font-weight: 400;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  background: linear-gradient(
     color(var(--blue) whiteness(+7%)),
     color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
     color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
     color(var(--blue) lightness(-4%) saturation(-10%))
-    );
-    border-radius: 5px;
-    box-shadow: 0 0 0 1px inset rgba(0,0,0,0.14);
+  );
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14);
 
-    -webkit-font-smoothing: subpixel-antialiased;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 .subscribe-form button:active,
 .subscribe-form button:focus {
-    background: color(var(--blue) lightness(-9%) saturation(-10%));
+  background: color(var(--blue) lightness(-9%) saturation(-10%));
 }
 
 @media (max-width: 650px) {
-    .subscribe-form-title {
-        font-size: 2.4rem;
-    }
-    .subscribe-form p {
-        font-size: 1.6rem;
-    }
+  .subscribe-form-title {
+    font-size: 2.4rem;
+  }
+  .subscribe-form p {
+    font-size: 1.6rem;
+  }
 }
 
 @media (max-width: 500px) {
-    .subscribe-form form {
-        flex-direction: column;
-    }
-    .subscribe-form .form-group {
-        width: 100%;
-    }
-    .subscribe-form button {
-        margin: 10px 0 0 0;
-        width: 100%;
-    }
+  .subscribe-form form {
+    flex-direction: column;
+  }
+  .subscribe-form .form-group {
+    width: 100%;
+  }
+  .subscribe-form button {
+    margin: 10px 0 0 0;
+    width: 100%;
+  }
 }
 
-
 /* 7.2. Post Footer
 /* ---------------------------------------------------------- */
 
 .post-full-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 auto;
-    padding: 3vw 0 6vw 0;
-    max-width: 840px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 3vw 0 6vw 0;
+  max-width: 840px;
 }
 
 .author-card {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .author-card .author-profile-image {
-    margin-right: 15px;
-    width: 60px;
-    height: 60px;
+  margin-right: 15px;
+  width: 60px;
+  height: 60px;
 }
 
 .author-card-name {
-    margin: 0 0 2px 0;
-    padding: 0;
-    font-size: 2rem;
+  margin: 0 0 2px 0;
+  padding: 0;
+  font-size: 2rem;
 }
 
 .author-card-name a {
-    color: var(--darkgrey);
-    font-weight: 700;
+  color: var(--darkgrey);
+  font-weight: 700;
 }
 
 .author-card-name a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .author-card-content p {
-    margin: 0;
-    color: var(--midgrey);
-    line-height: 1.3em;
+  margin: 0;
+  color: var(--midgrey);
+  line-height: 1.3em;
 }
 
 .post-full-footer-right {
-    flex-shrink: 0;
-    margin-left: 20px;
+  flex-shrink: 0;
+  margin-left: 20px;
 }
 
 .author-card-button {
-    display: block;
-    padding: 9px 16px;
-    border: color(var(--midgrey) l(+20%)) 1px solid;
-    color: var(--midgrey);
-    font-size: 1.2rem;
-    line-height: 1;
-    font-weight: 500;
-    border-radius: 20px;
-    transition: all ease 0.2s;
+  display: block;
+  padding: 9px 16px;
+  border: color(var(--midgrey) l(+20%)) 1px solid;
+  color: var(--midgrey);
+  font-size: 1.2rem;
+  line-height: 1;
+  font-weight: 500;
+  border-radius: 20px;
+  transition: all ease 0.2s;
 }
 
 .author-card-button:hover {
-    border-color: var(--blue);
-    color: var(--blue);
-    text-decoration: none;
+  border-color: var(--blue);
+  color: var(--blue);
+  text-decoration: none;
 }
 
-
 /* 7.3. Comments
 /* ---------------------------------------------------------- */
 
 .post-full-comments {
-    margin: 0 auto;
-    max-width: 840px;
+  margin: 0 auto;
+  max-width: 840px;
 }
 
-
 /* 7.4. Related posts
 /* ---------------------------------------------------------- */
 
 .read-next-feed {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -20px;
-    padding: 40px 0 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -20px;
+  padding: 40px 0 0 0;
 }
 
 .read-next-card {
-    position: relative;
-    flex: 1 1 300px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    margin: 0 20px 40px;
-    padding: 25px;
-    color: #fff;
-    background: var(--darkgrey) center center;
-    background-size: cover;
-    border-radius: 5px;
-    box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
+  position: relative;
+  flex: 1 1 300px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0 20px 40px;
+  padding: 25px;
+  color: #fff;
+  background: var(--darkgrey) center center;
+  background-size: cover;
+  border-radius: 5px;
+  box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px,
+    rgba(39, 44, 49, 0.03) 1px 3px 8px;
 }
 
 .read-next-card:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    background: linear-gradient(135deg, rgba(0,40,60,0.8) 0%,rgba(0,20,40,0.7) 100%);
-    border-radius: 5px;
-
-    backdrop-filter: blur(2px);
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 40, 60, 0.8) 0%,
+    rgba(0, 20, 40, 0.7) 100%
+  );
+  border-radius: 5px;
+
+  backdrop-filter: blur(2px);
 }
 
 .read-next-card-header {
-    position: relative;
-    z-index: 50;
-    padding-top: 20px;
-    text-align: center;
+  position: relative;
+  z-index: 50;
+  padding-top: 20px;
+  text-align: center;
 }
 
 .read-next-card-header-sitetitle {
-    display: block;
-    font-size: 1.3rem;
-    line-height: 1.3em;
-    opacity: 0.8;
+  display: block;
+  font-size: 1.3rem;
+  line-height: 1.3em;
+  opacity: 0.8;
 }
 
 .read-next-card-header-title {
-    margin: 0;
-    padding: 0 20px;
-    color: #fff;
-    font-size: 3rem;
-    line-height: 1.2em;
-    letter-spacing: 1px;
+  margin: 0;
+  padding: 0 20px;
+  color: #fff;
+  font-size: 3rem;
+  line-height: 1.2em;
+  letter-spacing: 1px;
 }
 
 .read-next-card-header-title a {
-    color: #fff;
-    font-weight: 300;
-    text-decoration: none;
+  color: #fff;
+  font-weight: 300;
+  text-decoration: none;
 }
 
 .read-next-card-header-title a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .read-next-divider {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    height: 80px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  height: 80px;
 }
 
 .read-next-divider svg {
-    width: 40px;
-    fill: transparent;
-    stroke: #fff;
-
-    stroke-width: 0.5px;
-    stroke-opacity: 0.65;
+  width: 40px;
+  fill: transparent;
+  stroke: #fff;
+  stroke-width: 0.5px;
+  stroke-opacity: 0.65;
 }
 
 .read-next-card-content {
-    position: relative;
-    z-index: 50;
-    flex-grow: 1;
-    display: flex;
-    font-size: 1.7rem;
+  position: relative;
+  z-index: 50;
+  flex-grow: 1;
+  display: flex;
+  font-size: 1.7rem;
 }
 
 .read-next-card-content ul {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    padding: 0;
-    text-align: center;
-    list-style: none;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+  list-style: none;
 }
 
 .read-next-card-content li {
-    margin: 0;
-    padding: 0;
-    font-size: 1.6rem;
-    line-height: 1.25em;
-    font-weight: 200;
-    letter-spacing: -0.5px;
+  margin: 0;
+  padding: 0;
+  font-size: 1.6rem;
+  line-height: 1.25em;
+  font-weight: 200;
+  letter-spacing: -0.5px;
 }
 
 .read-next-card-content li a {
-    display: block;
-    padding: 20px 0;
-    border-bottom: rgba(255,255,255,0.3) 1px solid;
-    color: #fff;
-    font-weight: 500;
-    vertical-align: top;
-    transition: opacity 0.3s ease;
+  display: block;
+  padding: 20px 0;
+  border-bottom: rgba(255, 255, 255, 0.3) 1px solid;
+  color: #fff;
+  font-weight: 500;
+  vertical-align: top;
+  transition: opacity 0.3s ease;
 }
 
 .read-next-card-content li:first-of-type a {
-    padding-top: 10px;
+  padding-top: 10px;
 }
 
 .read-next-card-content li a:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .read-next-card-footer {
-    position: relative;
-    margin: 15px 0 3px 0;
-    text-align: center;
+  position: relative;
+  margin: 15px 0 3px 0;
+  text-align: center;
 }
 
 .read-next-card-footer a {
-    color: #fff;
+  color: #fff;
 }
 
-
 /* 7.5. Floating Header
 /* ---------------------------------------------------------- */
 
 .floating-header {
-    visibility: hidden;
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    height: 60px;
-    border-bottom: rgba(0,0,0,0.06) 1px solid;
-    background: rgba(255,255,255,0.95);
-    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
-    transform: translate3d(0, -120%, 0);
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  border-bottom: rgba(0, 0, 0, 0.06) 1px solid;
+  background: rgba(255, 255, 255, 0.95);
+  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+  transform: translate3d(0, -120%, 0);
 }
 
 .floating-active {
-    visibility: visible;
-    transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1);
-    transform: translate3d(0, 0, 0);
+  visibility: visible;
+  transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1);
+  transform: translate3d(0, 0, 0);
 }
 
 .floating-header-logo {
-    overflow: hidden;
-    margin: 0 0 0 20px;
-    font-size: 1.6rem;
-    line-height: 1em;
-    letter-spacing: -1px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  overflow: hidden;
+  margin: 0 0 0 20px;
+  font-size: 1.6rem;
+  line-height: 1em;
+  letter-spacing: -1px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .floating-header-logo a {
-    display: flex;
-    align-items: center;
-    color: var(--darkgrey);
-    line-height: 1.1em;
-    font-weight: 700;
+  display: flex;
+  align-items: center;
+  color: var(--darkgrey);
+  line-height: 1.1em;
+  font-weight: 700;
 }
 
 .floating-header-logo a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .floating-header-logo img {
-    margin: 0 10px 0 0;
-    max-height: 20px;
+  margin: 0 10px 0 0;
+  max-height: 20px;
 }
 
 .floating-header-divider {
-    margin: 0 5px;
-    line-height: 1em;
+  margin: 0 5px;
+  line-height: 1em;
 }
 
 .floating-header-title {
-    flex: 1;
-    overflow: hidden;
-    margin: 0;
-    color: #2e2e2e;
-    font-size: 1.6rem;
-    line-height: 1.3em;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  margin: 0;
+  color: #2e2e2e;
+  font-size: 1.6rem;
+  line-height: 1.3em;
+  font-weight: bold;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .floating-header-share {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding-left: 2%;
-    font-size: 1.3rem;
-    line-height: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: 2%;
+  font-size: 1.3rem;
+  line-height: 1;
 }
 
 .floating-header-share a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .floating-header-share svg {
-    width: auto;
-    height: 16px;
-    fill: #fff;
+  width: auto;
+  height: 16px;
+  fill: #fff;
 }
 
 .floating-header-share-label {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    margin-right: 10px;
-    color: rgba(0,0,0,0.7);
-    font-weight: 500;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: 500;
 }
 
 .floating-header-share-label svg {
-    margin: 0 5px 0 10px;
-    width: 18px;
-    height: 18px;
-    stroke: rgba(0,0,0,0.7);
-    transform: rotate(90deg);
+  margin: 0 5px 0 10px;
+  width: 18px;
+  height: 18px;
+  stroke: rgba(0, 0, 0, 0.7);
+  transform: rotate(90deg);
 }
 
 .floating-header-share-tw,
-.floating-header-share-fb,{
-    display: block;
-    align-items: center;
-    width: 60px;
-    height: 60px;
-    color: #fff;
-    line-height: 48px;
-    text-align: center;
-    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+.floating-header-share-fb {
+  display: block;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  color: #fff;
+  line-height: 48px;
+  text-align: center;
+  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
 }
 
-
 .floating-header-share-tw {
-    background: #33b1ff;
+  background: #33b1ff;
 }
 
 .floating-header-share-fb {
-    background: #005e99;
+  background: #005e99;
 }
 
 .progress {
-    position: absolute;
-    right: 0;
-    bottom: -1px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    border: none;
-    color: var(--blue);
-    background: transparent;
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border: none;
+  color: var(--blue);
+  background: transparent;
 
-    appearance: none;
+  appearance: none;
 }
 
 .progress::-webkit-progress-bar {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 .progress::-webkit-progress-value {
-    background-color: var(--blue);
+  background-color: var(--blue);
 }
 
 .progress::-moz-progress-bar {
-    background-color: var(--blue);
+  background-color: var(--blue);
 }
 
 .progress-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 2px;
-    background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
 }
 
 .progress-bar {
-    display: block;
-    width: 50%;
-    height: inherit;
-    background-color: var(--blue);
+  display: block;
+  width: 50%;
+  height: inherit;
+  background-color: var(--blue);
 }
 
 @media (max-width: 900px) {
-    .floating-header {
-        height: 40px;
-    }
-    .floating-header-title,
-    .floating-header-logo {
-        font-size: 1.5rem;
-    }
-    .floating-header-share-tw,
-    .floating-header-share-fb,{
-        width: 40px;
-        height: 40px;
-        line-height: 38px;
-    }
-
+  .floating-header {
+    height: 40px;
+  }
+  .floating-header-title,
+  .floating-header-logo {
+    font-size: 1.5rem;
+  }
+  .floating-header-share-tw,
+  .floating-header-share-fb {
+    width: 40px;
+    height: 40px;
+    line-height: 38px;
+  }
 }
 
 @media (max-width: 800px) {
-    .floating-header-logo {
-        margin-left: 10px;
-    }
-    .floating-header-logo a {
-        color: #2e2e2e;
-    }
-    .floating-header-title,
-    .floating-header-divider {
-        visibility: hidden;
-    }
+  .floating-header-logo {
+    margin-left: 10px;
+  }
+  .floating-header-logo a {
+    color: #2e2e2e;
+  }
+  .floating-header-title,
+  .floating-header-divider {
+    visibility: hidden;
+  }
 }
 
 @media (max-width: 450px) {
-    .floating-header-share-label {
-        display: none;
-    }
+  .floating-header-share-label {
+    display: none;
+  }
 }
 
-
 /* 8. Author Template
 /* ---------------------------------------------------------- */
 
 .site-header-content .author-profile-image {
-    z-index: 10;
-    flex-shrink: 0;
-    margin: 0 0 20px 0;
-    width: 100px;
-    height: 100px;
-    box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
+  z-index: 10;
+  flex-shrink: 0;
+  margin: 0 0 20px 0;
+  width: 100px;
+  height: 100px;
+  box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 6px;
 }
 
 .site-header-content .author-bio {
-    z-index: 10;
-    flex-shrink: 0;
-    margin: 5px 0 10px 0;
-    max-width: 600px;
-    font-size: 2rem;
-    line-height: 1.3em;
-    font-weight: 300;
-    letter-spacing: 0.5px;
-    opacity: 0.8;
+  z-index: 10;
+  flex-shrink: 0;
+  margin: 5px 0 10px 0;
+  max-width: 600px;
+  font-size: 2rem;
+  line-height: 1.3em;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
 }
 
 .site-header-content .author-meta {
-    z-index: 10;
-    flex-shrink: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 0 10px 0;
-    font-family: Georgia, serif;
-    font-style: italic;
+  z-index: 10;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0 10px 0;
+  font-family: Georgia, serif;
+  font-style: italic;
 }
 
 .site-header-content .author-location svg {
-    height: 1.9rem;
-    stroke: #fff;
+  height: 1.9rem;
+  stroke: #fff;
 }
 
 .site-header-content .bull {
-    display: inline-block;
-    margin: 0 12px;
-    opacity: 0.5;
+  display: inline-block;
+  margin: 0 12px;
+  opacity: 0.5;
 }
 
 .site-header-content .social-link:first-of-type {
-    padding-left: 4px;
+  padding-left: 4px;
 }
 
 @media (max-width: 500px) {
-    .site-header-content .author-bio {
-        font-size: 1.8rem;
-        line-height: 1.15em;
-        letter-spacing: 0;
-    }
-    .author-location,
-    .author-stats {
-        display: none;
-    }
+  .site-header-content .author-bio {
+    font-size: 1.8rem;
+    line-height: 1.15em;
+    letter-spacing: 0;
+  }
+  .author-location,
+  .author-stats {
+    display: none;
+  }
 }
 
-
 /* 9. Error Template
 /* ---------------------------------------------------------- */
 
 .error-template .site-main {
-    padding: 7vw 4vw;
+  padding: 7vw 4vw;
 }
 
 .site-nav-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
 .site-nav-center .site-nav-logo {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .error-message {
-    text-align: center;
+  text-align: center;
 }
 
 .error-code {
-    margin: 0;
-    font-size: 12vw;
-    line-height: 1em;
-    letter-spacing: -5px;
-    opacity: 0.3;
+  margin: 0;
+  font-size: 12vw;
+  line-height: 1em;
+  letter-spacing: -5px;
+  opacity: 0.3;
 }
 
 .error-description {
-    margin: 0;
-    color: var(--midgrey);
-    font-size: 3rem;
-    line-height: 1.3em;
-    font-weight: 400;
+  margin: 0;
+  color: var(--midgrey);
+  font-size: 3rem;
+  line-height: 1.3em;
+  font-weight: 400;
 }
 
 @media (max-width: 800px) {
-    .error-description {
-        margin: 5px 0 0 0;
-        font-size: 1.8rem;
-    }
+  .error-description {
+    margin: 5px 0 0 0;
+    font-size: 1.8rem;
+  }
 }
 
 .error-link {
-    display: inline-block;
-    margin-top: 5px;
+  display: inline-block;
+  margin-top: 5px;
 }
 
 .error-template .post-feed {
-    padding-top: 0;
+  padding-top: 0;
 }
 
-
 /* 10. Subscribe Overlay
 /* ---------------------------------------------------------- */
 
 .subscribe-overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(0,25,40,0.97);
-    opacity: 0;
-    transition: opacity 200ms ease-in;
-    pointer-events: none;
-
-    backdrop-filter: blur(3px);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 25, 40, 0.97);
+  opacity: 0;
+  transition: opacity 200ms ease-in;
+  pointer-events: none;
+
+  backdrop-filter: blur(3px);
 }
 
 .subscribe-overlay:target {
-    opacity: 1;
-    pointer-events: auto;
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .subscribe-overlay-content {
-    position: relative;
-    z-index: 9999;
-    margin: 0 0 5vw 0;
-    padding: 4vw;
-    color: #fff;
-    text-align: center;
+  position: relative;
+  z-index: 9999;
+  margin: 0 0 5vw 0;
+  padding: 4vw;
+  color: #fff;
+  text-align: center;
 }
 
 .subscribe-overlay-logo {
-    position: fixed;
-    top: 23px;
-    left: 30px;
-    height: 30px;
+  position: fixed;
+  top: 23px;
+  left: 30px;
+  height: 30px;
 }
 
 .subscribe-overlay-title {
-    display: inline-block;
-    margin: 0 0 10px 0;
-    font-size: 6rem;
-    line-height: 1.15em;
+  display: inline-block;
+  margin: 0 0 10px 0;
+  font-size: 6rem;
+  line-height: 1.15em;
 }
 
 .subscribe-overlay-description {
-    margin: 0 auto 50px;
-    max-width: 650px;
-    font-family: Georgia, serif;
-    font-size: 3rem;
-    line-height: 1.3em;
-    font-weight: 300;
-    opacity: 0.8;
+  margin: 0 auto 50px;
+  max-width: 650px;
+  font-family: Georgia, serif;
+  font-size: 3rem;
+  line-height: 1.3em;
+  font-weight: 300;
+  opacity: 0.8;
 }
 
 .subscribe-overlay form {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 auto;
-    max-width: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 500px;
 }
 
 .subscribe-overlay .form-group {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .subscribe-overlay .subscribe-email {
-    display: block;
-    padding: 14px 20px;
-    width: 100%;
-    border: none;
-    color: var(--midgrey);
-    font-size: 2rem;
-    line-height: 1em;
-    font-weight: normal;
-    letter-spacing: 0.5px;
-    user-select: text;
-    border-radius: 8px;
-    transition: border-color 0.15s linear;
+  display: block;
+  padding: 14px 20px;
+  width: 100%;
+  border: none;
+  color: var(--midgrey);
+  font-size: 2rem;
+  line-height: 1em;
+  font-weight: normal;
+  letter-spacing: 0.5px;
+  user-select: text;
+  border-radius: 8px;
+  transition: border-color 0.15s linear;
 
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 .subscribe-email:focus {
-    outline: 0;
-    border-color: color(var(--lightgrey) l(-2%));
+  outline: 0;
+  border-color: color(var(--lightgrey) l(-2%));
 }
 
 .subscribe-overlay button {
-    display: inline-block;
-    margin: 0 0 0 15px;
-    padding: 0 25px;
-    height: 52px;
-    outline: none;
-    color: #fff;
-    font-size: 1.7rem;
-    line-height: 37px;
-    font-weight: 400;
-    text-align: center;
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
-    background: linear-gradient(
+  display: inline-block;
+  margin: 0 0 0 15px;
+  padding: 0 25px;
+  height: 52px;
+  outline: none;
+  color: #fff;
+  font-size: 1.7rem;
+  line-height: 37px;
+  font-weight: 400;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  background: linear-gradient(
     color(var(--blue) whiteness(+7%)),
     color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
     color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
     color(var(--blue) lightness(-4%) saturation(-10%))
-    );
-    border-radius: 8px;
-    box-shadow: 0 0 0 1px inset rgba(0,0,0,0.14);
+  );
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14);
 
-    -webkit-font-smoothing: subpixel-antialiased;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 .subscribe-overlay button:active,
 .subscribe-overlay button:focus {
-    background: color(var(--blue) lightness(-9%) saturation(-10%));
+  background: color(var(--blue) lightness(-9%) saturation(-10%));
 }
 
 .subscribe-overlay-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
 }
 
 .subscribe-overlay-close:before {
-    content: "";
-    position: absolute;
-    top: 40px;
-    right: 25px;
-    display: block;
-    width: 30px;
-    height: 2px;
-    background: #fff;
-    opacity: 0.8;
-    transform: rotate(45deg);
+  content: "";
+  position: absolute;
+  top: 40px;
+  right: 25px;
+  display: block;
+  width: 30px;
+  height: 2px;
+  background: #fff;
+  opacity: 0.8;
+  transform: rotate(45deg);
 }
 
 .subscribe-overlay-close:after {
-    content: "";
-    position: absolute;
-    top: 40px;
-    right: 25px;
-    display: block;
-    width: 30px;
-    height: 2px;
-    background: #fff;
-    opacity: 0.8;
-    transform: rotate(-45deg);
+  content: "";
+  position: absolute;
+  top: 40px;
+  right: 25px;
+  display: block;
+  width: 30px;
+  height: 2px;
+  background: #fff;
+  opacity: 0.8;
+  transform: rotate(-45deg);
 }
 
 .subscribe-overlay-close:hover {
-    cursor: default;
+  cursor: default;
 }
 
-
 /* 11. Site Footer
 /* ---------------------------------------------------------- */
 
 .site-footer {
-    position: relative;
-    padding-top: 20px;
-    padding-bottom: 60px;
-    color: #fff;
-    background: color(black);
+  position: relative;
+  padding-top: 20px;
+  padding-bottom: 60px;
+  color: #fff;
+  background: color(black);
 }
 
 .site-footer-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    color: rgba(255,255,255,0.7);
-    font-size: 1.3rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 1.3rem;
 }
 
 .site-footer-content a {
-    color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .site-footer-content a:hover {
-    color: rgba(255,255,255,1);
-    text-decoration: none;
+  color: rgba(255, 255, 255, 1);
+  text-decoration: none;
 }
 
 .site-footer-nav {
-    display: flex;
+  display: flex;
 }
 
 .site-footer-nav a {
-    position: relative;
-    margin-left: 20px;
+  position: relative;
+  margin-left: 20px;
 }
 
 .site-footer-nav a:before {
-    content: "";
-    position: absolute;
-    top: 11px;
-    left: -11px;
-    display: block;
-    width: 2px;
-    height: 2px;
-    background: #fff;
-    border-radius: 100%;
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: -11px;
+  display: block;
+  width: 2px;
+  height: 2px;
+  background: #fff;
+  border-radius: 100%;
 }
 
 .site-footer-nav a:first-of-type:before {
-    display: none;
+  display: none;
 }
 
 @media (max-width: 650px) {
-    .site-footer-content {
-        flex-direction: column;
-    }
-    .site-footer-nav a:first-child {
-        margin-left: 0;
-    }
+  .site-footer-content {
+    flex-direction: column;
+  }
+  .site-footer-nav a:first-child {
+    margin-left: 0;
+  }
 }
diff --git a/assets/images/down.svg b/assets/images/down.svg
new file mode 100644
index 0000000..6c914d5
--- /dev/null
+++ b/assets/images/down.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
+<path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393
+	c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393
+	s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/assets/js/left-sidebar.js b/assets/js/left-sidebar.js
new file mode 100644
index 0000000..e47e6a0
--- /dev/null
+++ b/assets/js/left-sidebar.js
@@ -0,0 +1,60 @@
+var wrapper = document.getElementById("main-posts");
+var post_full = document.getElementById("post-full");
+var right_side_bar = document.getElementById("right-side-bar");
+var sidebar = document.getElementById("left-side-bar");
+var toggle = document.getElementById("burgertoggle");
+var dropNav = document.getElementById("dropdown-navbar");
+
+window.onscroll = function () {
+  document
+    .getElementById("left-side-bar")
+    .setAttribute(
+      "style",
+      "display:block;width:" +
+        document.getElementById("left-side-bar-wrapper").offsetWidth +
+        "px"
+    );
+  document.getElementById("left-side-bar").style.width =
+    document.getElementById("left-side-bar-wrapper").offsetWidth;
+  //sidebar < main
+  if (sidebar.offsetHeight < post_full.offsetHeight) {
+    //sidebar < screen - stick to top
+    if (sidebar.offsetHeight < window.innerHeight) {
+      if (
+        wrapper.getBoundingClientRect().bottom < window.innerHeight &&
+        wrapper.getBoundingClientRect().bottom < sidebar.offsetHeight
+      ) {
+        wrapper.classList.remove("fix-top");
+        wrapper.classList.add("flex-bottom");
+        toggle.setAttribute("id", "burgertoggle");
+      } else if (wrapper.getBoundingClientRect().top < 0) {
+        wrapper.classList.add("fix-top");
+        wrapper.classList.remove("flex-bottom");
+        toggle.setAttribute("id", "burgertoggle-scroll");
+      } else {
+        wrapper.classList.remove("fix-top");
+        wrapper.classList.remove("flex-bottom");
+        toggle.setAttribute("id", "burgertoggle");
+      }
+    }
+    //wrapper taller than sidebar - stick to bottom
+    else if (sidebar.offsetHeight < wrapper.offsetHeight) {
+      if (wrapper.getBoundingClientRect().bottom < window.innerHeight) {
+        wrapper.classList.remove("fix-bottom");
+        wrapper.classList.add("flex-bottom");
+        toggle.setAttribute("id", "burgertoggle");
+      } else if (
+        wrapper.getBoundingClientRect().bottom >
+        sidebar.offsetHeight + window.innerHeight
+      ) {
+        wrapper.classList.remove("fix-bottom");
+        wrapper.classList.remove("flex-bottom");
+        toggle.setAttribute("id", "burgertoggle");
+      } else {
+        wrapper.classList.add("fix-bottom");
+        wrapper.classList.remove("flex-bottom");
+        toggle.setAttribute("id", "burgertoggle-scroll");
+      }
+    }
+  }
+};
diff --git a/default.hbs b/default.hbs
index bb582ec..b577845 100644
--- a/default.hbs
+++ b/default.hbs
@@ -1,265 +1,271 @@
-<!DOCTYPE html>
 <html lang="en">
 
-<head>
-  {{!-- Document Settings --}}
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-  {{!-- Base Meta --}}
-  <title>{{meta_title}}</title>
-  <meta name="HandheldFriendly" content="True" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  {{!-- Styles'n'Scripts --}}
-  <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/tab.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/head_tab.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/complexity.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/post_page.css"}}" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  <link rel="stylesheet" type="text/css" href="{{asset "built/lightbox.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/course_page.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/search_page.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/navbar.css"}}" />
-  <style>
-    a {
-      text-decoration: none !important;
-    }
-
-    #time {
-      text-align: center;
-      font-weight: bold;
-    }
-
-    #scrollBtn {
-      display: none;
-      position: fixed;
-      bottom: 90px;
-      right: 36px;
-      z-index: 999;
-      border: none;
-      outline: none;
-      background-color: #351ed478;
-      color: white;
-      cursor: pointer;
-      padding: 15px;
-      border-radius: 50px;
-      width: 45px;
-    }
-
-    #scrollBtn:hover {
-      background-color: #351ed4;
-    }
-
-    @media (max-width: 480px) {
-      #scrollBtn {
-        right: 18px;
-        bottom: 80px;
-        transform: scale(0.9);
-      }
-    }
-  </style>
-
-  {{!-- This tag outputs SEO meta+structured data and other important settings --}}
-  {{ghost_head}}
-
-</head>
-<div id="nav_toggle" class="navbar_collapse navigation_page">
-  <div id="navbar_close">&times</div>
-  <a href="http://iq.opengenus.org">Home</a>
-  <a href="http://discourse.opengenus.org">Discussions</a>
-  <a href="http://iq.opengenus.org/guide-to-writing-a-note-at-opengenus-iq/">Write at Opengenus IQ</a>
-</div>
-
-<body class="{{body_class}}">
-
-  <div id="search_page" class="search_page search_page_hide">
-    <div class="search_page_close search_toggle">&times</div>
-    <div class="search_page_body">
-      <div id="site-search" style="display:none;" class="search_form">
-        <input class="typeahead search_form_input" type="text" placeholder="Search" />
-      </div>
-
-
-    </div>
-
-
+  <head>
+    {{! Document Settings }}
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    {{! Base Meta }}
+    <title>{{meta_title}}</title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    {{! Styles'n'Scripts }}
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'built/screen.css'}}"
+    />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/screen.css'}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/tab.css'}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/prism.css'}}" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/head_tab.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/complexity.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/post_page.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'built/lightbox.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/course_page.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/search_page.css'}}"
+    />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/navbar.css'}}" />
+    <style>
+      a { text-decoration: none !important; } #time { text-align: center;
+      font-weight: bold; } #scrollBtn { display: none; position: fixed; bottom:
+      90px; right: 36px; z-index: 999; border: none; outline: none;
+      background-color: #351ed478; color: white; cursor: pointer; padding: 15px;
+      border-radius: 50px; width: 45px; } #scrollBtn:hover { background-color:
+      #351ed4; } @media (max-width: 480px) { #scrollBtn { right: 18px; bottom:
+      80px; transform: scale(0.9); } }
+    </style>
+
+    {{! This tag outputs SEO meta+structured data and other important settings }}
+    {{ghost_head}}
+
+  </head>
+  <div id="nav_toggle" class="navbar_collapse navigation_page">
+    <div id="navbar_close">&times</div>
+    <a href="http://iq.opengenus.org">Home</a>
+    <a href="http://discourse.opengenus.org">Discussions</a>
+    <a
+      href="http://iq.opengenus.org/guide-to-writing-a-note-at-opengenus-iq/"
+    >Write at Opengenus IQ</a>
   </div>
-  <div class="site-wrapper">
-
-
-
-    {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
-    {{{body}}}
 
+  <body class="{{body_class}}">
+
+    <div id="search_page" class="search_page search_page_hide">
+      <div class="search_page_close search_toggle">&times</div>
+      <div class="search_page_body">
+        <div id="site-search" style="display:none;" class="search_form">
+          <input
+            class="typeahead search_form_input"
+            type="text"
+            placeholder="Search"
+          />
+        </div>
 
+      </div>
 
-    {{!-- Chat button--}}
-    <div id="Forum_Button">
-      <button id="Discourse_button" class="Discourse_button">
-        <i class="fa fa-comments fa-3x"></i>
-      </button>
     </div>
+    <div class="site-wrapper">
 
-    <div id="Discourse_Forum" class="Discourse_Forum">
-      <!--promote the user to discourse forum -->
-      <div class="Discourse_Popup_Container">
-        <span id="Discourse_close" class="Discourse_close">&times;</span>
-        <div id="Discourse_Popup_icon" class="Discourse_Popup_icon">
-          <img src="{{asset "images/Join_community.png"}}" class="community_icon">
-        </div>
-        <div class="Discourse_Popup_Content">
-
-          <p>Visit our discussion forum to ask any question and join our community</p>
+      {{! All the main content gets inserted here, index.hbs, post.hbs, etc }}
+      {{{body}}}
 
-          <a target="_blank" class="discourse_link" href="https://discourse.opengenus.org/">View Forum</a>
-        </div>
+      {{! Chat button}}
+      <div id="Forum_Button">
+        <button id="Discourse_button" class="Discourse_button">
+          <i class="fa fa-comments fa-3x"></i>
+        </button>
       </div>
-    </div>
-    {{!-- Chat button--}}
 
-    {{!-- The footer at the very bottom of the screen --}}
-    <footer class="site-footer outer">
-      <div class="site-footer-content inner">
-        <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}} All rights
-          reserved ™ </section>
-        <nav class="site-footer-nav">
-          <a href="{{@blog.url}}">Top Posts</a>
-          {{#if @blog.facebook}}<a href="{{facebook_url @blog.facebook}}" target="_blank"
-            rel="noopener">Facebook</a>{{/if}}
-          {{#if @blog.twitter}}<a href="{{twitter_url @blog.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
-        </nav>
+      <div id="Discourse_Forum" class="Discourse_Forum">
+        <!--promote the user to discourse forum -->
+        <div class="Discourse_Popup_Container">
+          <span id="Discourse_close" class="Discourse_close">&times;</span>
+          <div id="Discourse_Popup_icon" class="Discourse_Popup_icon">
+            <img
+              src="{{asset 'images/Join_community.png'}}"
+              class="community_icon"
+            />
+          </div>
+          <div class="Discourse_Popup_Content">
+
+            <p>Visit our discussion forum to ask any question and join our
+              community</p>
+
+            <a
+              target="_blank"
+              class="discourse_link"
+              href="https://discourse.opengenus.org/"
+            >View Forum</a>
+          </div>
+        </div>
       </div>
-    </footer>
-
-  </div>
+      {{! Chat button}}
+
+      {{! The footer at the very bottom of the screen }}
+      <footer class="site-footer outer">
+        <div class="site-footer-content inner">
+          <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a>
+            &copy;
+            {{date format="YYYY"}}
+            All rights reserved ™
+          </section>
+          <nav class="site-footer-nav">
+            <a href="{{@blog.url}}">Top Posts</a>
+            {{#if @blog.facebook}}<a
+                href="{{facebook_url @blog.facebook}}"
+                target="_blank"
+                rel="noopener"
+              >Facebook</a>{{/if}}
+            {{#if @blog.twitter}}<a
+                href="{{twitter_url @blog.twitter}}"
+                target="_blank"
+                rel="noopener"
+              >Twitter</a>{{/if}}
+          </nav>
+        </div>
+      </footer>
 
-  {{!-- The big email subscribe modal content --}}
-  {{#if @labs.subscribers}}
-  <div id="subscribe" class="subscribe-overlay">
-    <a class="subscribe-overlay-close" href="#"></a>
-    <div class="subscribe-overlay-content">
-      {{#if @blog.logo}}
-      <img class="subscribe-overlay-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" />
-      {{/if}}
-      <h1 class="subscribe-overlay-title">Join the mailbox of Knowledge <br> OpenGenus IQ</h1>
-      <p class="subscribe-overlay-description">Get your daily dose of knowledge delivered straight to your inbox</p>
-      {{subscribe_form placeholder="youremail@example.com"}}
     </div>
-  </div>
-  {{/if}}
 
-  {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js"
-    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
+    {{! The big email subscribe modal content }}
+    {{#if @labs.subscribers}}
+      <div id="subscribe" class="subscribe-overlay">
+        <a class="subscribe-overlay-close" href="#"></a>
+        <div class="subscribe-overlay-content">
+          {{#if @blog.logo}}
+            <img
+              class="subscribe-overlay-logo"
+              src="{{@blog.logo}}"
+              alt="{{@blog.title}}"
+            />
+          {{/if}}
+          <h1 class="subscribe-overlay-title">Join the mailbox of Knowledge
+            <br />
+            OpenGenus IQ</h1>
+          <p class="subscribe-overlay-description">Get your daily dose of
+            knowledge delivered straight to your inbox</p>
+          {{subscribe_form placeholder="youremail@example.com"}}
+        </div>
+      </div>
+    {{/if}}
+
+    {{! jQuery + Fitvids, which makes all video embeds responsive }}
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.min.js"
+      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+      crossorigin="anonymous"
+    >
     </script>
+    <script
+      type="text/javascript"
+      src="{{asset 'js/left-sidebar.js'}}"
+    ></script>
+    <script type="text/javascript" src="{{asset 'js/chatbox.js'}}"></script>
+    <script
+      type="text/javascript"
+      src="{{asset 'js/jquery.fitvids.js'}}"
+    ></script>
+    <script type="text/javascript" src="{{asset 'js/tab.js'}}"></script>
+    <script type="text/javascript" src="{{asset 'js/prism.js'}}"></script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"
+    ></script>
+    <script>
+
+      // ===== Scroll to Top ==== $(window).scroll(function() { if
+      ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
+      $('#scrollBtn').fadeIn(500); // Fade in the arrow } else {
+      $('#scrollBtn').fadeOut(500); // Else fade out the arrow } });
+      $('#scrollBtn').click(function() { // When arrow is clicked
+      $('body,html').animate({ scrollTop : 0 // Scroll to top of body }, 500);
+      });
 
-  <script type="text/javascript" src="{{asset "js/chatbox.js"}}"></script>
-  <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
-  <script type="text/javascript" src="{{asset "js/tab.js"}}"></script>
-  <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
-  <script type="text/javascript"
-    src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
-  <script>
-  
-// ===== Scroll to Top ====
- $(window).scroll(function() {
-    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
-        $('#scrollBtn').fadeIn(500);    // Fade in the arrow
-    } else {
-        $('#scrollBtn').fadeOut(500);   // Else fade out the arrow
-    }
-});
-$('#scrollBtn').click(function() {      // When arrow is clicked
-    $('body,html').animate({
-        scrollTop : 0                       // Scroll to top of body
-    }, 500);
-});
-
-  </script>
-
-  {{#if pagination.pages}}
-  <script>
-    var maxPages = parseInt('{{pagination.pages}}');
-
-
-
-  </script>
-  <script src="{{asset "js/infinitescroll.js"}}"></script>
-
-
-
-  {{/if}}
-
-  {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
-  {{{block "scripts"}}}
-  <script>
-    //Wait for other things to be loaded so the site doesn't wait on the search
-    $(document).ready(function () {
-      //Go grab all the posts on the blog, but only the slug and title fields
-      //That helps limit the amount of data sent and stored locally
-      $.get(ghost.url.api('posts', { limit: "all", fields: "slug,title,feature_image,meta_description" })).done(function (data) {
-        //add all the data returned to a variable
-        var searchData = data.posts;
+    </script>
 
-        //New bloodhound to make it searchable
-        var search = new Bloodhound({
-          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
-          queryTokenizer: Bloodhound.tokenizers.whitespace,
-          local: searchData
-        });
-        $(document).click(function () {
-          $("#toggle").toggle("slide");
-        });
-        //Build the typeahead
-        $('#site-search .typeahead').typeahead(null, {
-          name: 'search',
-          display: 'title',
-          //source is the bloodhound variable
-          source: search,
-          templates: {
-            //display no result image if no result is found
-            empty: [
-              '<div class="search_noresult_image"><img src="{{asset "images/search-empty.svg"}}"><p>No results found</p></div>'
-            ].join('\n'),
-            suggestion: function (data) {
-              if (data.meta_description == null) {
-                data.meta_description = "No description provided";
-              }
-              if (data.feature_image == null) {
-                data.feature_image = "{{asset "images / search - image.jpg"}}";
-              }
-              var post_url = window.location.protocol + '%2F%2F' + window.location.host + "%2F" + data.slug;
-              var parsed_post_url = decodeURIComponent(post_url);
-              //check is description and image are avaialable
-              return '<div class="search_page_results"><a href="' + parsed_post_url + '" class="search_item_image"><img src="' + data.feature_image + '"></a><div class="search_item_text"><a href="' + parsed_post_url + '"class="search_item_title">' + data.title + '</a><div class="search_item_description">' + data.meta_description + '</div></div> </div>';
-            }
-          }
-        });
-        //display and close navbar window and search window
-        $('#navbar_close').bind('click', function () {
-          $('#nav_toggle').toggleClass('navigation_page_open');
-        });
-        $('#burgertoggle').bind('click', function () {
-          $('#nav_toggle').toggleClass('navigation_page_open');
-        });
-        $('.search_toggle').bind('click', function () {
-          $('#search_page').toggleClass('search_page_hide');
-        });
-        //Now show the search bar since getting data was successful
-        $('#site-search').show();
-      }).fail(function () {
-        //If the get request errors out, put an error in the console
-        console.log("Error getting Ghost API Data");
-      });
-    });
-  </script>
-  {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
-  {{ghost_foot}}
+    {{#if pagination.pages}}
+      <script>
+        var maxPages = parseInt('{{pagination.pages}}');
+
+      </script>
+      <script src="{{asset 'js/infinitescroll.js'}}"></script>
+
+    {{/if}}
+
+    {{! The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. }}
+    {{{block "scripts"}}}
+    <script>
+      //Wait for other things to be loaded so the site doesn't wait on the
+      search $(document).ready(function () { //Go grab all the posts on the
+      blog, but only the slug and title fields //That helps limit the amount of
+      data sent and stored locally $.get(ghost.url.api('posts', { limit: "all",
+      fields: "slug,title,feature_image,meta_description" })).done(function
+      (data) { //add all the data returned to a variable var searchData =
+      data.posts; //New bloodhound to make it searchable var search = new
+      Bloodhound({ datumTokenizer:
+      Bloodhound.tokenizers.obj.whitespace('title'), queryTokenizer:
+      Bloodhound.tokenizers.whitespace, local: searchData });
+      $(document).click(function () { $("#toggle").toggle("slide"); }); //Build
+      the typeahead $('#site-search .typeahead').typeahead(null, { name:
+      'search', display: 'title', //source is the bloodhound variable source:
+      search, templates: { //display no result image if no result is found
+      empty: [ '<div class="search_noresult_image"><img src="{{asset
+        "images/search-empty.svg"
+      }}"><p>No results found</p></div>' ].join('\n'), suggestion: function
+      (data) { if (data.meta_description == null) { data.meta_description = "No
+      description provided"; } if (data.feature_image == null) {
+      data.feature_image = "{{asset "images / search - image.jpg"}}"; } var
+      post_url = window.location.protocol + '%2F%2F' + window.location.host +
+      "%2F" + data.slug; var parsed_post_url = decodeURIComponent(post_url);
+      //check is description and image are avaialable return '<div
+      class="search_page_results"><a href="' + parsed_post_url + '"
+      class="search_item_image"><img src="' + data.feature_image + '"></a><div
+      class="search_item_text"><a href="' + parsed_post_url +
+      '"class="search_item_title">' + data.title + '</a><div
+      class="search_item_description">' + data.meta_description + '</div></div>
+      </div>'; } } }); //display and close navbar window and search window
+      $('#navbar_close').bind('click', function () {
+      $('#nav_toggle').toggleClass('navigation_page_open'); });
+      $('#burgertoggle').bind('click', function () {
+      $('#nav_toggle').toggleClass('navigation_page_open'); });
+      $('.search_toggle').bind('click', function () {
+      $('#search_page').toggleClass('search_page_hide'); }); //Now show the
+      search bar since getting data was successful $('#site-search').show();
+      }).fail(function () { //If the get request errors out, put an error in the
+      console console.log("Error getting Ghost API Data"); }); });
+    </script>
+    {{! Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag }}
+    {{ghost_foot}}
 
-</body>
+  </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/default_map.hbs b/default_map.hbs
index 0834850..1426678 100644
--- a/default_map.hbs
+++ b/default_map.hbs
@@ -1,90 +1,98 @@
-<!DOCTYPE html>
 <html>
 
-<head>
-  {{!-- Document Settings --}}
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-  {{!-- Base Meta --}}
-  <title>{{meta_title}}</title>
-  <meta name="HandheldFriendly" content="True" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  {{!-- Styles'n'Scripts --}}
-  <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/tab.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/head_tab.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/complexity.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/post_page.css"}}" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  <link rel="stylesheet" type="text/css" href="{{asset "built/lightbox.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/course_page.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/search_page.css"}}" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/navbar.css"}}" />
-  <style>
-    a {
-      text-decoration: none !important;
-    }
-
-    #time {
-      text-align: center;
-      font-weight: bold;
-    }
-
-    #scrollBtn {
-      display: none;
-      position: fixed;
-      bottom: 90px;
-      right: 36px;
-      z-index: 999;
-      border: none;
-      outline: none;
-      background-color: yellow;
-      color: white;
-      cursor: pointer;
-      padding: 15px;
-      border-radius: 50px;
-      width: 45px;
-    }
-
-    #scrollBtn:hover {
-      background-color: #555;
-    }
-
-    @media (max-width: 400px) {
-      #scrollBtn {
-        right: 18px;
-        bottom: 80px;
-      }
-    }
-  </style>
-
-  {{!-- This tag outputs SEO meta+structured data and other important settings --}}
-  {{ghost_head}}
-
-</head>
-<div id="nav_toggle" class="navbar_collapse navigation_page">
-  <div id="navbar_close">&times</div>
-  <a href="http://iq.opengenus.org">Home</a>
-  <a href="http://discourse.opengenus.org">Discussions</a>
-  <a href="http://iq.opengenus.org/guide-to-writing-a-note-at-opengenus-iq/">Write at Opengenus IQ</a>
-</div>
-
-<body class="{{body_class}}">
+  <head>
+    {{! Document Settings }}
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    {{! Base Meta }}
+    <title>{{meta_title}}</title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    {{! Styles'n'Scripts }}
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'built/screen.css'}}"
+    />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/screen.css'}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/tab.css'}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/prism.css'}}" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/head_tab.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/complexity.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/post_page.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'built/lightbox.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/course_page.css'}}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{asset 'css/search_page.css'}}"
+    />
+    <link rel="stylesheet" type="text/css" href="{{asset 'css/navbar.css'}}" />
+    <style>
+      a { text-decoration: none !important; } #time { text-align: center;
+      font-weight: bold; } #scrollBtn { display: none; position: fixed; bottom:
+      90px; right: 36px; z-index: 999; border: none; outline: none;
+      background-color: yellow; color: white; cursor: pointer; padding: 15px;
+      border-radius: 50px; width: 45px; } #scrollBtn:hover { background-color:
+      #555; } @media (max-width: 400px) { #scrollBtn { right: 18px; bottom:
+      80px; } }
+    </style>
+
+    {{! This tag outputs SEO meta+structured data and other important settings }}
+    {{ghost_head}}
+
+  </head>
+  <div id="nav_toggle" class="navbar_collapse navigation_page">
+    <div id="navbar_close">&times</div>
+    <a href="http://iq.opengenus.org">Home</a>
+    <a href="http://discourse.opengenus.org">Discussions</a>
+    <a
+      href="http://iq.opengenus.org/guide-to-writing-a-note-at-opengenus-iq/"
+    >Write at Opengenus IQ</a>
+  </div>
 
-  <div id="search_page" class="search_page search_page_hide">
-    <div class="search_page_close search_toggle">&times</div>
-    <div class="search_page_body">
-      <div id="site-search" style="display:none;" class="search_form">
-        <input class="typeahead search_form_input" type="text" placeholder="Search" />
-        <!--        <div class="search_noresult_image"><img src="{{asset "images/search-empty.svg"}}">
+  <body class="{{body_class}}">
+
+    <div id="search_page" class="search_page search_page_hide">
+      <div class="search_page_close search_toggle">&times</div>
+      <div class="search_page_body">
+        <div id="site-search" style="display:none;" class="search_form">
+          <input
+            class="typeahead search_form_input"
+            type="text"
+            placeholder="Search"
+          />
+          <!--        <div class="search_noresult_image"><img src="{{asset "images/search-empty.svg"}}">
                <p>No results found</p>
              </div>-->
 
-        <!--  <div class="search_page_results">
+          <!--  <div class="search_page_results">
 
                     <div href="https://www.google.com" class="search_item_image" style="cursor:pointer;"><img src="{{asset "images/search-image.jpg"}}"></div>
                     <div class="search_item_text">
@@ -92,171 +100,163 @@
                       <div class="search_item_description">Add Search to Ghost using Twitter Typeahead.js</div>
                   </div>
                 </div>-->
-      </div>
-
-
-    </div>
-
-
-  </div>
-  <div class="site-wrapper">
-
-
-
-    {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
-    {{{body}}}
-
+        </div>
 
+      </div>
 
-    {{!-- Chat button--}}
-    <div id="Forum_Button">
-      <button id="Discourse_button" class="Discourse_button">
-        <i class="fa fa-comments fa-3x"></i>
-      </button>
     </div>
+    <div class="site-wrapper">
 
-    <div id="Discourse_Forum" class="Discourse_Forum">
-      <!--promote the user to discourse forum -->
-      <div class="Discourse_Popup_Container">
-        <span id="Discourse_close" class="Discourse_close">&times;</span>
-        <div id="Discourse_Popup_icon" class="Discourse_Popup_icon">
-          <img src="{{asset "images/Join_community.png"}}" class="community_icon">
-        </div>
-        <div class="Discourse_Popup_Content">
+      {{! All the main content gets inserted here, index.hbs, post.hbs, etc }}
+      {{{body}}}
 
-          <p>Visit our discussion forum to ask any question and join our community</p>
+      {{! Chat button}}
+      <div id="Forum_Button">
+        <button id="Discourse_button" class="Discourse_button">
+          <i class="fa fa-comments fa-3x"></i>
+        </button>
+      </div>
 
-          <a target="_blank" class="discourse_link" href="https://discourse.opengenus.org/">View Forum</a>
+      <div id="Discourse_Forum" class="Discourse_Forum">
+        <!--promote the user to discourse forum -->
+        <div class="Discourse_Popup_Container">
+          <span id="Discourse_close" class="Discourse_close">&times;</span>
+          <div id="Discourse_Popup_icon" class="Discourse_Popup_icon">
+            <img
+              src="{{asset 'images/Join_community.png'}}"
+              class="community_icon"
+            />
+          </div>
+          <div class="Discourse_Popup_Content">
+
+            <p>Visit our discussion forum to ask any question and join our
+              community</p>
+
+            <a
+              target="_blank"
+              class="discourse_link"
+              href="https://discourse.opengenus.org/"
+            >View Forum</a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  {{!-- The big email subscribe modal content --}}
-  {{#if @labs.subscribers}}
-  <div id="subscribe" class="subscribe-overlay">
-    <a class="subscribe-overlay-close" href="#"></a>
-    <div class="subscribe-overlay-content">
-      {{#if @blog.logo}}
-      <img class="subscribe-overlay-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" />
-      {{/if}}
-      <h1 class="subscribe-overlay-title">Join the mailbox of Knowledge <br> OpenGenus IQ</h1>
-      <p class="subscribe-overlay-description">Get your daily dose of knowledge delivered straight to your inbox</p>
-      {{subscribe_form placeholder="youremail@example.com"}}
-    </div>
-  </div>
-  {{/if}}
-
-  {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js"
-    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
+    {{! The big email subscribe modal content }}
+    {{#if @labs.subscribers}}
+      <div id="subscribe" class="subscribe-overlay">
+        <a class="subscribe-overlay-close" href="#"></a>
+        <div class="subscribe-overlay-content">
+          {{#if @blog.logo}}
+            <img
+              class="subscribe-overlay-logo"
+              src="{{@blog.logo}}"
+              alt="{{@blog.title}}"
+            />
+          {{/if}}
+          <h1 class="subscribe-overlay-title">Join the mailbox of Knowledge
+            <br />
+            OpenGenus IQ</h1>
+          <p class="subscribe-overlay-description">Get your daily dose of
+            knowledge delivered straight to your inbox</p>
+          {{subscribe_form placeholder="youremail@example.com"}}
+        </div>
+      </div>
+    {{/if}}
+
+    <script
+      type="text/javascript"
+      src="{{asset 'js/left-sidebar.js'}}"
+    ></script>
+
+    {{! jQuery + Fitvids, which makes all video embeds responsive }}
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.min.js"
+      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+      crossorigin="anonymous"
+    >
     </script>
 
-  <script type="text/javascript" src="{{asset "js/chatbox.js"}}"></script>
-  <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
-  <script type="text/javascript" src="{{asset "js/tab.js"}}"></script>
-  <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
-  <script type="text/javascript"
-    src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
-  <script type="text/javascript"
-    src="//platform-api.sharethis.com/js/sharethis.js#property=5a8129cbe45fbb001342fed3&product=custom-share-buttons"></script>
-  <script>
-    document.getElementById('scrollBtn').addEventListener('click', function (event) {
-      document.body.scrollTop = 0;
-      document.documentElement.scrollTop = 0;
-      $('#scrollBtn').hide();
-    });
-
-    $(window).bind('mousewheel', function (event) {
-      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
-        document.getElementById("scrollBtn").style.display = "block";
-      } else {
-        document.getElementById("scrollBtn").style.display = "none";
-      };
-    });
-
+    <script type="text/javascript" src="{{asset 'js/chatbox.js'}}"></script>
+    <script
+      type="text/javascript"
+      src="{{asset 'js/jquery.fitvids.js'}}"
+    ></script>
+    <script type="text/javascript" src="{{asset 'js/tab.js'}}"></script>
+    <script type="text/javascript" src="{{asset 'js/prism.js'}}"></script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="//platform-api.sharethis.com/js/sharethis.js#property=5a8129cbe45fbb001342fed3&product=custom-share-buttons"
+    ></script>
+    <script>
+      document.getElementById('scrollBtn').addEventListener('click', function
+      (event) { document.body.scrollTop = 0; document.documentElement.scrollTop
+      = 0; $('#scrollBtn').hide(); }); $(window).bind('mousewheel', function
+      (event) { if (document.body.scrollTop > 80 ||
+      document.documentElement.scrollTop > 80) {
+      document.getElementById("scrollBtn").style.display = "block"; } else {
+      document.getElementById("scrollBtn").style.display = "none"; }; });
 
-  </script>
-
-  {{#if pagination.pages}}
-  <script>
-    var maxPages = parseInt('{{pagination.pages}}');
-
-
-
-  </script>
-  <script src="{{asset "js/infinitescroll.js"}}"></script>
-
-
-
-  {{/if}}
-
-  {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
-  {{{block "scripts"}}}
-  <script>
-    //Wait for other things to be loaded so the site doesn't wait on the search
-    $(document).ready(function () {
-      //Go grab all the posts on the blog, but only the slug and title fields
-      //That helps limit the amount of data sent and stored locally
-      $.get(ghost.url.api('posts', { limit: "all", fields: "slug,title,feature_image,meta_description" })).done(function (data) {
-        //add all the data returned to a variable
-        var searchData = data.posts;
+    </script>
 
-        //New bloodhound to make it searchable
-        var search = new Bloodhound({
-          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
-          queryTokenizer: Bloodhound.tokenizers.whitespace,
-          local: searchData
-        });
-        $(document).click(function () {
-          $("#toggle").toggle("slide");
-        });
-        //Build the typeahead
-        $('#site-search .typeahead').typeahead(null, {
-          name: 'search',
-          display: 'title',
-          //source is the bloodhound variable
-          source: search,
-          templates: {
-            //display no result image if no result is found
-            empty: [
-              '<div class="search_noresult_image"><img src="{{asset "images/search-empty.svg"}}"><p>No results found</p></div>'
-            ].join('\n'),
-            suggestion: function (data) {
-              if (data.meta_description == null) {
-                data.meta_description = "No description provided";
-              }
-              if (data.feature_image == null) {
-                data.feature_image = "{{asset "images / search - image.jpg"}}";
-              }
-              var post_url = window.location.protocol + '%2F%2F' + window.location.host + "%2F" + data.slug;
-              var parsed_post_url = decodeURIComponent(post_url);
-              //check is description and image are avaialable
-              return '<div class="search_page_results"><a href="' + parsed_post_url + '" class="search_item_image"><img src="' + data.feature_image + '"></a><div class="search_item_text"><a href="' + parsed_post_url + '"class="search_item_title">' + data.title + '</a><div class="search_item_description">' + data.meta_description + '</div></div> </div>';
-            }
-          }
-        });
-        //display and close navbar window and search window
-        $('#navbar_close').bind('click', function () {
-          $('#nav_toggle').toggleClass('navigation_page_open');
-        });
-        $('#burgertoggle').bind('click', function () {
-          $('#nav_toggle').toggleClass('navigation_page_open');
-        });
-        $('.search_toggle').bind('click', function () {
-          $('#search_page').toggleClass('search_page_hide');
-        });
-        //Now show the search bar since getting data was successful
-        $('#site-search').show();
-      }).fail(function () {
-        //If the get request errors out, put an error in the console
-        console.log("Error getting Ghost API Data");
-      });
-    });
-  </script>
-  {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
-  {{ghost_foot}}
+    {{#if pagination.pages}}
+      <script>
+        var maxPages = parseInt('{{pagination.pages}}');
+
+      </script>
+      <script src="{{asset 'js/infinitescroll.js'}}"></script>
+
+    {{/if}}
+
+    {{! The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. }}
+    {{{block "scripts"}}}
+    <script>
+      //Wait for other things to be loaded so the site doesn't wait on the
+      search $(document).ready(function () { //Go grab all the posts on the
+      blog, but only the slug and title fields //That helps limit the amount of
+      data sent and stored locally $.get(ghost.url.api('posts', { limit: "all",
+      fields: "slug,title,feature_image,meta_description" })).done(function
+      (data) { //add all the data returned to a variable var searchData =
+      data.posts; //New bloodhound to make it searchable var search = new
+      Bloodhound({ datumTokenizer:
+      Bloodhound.tokenizers.obj.whitespace('title'), queryTokenizer:
+      Bloodhound.tokenizers.whitespace, local: searchData });
+      $(document).click(function () { $("#toggle").toggle("slide"); }); //Build
+      the typeahead $('#site-search .typeahead').typeahead(null, { name:
+      'search', display: 'title', //source is the bloodhound variable source:
+      search, templates: { //display no result image if no result is found
+      empty: [ '<div class="search_noresult_image"><img src="{{asset
+        "images/search-empty.svg"
+      }}"><p>No results found</p></div>' ].join('\n'), suggestion: function
+      (data) { if (data.meta_description == null) { data.meta_description = "No
+      description provided"; } if (data.feature_image == null) {
+      data.feature_image = "{{asset "images / search - image.jpg"}}"; } var
+      post_url = window.location.protocol + '%2F%2F' + window.location.host +
+      "%2F" + data.slug; var parsed_post_url = decodeURIComponent(post_url);
+      //check is description and image are avaialable return '<div
+      class="search_page_results"><a href="' + parsed_post_url + '"
+      class="search_item_image"><img src="' + data.feature_image + '"></a><div
+      class="search_item_text"><a href="' + parsed_post_url +
+      '"class="search_item_title">' + data.title + '</a><div
+      class="search_item_description">' + data.meta_description + '</div></div>
+      </div>'; } } }); //display and close navbar window and search window
+      $('#navbar_close').bind('click', function () {
+      $('#nav_toggle').toggleClass('navigation_page_open'); });
+      $('#burgertoggle').bind('click', function () {
+      $('#nav_toggle').toggleClass('navigation_page_open'); });
+      $('.search_toggle').bind('click', function () {
+      $('#search_page').toggleClass('search_page_hide'); }); //Now show the
+      search bar since getting data was successful $('#site-search').show();
+      }).fail(function () { //If the get request errors out, put an error in the
+      console console.log("Error getting Ghost API Data"); }); });
+    </script>
+    {{! Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag }}
+    {{ghost_foot}}
 
-</body>
+  </body>
 
 </html>
\ No newline at end of file
diff --git a/index.hbs b/index.hbs
index eaee689..254dfb9 100644
--- a/index.hbs
+++ b/index.hbs
@@ -3,7 +3,6 @@
 into the {body} of the default.hbs template --}}
 
 {{!-- The big featured header, it uses blog cover image as a BG if available --}}
-
 <header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
     <div class="inner">
 
@@ -33,8 +32,7 @@ into the {body} of the default.hbs template --}}
 
 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer" role="main">
-    <div class="inner">
-
+    <div class="inner"
         <div class="post-feed">
             {{#foreach posts}}
 
diff --git a/page.hbs b/page.hbs
index fd16851..02f1c55 100644
--- a/page.hbs
+++ b/page.hbs
@@ -55,6 +55,9 @@ into the {body} of the default.hbs template --}}
 
 {{/post}}
 
+
+<script type="text/javascript" src="{{asset "js/left-sidebar.js"}}"></script>
+
 {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}
 <script>
diff --git a/partials/left-side-bar-common.hbs b/partials/left-side-bar-common.hbs
new file mode 100644
index 0000000..3305dda
--- /dev/null
+++ b/partials/left-side-bar-common.hbs
@@ -0,0 +1,44 @@
+<aside id="left-side-bar-inner" class="left-side-bar-inner">
+  <div class="tag-title">
+    <span class="side-bar-tag-name">
+      Other posts
+    </span>
+  </div>
+  <div class="left-side-bar-links">
+    <ul>
+      <li class="left-side-bar-link"><a href="#1">passwd command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux security administration
+          tasks.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux directories, pwd, ls,
+          cd, mkdir, rmdir, cp, mv.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux threads:
+          synchronization.</a></li>
+      <li class="left-side-bar-link"><a href="#1">patch command in Linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li>
+      <li class="left-side-bar-link"><a href="#1">passwd command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li>
+      <li class="left-side-bar-link"><a href="#1">passwd command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux security administration
+          tasks.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux directories, pwd, ls,
+          cd, mkdir, rmdir, cp, mv.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux threads:
+          synchronization.</a></li>
+      <li class="left-side-bar-link"><a href="#1">patch command in Linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li><li><a class="left-side-bar-link" href="#1">passwd
+          command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux security administration
+          tasks.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux directories, pwd, ls,
+          cd, mkdir, rmdir, cp, mv.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux threads:
+          synchronization.</a></li>
+      <li class="left-side-bar-link"><a href="#1">patch command in Linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li>
+    </ul>
+  </div>
+</aside>
\ No newline at end of file
diff --git a/partials/left-side-bar-top.hbs b/partials/left-side-bar-top.hbs
new file mode 100644
index 0000000..c8b2ab8
--- /dev/null
+++ b/partials/left-side-bar-top.hbs
@@ -0,0 +1,48 @@
+<aside id="left-side-bar-inner" class="left-side-bar-inner top-left">
+  <div class="tag-title">
+    <span class="side-bar-tag-name">
+      Interesting posts
+    </span>
+  </div>
+  {{!-- <input type="checkbox" id="show-all" />
+  <label for="show-all" class="show-links">Show More</label>
+  <label for="show-all" class="hide-links">Hide</label> --}}
+  <div class="top-side-bar-links">
+    <ul>
+      <li class="left-side-bar-link"><a href="#1">passwd command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux security administration
+          tasks.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux directories, pwd, ls,
+          cd, mkdir, rmdir, cp, mv.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux threads:
+          synchronization.</a></li>
+      <li class="left-side-bar-link"><a href="#1">patch command in Linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li>
+      <li class="left-side-bar-link"><a href="#1">passwd command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li>
+      <li class="left-side-bar-link"><a href="#1">passwd command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux security administration
+          tasks.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux directories, pwd, ls,
+          cd, mkdir, rmdir, cp, mv.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux threads:
+          synchronization.</a></li>
+      <li class="left-side-bar-link"><a href="#1">patch command in Linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li><li><a class="left-side-bar-link" href="#1">passwd
+          command in linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux security administration
+          tasks.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux directories, pwd, ls,
+          cd, mkdir, rmdir, cp, mv.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Linux threads:
+          synchronization.</a></li>
+      <li class="left-side-bar-link"><a href="#1">patch command in Linux.</a></li>
+      <li class="left-side-bar-link"><a href="#1">Encryption and decryption with
+          gpg.</a></li>
+    </ul>
+    </ul>
+  </div>
+</aside>
\ No newline at end of file
diff --git a/partials/left-side-bar.hbs b/partials/left-side-bar.hbs
new file mode 100644
index 0000000..8fb638b
--- /dev/null
+++ b/partials/left-side-bar.hbs
@@ -0,0 +1,24 @@
+<aside id="left-side-bar-inner" class="left-side-bar-inner">
+  {{#if tags}}
+    <div class="tag-title">
+      <span class="side-bar-tag-name">
+        {{primary_tag.name}}
+        tutorial
+      </span>
+    </div>
+  {{/if}}
+  <div class="left-side-bar-links">
+    <ul>
+      {{#foreach tags}}
+        {{#get "posts" filter="primary_tag:{{slug}}"}}
+          {{#foreach posts limit="50"}}
+            <li class="left-side-bar-link"><a
+                target="_blank"
+                href="{{url}}"
+              >{{title}}</a></li>
+          {{/foreach}}
+        {{/get}}
+      {{/foreach}}
+    </ul>
+  </div>
+</aside>
\ No newline at end of file
diff --git a/partials/right-side-bar.hbs b/partials/right-side-bar.hbs
new file mode 100644
index 0000000..9c12afa
--- /dev/null
+++ b/partials/right-side-bar.hbs
@@ -0,0 +1,77 @@
+<aside class="right-side-bar-inner">
+  <article class="right-side-bar-article">
+    <div class="right-side-bar-article-header">
+      Linux
+    </div>
+    <div class="right-side-bar-article-content-wrapper">
+      <ul class="right-side-bar-article-content">
+        <li><a href="#1">passwd command in linux.</a></li>
+        <li><a href="#1">Linux security administration tasks.</a></li>
+        <li><a href="#1">Linux directories, pwd, ls, cd, mkdir, rmdir, cp, mv.</a></li>
+        <li><a href="#1">Linux threads: synchronization.</a></li>
+        <li><a href="#1">patch command in Linux.</a></li>
+        <li><a href="#1">Encryption and decryption with gpg.</a></li>
+      </ul>
+    </div>
+  </article>
+  <article class="right-side-bar-article">
+    <div class="right-side-bar-article-header">
+      Data structures
+    </div>
+    <div class="right-side-bar-article-content-wrapper">
+      <ul class="right-side-bar-article-content">
+        <li><a href="#1">Circular doubly linked list.</a></li>
+        <li><a href="#1">Introduction to tree data structure.</a></li>
+        <li><a href="#1">Array data structure.</a></li>
+        <li><a href="#1">Li chao segment tree.</a></li>
+        <li><a href="#1">Persistent trie.</a></li>
+        <li><a href="#1">All Os one data structure.</a></li>
+        <li><a href="#1">Trie data structure in Rust.</a></li>
+      </ul>
+    </div>
+  </article>
+  <article class="right-side-bar-article">
+    <div class="right-side-bar-article-header">
+      Algorithms
+    </div>
+    <div class="right-side-bar-article-content-wrapper">
+      <ul class="right-side-bar-article-content">
+        <li><a href="#1">Branch and bound technique.</a></li>
+        <li><a href="#1">Check if a line intersects a circle.</a></li>
+        <li><a href="#1">Fractional knapsack problem.</a></li>
+        <li><a href="#1">Maximum size square submatrix with all 1s.</a></li>
+        <li><a href="#1">Find cube root using binary search.</a></li>
+        <li><a href="#1">De brujin sequences.</a></li>
+      </ul>
+    </div>
+  </article>
+  <article class="right-side-bar-article">
+    <div class="right-side-bar-article-header">
+      Dynamic programming
+    </div>
+    <div class="right-side-bar-article-content-wrapper">
+      <ul class="right-side-bar-article-content">
+        <li><a href="#1">Dynamic programming on trees.</a></li>
+        <li><a href="#1">List of 100+ dynamic programming problems.</a></li>
+        <li><a href="#1">Longest palindromic sequence(using dynamic programming)</a></li>
+        <li><a href="#1">Coin change problem.</a></li>
+        <li><a href="#1">Shortest common SuperSequence.</a></li>
+      </ul>
+    </div>
+  </article>
+  <article class="right-side-bar-article">
+    <div class="right-side-bar-article-header">
+      Machine Learning
+    </div>
+    <div class="right-side-bar-article-content-wrapper">
+      <ul class="right-side-bar-article-content">
+        <li><a href="#1">Mathematics for Data Science.</a></li>
+        <li><a href="#1">One hot encoding in TensorFlow</a></li>
+        <li><a href="#1">Initializing Tensors in TensorFlow.</a></li>
+        <li><a href="#1">Interview questions in Data Science.</a></li>
+        <li><a href="#1">MatMul in TensorFlow.</a></li>
+        <li><a href="#1">Pointwise Convolution.</a></li>
+      </ul>
+    </div>
+  </article>
+</aside>
\ No newline at end of file
diff --git a/partials/site-nav.hbs b/partials/site-nav.hbs
index 180752e..b0442d6 100644
--- a/partials/site-nav.hbs
+++ b/partials/site-nav.hbs
@@ -1,26 +1,17 @@
-<nav class="navbar">
-  <div class="burger_menu">
-    <label for="burgertoggle" >&#9776;</label>
-    <input type="checkbox" id="burgertoggle"/>
-
-  </div>
-
-
-
-
- <div class="navbar-left">
-        {{#if @blog.navigation}}
-            {{navigation}}
-        {{/if}}
-
+<div class="navigation">
+  <nav class="navbar">
+    <div class="navbar-left">
+      {{#if @blog.navigation}}
+        {{navigation}}
+      {{/if}}
     </div>
 
     <div class="navbar-right">
       <!--  <div class="social-links"> -->
-          <a class="search_button">
-            <i class="fa fa-search search_toggle" style="cursor:pointer;"></i>
-          </a>
-        <!--    {{#if @blog.facebook}}
+      <a class="search_button">
+        <i class="fa fa-search search_toggle" style="cursor:pointer;"></i>
+      </a>
+      <!--    {{#if @blog.facebook}}
                 <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
             {{/if}}
             {{#if @blog.twitter}}
@@ -33,5 +24,164 @@
             <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
       <!--  {{/if}} -->
     </div>
+  </nav>
 
-</nav>
+  <div class="wrapper">
+    <input type="checkbox" id="burgertoggle" />
+    <span class="bars">
+      <span class="bar" id="bar"></span>
+      <span class="bar"></span>
+      <span class="bar" id="bar"></span>
+    </span>
+    <div id="dropdown-navbar" class="dropdown-navbar">
+      <ul>
+        <li class="nav-link">
+          <input type="checkbox" id="sub-menu-1" />
+          <a href="#!">Interview
+            <span class="arrow-sm"> &#x2192;</span>
+            <span class="arrow-lg">&#8595;</span></a>
+          <ul class="dropdown">
+            <label class="menu-label" for="sub-menu-1">
+              <span class="dropdown-title-arrow">&#x2190;</span>
+              A collection of interview questions on different computer science
+              topics</label>
+            <div class="nav-links">
+              <li><a href="#!" target="_blank">50 Array questions First link</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+              <li><a href="#!" target="_blank">50 Array questions</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+              <li><a href="#!" target="_blank">50 Array questions</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+              <li><a href="#!" target="_blank">50 Array questions</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+              <li><a href="#!" target="_blank">50 Array questions</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+              <li><a href="#!" target="_blank">50 Array questions</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+              <li><a href="#!" target="_blank">50 Array questions</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+              <li><a href="#!" target="_blank">50 Array questions</a></li>
+              <li><a href="#!" target="_blank">50 blockchain questions</a></li>
+              <li><a href="#!" target="_blank">50 algorithms questions</a></li>
+              <li><a href="#!" target="_blank">50 machine learning questions</a></li>
+              <li><a href="#!" target="_blank">50 data science questions</a></li>
+            </div>
+          </ul>
+        </li>
+        <li class="nav-link">
+          <input type="checkbox" id="sub-menu-2" />
+          <a href="#!">Algorithms
+            <span class="arrow-sm"> &#x2192; </span>
+            <span class="arrow-lg">&#8595;</span></a>
+          <ul class="dropdown">
+            <label class="menu-label" for="sub-menu-2">
+              <span class="dropdown-title-arrow">&#x2190;</span>
+              Tutorials to help you master different Algorithmic domains</label>
+            <div class="nav-links">
+              <li><a href="#!" target="_blank">Greedy algorithms Dynamic
+                  programmingDynamic First Link programmingDynamic
+                  programmingDynamic programmingDynamic programmingDynamic
+                  programmingDynamic programming</a></li>
+              <li><a href="#!" target="_blank">Dynamic programming</a></li>
+              <li><a href="#!" target="_blank">Trees</a></li>
+              <li><a href="#!" target="_blank">Stack</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Back tracking</a></li>
+              <li><a href="#!" target="_blank">Greedy algorithms Dynamic
+                  programmingDynamic programmingDynamic programmingDynamic
+                  programmingDynamic programmingDynamic programmingDynamic
+                  programming</a></li>
+              <li><a href="#!" target="_blank">Tree Algorithms</a></li>
+              <li><a href="#!" target="_blank">Divide and Conquer</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Tree Algorithms</a></li>
+              <li><a href="#!" target="_blank">Divide and Conquer</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Tree Algorithms</a></li>
+              <li><a href="#!" target="_blank">Divide and Conquer</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Tree Algorithms</a></li>
+              <li><a href="#!" target="_blank">Divide and Conquer</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+              <li><a href="#!" target="_blank">Data structures Data
+                  structuresData structuresData structures Data structures</a></li>
+            </div>
+          </ul>
+        </li>
+        <li class="nav-link">
+          <input type="checkbox" id="sub-menu-3" />
+          <a href="#!">Blockchain
+            <span class="arrow-sm">&#x2192;</span>
+            <span class="arrow-lg">&#8595;</span></a>
+          <ul class="dropdown">
+            <label class="menu-label" for="sub-menu-3">
+              <span class="dropdown-title-arrow">&#x2190;</span>
+              A collection of tutorials to master the blockchain.</label>
+            <div class="nav-links">
+              <li><a href="#!" target="_blank">Etherueum</a></li>
+              <li><a href="#!" target="_blank">Bitcoin</a></li>
+              <li><a href="#!" target="_blank">Solana</a></li>
+              <li><a href="#!" target="_blank">NFTs</a></li>
+              <li><a href="#!" target="_blank">Blockchain Networks</a></li>
+              <li><a href="#!" target="_blank">Defi</a></li>
+              <li><a href="#!" target="_blank">Metaverse</a></li>
+              <li><a href="#!" target="_blank">Etherueum</a></li>
+              <li><a href="#!" target="_blank">Bitcoin</a></li>
+              <li><a href="#!" target="_blank">Solana</a></li>
+              <li><a href="#!" target="_blank">NFTs</a></li>
+              <li><a href="#!" target="_blank">Blockchain Networks</a></li>
+              <li><a href="#!" target="_blank">Defi</a></li>
+              <li><a href="#!" target="_blank">Metaverse</a></li>
+              <li><a href="#!" target="_blank">Etherueum</a></li>
+              <li><a href="#!" target="_blank">Bitcoin</a></li>
+              <li><a href="#!" target="_blank">Solana</a></li>
+              <li><a href="#!" target="_blank">NFTs</a></li>
+              <li><a href="#!" target="_blank">Blockchain Networks</a></li>
+              <li><a href="#!" target="_blank">Defi</a></li>
+              <li><a href="#!" target="_blank">Metaverse</a></li>
+              <li><a href="#!" target="_blank">Etherueum</a></li>
+              <li><a href="#!" target="_blank">Bitcoin</a></li>
+              <li><a href="#!" target="_blank">Solana</a></li>
+              <li><a href="#!" target="_blank">NFTs</a></li>
+              <li><a href="#!" target="_blank">Blockchain Networks</a></li>
+              <li><a href="#!" target="_blank">Defi</a></li>
+              <li><a href="#!" target="_blank">Metaverse</a></li>
+            </div>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/post.hbs b/post.hbs
index 30f64f1..9fb3e8f 100644
--- a/post.hbs
+++ b/post.hbs
@@ -43,9 +43,34 @@ into the {body} of the default.hbs template --}}
 {{#post}}
 
 <main id="site-main" class="site-main outer" role="main">
-  <div class="inner">
+  {{!-- <div class="main-wrapper"> --}}
+  <div id="main-posts" class="main-posts">
+    {{!-- LEFT SIDE BAR --}}
+    <div id="left-side-bar-wrapper" class="left-side-bar-wrapper">
+      <div id="first-left" class="first-left">
+        <div id="left-side-bar-top" class="left-side-bar-top">
+          {{> "left-side-bar-top"}}
+           {{!-- <button id="view-more" class="view-more">view more</button>
+           <button id="view-more" class="view-more">hide</button> --}}
+        </div>
+      </div>
+      <div class="second-left">
+        {{#if tags}}    
+      <div id="left-side-bar" class="left-side-bar">
+          {{> "left-side-bar"}}
+      </div>
+    {{else}}
+      <div id="left-side-bar" class="left-side-bar">
+        {{> "left-side-bar-common"}}
+      </div>
+    {{/if}}
+      </div>
+    </div>
+       
+      {{!-- INNER CONTENT --}}
+  <div class="inner" id="inner">
 
-    <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
+    <article id="post-full" class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
 
       <header class="post-full-header">
         <h1 class="post-full-title" style="color:#292929; font-size:30px ; ">{{title}}</h1>
@@ -108,7 +133,6 @@ into the {body} of the default.hbs template --}}
         {{!--  taglist : display the list of tags  --}}
         <div class="upper_taglist">
           <h4 id="text" class="less">
-
             <div id="taglist">
 
 
@@ -139,20 +163,38 @@ into the {body} of the default.hbs template --}}
 
       <button id="scrollBtn" class="fa fa-angle-up" title="Go to top"></button>
 
+      <div class="post-content">
       <section class="post-full-content">
-
+        {{!-- <a href="http://internship.opengenus.org" target="_blank">
+        <picture>
+          <source media="(max-width: 400px)" srcset="/assets/images/internship-small.png">
+          <img src="https://iq.opengenus.org/assets/images/internship.png" style="width:100%;" alt="Internship at OpenGenus" border="0">
+        </picture>
+        </a> --}}
         {{content}}
       </section>
 
+        
+
+      </div>
+
       <!-- Discourse forum -->
 
   </div>
+  </div>
+  {{!-- RIGHT SIDE BAR --}}
+    {{!-- <div class="right-side-bar-wrapper">
+      <div id="right-side-bar" class="right-side-bar">
+          {{> "right-side-bar"}}
+      </div>
+      </div> --}}
+  {{!-- </div> --}}
 
   <!-- shuffle button -->
   {{!-- Email subscribe form at the bottom of the page --}}
   {{#if @labs.subscribers}}
   <section class="subscribe-form">
-    <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
+    <h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
     <p>Get the latest posts delivered right to your inbox</p>
     {{subscribe_form placeholder="youremail@example.com"}}
   </section>
@@ -161,7 +203,7 @@ into the {body} of the default.hbs template --}}
   <footer>
     {{!-- Everything inside the #author tags pulls data from the author --}}
     <div class="post-full-footer">
-      {{#author}}
+      {{#primary_author}}
 
       <section class="author-card">
         {{#if profile_image}}
@@ -187,7 +229,7 @@ into the {body} of the default.hbs template --}}
 
 
 
-      {{/author}}
+      {{/primary_author}}
 
     </div>
     {{!-- Displaying secondary authors --}}
@@ -284,10 +326,10 @@ into the {body} of the default.hbs template --}}
       {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
       {{#if related_posts}}
       <article class="read-next-card" {{#if ../primary_tag.feature_image}}
-        style="background-image: url({{../primary_tag.feature_image}})" {{else}} {{#if @blog.cover_image}}
-        style="background-image: url({{@blog.cover_image}})" {{/if}} {{/if}}>
+        style="background-image: url({{../primary_tag.feature_image}})" {{else}} {{#if @site.cover_image}}
+        style="background-image: url({{@site.cover_image}})" {{/if}} {{/if}}>
         <header class="read-next-card-header">
-          <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
+          <small class="read-next-card-header-sitetitle">&mdash; {{@site.title}} &mdash;</small>
           {{#../primary_tag}}
           <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
           {{/../primary_tag}}
@@ -560,7 +602,6 @@ into the {body} of the default.hbs template --}}
       questions[c].children[i].style.display = "block";
     }
   }
-
 </script>
 
 <style>