Improve styling

* Use a lighter font for large texts
* Align server message & audio controls
* Add spacing between mini progress bar & action message

Author: D4isDAVID

CHANGELOG.md

@@ -14,6 +14,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Better shutdown for `qbx_core`.
 - Preview in regular browsers.
 
+### Changed
+
+- Improved styling.
+  - Used a lighter font for large texts.
+  - Aligned the server message & audio controls at the top.
+  - Added spacing between the mini progress bar & its action message.
+
 ### Fixed
 
 - Invalid event data typing for `endDataFileEntries`.

html/style.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
 
 * {
     margin: 0 0;
@@ -28,6 +28,10 @@ html {
     transition: background-image 2s;
 }
 
+h1 {
+    font-weight: 300;
+}
+
 progress {
     appearance: none;
     overflow: hidden;
@@ -74,7 +78,7 @@ progress {
     width: 90vw;
     display: flex;
     flex-direction: row;
-    align-items: start;
+    align-items: center;
     justify-content: space-between;
 }
 
@@ -141,6 +145,7 @@ progress {
     flex-direction: column;
     align-items: start;
     justify-content: space-between;
+    gap: 0.25rem;
 }
 
 #mini-progress-wrapper {