Add noscript for browsers without JS (#2592)

* Make OwncastLogo more versatile

* Add noscript tag

* Commit updated API documentation

* Show all content on vertical overflow

---------

Co-authored-by: Owncast <owncast@owncast.online>

web/components/ui/Noscript/Noscript.module.scss

@@ -0,0 +1,50 @@
+@import '../../../styles/mixins.scss';
+
+.noscript {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2em;
+  font-size: large;
+  background-color: var(--theme-color-background-main);
+  z-index: 999;
+
+  h2 {
+    margin-top: 25px;
+    margin-bottom: 5px;
+    font-weight: bold;
+    font-size: inherit;
+  }
+}
+
+// Necessary in case content y-overflows becuase
+// align-items: center would otherwise hide some
+// of the content
+.scrollContainer {
+  max-height: 100%;
+  overflow: auto;
+}
+
+.content {
+  max-width: 100%;
+  width: 70ch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 70%;
+
+  // For some weir reason, the logo isn't displayed on screens <= 767px.
+  // This coincides with the tablet breakpoint, but god knows what exactly
+  // the issue is. Since it's just a design element, just hide the logo on
+  // those smaller screens. For more information, see
+  // https://github.com/owncast/owncast/pull/2592
+  @include screen(tablet) {
+    display: none;
+  }
+}