diff --git a/history.html b/history.html index 6f6441f..b8d72ff 100644 --- a/history.html +++ b/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 @@