assets/scss/colors.scss

@@ -1,14 +1,18 @@
-$light-bg: #d2c9a5;
-$light-bg-alt:  #4b726e ;
-$light-fg: #4b3d44;
-$light-ln:  #79444a ;
+$light-bg: #ddcf99;
+$light-bg-alt: #4e5463;
+$light-fg: #202020;
+$light-ln: #4e5463;
+$light-active: #f1866c;
+$light-h1: blue;
 
 $dark-bg: #4b3d44;
-$dark-bg-alt: #8caba1;
-$dark-fg: #d2c9a5;
-$dark-ln: #c77b58;
+$dark-bg-alt: #bd97a9;
+$dark-fg: #e6d0c4;
+$dark-ln: #bd97a9;
+$dark-active: #4b4361;
+$dark-h1: red;
 
-$transition-time: 1s;
+$transition-time: 1.5s;
 
 body {
   &.light {
@@ -30,17 +34,12 @@ a {
   transition: $transition-time;
 }
 
-a.footer-nav-item.active,
-a.footer-nav-item:hover {
+a.footer-nav-item.active {
   &.light {
-    color: $light-bg-alt;
-    background-color: $light-bg;
-    border-color: $light-bg;
+    color: $light-active;
   }
-  color: $dark-bg-alt;
-  background-color: $dark-bg;
-  border-color: $dark-bg;
-  transition: 0.24s;
+  color: $dark-active;
+  transition: $transition-time;
 }
 
 footer {
@@ -65,43 +64,26 @@ footer a {
 
 .togglelabel {
   &.light {
-    background-color: $light-bg-alt;
-    border-color: $light-bg;
+    background-color: $light-bg;
   }
-  background-color: $dark-bg-alt;
-  border-color: $dark-bg;
+  background-color: $dark-bg;
   transition: $transition-time;
 }
 
 .togglelabel.light::after {
-  background-color: $light-bg;
-  color: $light-bg-alt;
-  transition: $transition-time;
+  background-color: $light-fg;
+  color: $light-bg;
 }
 
 .togglelabel::after {
-  background-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 {
+  background-color: $dark-fg;
   color: $dark-bg;
-  background-color: $dark-bg-alt;
   transition: $transition-time;
 }
 
-article {
-  &.light {
-    background-color: $light-bg;
-    border-color: $light-bg-alt;
+#title{
+  &.light{
+    color: $light-h1;
   }
-  background-color: $dark-bg;
-  border-color: $dark-bg-alt;
+  color: $dark-h1;
 }

assets/scss/layout.scss

@@ -1,5 +1,3 @@
-$footer-height: 42pt;
-
 html,
 body {
   height: 100%;
@@ -7,7 +5,7 @@ body {
 }
 
 footer {
-  height: $footer-height;
+  height: 42pt;
   position: sticky;
   display: flex;
   align-items: center;
@@ -16,9 +14,8 @@ footer {
 }
 
 #content {
-  min-height: calc(100% - 42pt * 3);
+  min-height: calc(100% - 42pt);
   right: auto;
-  padding: 42pt;
 }
 
 #footer-left {
@@ -67,13 +64,5 @@ footer {
   margin-left: 8pt;
   margin-top: auto;
   margin-bottom: auto;
-  justify-content: center;
-  align-items: center;
 }
 
-
-article {
-  margin-top: 42pt;
-  margin-inline: auto;
-  padding: 4em;
-}

assets/scss/style.scss

@@ -2,10 +2,6 @@ $radius: 24pt;
 $toggle-width: 42pt;
 $toggle-height: 24pt;
 
-* {
-    border-width: 2pt;
-     }
-
 input[type="checkbox"]{
     cursor: pointer;
 }
@@ -20,53 +16,29 @@ input[type="checkbox"]{
     height: 24pt;
     border-radius: $radius;
     cursor: pointer;
-    align-items: center;
-    display: flex;
 }
 
 .togglelabel::after{
-    left: calc(100% - 67pt);
+    left: calc(100% - 66pt);
     content: "";
     position: absolute;
-    height: 20pt;
-    width: 20pt;
-    border-width: 1pt;
+    height: $toggle-height;
+    width: $toggle-height;
     border-radius: 100pt;
     transition: 0.3s;
     display: inline-block;
     vertical-align: middle;
     text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    content: "滛";
-    border-style: solid;
-
 }
 
 input:checked + label:after{
-    left: calc(100% - 49pt);
+    left: calc(100% - 48pt);
 }
 
+.togglelabel::after{
+    content: "滛";
+}
 
 input:checked + label::after{
     content: "";
 }
-
-.footer-nav-item{
-    border-radius: 100%;
-    height: 1em;
-    width: 1em;
-    justify-content: center;
-    align-items: center;
-    border-style: solid;
-}
-
-article {
-    border-style: solid;
-    border-radius: $radius;
-}
-
-.togglelabel{
-    border: solid;
-}

layouts/_default/single.html

@@ -1,16 +1,8 @@
 {{ define "main" }}
 <section id="main">
   <h1 id="title" class="colorswitch">Single Page {{ .Title }}</h1>
-    <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">
+        <article id="content">
            {{ .Content }}
         </article>
   </div>
@@ -34,5 +26,13 @@
     </ul>
     {{ end }}
     </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>
 </aside>
 {{ end }}