157 lines
3.6 KiB
Svelte
157 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import MediaQuery from 'svelte-media-queries';
|
|
import NewsCard from '$lib/posts/NewsCard.svelte';
|
|
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
|
|
import Button from '$lib/IO/Button.svelte';
|
|
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
|
import Timeline from '../comps/timeline/timeline.svelte';
|
|
|
|
export let data; // <- contains post data
|
|
|
|
$: most_recent_post = data.summaries[0];
|
|
|
|
const mobileThreshold : string = '1000px';
|
|
let mobile : boolean;
|
|
const post_show_count : number = 3;
|
|
</script>
|
|
|
|
<!-- Detect mobile -->
|
|
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
|
|
|
|
<div class="main-title">
|
|
<h1>The Deprived Devs</h1>
|
|
</div>
|
|
|
|
|
|
<section id="news-section">
|
|
<header id="news-header">
|
|
<h1>Recent News</h1>
|
|
</header>
|
|
<div class="news-container">
|
|
<!-- The newest blog post being showcased -->
|
|
<div class="showcase">
|
|
<ShowcaseNewsCard
|
|
thumbnail_url={most_recent_post.cover_img}
|
|
thumbnail_alt={most_recent_post.cover_alt}
|
|
post_url={most_recent_post.url}
|
|
title={most_recent_post.title}
|
|
summary={most_recent_post.summary}
|
|
creation_date={most_recent_post.creation_date}
|
|
/>
|
|
</div>
|
|
|
|
<div class="news-list">
|
|
{#each data.summaries.slice(1, post_show_count) as summary}
|
|
<NewsCard
|
|
thumbnail_url={summary.cover_img}
|
|
thumbnail_alt={summary.cover_alt}
|
|
post_url={summary.url}
|
|
title={summary.title}
|
|
summary={summary.summary}
|
|
creation_date={summary.creation_date}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
<footer id="news-footer">
|
|
<div class="dummy"/>
|
|
<div id="more-posts">
|
|
<Button href="/posts" type={ButtonType.Primary}>
|
|
<span slot="content">More News</span>
|
|
</Button>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
|
|
<Timeline/>
|
|
|
|
<style>
|
|
#news-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
transition-duration: 500ms;
|
|
transition-property: width;
|
|
width: 80%;
|
|
max-width: 1400px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
#news-header {
|
|
font-size: min(8vw, 36px);
|
|
margin-right: auto;
|
|
}
|
|
|
|
.news-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 25px;
|
|
|
|
width: 100%;
|
|
align-items: left;
|
|
}
|
|
|
|
.news-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
gap: 20px;
|
|
}
|
|
|
|
#news-footer {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.dummy {
|
|
width: 100%;
|
|
}
|
|
|
|
#more-posts {
|
|
flex-grow: 1;
|
|
min-width: 10em;
|
|
}
|
|
|
|
.main-title {
|
|
color: var(--text1);
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-title > h1 {
|
|
font-size: 9vw; /* Change if title changes */
|
|
}
|
|
|
|
.main-title {
|
|
font-family: var(--title-font);
|
|
color: var(--text1);
|
|
}
|
|
</style>
|
|
|
|
{#if mobile}
|
|
<style>
|
|
#news-section {
|
|
transition-duration: 500ms;
|
|
transition-property: width;
|
|
width: 90% !important;
|
|
}
|
|
.news-container {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.dummy {
|
|
width: 0% !important;
|
|
}
|
|
|
|
/* #more-posts { */
|
|
/* flex-grow: 1 !important; */
|
|
/* } */
|
|
|
|
</style>
|
|
{/if}
|
|
|