diff --git a/.vuepress/scss/_layout.scss b/.vuepress/scss/_layout.scss index 5be2714..8462df8 100644 --- a/.vuepress/scss/_layout.scss +++ b/.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; } } diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue index 0e42b22..ad8333a 100644 --- a/.vuepress/theme/Layout.vue +++ b/.vuepress/theme/Layout.vue @@ -226,9 +226,10 @@ -
+
- This website is in beta. We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!
This website is open source and you can contribute to it on Github. +

This website is in beta. We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!
This website is open source and you can contribute to it on Github.

+
@@ -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)