clickable headers

assets/scss/colors.scss

@@ -14,7 +14,8 @@ $dark-accent1: #b296ff;
 $dark-accent2: #39b8a3;
 $dark-accent3: #dde4ff;
 
-$transition-time: 1s;
+$transition-time: 2s;
+$trans-short: 0.2s;
 
 body {
   &.light {
@@ -46,7 +47,7 @@ a.footer-nav-item:hover {
   color: $dark-bg-alt;
   background-color: $dark-bg;
   border-color: $dark-bg;
-  transition: 0.24s;
+  transition: $trans-short;
 }
 
 footer {
@@ -113,62 +114,117 @@ article {
   transition: $transition-time;
 }
 
-article h2 {
+h2,
+h2 a {
   background-color: $dark-accent1;
   color: $dark-bg;
   transition: $transition-time;
+  & a{
+    background-color: transparent;
   }
-article h3 {
+}
+h3,
+h3 a {
   background-color: $dark-accent2;
   color: $dark-bg;
   transition: $transition-time;
+  & a{
+    background-color: transparent;
+  }
 }
 
-article.light h3 {
+h3.light {
   background-color: $light-accent2;
   color: $light-bg;
   transition: $transition-time;
+  &a {
+    color: $light-bg;
+  }
 }
 
-article h5,
-article h6,
-article h4 {
+h5,
+h6,
+h4 {
   background-color: $dark-accent3;
   color: $dark-bg;
   transition: $transition-time;
+  & a {
+    color: $dark-bg;
+    background-color: transparent;
+  }
 }
 
-article.light h5,
-article.light h6,
-article.light h4 {
+h4.light,
+h5.light,
+h6.light{
   background-color: $light-accent3;
   color: $light-bg;
   transition: $transition-time;
 }
 
-article.light h2 {
+h2.light {
   background-color: $light-accent1;
   color: $light-bg;
   transition: $transition-time;
 }
 
-
 article.light a {
-  background-color: $light-ln;
-  color: $light-bg;
+  background-color: transparent;
+  color: $light-ln;
   transition: $transition-time;
+  &.hash-link{
+    color: $light-bg;
+  }
+  &.hash-link:hover{
+    background-color: transparent;
+    color: $light-bg;
+  }
 }
 
 a:hover {
-  &.light {
-    color: $light-bg;
-    background-color: $light-ln;
-  }
   color: $dark-bg;
   background-color: $dark-ln;
+  transition: $trans-short;
 }
 
+.previous.light:hover,
+.next.light:hover,
+.postdescription a.light:hover,
 article.light a:hover {
-  color: $light-ln;
+  color: $light-bg;
+  background-color: $light-ln;
+  transition: $trans-short;
+}
+
+.light.hash-link:hover,
+.hash-link:hover {
+  background-color: transparent;
+  transition: $transition-time;
+}
+
+h1, h2, h3, h4, h5, h6{
+  &a{
+  background-color: transparent;
+  color: $light-bg;
+  &:hover{
     background-color: transparent;
   }
+  }
+}
+
+header.light{
+  background-color: $light-bg;
+  transition: $transition-time;
+}
+
+header{
+  transition: $transition-time;
+}
+
+.posttitle a{
+  background-color: transparent;
+  color: $dark-bg;
+  &:hover{
+    background-color: transparent;
+  }
+}

assets/scss/font.scss

@@ -23,16 +23,16 @@ h1 {
   font-size: $huge;
 }
 
-h2 {
+h2 a{
   font-size: $huge;
   font-style:bold;
 }
 
-h3, h4 {
+h3 a, h4 a {
   font-size: $large;
 }
 
-h5 h6 {
+h5 a, h6 a {
   font-size: $big;
 }
 
@@ -53,3 +53,7 @@ label::after {
 h6 {
   font-style: italic;
 }
+
+::before{
+  font-family: CaskaydiaCoveMono;
+}

assets/scss/layout.scss

@@ -24,7 +24,8 @@ footer {
 #content p,
 #content ul,
 #content ol,
-#content table
+#content table,
+.postdescription
 {
   margin-right: 24%;
   margin-left: 24%;
@@ -94,12 +95,18 @@ h6 {
   padding-right: 6%;
   padding-top: 12pt;
   padding-bottom: 12pt;
-  margin-right: 6%;
   justify-content: right;
   display: flex;
   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,
@@ -113,7 +120,8 @@ article {
   margin-inline: auto;
 }
 
-.titlecontainer {
+.titlecontainer,
+header{
   width: 100%;
   padding-top: 42pt;
 }

assets/scss/style.scss

@@ -6,13 +6,13 @@ $toggle-height: 24pt;
   border-width: 2pt;
 }
 
-
 input[type="checkbox"] {
   cursor: pointer;
 }
 .toggleinput {
-    opacity: 10;
-     max-height: 10;
+  opacity: 0;
+  max-height: 0;
+  max-width: 0;
   overflow: hidden;
 }
 
@@ -33,7 +33,7 @@ input[type="checkbox"]{
   width: 20pt;
   border-width: 1pt;
   border-radius: 100pt;
-    transition: 0.3s;
+  transition: 1s;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
@@ -42,14 +42,12 @@ input[type="checkbox"]{
   justify-content: center;
   content: "";
   border-style: solid;
-
 }
 
 input:checked + label:after {
   left: calc(100% - 49pt);
 }
 
-
 input:checked + label::after {
   content: "滛";
 }
@@ -67,11 +65,25 @@ input:checked + label::after{
   border: solid;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   border-top-right-radius: $radius;
   border-bottom-right-radius: $radius;
+  & .hash-link {
+    &:hover {
+      cursor: pointer;
+      &::before {
+        content: "";
+      }
+    }
+  }
 }
 
+.postdescription,
 #content p,
 #content ul,
 #content ol,

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,5 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="colorswitch">
+    <a class="hash-link colorswitch" href="#{{ .Anchor | safeURL }}">
+    &nbsp;{{ .Text | safeHTML }}
+    </a>
+</h{{ .Level }}>

layouts/_default/baseof.html

@@ -3,9 +3,8 @@
   {{- partial "head.html" . -}}
   <body class="colorswitch">
     {{- partial "header.html" . -}}
-        <div id="content">
-        {{- block "main" . }}{{- end }}
-        </div>
+    <div id="content">{{- block "main" . }}{{- end }}</div>
     {{- partial "footer.html" . -}}
+    <script src="/js/main.js"></script>
   </body>
 </html>

layouts/_default/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <main>
     <article>
-        <header>
+        <header class="colorswitch">
             <h1 id="title">{{.Title}}</h1>
         </header>
         <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
@@ -10,9 +10,12 @@
     <div id="pagelist">
     <!-- Ranges through content/posts/*.md -->
     {{ range .Pages }}
-    <h2>
-        <a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2>{{.Description}}<br>{{.WordCount}}</a>
+    <div id="postlist">
+    <h2 class="colorswitch posttitle">
+        <a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2><div class="postdescription">{{.Description}}<br>{{.WordCount}} words</a>
+    </div>
     {{ end }}
     </div>
+    </div>
 </main>
 {{ end }}

layouts/partials/footer.html

@@ -13,4 +13,3 @@
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label>
 </span>
 </footer>
-<script src="/js/darkmode.js"></script>

static/js/headings.js

@@ -0,0 +1,13 @@
+(function addHeadingLinks() {
+  var article = document.getElementById("content");
+  var headings = article.querySelectorAll("h1, h2, h3, h4, h5, h6");
+  headings.forEach(function (heading) {
+    if (heading.id) {
+      var a = document.createElement("a");
+      a.innerHTML = heading.innerHTML;
+      a.href = "#" + heading.id;
+      heading.innerHTML = "";
+      heading.appendChild(a);
+    }
+  });
+})();