Change Colorscheme Toggle Button to be floating (#466)

* Moved colour scheme toggle and squashed commits (#433)

Co-authored-by: Luiz F. A. de Prá <luizdepra@users.noreply.github.com>

* Fix toggle button code

* Add built CSS files

Co-authored-by: Jian Liew <jianloongliew@gmail.com>

assets/scss/_float.scss

@@ -0,0 +1,25 @@
+.float-container {
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 100;
+  position: fixed;
+  font-size: 1.6em;
+  a {
+    display: block;
+    color: $alt-fg-color;
+    background-color: $alt-bg-color;
+    font-size: 2.0rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    opacity: 50%;
+    transition: opacity 0.5s, color 0.5s;
+    &:hover, &:focus {
+      color: $link-color;
+      opacity: 100%;
+      @media only screen and (max-width : 768px) {
+        color: $alt-fg-color;
+        opacity: 50%;
+      }
+    }
+  }
+}

assets/scss/_float_dark.scss

@@ -0,0 +1,24 @@
+@mixin float_dark {
+  .float-container {
+    a {
+      color: $alt-fg-color-dark;
+      background-color: $alt-bg-color-dark;
+      &:hover, &:focus {
+        color: $link-color-dark;
+        @media only screen and (max-width : 768px) {
+          color: $alt-fg-color-dark;
+        }
+      }
+    }
+  }
+}
+
+body.colorscheme-dark {
+  @include float_dark()
+}
+
+ body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include float_dark()
+  }
+}

assets/scss/_navigation.scss

@@ -74,6 +74,10 @@
     margin: 1.7rem 0;
     font-size: 2.4rem;
     line-height: inherit;
+    bottom: 2rem;
+    left: 2rem;
+    z-index: 100;
+    position: fixed;
   }
   #menu-toggle {
     display: none;

assets/scss/coder-dark.scss

@@ -3,3 +3,4 @@
 @import "content_dark";
 @import "navigation_dark";
 @import "footer_dark";
+@import "float_dark";

assets/scss/coder.scss

@@ -4,3 +4,4 @@
 @import "navigation";
 @import "pagination";
 @import "footer";
+@import "float";