assets/scss/colors.scss

@@ -1,25 +1,20 @@
-$light-bg: #ffffff;
+$light-bg:  #dde4ff ;
-$light-bg-alt: #413c74;
+$light-bg-alt:  #733c7c ;
-$light-fg: #413c74;
+$light-fg: #4b3d44;
-$light-ln:   #9b5bb4  ;
+$light-ln:  #733c7c ;
-$light-accent1: #9b5bb4;
+$light-accent1:  #007582 ;
-$light-accent2:  #5183b9 ;
+$light-accent2:  #225091 ;
-$light-accent3: #413c74;
+$light-accent3:   #27234c  ;
 
-$dark-bg: #413c74;
+$dark-bg:  #27234c ;
-$dark-bg-alt: #ff8ad0;
+$dark-bg-alt:    #f2504b   ;
-$dark-fg: #ff8ad0;
+$dark-fg:    #e88dc3   ;
-$dark-ln: #ffdc6d;
+$dark-ln:  #f2504b ;
-$dark-accent1: #ffdc6d;
+$dark-accent1: #b296ff;
-$dark-accent2: #61d478;
+$dark-accent2:  #39b8a3 ;
-$dark-accent3: #ffffff;
+$dark-accent3:   #dde4ff  ;
 
-$transition-time: 2s;
+$transition-time: 1s;
-$trans-short: 0.2s;
-
-* {
-  transition: $transition-time;
-}
 
 body {
   &.light {
@@ -33,11 +28,11 @@ body {
 
 a {
   &.light {
-    background-color: transparent;
+    background-color: $light-ln;
-    color: $light-ln;
+    color: $light-bg;
   }
-  background-color: transparent;
+  background-color: $dark-ln;
-  color: $dark-ln;
+  color: $dark-bg;
   transition: $transition-time;
 }
 
@@ -51,7 +46,7 @@ a.footer-nav-item:hover {
   color: $dark-bg-alt;
   background-color: $dark-bg;
   border-color: $dark-bg;
-  transition: $trans-short;
+  transition: 0.24s;
 }
 
 footer {
@@ -118,132 +113,66 @@ article {
   transition: $transition-time;
 }
 
-h2 {
+article h2 {
   background-color: $dark-accent1;
   color: $dark-bg;
   transition: $transition-time;
-  &.light {
-    color: $light-bg;
-  }
 }
-
+article h3 {
-h2 a {
-  color: $dark-bg;
-  &.light{
-    color: $light-bg;
-  }
-}
-
-h3 {
   background-color: $dark-accent2;
   color: $dark-bg;
   transition: $transition-time;
 }
 
-h3 a {
+article.light h3 {
-  color: $dark-bg;
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-h3.light {
   background-color: $light-accent2;
   color: $light-bg;
   transition: $transition-time;
-  &a {
-    color: $light-bg;
-  }
 }
-
+article h4 {
-h5,
-h6,
-h4 {
   background-color: $dark-accent3;
   color: $dark-bg;
   transition: $transition-time;
-  & a {
-    color: $dark-bg;
-    background-color: transparent;
-  }
 }
 
-h4.light,
+article.light h4 {
-h5.light,
-h6.light {
   background-color: $light-accent3;
   color: $light-bg;
   transition: $transition-time;
 }
 
-h2.light {
+article.light h2 {
   background-color: $light-accent1;
   color: $light-bg;
   transition: $transition-time;
 }
 
-article.light a {
+article h5,
-  background-color: transparent;
+article h6,
-  color: $light-ln;
+article a {
+  background-color: $dark-ln;
+  color: $dark-bg;
   transition: $transition-time;
-  &.hash-link {
+}
+
+article.light h5,
+article.light h6,
+article.light a {
+  background-color: $light-ln;
   color: $light-bg;
-  }
+  transition: $transition-time;
-  &.hash-link:hover {
-    background-color: transparent;
-    color: $light-bg;
-  }
 }
 
 a:hover {
-  color: $dark-bg;
+  &.light {
-  background-color: $dark-ln;
+    color: $light-ln;
-  transition: $trans-short;
+    background-color: transparent;
+  }
+  color: $dark-ln;
+  background-color: transparent;
 }
 
-.previous.light:hover,
-.next.light:hover,
-.postdescription a.light:hover,
 article.light a:hover {
-  color: $light-bg;
+  color: $light-ln;
-  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.light {
-    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

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

assets/scss/layout.scss

@@ -24,19 +24,11 @@ footer {
 #content p,
 #content ul,
 #content ol,
-#content table,
+#content table {
-.postdescription,
-hr
-{
   margin-right: 24%;
   margin-left: 24%;
 }
 
-#content ol ol,
-#content ul ul{
-  margin-left: 0.12em;
-}
-
 #footer-left {
   margin-top: auto;
   margin-bottom: auto;
@@ -94,9 +86,9 @@ h4,
 h5,
 h6 {
   padding-right: 6%;
-  margin-right: 6%;
   padding-top: 12pt;
   padding-bottom: 12pt;
+  margin-right: 6%;
   justify-content: right;
   display: flex;
   align-items: center;
@@ -115,8 +107,7 @@ article {
   margin-inline: auto;
 }
 
-.titlecontainer,
+.titlecontainer {
-header{
   width: 100%;
   padding-top: 42pt;
 }

assets/scss/style.scss

@@ -4,20 +4,18 @@ $toggle-height: 24pt;
 
 * {
     border-width: 2pt;
-  transition: ease-in-out;
+     }
-}
 
-input[type="checkbox"] {
+input[type="checkbox"]{
     cursor: pointer;
 }
-.toggleinput {
+.toggleinput{
     opacity: 0;
      max-height: 0;
-  max-width: 0;
     overflow: hidden;
 }
 
-.togglelabel {
+.togglelabel{
     width: $toggle-width;
     height: 24pt;
     border-radius: $radius;
@@ -26,7 +24,7 @@ input[type="checkbox"] {
     display: flex;
 }
 
-.togglelabel::after {
+.togglelabel::after{
     left: calc(100% - 67pt);
     content: "";
     position: absolute;
@@ -34,26 +32,28 @@ input[type="checkbox"] {
     width: 20pt;
     border-width: 1pt;
     border-radius: 100pt;
-  transition: 1s;
+    transition: 0.3s;
     display: inline-block;
     vertical-align: middle;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
-  content: "";
+    content: "滛";
     border-style: solid;
+
 }
 
-input:checked + label:after {
+input:checked + label:after{
     left: calc(100% - 49pt);
 }
 
-input:checked + label::after {
+
-  content: "滛";
+input:checked + label::after{
+    content: "";
 }
 
-.footer-nav-item {
+.footer-nav-item{
     border-radius: 100%;
     height: 1em;
     width: 1em;
@@ -62,29 +62,15 @@ input:checked + label::after {
     border-style: solid;
 }
 
-.togglelabel {
+.togglelabel{
     border: solid;
 }
 
-h1,
+h1, h2, h3, h4, h5, h6 {
-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

@@ -1,5 +0,0 @@
-<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,8 +3,9 @@
     {{- 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,21 +1,19 @@
 {{ define "main" }}
 <main>
     <article>
-        <header class="colorswitch">
+        <header>
-            <h1 id="title">{{.Title}}</h1>
+            <h1>List - {{.Title}}</h1>
         </header>
         <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
         {{.Content}}
     </article>
-    <div id="pagelist">
+    <ul>
     <!-- Ranges through content/posts/*.md -->
     {{ range .Pages }}
-    <div id="postlist">
+        <li>
-    <h2 class="colorswitch posttitle">
+            <a class="colorswitch" href="{{.Permalink}}">{{.Title}}</a>
-        <a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2><div class="postdescription">{{.Description}}<br>{{.WordCount}} words</a>
+        </li>
-    </div>
     {{ end }}
-    </div>
+    </ul>
-    </div>
 </main>
 {{ end }}

layouts/_default/single.html

@@ -3,6 +3,14 @@
   <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 }}

layouts/partials/footer.html

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

static/js/darkmode.js

@@ -0,0 +1,32 @@
+const checkbox = document.getElementById("darkmode-toggle");
+const colorswitchers = document.getElementsByClassName("colorswitch");
+
+if (localStorage.getItem("dark")) {
+  switchToDark();
+} else {
+  switchToLight();
+}
+checkbox.checked = localStorage.getItem("dark");
+
+checkbox.addEventListener("change", function () {
+  localStorage.setItem("dark", this.checked);
+  if (this.checked) {
+    switchToDark();
+  } else {
+    localStorage.removeItem("dark");
+    switchToLight();
+  }
+});
+
+function switchToLight() {
+  for (let item of colorswitchers) {
+    item.classList.add("light");
+  }
+}
+
+function switchToDark() {
+  for (let item of colorswitchers) {
+    console.log(item);
+    item.classList.remove("light");
+  }
+}

static/js/headings.js

@@ -1,13 +0,0 @@
-(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);
-    }
-  });
-})();

static/js/main.js

@@ -1,36 +0,0 @@
-const checkbox = document.getElementById("darkmode-toggle");
-const colorswitchers = document.getElementsByClassName("colorswitch");
-
-function switchToLight() {
-  for (let item of colorswitchers) {
-    item.classList.add("light");
-  }
-}
-
-function switchToDark() {
-  for (let item of colorswitchers) {
-    console.log(item);
-    item.classList.remove("light");
-  }
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  if (localStorage.getItem("light")) {
-    switchToLight();
-  } else {
-    switchToDark();
-  }
-  checkbox.checked = localStorage.getItem("dark");
-  checkbox.addEventListener("change", function () {
-    localStorage.setItem("light", this.checked);
-    if (this.checked) {
-      switchToLight();
-    } else {
-      localStorage.removeItem("light");
-      switchToDark();
-    }
-  });
-  if (localStorage.getItem("light")) {
-    checkbox.checked = true;
-  }
-});