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

154
src/lib/posts/NewsCard.svelte
View file

@ -1,77 +1,77 @@
<script lang="ts">
export let post_url : string = '404';
export let thumbnail_url : string = '/favicon.png';
export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
export let title : string = '<title>';
export let summary : string = '<summary>';
export let creation_date : string = '<date>';
const monthNames : string[] = ["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 class="thumbnail">
<img src={thumbnail_url} alt={thumbnail_alt}/>
</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;
display: flex;
flex-direction: row;
gap: 15px;
}
.thumbnail > img {
object-fit: cover;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px;
width: 150px;
height: auto;
}
.content {
flex-shrink: 2;
display: flex;
flex-direction: column;
gap: 10px;
}
#title {
margin: 0;
text-decoration: none;
color: var(--text2);
}
#summary-text {
margin: 0;
text-decoration: none;
color: var(--text3);
}
#date {
margin: 0;
text-decoration: none;
color: var(--text4);
}
</style>
<script lang="ts">
export let post_url : string = '404';
export let thumbnail_url : string = '/favicon.png';
export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
export let title : string = '<title>';
export let summary : string = '<summary>';
export let creation_date : string = '<date>';
const monthNames : string[] = ["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 class="thumbnail">
<img src={thumbnail_url} alt={thumbnail_alt}/>
</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;
display: flex;
flex-direction: row;
gap: 15px;
}
.thumbnail > img {
object-fit: cover;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 8px;
width: 150px;
height: auto;
}
.content {
flex-shrink: 2;
display: flex;
flex-direction: column;
gap: 10px;
}
#title {
margin: 0;
text-decoration: none;
color: var(--text2);
}
#summary-text {
margin: 0;
text-decoration: none;
color: var(--text3);
}
#date {
margin: 0;
text-decoration: none;
color: var(--text4);
}
</style>