Fix/194 banner on mobile (#198)

* fix (#194): update mobile banner styles

* feature: add responsive mixin for future styles

Author: bencodezen

src/.vuepress/components/BetaBanner.vue

@@ -6,9 +6,32 @@ export default {}
   <aside class="beta-banner">
     <p>
       ⚠️ Beta Version: Docs are still under development and are subject to
-      change. ⚠️
+      change.
     </p>
   </aside>
 </template>
 
-<style></style>
+<style lang="scss" scoped>
+.beta-banner {
+  position: fixed;
+  z-index: 20;
+  top: 3.6rem;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fffedb;
+  box-sizing: border-box;
+  border-bottom: 1px solid #eaecef;
+  font-weight: bold;
+  text-align: center;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+  p {
+    margin: 0;
+    line-height: 1.4;
+  }
+}
+</style>

src/.vuepress/styles/index.styl

@@ -125,21 +125,6 @@
   }
 }
 
-.beta-banner
-  position fixed
-  z-index 20
-  top $navbarHeight
-  left 0
-  right 0
-  height 3rem
-  display flex
-  align-items center
-  justify-content center
-  background-color #fffedb
-  box-sizing border-box
-  border-bottom 1px solid $borderColor
-  font-weight bold
-
 .scrimba,
 .vueschool {
   background-color: #e7ecf3;

src/.vuepress/theme/styles/index.styl

@@ -47,7 +47,7 @@ body
   position fixed
   z-index 10
   margin 0
-  top $navbarHeight
+  top 6.6rem // $navbarHeight + $betaBannerHeight
   left 0
   bottom 0
   box-sizing border-box

src/.vuepress/theme/styles/mixins.scss

@@ -0,0 +1,5 @@
+@mixin breakpoint($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}

src/.vuepress/theme/styles/mobile.styl

@@ -13,7 +13,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
 // wide mobile
 @media (max-width: $MQMobile)
   .sidebar
-    top 0
+    top $navbarHeight
     padding-top $navbarHeight
     transform translateX(-100%)
     transition transform .2s ease