Update dev server

resources/styles/main.css

@@ -910,19 +910,22 @@ a:active {
   }
 }
 
-.dropdown {
+#drawer {
   position: fixed;
+  bottom: 0;
+  right: 0;
   z-index: 2;
   background: linear-gradient(to left bottom, #1d60b5, #003e86);
-  width: 100%;
+  width: 0;
   height: 90vh;
-  -webkit-animation: drawer-open 550ms;
+  display: flex;
-  animation: drawer-open 550ms;
   flex-direction: column;
   align-items: center;
+  transition: width 500ms;
 }
-.dropdown .dropdown-nav-item {
+#drawer .drawer-item {
   position: relative;
+  opacity: 0;
   margin-top: 50px;
   background: linear-gradient(#FFFFFF, #adf0ff);
   -webkit-background-clip: text;
@@ -930,13 +933,12 @@ a:active {
   color: transparent;
   font: 600 28px "Montserrat", sans-serif;
   text-decoration: none;
-  -webkit-animation: navbar-appear 550ms;
+  transition: opacity 250ms ease-in-out;
-  animation: navbar-appear 550ms;
 }
-.dropdown .dropdown-nav-item:first-of-type {
+#drawer .drawer-item:first-of-type {
   margin-top: 100px;
 }
-.dropdown .dropdown-nav-item:after {
+#drawer .drawer-item:after {
   content: "";
   position: absolute;
   width: 100%;
@@ -948,114 +950,23 @@ a:active {
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
 }
-.dropdown .dropdown-nav-item:hover:after {
+#drawer .drawer-item:hover:after {
   transform: scaleX(1);
   transform-origin: bottom left;
 }
+#drawer .drawer-item.visible {
+  opacity: 1;
+}
+#drawer.expanded {
+  width: 100%;
+  top: unset;
+}
 @media screen and (max-width: 850px) {
-  .dropdown {
+  #drawer {
     height: calc(100vh - 45px);
   }
 }
 
-.dropdown_close_animation {
-  -webkit-animation: drawer-close 550ms;
-  animation: drawer-close 550ms;
-}
-
-.dropdown-nav-item_close_animation {
-  -webkit-animation: navbar-disappear 550ms;
-  animation: navbar-disappear 550ms;
-}
-
-@-webkit-keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@-webkit-keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
 #container {
   min-height: 90vh;
   display: grid;
@@ -1069,6 +980,9 @@ a:active {
     min-height: calc(100vh - 45px);
   }
 }
+#container.hidden {
+  display: none;
+}
 
 #content {
   background: whitesmoke;
@@ -1080,7 +994,6 @@ a:active {
 #scroll-to-top {
   width: 50px;
   height: 50px;
-  display: none;
   position: fixed;
   right: 25px;
   bottom: 55px;