137 lines
3.3 KiB
Svelte
137 lines
3.3 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>Deprived Devs</h1>
|
|
<div class="collapse collapse-arrow bg-base-200 text-start">
|
|
<input type="radio" name="my-accordion-2" checked/>
|
|
<div class="collapse-title text-xl font-medium "><b>Alex / Zhen</b></div>
|
|
<div class="collapse-content">
|
|
<p>Hello, I am Zhen Aka. Alex.</p>
|
|
<p>Here's my portfolio: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
|
</div>
|
|
<!-- </div>
|
|
<div class="collapse collapse-arrow bg-base-200">
|
|
<input type="radio" name="my-accordion-2" />
|
|
<div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
|
|
<div class="collapse-content">
|
|
<p>hello</p>
|
|
</div>
|
|
</div>
|
|
<div class="collapse collapse-arrow bg-base-200">
|
|
<input type="radio" name="my-accordion-2" />
|
|
<div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
|
|
<div class="collapse-content">
|
|
<p>hello</p>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<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}
|
|
|