frontend: improve readability and css

frontend/public/global.css

@@ -7,16 +7,27 @@
 	src: url('assets/woff2/iosevka-aile-regular.woff2') format('woff2');
 }
 
+@font-face {
+	font-family: 'Iosevka Aile Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('assets/woff2/iosevka-aile-bold.woff2') format('woff2');
+}
+
 :root {
 	--background-color-1: hsl(180, 11%, 7%);
 	--background-color-2: hsl(180, 11%, 12%);
-	--foreground-color-1: hsl(0, 0%, 100%);
+	--foreground-color-1: rgb(253, 254, 255);
-	--foreground-color-2: hsl(0, 0%, 60%);
+	--foreground-color-2: rgb(218, 219, 220);
+	--foreground-color-3: rgb(153, 154, 155);
 
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));
 	--space-xs: calc(0.5 * var(--space-unit));
 	--space-sm: calc(0.75 * var(--space-unit));
+	--space-norm: var(--space-unit);
 	--space-md: calc(1.25 * var(--space-unit));
 	--space-lg: calc(2 * var(--space-unit));
 	--space-xl: calc(3.25 * var(--space-unit));
@@ -26,6 +37,7 @@
 	--radius-xxs: calc(0.25 * var(--radius-unit));
 	--radius-xs: calc(0.5 * var(--radius-unit));
 	--radius-sm: calc(0.75 * var(--radius-unit));
+	--radius-norm: var(--radius-unit);
 	--radius-md: calc(1.25 * var(--radius-unit));
 	--radius-lg: calc(2 * var(--radius-unit));
 	--radius-xl: calc(3.25 * var(--radius-unit));

frontend/src/components/pages/main/ChannelView.svelte

@@ -47,6 +47,8 @@
 
 <style>
     .main-container {
+        background-color: var(--background-color-1);
+        overflow: hidden;
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -57,7 +59,6 @@
         height: 3.4em;
         width: 100%;
         padding: var(--space-xs);
-        background-color: var(--background-color-1);
         display: flex;
         align-items: center;
         border-bottom: 1px solid var(--background-color-2);
@@ -69,8 +70,7 @@
 
     .message-input-container {
         width: 100%;
-        padding: var(--space-md);
+        padding: var(--space-norm);
-        background-color: var(--background-color-1);
     }
 
     .message-input {

frontend/src/components/pages/main/Main.svelte

@@ -10,6 +10,7 @@
         height: 100vh;
         display: flex;
         flex-direction: row;
+        overflow: hidden;
     }
 
     .fullscreen-message {

frontend/src/components/pages/main/Messages.svelte

@@ -48,24 +48,41 @@
 
 <style>
     .messages-container {
-        padding: var(--space-sm);
+        padding: var(--space-norm);
+        padding-bottom: 0;
+        padding-top: 0;
         height: 100%;
         width: 100%;
         flex-grow: 0;
         overflow-y: auto;
+        overflow-x: hidden;
         background-color: var(--background-color-1);
     }
 
-    .pending {
+    .message {
+        overflow-x: none;
+        word-break: break-all;
+    }
+
+    .message-content {
         color: var(--foreground-color-2);
     }
+
+    .pending {
+        color: var(--foreground-color-3);
+    }
+
+    .author {
+        font-weight: bold;
+        margin-right: var(--space-xxs);
+    }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
     {#each $messages as message (message.id)}
-        <div>
+        <div class="message">
-            <b>{ message.author_username }</b>
+            <span class="author">{ message.author_username }</span>
-            <span class:pending={ message._isPending }>{ message.content }</span>
+            <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
         </div>
     {/each}
 </div>