164 lines
3.8 KiB
Svelte
164 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
import { type BannerContent } from './components/banner-content';
|
|
|
|
let {
|
|
content,
|
|
}: {
|
|
content: BannerContent;
|
|
} = $props();
|
|
|
|
</script>
|
|
|
|
{#snippet titles()}
|
|
<div class="title-container">
|
|
<div class="title-text-container">
|
|
<h1 class="title">{content.title}</h1>
|
|
|
|
{#if content.subtitle}
|
|
<p class="subtitle">[ {content.subtitle} ]</p>
|
|
{/if}
|
|
|
|
{#if content.tags && content.tags.length > 0}
|
|
<div class="tag-container">
|
|
{#each content.tags as tag}
|
|
<span class="post-tag">{tag}</span>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{#if content.date || content.dateUpdated || content.dateIndeterminate}
|
|
<div class="date-container">
|
|
{#if content.dateIndeterminate && content.dateIndeterminate != "undefined"}
|
|
<p class="date">:: {content.dateIndeterminate}</p>
|
|
{/if}
|
|
|
|
{#if content.date && content.date != "undefined"}
|
|
<p class="date">posted :: {content.date}</p>
|
|
{/if}
|
|
|
|
{#if content.dateUpdated && content.dateUpdated != "undefined"}
|
|
<p class="date">last updated :: {content.dateUpdated}</p>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/snippet}
|
|
|
|
<div class="container">
|
|
{#if content.banner && content.banner !== ""}
|
|
<a class="banner-container" href={content.banner}>
|
|
<img class="banner {content.pixelated ? "pixelated-img" : ""}" src={content.banner} alt={content.bannerAlt}>
|
|
</a>
|
|
{/if}
|
|
|
|
{@render titles()}
|
|
<hr>
|
|
</div>
|
|
|
|
<style>
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
.banner-container {
|
|
max-height: 300px;
|
|
height: 300px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
.banner {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: scale var(--duration-animation) var(--anim-curve);
|
|
}
|
|
|
|
.banner-container:hover .banner {
|
|
scale: 1.04;
|
|
}
|
|
|
|
.title-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* align-items: flex-end; */
|
|
gap: 16px;
|
|
margin: 4px 0 8px;
|
|
}
|
|
|
|
.title-text-container {
|
|
width: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tag-container {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 4px;
|
|
|
|
--color-tag-filters-bg: var(--color-background-highlight-alt);
|
|
}
|
|
|
|
.date-container {
|
|
width: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
align-self: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.title {
|
|
box-sizing: border-box;
|
|
height: fit-content;
|
|
margin: 0;
|
|
margin-top: var(--margin-header-top);
|
|
}
|
|
|
|
.date {
|
|
font-weight: 500;
|
|
font-family: var(--font-mono);
|
|
font-size: 1.0rem;
|
|
line-height: 1.4rem;
|
|
font-style: italic;
|
|
margin: 0;
|
|
color: var(--color-highlight);
|
|
}
|
|
|
|
.subtitle {
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
font-size: 1.0rem;
|
|
line-height: 1.4rem;
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.title-container {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.date-container {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.date {
|
|
font-size: 0.9rem;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.banner-container {
|
|
height: 180px;
|
|
max-height: 180px;
|
|
}
|
|
}
|
|
</style> |