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; export let banner: { file: string, alt: string } | undefined;
</script> </script>
<style> <style>
main {
padding: 1em;
}
img { img {
max-width: 100%; max-width: 100%;
} }
h1, h2 { h1 {
padding-top: 1em; padding-top: 1em;
} }
@ -23,14 +27,61 @@
.contents :global(.text-backdrop.link) { .contents :global(.text-backdrop.link) {
text-decoration: underline; 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> </style>
<div> <main>
<h1>{ version }: { title }</h1> <h1>
<h2>{ date }</h2> <div class="changelog-version">{ version }</div>
{#if banner} <div class="changelog-title">{ title }</div>
<img src={`/update-banners/${banner.file}`} alt={banner.alt} /> </h1>
{/if} <small>{ date }</small>
<div class="contents"> <div class="changelog-content">
<slot></slot> {#if banner}
<img
src={`/update-banners/${banner.file}`}
alt={banner.alt}
class="changelog-banner"
/>
{/if}
<div class="contents">
<slot></slot>
</div>
</div> </div>
</div> </main>