adding the news, man

ui/html/base.html

@@ -22,17 +22,18 @@
             <nav>
                 <a href="/"><h1 class="maintitle">Alfheim</h1></a>
                 <div class="navbuttons">
-                {{if not .ActiveSubscription}}
-                <a href="/subscribe"><div class="loginbutton"><strong>Subscribe</strong></div></a>
-                {{end}}
+                    <a href="/news"><div class="alfheimbutton"><strong>News</strong></div></a>
+                    {{if not .ActiveSubscription}}
+                    <a href="/subscribe"><div class="alfheimbutton"><strong>Subscribe</strong></div></a>
+                    {{end}}
 
-                {{if .AuthenticatedUser}}
-                <a href="/account"><div class="loginbutton"><strong>Account</strong></div></a>
-                <a href="/logout"><div class="loginbutton"><strong>Log out</strong></div></a>
-                {{else}}
-                <a href="/login"><div class="loginbutton"><strong>Log in</strong><img src="/static/login_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt=""/></div></a>
-                <a href="/register"><div class="loginbutton"><strong>Register</strong></div></a>
-                {{end}}
+                    {{if .AuthenticatedUser}}
+                    <a href="/account"><div class="alfheimbutton"><strong>Account</strong></div></a>
+                    <a href="/logout"><div class="alfheimbutton"><strong>Log out</strong></div></a>
+                    {{else}}
+                    <a href="/login"><div class="alfheimbutton"><strong>Log in</strong><img src="/static/login_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt=""/></div></a>
+                    <a href="/register"><div class="alfheimbutton"><strong>Register</strong></div></a>
+                    {{end}}
                 </div>
             </nav>
         </header>

ui/static/style.css

@@ -22,9 +22,9 @@ body {
     min-height: 100%;
 }
 
-header {
+/* header {
 
-}
+} */
 
 nav {
     padding-left: 8px;
@@ -50,7 +50,7 @@ nav {
     }
 }
 
-.loginbutton {
+.alfheimbutton {
     align-self: center;
     display: flex;
     border: 12px solid;
@@ -90,9 +90,10 @@ p {
     border-radius: 15px;
     padding: 30px 40px;
     font-size: 1.5rem;
+    margin: 10px;
 }
 
-.wrapper {
+/* .wrapper {
     display: inline-block;
     background: transparent;
     border: 2px solid white;
@@ -102,6 +103,27 @@ p {
     padding: 30px 40px;
     width: 80%;
     text-align: center;
+    margin: 10px;
+} */
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    background: transparent;
+    border: 2px solid white;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border-radius: 15px;
+    padding: 30px 40px;
+    width: 80%;
+    text-align: center;
+    margin: 10px;
+}
+
+.wrapper form {
+    width: 100%; /* make each form stretch full width */
 }
 
 .wrapper h1 {