1 files changed, 70 insertions, 10 deletions
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index f555ce99..705c0824 100755
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -2,7 +2,7 @@
 /* NAV BAR */
 
 #nav {
-  position: absolute;
+  position: fixed;
   top: 0; left: 0;
   width: 249px;
   -webkit-transform: translateZ(0) translateX(-249px);
@@ -10,7 +10,7 @@
   background: #fff;
 }
 #content {
-  position: absolute;
+  position: fixed;
   top: 0; left: 0;
   width: 100%; height: 100%;
   overflow: hidden;
@@ -23,6 +23,10 @@
 .nav #content {
   -webkit-transform: translateZ(0) translateX(249px);
 }
+.accessible #nav,
+.accessible #content {
+  position: absolute;
+}
 #nav .logo {
   background-image: url(../img/small-logo.png);
   background-repeat: no-repeat;
@@ -85,19 +89,62 @@
 
 #nav .social {
   position: absolute;
-  bottom: 0;
+  top: calc(100vh - 48px);
   left: 0;
   border-top: 1px solid #ddd;
+  display: flex;
+  flex-direction: row;
 }
 #nav .social span {
   display: block;
-  float: left;
   width: 61px;
   border-left: 1px solid #ddd;
   color: #666;
   font-size: 1.125rem;
-  padding: 5px 0;
+  height: 48px;
   text-align: center;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+#nav .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  -webkit-transition: all ease 200ms;
+  -moz-transition: all ease 200ms;
+  -o-transition: all ease 200ms;
+  transition: all ease 200ms;
+}
+#nav .close:after,
+#nav .close:before {
+  content: "";
+  height: 1px;
+  width: 24px;
+  background: #888;
+  position: absolute;
+  left: 25%;
+  top: 50%;
+}
+#nav .close:before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+#nav .close:after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 #nav-container {
@@ -198,7 +245,8 @@ padding-bottom:0px;
 /* HEADER AND FOOTER ON MOST PAGES */
 
 #header {
-  display: block;
+  display: flex;
+  justify-content: space-between;
   position: absolute;
   top: 0; left: 0; width: 100%;
   height: 48px;
@@ -216,9 +264,15 @@ padding-bottom:0px;
   top:0px;
 }
 #header .burger {
-  display: inline-block;
+  display: flex;
   font-size: 24px;
-  padding: 12px 13px 7px;
+  width: 48px;
+  height: 48px;
+  padding-top: 4px;
+  box-sizing: border-box;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
 }
 
 #header .cart_rapper {
@@ -268,7 +322,7 @@ padding-bottom:0px;
 
 #footer {
   display: block;
-  position: absolute;
+  position: fixed;
   bottom: 0; left: 0; width: 100%;
   background: #fff;
   border-top: 1px solid #ddd;
@@ -296,13 +350,16 @@ padding-bottom:0px;
 #footer .ok.disabled {
   color: #666;
 }
+.accessible #footer {
+  position: absolute;
+}
 
 
 /* CURTAIN FOR LOGIN AND SELECTOR VIEWS */
 
 #curtain {
   pointer-events: none;
-  position: absolute;
+  position: fixed;
   top: 0; left: 0;
   width: 100%; height: 100%;
   background: rgba(255,255,255,0.8);
@@ -312,6 +369,9 @@ padding-bottom:0px;
   -webkit-transform: translateZ(0) translateX(0);
   transform: translateZ(0) translateX(0);
 }
+.accessible #curtain {
+  position: absolute;
+}
 #curtain.visible {
   pointer-events: auto;
   opacity: 1;