web/updates: fix duplicate css
This commit is contained in:
wukko
parent
5fc893a273
commit
96df9d55b8
3 changed files with 107 additions and 103 deletions
|
|
@ -1,94 +0,0 @@
|
|||
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);
|
||||
}
|
||||
|
||||
:global(.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<script lang="ts">
|
||||
import Skeleton from "$components/misc/Skeleton.svelte";
|
||||
import type { Optional } from "$lib/types/generic";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import type { Optional } from "$lib/types/generic";
|
||||
|
||||
import Skeleton from "$components/misc/Skeleton.svelte";
|
||||
|
||||
export let version: string;
|
||||
export let title: string;
|
||||
export let date: string;
|
||||
|
|
@ -31,7 +33,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<main id="changelog-parent">
|
||||
<div id="changelog-header" class:no-padding={!banner}>
|
||||
<div class="changelog-info">
|
||||
<div
|
||||
|
|
@ -59,10 +61,108 @@
|
|||
hidden={bannerLoaded}
|
||||
/>
|
||||
{/if}
|
||||
<div class="contents">
|
||||
<div class="changelog-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style src="./ChangelogEntry.css"></style>
|
||||
<style>
|
||||
/* all styles are global because of skeleton */
|
||||
|
||||
:global(#changelog-parent) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:global(#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;
|
||||
}
|
||||
|
||||
:global(.changelog-info) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
:global(.changelog-version) {
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--secondary);
|
||||
color: var(--primary);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:global(.changelog-date) {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
:global(.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;
|
||||
}
|
||||
|
||||
:global(.changelog-content) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global(.changelog-body) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.changelog-body),
|
||||
:global(.changelog-body) :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(.changelog-body ul) {
|
||||
padding-inline-start: 30px;
|
||||
}
|
||||
|
||||
:global(.changelog-body li) {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 535px) {
|
||||
:global(.changelog-body),
|
||||
:global(.changelog-body) :global(*) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
export let version: string;
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<main id="changelog-parent">
|
||||
<div id="changelog-header">
|
||||
<div class="changelog-info">
|
||||
<div class="changelog-version">{ version }</div>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
class="big changelog-banner"
|
||||
width="100%"
|
||||
/>
|
||||
<div class="contents">
|
||||
<div class="changelog-body">
|
||||
{#each {length: 3 + Math.random() * 5} as _}
|
||||
<p>
|
||||
<Skeleton
|
||||
|
|
@ -36,5 +36,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style src="./ChangelogEntry.css"></style>
|
||||
Loading…
Reference in a new issue