Made a 'pretty' news section on the main page for the latest news
This commit is contained in:
parent
8b533b296c
commit
8b8b81f3d1
|
|
@ -12,7 +12,6 @@
|
|||
%sveltekit.head%
|
||||
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
// place files you want to import through the `$lib` alias in this folder.
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<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 = '<date>';
|
||||
</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">{creation_date}</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>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<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 = '<date>';
|
||||
</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">{creation_date}</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 img {
|
||||
background-size: cover;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-position: center;
|
||||
|
||||
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
|
||||
flex-shrink: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -3,13 +3,13 @@
|
|||
* for all posts on the website.
|
||||
*/
|
||||
|
||||
import { posts } from './post/data.js';
|
||||
import { posts } from './post/posts_data.js';
|
||||
|
||||
// Basically the same as Post but might contain less infomation - save storage
|
||||
type Summary = {
|
||||
url : string,
|
||||
title : string,
|
||||
description : string,
|
||||
summary : string,
|
||||
creation_date : number,
|
||||
modification_date: number,
|
||||
};
|
||||
|
|
@ -21,7 +21,7 @@ export function load() {
|
|||
let summary : Summary = {
|
||||
url: post.url,
|
||||
title : post.title,
|
||||
description : post.description,
|
||||
summary : post.summary,
|
||||
creation_date : post.creation_date,
|
||||
modification_date : post.modification_date
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,28 +1,74 @@
|
|||
<script lang="ts">
|
||||
export let data;
|
||||
import NewsCard from '$lib/posts/NewsCard.svelte';
|
||||
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
|
||||
|
||||
export let data; // <- contains post data
|
||||
</script>
|
||||
|
||||
<div class="main-title">
|
||||
<h1>The Deprived Devs</h1>
|
||||
</div>
|
||||
|
||||
<h1>Recent posts on Deprived.dev</h1>
|
||||
<ul>
|
||||
<!-- TODO: Filter by date or something -->
|
||||
|
||||
<section id="news-section">
|
||||
<h1 id="news-header">Recent News</h1>
|
||||
<div class="news-container">
|
||||
<!-- The newest blog post being showcased -->
|
||||
<ShowcaseNewsCard post_url={data.summaries[0].url} title={data.summaries[0].title} summary={data.summaries[0].summary} creation_date={data.summaries[0].creation_date} />
|
||||
|
||||
<div class="news-list">
|
||||
{#each data.summaries as summary}
|
||||
<li><a href="/post/{summary.url}">{summary.title}</a></li>
|
||||
<NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<!-- TODO: Filter by date or something -->
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#news-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#news-header {
|
||||
font-size: 48px;
|
||||
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;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-family: "CozetteVector";
|
||||
color: var(--text1);
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-title > h1 {
|
||||
font-size: 4.5vw; /* Change if title changes */
|
||||
font-size: 9vw; /* Change if title changes */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--text1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<script lang="ts">
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<h1>All posts on deprived.dev!</h1>
|
||||
<ul>
|
||||
{#each data.summaries as summary}
|
||||
{#each posts_data.summaries as summary}
|
||||
<li><a href="/post/{summary.url}">{summary.title}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ type Post = {
|
|||
// Required
|
||||
url : string,
|
||||
title: string,
|
||||
description : string,
|
||||
summary : string,
|
||||
creation_date : number
|
||||
modification_date: number,
|
||||
|
||||
|
|
@ -16,14 +16,14 @@ export const posts : Post[] = [
|
|||
{
|
||||
url: 'folder-icons',
|
||||
title: 'Amazing Icons for Folders in Unity!',
|
||||
description: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
|
||||
summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
|
||||
creation_date: 1708382491,
|
||||
modification_date: 1708382491,
|
||||
},
|
||||
{
|
||||
url: 'lorem',
|
||||
title: 'Lorem Ipsum !!',
|
||||
description: 'This is a nice exploanation on lorem ipsum latin',
|
||||
summary: 'This is a nice exploanation on lorem ipsum latin',
|
||||
creation_date: 1708382491,
|
||||
modification_date: 1708382491,
|
||||
},
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
color: var(--text);
|
||||
font-family: 'CozetteVector';
|
||||
color: var(--text2); /* Default to secondary text color. */
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
:root {
|
||||
--text: #ece4ee;
|
||||
--background: #120c13;
|
||||
--text1: #fff; /* Primary text. */
|
||||
--text2: #cac9c6; /* Secondary text. */
|
||||
--text3: #b0afad; /* Third text color. */
|
||||
--text4: #868584; /* Fourth text color. */
|
||||
--background: #1e2122;
|
||||
--primary: #ff8552;
|
||||
--secondary: #6c6b44;
|
||||
--accent: #7da16a;
|
||||
|
|
|
|||
Loading…
Reference in New Issue