Closes #54

.vuepress/scss/_layout.scss

@@ -74,13 +74,21 @@ h1, h2, h3, h4, h5 {
 }
 
 .alert {
+  top: 4rem; left: 0;
+
   background-color: $yellow;
   line-height: 1.33;
   padding-top: 1rem;
   padding-right: env(safe-area-inset-right);
   padding-bottom: 1rem;
   padding-left: env(safe-area-inset-left);
+  position: absolute;
   text-align: center;
+  width: 100%;
+
+  > div:first-of-type {
+    position: relative;
+  }
 
   @media (min-width: 901px) {
     font-size: 1rem;
@@ -90,7 +98,33 @@ h1, h2, h3, h4, h5 {
     font-size: 0.8rem;
   }
 
+  p, button {
+    display: inline-block;
+  }
+
+  p {
+    padding-right: 1rem;
+    width: calc(100% - 2.25rem);
+  }
+
   a {
     font-weight: 600;
+    text-decoration: underline;
+  }
+
+  button {
+    width: 1.25rem; height: 1.25rem;
+    top: 0; right: 0;
+
+    background-color: $white;
+    border-radius: 50%;
+    display: block;
+    font-size: 1rem;
+    line-height: 1;
+    margin-right: 1rem;
+    margin-left: 1rem;
+    padding-left: 1px;
+    position: absolute;
+    text-align: center;
   }
 }

.vuepress/theme/Layout.vue

@@ -226,9 +226,10 @@
       <EmailSubscribe></EmailSubscribe>
     </section>
 
-    <section class="alert">
+    <section class="alert" id="alert-beta">
       <div class="inner-wrap">
-        <strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.
+        <p><strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.</p>
+        <button id="close-alert">&times;</button>
       </div>
     </section>
 
@@ -292,6 +293,21 @@ export default {
     }
     this.$watch('$page', updateMeta)
     updateMeta()
+
+
+
+    // Toggle beta message
+    if (
+      localStorage.getItem("hide lbry alert") &&
+      localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason
+    ) {
+      document.querySelector("#alert-beta").style.display = "none";
+    }
+
+    document.querySelector("#close-alert").onclick = function () {
+      localStorage.setItem("hide lbry alert", true);
+      document.querySelector("#alert-beta").style.display = "none";
+    };
   },
   beforeDestroy () {
     updateMetaTags(null, this.currentMetaTags)