Lots of css changes, html description, whathaveyou

sass/sidebar.scss

@@ -8,7 +8,7 @@
 }
 
 #sidebar {
-  width: 8em;
+  width: 7.5em;
   height: 100%;
   top: 0;
   left: 0;
@@ -32,7 +32,8 @@
 
 .sb_link {
   margin: 0.5em;
-  padding: 0.5em;
+  padding: 0.3em;
+  margin-left: 15px;
   color:#ffffff;
   font-size:16px;
   text-decoration: none;
@@ -51,7 +52,7 @@
   margin-right: auto;
   margin-top: 10px;
   margin-bottom: 10px;
-  max-width: calc(100% - 1.2em);
+  max-width: calc(100% - 2em);
 }
 
 .sb_img img {
@@ -81,6 +82,65 @@
   color: var(--text-inv-color);
 }
 
+.sidebaricontoggle {
+  color: var(--elm-inv-bg-color);
+  position: fixed;
+  outline: 3px solid;
+  z-index: 99;
+  top: 95%;
+  right: 25px;
+  height: 0px;
+  width: 0px;
+
+  visibility: hidden;
+  cursor: crosshair;
+  opacity: 0.3;
+}
+
+.sidebaricontoggle:hover {
+  color: var(--link-color);
+  opacity: 1;
+}
+
+input[type="checkbox"]:checked ~ #sidebar {
+  transform: translatex(0);
+}
+
+input[type=checkbox] {
+  box-sizing: border-box;
+  display: none;
+}
+
+input[type=checkbox]:checked ~ .sidebaricontoggle {
+  box-sizing: border-box;
+  color: var(--link-color);
+}
+
+@media (max-width: 600px) {
+  #sidebar {
+    width: 100%;
+    transform: translateX(-100%);
+  }
+
+  .sb_segment {
+    text-align: center;
+  }
+
+  .sb_img {
+    max-width: calc(60% - 2em);
+  }
+  
+  .sb_img img {
+    max-width: calc(60% - 2em);
+  }
+
+  .sidebaricontoggle {
+    visibility: visible;
+    height: 35px;
+    width: 35px;
+  }
+}
+
 .personal { color:#fc3f5b; }
 .nixfox { color:#2abafc; }