Use floating card for nav (#12)

diff --git a/src/components/menu.css b/src/components/menu.css
index f3d13cc65eeb3a6f19b1a1b45ba95070e4dd4ef7..2cb2a410bc96af220998dcc24cd696fcf16505a4 100644 (file)
--- a/src/components/menu.css
+++ b/src/components/menu.css
@@ -1,14 +1,15 @@
 .Menu {
   color: #333;
-  width: 30em;
+  padding: 1em;
+  width: 20em;
   height: 100vh;
-  right: -30em;
+  right: -22em;
   position: fixed;
-  transition: right 0.2s cubic-bezier(0.16, 0.7, 0.53, 1.18);
+  transition: right 0.2s;
 }
 
 .isNavOpen .Menu {
-  right: -10em;
+  right: 0;
 }
 
 .Menu-Closer {
@@ -42,17 +43,15 @@
 
 .isNavOpen .Menu-Button {
   color: inherit;
-  box-shadow: 0 0 0 0.2em #333 inset;
+  box-shadow: 0 0 0 1em #ccc inset;
 }
 
 .Menu-Body {
   z-index: 9;
   position: fixed;
-  width: 30em;
-  height: 100%;
+  width: 20em;
   box-sizing: border-box;
-  border-radius: 1em 0 0 1em;
-  border-right: 10em solid #fff;
+  border-radius: 1em;
   padding: 2em;
   background-color: #fff;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
@@ -75,7 +74,11 @@
 }
 
 .Menu ul li {
-  margin: 1em 0;
+  margin: 1em 0 0 0;
+}
+
+.Menu hr {
+  margin-top: 1em;
 }
 
 .Menu a:hover {
@@ -84,6 +87,7 @@
 
 @media (max-width: 25em) {
   .Menu {
+    padding: 0;
     width: 100%;
     right: -100%;
     transition: right 0.2s;
@@ -95,6 +99,7 @@
 
   .Menu-Body {
     width: 100%;
+    height: 100%;
     border: 0;
     border-radius: 0;
   }