web/ChangelogEntry: initial css

web/src/components/misc/ChangelogEntry.svelte

@@ -5,11 +5,15 @@
     export let banner: { file: string, alt: string } | undefined;
 </script>
 <style>
+    main {
+        padding: 1em;
+    }
+
     img {
         max-width: 100%;
     }
 
-    h1, h2 {
+    h1 {
         padding-top: 1em;
     }
 
@@ -23,14 +27,61 @@
     .contents :global(.text-backdrop.link) {
         text-decoration: underline;
     }
+
+    h1 {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+    }
+
+    h1 .changelog-version {
+        padding: .15rem .5rem;
+        border-radius: 4px;
+        background-color: var(--button-hover);
+    }
+
+    h1 .changelog-title {
+        padding: .15rem 0;
+        text-align: left;
+    }
+
+    .changelog-banner {
+        padding: 2em;
+        width: 100%;
+        max-height: 300pt;
+        min-height: 210pt;
+        display: block;
+        object-fit: cover;
+        aspect-ratio: 16/9;
+    }
+
+    .changelog-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .contents {
+        max-width: 100%;
+    }
+
 </style>
-<div>
+<main>
-    <h1>{ version }: { title }</h1>
+    <h1>
-    <h2>{ date }</h2>
+        <div class="changelog-version">{ version }</div>
+        <div class="changelog-title">{ title }</div>
+    </h1>
+    <small>{ date }</small>
+    <div class="changelog-content">
         {#if banner}
-        <img src={`/update-banners/${banner.file}`} alt={banner.alt} />
+            <img
+                src={`/update-banners/${banner.file}`}
+                alt={banner.alt}
+                class="changelog-banner"
+            />
         {/if}
         <div class="contents">
             <slot></slot>
         </div>
-</div>
+    </div>
+</main>