clickable headers

assets/scss/colors.scss

@@ -119,8 +119,8 @@ h2 a {
   background-color: $dark-accent1;
   color: $dark-bg;
   transition: $transition-time;
-  & a{
-    background-color: transparent;
+  &.light {
+    color: $light-bg;
   }
 }
 h3,
@@ -128,9 +128,6 @@ h3 a {
   background-color: $dark-accent2;
   color: $dark-bg;
   transition: $transition-time;
-  & a{
-    background-color: transparent;
-  }
 }
 
 h3.light {
@@ -156,7 +153,7 @@ h4 {
 
 h4.light,
 h5.light,
-h6.light{
+h6.light {
   background-color: $light-accent3;
   color: $light-bg;
   transition: $transition-time;
@@ -172,10 +169,10 @@ article.light a {
   background-color: transparent;
   color: $light-ln;
   transition: $transition-time;
-  &.hash-link{
+  &.hash-link {
     color: $light-bg;
   }
-  &.hash-link:hover{
+  &.hash-link:hover {
     background-color: transparent;
     color: $light-bg;
   }
@@ -202,29 +199,34 @@ article.light a:hover {
   transition: $transition-time;
 }
 
-h1, h2, h3, h4, h5, h6{
-  &a{
-  background-color: transparent;
-  color: $light-bg;
-  &:hover{
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &a.light {
     background-color: transparent;
-  }
+    color: $light-bg;
+    &:hover {
+      background-color: transparent;
+    }
   }
 }
 
-header.light{
+header.light {
   background-color: $light-bg;
   transition: $transition-time;
 }
 
-header{
+header {
   transition: $transition-time;
 }
 
-.posttitle a{
+.posttitle a {
   background-color: transparent;
   color: $dark-bg;
-  &:hover{
+  &:hover {
     background-color: transparent;
   }
 }

assets/scss/layout.scss

@@ -93,6 +93,7 @@ h4,
 h5,
 h6 {
   padding-right: 6%;
+  margin-right: 6%;
   padding-top: 12pt;
   padding-bottom: 12pt;
   justify-content: right;
@@ -100,13 +101,6 @@ h6 {
   align-items: center;
 }
 
-h1 {margin-right: 6%;}
-h2 {margin-right: 12%;}
-h3 {margin-right: 18%;}
-h4 {margin-right: 24%;}
-h5 {margin-right: 32%;}
-h6 {margin-right: 38%;}
-
 h2,
 h3,
 h4,

assets/scss/style.scss

@@ -4,6 +4,7 @@ $toggle-height: 24pt;
 
 * {
   border-width: 2pt;
+  transition: ease-in-out;
 }
 
 input[type="checkbox"] {

layouts/_default/single.html

@@ -3,14 +3,6 @@
   <div class="titlecontainer">
   <h1 id="title" class="colorswitch">{{ .Title }}</h1>
   </div>
-    <div>
-        {{ with .PrevInSection }}
-          <a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a>
-        {{ end }}
-        {{ with .NextInSection }}
-          <a class="next colorswitch" href="{{.Permalink}}">next: {{.Title}}</a>
-        {{ end }}
-    </div>
   <div>
         <article id="content" class="colorswitch">
            {{ .Content }}