favicon

assets/scss/colors.scss

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

assets/scss/layout.scss

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

assets/scss/responsive.css

@@ -1,4 +1,6 @@
-#hamburger-button {
+#hamburger-button,
+#hamburger-bg,
+#darkmode-button-small{
     display: none;
 }
 
@@ -9,8 +11,18 @@
     {
             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,3 +101,10 @@ 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>
+    <article class="colorswitch">
-        <header class="colorswitch">
+        <header>
-            <h1 id="title">{{.Title}}</h1>
+            <h1 id="title"><a href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></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" class="colorswitch">{{ .Site.Title }}</h1>
+    <h1 id="title"><a href="./index.xml" class="colorswitch with-rss" id="rss-title">{{.Title}} </a></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="hamburger-button" class="colorswitch hamburger"></button>
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
-<nav id="footer-nav" aria-label="navigation">
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<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,9 +1,13 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ .Title }}</title>
+    <title>{{ .Title }}@{{ .Site.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 +1,25 @@
-function activateHamburger() {}
+const button = document.getElementById("hamburger-button");
+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,13 +1,16 @@
 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");
@@ -21,6 +24,10 @@ 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) {