Merge pull request #291 from ComSSA/feat/new-website-banner

Update with note

Author: s3ansh33p

components/Banner.vue

@@ -1,6 +1,34 @@
 <template>
-  <div class="w-100" style="position: fixed; background: #4559A7; height: 20px; z-index: 1;">
-    <a href="https://new.comssa.org.au" style="color: white; text-align: center; display: block; padding: 2px 0; font-size: 12px; font-weight: 400;">
-      Click here to see our new website!</a>
+  <div class="w-100 banner">
+    <a href="https://new.comssa.org.au">
+      <span>Click here to see our new website!</span>
+      <span>Note: WIP, please give us feedback!</span>
+    </a>
   </div>
 </template>
+
+<style>
+  .banner {
+    position: fixed;
+    background: #4559A7;
+    height: 40px;
+    z-index: 1;
+  }
+  .banner a {
+    color: white;
+    text-align: center;
+    display: flex;
+    padding: 2px 0;
+    font-size: 12px;
+    font-weight: 400;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  @media (min-width: 576px) {
+    .banner a {
+      flex-direction: row;
+      gap: 10px;
+    }
+  }
+</style>

components/NavBar.vue

@@ -70,6 +70,11 @@ export default {
 
 <style scoped>
   .navbar {
-    top: 20px;
+    top: 40px;
+  }
+  @media (min-width: 576px) {
+    .navbar {
+      top: 20px;
+    }
   }
 </style>