redo navbar burger using flexbox and add transition on close

Author: mojavelinux

src/css/header.css

@@ -153,33 +153,31 @@ body {
   width: 3rem;
   margin-left: auto;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .navbar-burger span {
   background: var(--navbar-font-color);
-  display: block;
-  height: 1px;
-  left: 50%;
-  margin-left: -7px;
-  position: absolute;
-  top: 50%;
+  height: 1.5px;
   width: 1rem;
 }
 
-.navbar-burger span:nth-child(1) {
-  margin-top: -6px;
+.navbar-burger:not(.is-active) span {
+  transition: transform ease-out 0.25s, opacity 0s 0.25s, margin-top ease-out 0.25s 0.25s;
 }
 
-.navbar-burger span:nth-child(2) {
-  margin-top: -1px;
+.navbar-burger span + span {
+  margin-top: 0.25rem;
 }
 
-.navbar-burger span:nth-child(3) {
-  margin-top: 4px;
+.navbar-burger.is-active span + span {
+  margin-top: -1.5px;
 }
 
 .navbar-burger.is-active span:nth-child(1) {
-  margin-left: -5px;
   transform: rotate(45deg);
 }
 
@@ -188,7 +186,6 @@ body {
 }
 
 .navbar-burger.is-active span:nth-child(3) {
-  margin-left: -5px;
   transform: rotate(-45deg);
 }