DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

There's complexity in simplicity:

Browse source
This commit is contained in:
BOTAlex 2024-12-31 05:04:13 +01:00
parent 73c366e0f0
commit 5f78e8bf04
95 changed files with 9624 additions and 10843 deletions
Download patch file Download diff file Expand all files Collapse all files

156
src/lib/posts/ShowcaseNewsCard.svelte
View file

@ -1,78 +1,78 @@
<script>
export let post_url = '404';
export let thumbnail_url = '/favicon.png';
export let thumbnail_alt = 'Picture describting the deprived devs logo';
export let title = '<title>';
export let summary = '<summary>';
export let creation_date = 1710006969;
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
$: human_creation_date = new Date(+creation_date * 1000);
</script>
<div class="news-card">
<a href=/post/{post_url} >
<div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
</div>
<div class="content">
<h3 id="title">{title}</h3>
<p id="summary-text">{summary}</p>
<p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
</div>
</a>
</div>
<style>
a {
text-decoration: none;
}
.news-card {
display: inline-flex;
flex-direction: column;
gap: 15px;
}
.news-card h3 {
color: var(--text1);
margin: 0px;
font-size: 22px;
}
.thumbnail {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px;
margin-bottom: 15px;
}
.content {
display: flex;
flex-direction: column;
gap: 10px;
}
#title {
margin: 0;
text-decoration: none;
color: var(--text1);
}
#summary-text {
margin: 0;
text-decoration: none;
color: var(--text2);
}
#date {
margin: 0;
text-decoration: none;
color: var(--text4);
}
</style>
<script>
export let post_url = '404';
export let thumbnail_url = '/favicon.png';
export let thumbnail_alt = 'Picture describting the deprived devs logo';
export let title = '<title>';
export let summary = '<summary>';
export let creation_date = 1710006969;
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
$: human_creation_date = new Date(+creation_date * 1000);
</script>
<div class="news-card">
<a href=/post/{post_url} >
<div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
</div>
<div class="content">
<h3 id="title">{title}</h3>
<p id="summary-text">{summary}</p>
<p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
</div>
</a>
</div>
<style>
a {
text-decoration: none;
}
.news-card {
display: inline-flex;
flex-direction: column;
gap: 15px;
}
.news-card h3 {
color: var(--text1);
margin: 0px;
font-size: 22px;
}
.thumbnail {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px;
margin-bottom: 15px;
}
.content {
display: flex;
flex-direction: column;
gap: 10px;
}
#title {
margin: 0;
text-decoration: none;
color: var(--text1);
}
#summary-text {
margin: 0;
text-decoration: none;
color: var(--text2);
}
#date {
margin: 0;
text-decoration: none;
color: var(--text4);
}
</style>