web/updates: make changelogs look nicer

- fixes horizontal scrolling on mobile
- removes text backdrop
- improves readability

web/src/components/misc/ChangelogEntry.svelte

@@ -2,15 +2,17 @@
     export let version: string;
     export let title: string;
     export let date: string;
-    export let banner: { file: string, alt: string } | undefined;
+    export let banner: { file: string; alt: string } | undefined;
 </script>
 
 <main>
-    <h1>
-        <div class="changelog-version">{ version }</div>
-        <div class="changelog-title">{ title }</div>
-    </h1>
-    <small>{ date }</small>
+    <div id="changelog-header">
+        <div class="changelog-info">
+            <div class="changelog-version">{version}</div>
+            <div class="changelog-date">{date}</div>
+        </div>
+        <h1 class="changelog-title">{title}</h1>
+    </div>
     <div class="changelog-content">
         {#if banner}
             <img
@@ -27,53 +29,53 @@
 
 <style>
     main {
-        padding: 1em;
+        overflow-x: hidden;
     }
 
-    img {
-        max-width: 100%;
-    }
-
-    h1 {
-        padding-top: 1em;
-    }
-
-    .contents :global(.text-backdrop) {
-        border-radius: 4px;
-        background-color: var(--button);
-        color: var(--background);
-        padding: 0.3rem;
-    }
-
-    .contents :global(.text-backdrop.link) {
-        text-decoration: underline;
-    }
-
-    h1 {
+    #changelog-header {
         display: flex;
         flex-direction: column;
         align-items: start;
+        gap: calc(var(--padding) / 2);
+        padding: 1em 0; /* match default <p> padding */
     }
 
-    h1 .changelog-version {
-        padding: .15rem .5rem;
-        border-radius: 4px;
-        background-color: var(--button-hover);
+    .changelog-info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 14px;
     }
 
-    h1 .changelog-title {
-        padding: .15rem 0;
-        text-align: left;
+    .changelog-version {
+        padding: 3px 8px;
+        border-radius: 6px;
+        background-color: var(--secondary);
+        color: var(--primary);
+        font-size: 21px;
+        font-weight: 500;
+    }
+
+    .changelog-date {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--gray);
+    }
+
+    .changelog-title {
+        padding: 0;
+        line-height: 1.2;
     }
 
     .changelog-banner {
-        padding: 2em;
-        width: 100%;
-        max-height: 300pt;
-        min-height: 210pt;
         display: block;
         object-fit: cover;
+        max-height: 320pt;
+        min-height: 210pt;
+        width: 100%;
+        max-width: 100;
         aspect-ratio: 16/9;
+        border-radius: var(--padding);
     }
 
     .changelog-content {
@@ -84,5 +86,7 @@
 
     .contents {
         max-width: 100%;
+        line-height: 1.5;
+        font-size: 15px;
     }
 </style>

web/src/components/misc/ChangelogEntryWrapper.svelte

@@ -1,9 +1,9 @@
 <!-- Workaround for https://github.com/pngwn/MDsveX/issues/116 -->
 <script lang="ts">
     import ChangelogEntry from "./ChangelogEntry.svelte";
-    export let version = '';
-    export let title = '';
-    export let date = '';
+    export let version = "";
+    export let title = "";
+    export let date = "";
     export let banner = undefined;
 </script>