added auth and made some sizeable updates to mobile layout

src/assets/css/main.scss

@@ -95,6 +95,7 @@
 
 .pokedex-page {
   position: relative;
+  top: 50px;
   @media (min-width: 768px) {
     top: 100px !important;
   }
@@ -320,17 +321,21 @@ $tiers: (
 // ----------------------
 // Sticky Bar
 // ----------------------
-.sticky {
-  position: fixed;
+.search-bar {
+  position: absolute;
   bottom: 0;
   width: 100%;
   z-index: 1000;
   height: 48px;
+  transform: rotate(180deg);
 
   @media (min-width: 768px) {
     position: sticky;
     top:0;
     min-width: 45vw;
+    transform: rotate(0deg);
+    max-width: 45vw;
+    float: right;
   }
 }
 
@@ -486,10 +491,16 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
 /* can't assume only one "header" element in HTML5 */
 .header-top { 
   /* pin to top - 0 is default */
+  bottom: 0;
   /* raise z-index to cover, higher here to allow 
      a range of z-indexes in the scrolling content */
   z-index: 100;
+  transform:rotate(180deg);
   /* height overflows */
+  @media (min-width:768px) {
+    top: 0;
+    transform:rotate(0deg);
+  }
 }
 
 /* match these backgrounds to blend */
@@ -649,7 +660,10 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
   top: $padding-to-top;
   height: $hdr-topwell-height;
   width: 100%;
-  border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
+  border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
+@media (min-width:768px) {
+    border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
+}
 }
 
 /* NAV */