assets/scss/colors.scss

@@ -14,9 +14,13 @@ $dark-accent1: #ffdc6d;
 $dark-accent2: #61d478;
 $dark-accent3: #ffffff;
 
-$transition-time: 1s;
+$transition-time: 2s;
 $trans-short: 0.2s;
 
+* {
+  transition: $transition-time;
+}
+
 body {
   &.light {
     background-color: $light-bg;
@@ -24,6 +28,7 @@ body {
   }
   background-color: $dark-bg;
   color: $dark-fg;
+  transition: $transition-time;
 }
 
 a {
@@ -33,6 +38,7 @@ a {
   }
   background-color: transparent;
   color: $dark-ln;
+  transition: $transition-time;
 }
 
 a.footer-nav-item.active,
@@ -45,6 +51,7 @@ a.footer-nav-item:hover {
   color: $dark-bg-alt;
   background-color: $dark-bg;
   border-color: $dark-bg;
+  transition: $trans-short;
 }
 
 footer {
@@ -54,6 +61,7 @@ footer {
   }
   background-color: $dark-bg-alt;
   color: $dark-bg;
+  transition: $transition-time;
 }
 
 footer a {
@@ -63,6 +71,7 @@ footer a {
   }
   color: $dark-bg;
   background-color: $dark-bg-alt;
+  transition: $transition-time;
 }
 
 .togglelabel {
@@ -72,28 +81,33 @@ footer a {
   }
   background-color: $dark-bg-alt;
   border-color: $dark-bg;
+  transition: $transition-time;
 }
 
 .togglelabel.light::after {
   background-color: $light-bg;
   border-color: $light-bg;
   color: $light-bg-alt;
+  transition: $transition-time;
 }
 
 .togglelabel::after {
   background-color: $dark-bg;
   border-color: $dark-bg;
   color: $dark-bg-alt;
+  transition: $transition-time;
 }
 
 body.light #title {
   color: $light-bg;
   background-color: $light-bg-alt;
+  transition: $transition-time;
 }
 
 body #title {
   color: $dark-bg;
   background-color: $dark-bg-alt;
+  transition: $transition-time;
 }
 
 article {
@@ -103,11 +117,13 @@ article {
   }
   background-color: $dark-bg;
   border-color: $dark-bg-alt;
+  transition: $transition-time;
 }
 
 h2 {
   background-color: $dark-accent1;
   color: $dark-bg;
+  transition: $transition-time;
   &.light {
     color: $light-bg;
   }
@@ -123,6 +139,7 @@ h2 a {
 h3 {
   background-color: $dark-accent2;
   color: $dark-bg;
+  transition: $transition-time;
 }
 
 h3 a {
@@ -135,6 +152,7 @@ h3 a {
 h3.light {
   background-color: $light-accent2;
   color: $light-bg;
+  transition: $transition-time;
   &a {
     color: $light-bg;
   }
@@ -145,8 +163,10 @@ h6,
 h4 {
   background-color: $dark-accent3;
   color: $dark-bg;
+  transition: $transition-time;
   & a {
     color: $dark-bg;
+    background-color: transparent;
   }
 }
 
@@ -155,16 +175,19 @@ h5.light,
 h6.light {
   background-color: $light-accent3;
   color: $light-bg;
+  transition: $transition-time;
 }
 
 h2.light {
   background-color: $light-accent1;
   color: $light-bg;
+  transition: $transition-time;
 }
 
 article.light a {
   background-color: transparent;
   color: $light-ln;
+  transition: $transition-time;
   &.hash-link {
     color: $light-bg;
   }
@@ -177,6 +200,7 @@ article.light a {
 a:hover {
   color: $dark-bg;
   background-color: $dark-ln;
+  transition: $trans-short;
   border-color: $dark-ln;
 }
 
@@ -186,12 +210,14 @@ a:hover {
 article.light a:hover {
   color: $light-bg;
   background-color: $light-ln;
+  transition: $trans-short;
   border-color: $light-ln;
 }
 
 .light.hash-link:hover,
 .hash-link:hover {
   background-color: transparent;
+  transition: $transition-time;
 }
 
 h1,
@@ -209,21 +235,13 @@ h6 {
   }
 }
 
-h1 {
-  & #rss-title {
-    background-color: transparent;
-    color: $dark-bg;
-    &:hover {
-      background-color: transparent;
-    }
-    &.light {
-      color: $light-bg;
-    }
-  }
-}
-
 header.light {
   background-color: $light-bg;
+  transition: $transition-time;
+}
+
+header {
+  transition: $transition-time;
 }
 
 .posttitle a {
@@ -239,6 +257,7 @@ button {
   background-color: $dark-bg-alt;
   border-color: $dark-bg;
   &:hover {
+    transition: $trans-short;
     background-color: $dark-bg;
     color: $dark-bg-alt;
   }
@@ -247,6 +266,7 @@ button {
     background-color: $light-bg-alt;
     border-color: $light-bg;
     &:hover {
+      transition: $trans-short;
       background-color: $light-bg;
       color: $light-bg-alt;
     }
@@ -257,32 +277,6 @@ button {
   &.light {
     color: $light-bg;
   }
-  &:hover {
+  &:hover {background-color: transparent;}
-    background-color: transparent;
-  }
   background-color: transparent;
 }
-
-#hamburger-bg {
-  background-color: $dark-bg;
-  & .hamburger-nav-item {
-    background-color: transparent;
-    color: $dark-ln;
-    border-color: $dark-ln;
-    &:hover {
-      background-color: $dark-ln;
-      color: $dark-bg;
-    }
-  }
-  &.light {
-    background-color: $light-bg;
-    & .hamburger-nav-item {
-      color: $light-ln;
-      border-color: $light-ln;
-      &:hover {
-        background-color: $light-ln;
-        color: $light-bg;
-      }
-    }
-  }
-}

assets/scss/font.scss

@@ -30,7 +30,6 @@ h1{
   font-size: $huge;
 }
 
-h1 a,
 h2 a{
   font-size: $huge;
   font-style:bold;

assets/scss/layout.scss

@@ -136,6 +136,7 @@ header{
 
 #hamburger-bg{
   position: fixed;
+  background-color: red;
   width: 100%;
   height: calc(100% - 42pt);
   left: 0pt;
@@ -143,19 +144,12 @@ header{
   right: 0;
   transition: 0s;
   display: grid;
+  align-items: center;
   justify-content: center;
-  overflow: scroll;
   & * {
     display: grid;
-    margin-top: 2pt;
+    margin-top: 14pt;
-    margin-bottom: 2pt;
+    margin-bottom: 14pt;
     text-align: center;
   }
-  &.hidden{
-    display: none;
-  }
-}
-
-#darkmode-button-small {
-  margin-right: 8pt;
 }

assets/scss/responsive.css

@@ -1,6 +1,4 @@
-#hamburger-button,
+#hamburger-button {
-#hamburger-bg,
-#darkmode-button-small{
     display: none;
 }
 
@@ -11,18 +9,8 @@
     {
             display: none;
     }
-    #hamburger-button,
+    #hamburger-button {
-    #darkmode-button-small,
-    #hamburger-bg,
-    #hamburger-bg #darkmode-toggle-label,
-    #hamburger-bg #darkmode-toggle{
         display: flex;
     }
-    #hamburger-bg #darkmode-toggle,
-    #hamburger-bg #darkmode-toggle-label{
-        position: absolute;
-        bottom: 1em;
-        right: 1em;
-    }
 }
 

assets/scss/style.scss

@@ -101,10 +101,3 @@ ul a{
   border-style: solid;
   padding: 0.12em;
 }
-
-#hamburger-bg {
-  & .hamburger-nav-item {
-    border-style: solid;
-    padding: 0.12em;
-  }
-}

layouts/_default/list.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
 <main>
-    <article class="colorswitch">
+    <article>
-        <header>
+        <header class="colorswitch">
-            <h1 id="title"><a href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></h1>
+            <h1 id="title">{{.Title}}</h1>
         </header>
         <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
         {{.Content}}

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <header>
-    <h1 id="title"><a href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></h1>
+  <h1 id="title" class="colorswitch">{{ .Site.Title }}</h1>
 </header>
 <article id="content" class="colorswitch">
   <p>

layouts/partials/footer.html

@@ -11,15 +11,15 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        <div class="hamburger colorswitch" id="hamburger-bg">
-        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="footer-nav" aria-label="navigation">
-<nav id="hamburger-nav" aria-label="navigation">
     {{ $currentPage := . }}
     {{ range .Site.Menus.nav }}
     <a class="hamburger-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }} {{ .Title }}</a><br>
     {{ end }}
 </nav>
+
         </div>
 </span>
 </footer>

layouts/partials/head.html

@@ -1,13 +1,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ .Title }}@{{ .Site.Title }}</title>
+    <title>{{ .Title }}</title>
     {{ $css := resources.Get "scss/main.scss" }}
     {{ $css = $css | toCSS }}
     <link rel="stylesheet" href="{{ $css.RelPermalink }}">
-    {{ range .AlternativeOutputFormats -}}
-    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
-{{ end -}}
-
     <link rel="icon" type="image/x-icon" href="/svg/favicon.svg">
 </head>

static/js/hamburger.js

@@ -1,25 +1 @@
-const button = document.getElementById("hamburger-button");
+function activateHamburger() {}
-const bg = document.getElementById("hamburger-bg");
-let hidden = true;
-
-export function activateHamburger() {
-  button.addEventListener("click", function () {
-    hidden = !hidden;
-    console.log(hidden);
-    if (hidden === true) {
-      hide();
-    } else {
-      unhide();
-    }
-  });
-}
-
-function unhide() {
-  bg.classList.remove("hidden");
-  button.innerHTML = "窱";
-}
-
-function hide() {
-  bg.classList.add("hidden");
-  button.innerHTML = "";
-}

static/js/lightmode.js

@@ -1,16 +1,13 @@
 const checkbox = document.getElementById("darkmode-toggle");
 const colorswitchers = document.getElementsByClassName("colorswitch");
-const button = document.getElementById("darkmode-button-small");
 
 function switchToLight() {
-  button.innerHTML = "滛";
   for (let item of colorswitchers) {
     item.classList.add("light");
   }
 }
 
 function switchToDark() {
-  button.innerHTML = "";
   for (let item of colorswitchers) {
     console.log(item);
     item.classList.remove("light");
@@ -24,10 +21,6 @@ export function updateMode() {
     switchToDark();
   }
   checkbox.checked = localStorage.getItem("dark");
-
-  button.addEventListener("click", function () {
-    checkbox.click();
-  });
   checkbox.addEventListener("change", function () {
     localStorage.setItem("light", this.checked);
     if (this.checked) {