web/changelog: use same stylesheet for skeleton and loaded entry

web/src/components/changelog/ChangelogEntry.css

@@ -0,0 +1,94 @@
+main {
+    overflow-x: hidden;
+}
+
+#changelog-header {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: calc(var(--padding) / 2);
+    padding-bottom: 1em; /* match default <p> padding */
+}
+
+:global(#changelog-header.no-padding) {
+    padding-bottom: 0;
+}
+
+.changelog-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 14px;
+}
+
+.changelog-version {
+    padding: 3px 8px;
+    border-radius: 6px;
+    background-color: var(--secondary);
+    color: var(--primary);
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.changelog-date {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--gray);
+}
+
+.changelog-title {
+    padding: 0;
+    line-height: 1.2;
+    font-size: 23px;
+    user-select: text;
+    -webkit-user-select: text
+}
+
+:global(.changelog-banner) {
+    display: block;
+    object-fit: cover;
+    max-height: 320pt;
+    min-height: 210pt;
+    width: 100%;
+    aspect-ratio: 16/9;
+    border-radius: var(--padding);
+}
+
+:global(.changelog-banner.loading) {
+    display: none;
+}
+
+.changelog-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.contents {
+    width: 100%;
+}
+
+.contents,
+.contents :global(*) {
+    line-height: 1.7;
+    font-size: 14.5px;
+    font-weight: 410;
+    font-family: "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
+    user-select: text;
+    -webkit-user-select: text;
+}
+
+:global(ul) {
+    padding-inline-start: 30px;
+}
+
+:global(li) {
+    padding-left: 3px;
+}
+
+@media screen and (max-width: 535px) {
+    .contents,
+    .contents :global(*) {
+        font-size: 14px;
+    }
+}

web/src/components/changelog/ChangelogEntry.svelte

@@ -54,100 +54,4 @@
     </div>
 </main>
 
-<style>
+<style src="./ChangelogEntry.css"></style>
-    main {
-        overflow-x: hidden;
-    }
-
-    #changelog-header {
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        gap: calc(var(--padding) / 2);
-        padding-bottom: 1em; /* match default <p> padding */
-    }
-
-    #changelog-header.no-padding {
-        padding-bottom: 0;
-    }
-
-    .changelog-info {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 14px;
-    }
-
-    .changelog-version {
-        padding: 3px 8px;
-        border-radius: 6px;
-        background-color: var(--secondary);
-        color: var(--primary);
-        font-size: 18px;
-        font-weight: 500;
-    }
-
-    .changelog-date {
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--gray);
-    }
-
-    .changelog-title {
-        padding: 0;
-        line-height: 1.2;
-        font-size: 23px;
-        user-select: text;
-        -webkit-user-select: text
-    }
-
-    :global(.changelog-banner) {
-        display: block;
-        object-fit: cover;
-        max-height: 320pt;
-        min-height: 210pt;
-        width: 100%;
-        max-width: 100;
-        aspect-ratio: 16/9;
-        border-radius: var(--padding);
-    }
-
-    :global(.changelog-banner.loading) {
-        display: none;
-    }
-
-    .changelog-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .contents {
-        max-width: 100%;
-    }
-
-    .contents,
-    .contents :global(*) {
-        line-height: 1.7;
-        font-size: 14.5px;
-        font-weight: 410;
-        font-family: "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
-        user-select: text;
-        -webkit-user-select: text;
-    }
-
-    :global(ul) {
-        padding-inline-start: 30px;
-    }
-
-    :global(li) {
-        padding-left: 3px;
-    }
-
-    @media screen and (max-width: 535px) {
-        .contents,
-        .contents :global(*) {
-            font-size: 14px;
-        }
-    }
-</style>

web/src/components/changelog/ChangelogSkeleton.svelte

@@ -39,90 +39,4 @@
     </div>
 </main>
 
-<style>
+<style src="./ChangelogEntry.css"></style>
-    main {
-        overflow-x: hidden;
-    }
-
-    #changelog-header {
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        gap: calc(var(--padding) / 2);
-        padding-bottom: 1em; /* match default <p> padding */
-    }
-
-    .changelog-info {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 14px;
-    }
-
-    .changelog-version {
-        padding: 3px 8px;
-        border-radius: 6px;
-        background-color: var(--secondary);
-        color: var(--primary);
-        font-size: 18px;
-        font-weight: 500;
-    }
-
-    .changelog-date {
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--gray);
-    }
-
-    .changelog-title {
-        padding: 0;
-        line-height: 1.2;
-        font-size: 23px;
-        user-select: text;
-        -webkit-user-select: text
-    }
-
-    :global(#banner-skeleton) {
-        display: block;
-        max-height: 320pt;
-        min-height: 210pt;
-        width: 100%;
-        aspect-ratio: 16/9;
-        border-radius: var(--padding);
-    }
-
-    .changelog-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .contents {
-        width: 100%;
-    }
-
-    .contents,
-    .contents :global(*) {
-        line-height: 1.7;
-        font-size: 14.5px;
-        font-weight: 410;
-        font-family: "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
-        user-select: text;
-        -webkit-user-select: text;
-    }
-
-    :global(ul) {
-        padding-inline-start: 30px;
-    }
-
-    :global(li) {
-        padding-left: 3px;
-    }
-
-    @media screen and (max-width: 535px) {
-        .contents,
-        .contents :global(*) {
-            font-size: 14px;
-        }
-    }
-</style>