some ui fixes

static/main.css

@@ -56,6 +56,8 @@ body {
 }
 
 .header {
+    z-index: 5;
+
     position: sticky;
     top: 0;
     display: flex;
@@ -87,7 +89,6 @@ body {
 }
 
 .header-img {
-    margin-left: 0.8em;
     height: 2em;
     width: 2em;
     object-fit: cover;
@@ -111,7 +112,8 @@ body {
 
 .form-input,
 .comment,
-.form-button {
+.form-button,
+.content {
     border: solid var(--gray) 3px;
     background: var(--black);
     border-radius: var(--border-radius);
@@ -124,6 +126,11 @@ body {
     text-decoration: none;
 }
 
+.content {
+    margin-top: 10px;
+    width: calc(var(--elem-width) - 1rem);
+}
+
 .form-button {
     font-weight: bold;
 }
@@ -134,6 +141,7 @@ body {
 }
 
 .form-message {
+    margin-top: 10px;
     font-style: italic;
 }
 
@@ -221,8 +229,8 @@ video {
     padding: 0.5rem;
     margin-bottom: 0.5rem;
 
-    width: 180px;
+    width: 135px;
-    height: 200px;
+    height: 140px;
     overflow: hidden;
 }
 .video div {
@@ -230,8 +238,9 @@ video {
     overflow: hidden;
 }
 .video img {
-    width: 180px;
+    width: 135px;
-    height: 130px;
+    height: 90px;
+    object-fit: cover;
 }
 
 .video-wrapper.full {
@@ -275,3 +284,6 @@ video {
     margin-bottom: 0.5rem;
 }
 
+.form-input {
+    font-family: system-ui, sans-serif;
+}

views/comments.ejs

@@ -1,4 +1,4 @@
-<form class='content' enctype='multipart/form-data' method='POST' action='/api/form/comment'>
+<form enctype='multipart/form-data' method='POST' action='/api/form/comment'>
     <h1 class='content-header'>Comments</h1>
     <div class='form-message'></div>
     <input name='targetId' hidden value='<%= id %>'>

views/header_block.ejs

@@ -1,6 +1,5 @@
 <div class='header'>
-    <img class="header-img" src="/static/img/logo.svg">
+    <a href='/'><img class="header-img" src="/static/img/logo.svg"></a>
-    <a class="header-link" href='/'>BiglyChat</a>
     <%if (username=='!nobody' ) { %>
         <a class="header-link" href="/client/login">Login</a>
         <% } else { %>

views/main.ejs

@@ -2,8 +2,7 @@
     <div class='banner'><img class='banner-background' src='/static/img/bg.svg'>
         <div class='banner-content'>
             <h1>BiglyChat</h1>
-            <p>Join the community for broadcasting videos to your fanbase; there is no more black box
+            <p>BiglyChat is a niche community for broadcasting videos to your fanbase, with integrated games and active developers.</p>
-                moderation where staff aren't involved members.</p>
             <h2>Community</h2>
             <%if (username=='!nobody' ) { %>
                 <a class='form-button' href="/client/register">Join the Community</a>

views/player.ejs

@@ -1,6 +1,5 @@
 <%- include('header.ejs') -%>
-    <form class='content' enctype='multipart/form-data' method='POST' action='/api/form/delete_video'>
+    <form enctype='multipart/form-data' method='POST' action='/api/form/delete_video'>
-        <h1>Video</h1>
         <div class='video-wrapper'>
             <video src='/videos/<%= videoData.id %>.webm'></video>
             <div class="progressbar">
@@ -11,26 +10,28 @@
                 <div class='full'><img src='/static/img/full.svg' class='dark'></div>
             </div>
         </div>
-        <p><b>
+
+        <div class='form-input'>
+            <b>
                 <%= videoData.title %>
             </b>
+            <p>
+                <%= (new Date(videoData.date)+'').split(/(GMT|UTC)/g)[0] %>
             </p>
-
             <div class='avatar'>
                 <img src='/pfp/<%= videoData.username %>.png' class='avatar-img'>
                 <div>
-                Created by <b><a class='link' href="/client/user?id=<%= videoData.username %>">
+                    <b><a class='link' href="/client/user?id=<%= videoData.username %>">
                             @<%= videoData.username %></a></b>
-                </a> on
+                    </a>
-                <b>
+                </div>
-                    <%= (new Date(videoData.date)+'').split(/(GMT|UTC)/g)[0] %>
-                </b>
             </div>
         </div>
         <pre class='form-input'><%= videoData.desc %></pre>
         <%if (username==videoData.username) { %>
             <input class='form-input' type='submit' value="Delete">
             <% } %>
+    </form>
     <input name='target' hidden value="<%= id %>">
     </div>
     <%- include('comments.ejs') -%>

views/user.ejs

@@ -2,7 +2,6 @@
     <form class='banner' enctype='multipart/form-data' method='POST' action='/api/form/follow'>
         <img class="banner-background" src="/pfp/<%= id %>.png">
         <div class="banner-content">
-            <h1>User</h1>
             <div class='form-message'></div>
             <div class='avatar'>
                 <img src='/pfp/<%= id %>.png' class='avatar-img'>
@@ -12,7 +11,11 @@
                 </div>
             </div>
             <input name='target' hidden value="<%= id %>">
+           
             <pre class='form-input'><%= user[0] ? user[0].bio : 'This user has not set a bio.' %></pre>
+        </div>
+    </form>
+    <div class='content'>
         <details>
             <summary>
                 <%= following.length %> following
@@ -34,7 +37,6 @@
                 <%} %>
         </details>
     </div>
-    </form>
     <h1 class='content-header'>Uploaded Videos</h1>
     <div class=' videos'>
         <%- include('videos.ejs') -%>