Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/ChangelogEntry: initial css

Browse source
This commit is contained in:
dumbmoron 2024-07-16 17:19:17 +00:00
parent 766482c21a
commit a22b0e5136
No known key found for this signature in database
1 changed files with 61 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
web/src/components/misc/ChangelogEntry.svelte
View file

@ -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>
<h1>{ version }: { title }</h1>
<h2>{ date }</h2>
{#if banner}
<img src={`/update-banners/${banner.file}`} alt={banner.alt} />
{/if}
<div class="contents">
<slot></slot>
<main>
<h1>
<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}
class="changelog-banner"
/>
{/if}
<div class="contents">
<slot></slot>
</div>
</div>
</div>
</main>