history: sidebar styling

history.html

@@ -14,20 +14,44 @@
       #sidebarhandle {
         cursor: pointer;
         font-family: sans;
-        font-size: 18pt;
+        font-size: 20pt;
         position: absolute;
-        right: -1.4em;
+        right: -0.9em;
         top: 2em;
         z-index: 10;
-        background: rgba(255, 255, 255, 0.6);
-        width: 1.5em;
-        padding: 0.25em 0;
+        background: rgba(255, 255, 255, 0.9);
+        height: 1.8em;
+        width: 1.8em;
+        border-radius: 0.9em;
+        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
         text-align: center;
-        border-radius: 0 0.5em 0.5em 0;
+        display: table;
+        transition: right 0.5s;
+      }
+
+      #sidebar.hidden #sidebarhandle {
+        right: -2.5em;
+      }
+
+      #sidebarhandle span {
+        display: table-cell;
+        vertical-align: middle;
+        font-family: "ionicons";
+        transition: transform 0.5s;
+      }
+
+      #sidebarhandle span:after {
+        padding-right: 0.125em;
+        content: "\f124";
+      }
+
+      #sidebar.hidden #sidebarhandle span {
+        transform: scale(-1, 1);
       }
 
       #sidebarhandle:hover {
-        background: rgba(255, 255, 255, 1);
+        background: white;
+        color: #dc0067;
       }
 
       .hostname {
@@ -46,17 +70,16 @@
       }
 
       #sidebar {
-        max-width: 50em;
+        z-index: 5;
+        width: 50em;
         box-sizing: border-box;
         position: relative;
+        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
       }
 
       #sidebar.hidden {
-        width: 0px;
-      }
-
-      #sidebar.hidden #lists {
-        display: none;
+        position: relative;
+        margin-left: -50em;
       }
 
       #lists {
@@ -84,7 +107,6 @@
 
       @media screen and (max-width: 80em) {
         #sidebar {
-          max-width: 50vw;
           font-size: 0.8em;
         }
       }
@@ -96,6 +118,7 @@
 
         #lists {
           overflow: visible;
+          height: auto;
         }
 
         #sidebarhandle {
@@ -107,7 +130,8 @@
         }
 
         #sidebar {
-          max-width: none;
+          margin-left: 0em !important;
+          width: auto;
           height: auto;
         }
 
@@ -136,7 +160,7 @@
       </div>
       <div id="sidebar">
         <div id="sidebarhandle">
-         ✕
+          <span></span>
         </div>
         <div id="lists">
           <p>