Amy/Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reordered html component of blog entry list and added styles

Browse Source
This commit is contained in:
Amy Retzerau
2025-09-15 13:34:32 +02:00
parent eb4fe3b595
commit 5888e69d01
1 changed files with 62 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/routes/+page.svelte
View File

@@ -13,22 +13,76 @@
</script> </script>
<main> <main>
<h1>Welcome to SvelteKit</h1> <div class="start">
<h1>Welcome to SvelteKit</h1>
<p> <p>
Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
</p> </p>
{#each blog_entries as [href, page]} </div>
{#each blog_entries as [href, page]}
<a {href}> <a {href}>
<div class="blog-entry" {href}> <div class="blog-entry">
<div> <div>
<h4>{page.metadata?.title}</h4> <h4>{page.metadata?.title}</h4>
<p>{page.metadata?.desc}</p> <p>{page.metadata?.desc}</p>
<p class="date">{new Date(Date.parse(page.metadata?.date)).toDateString()}</p> <p class="date">{new Date(page.metadata?.date).toDateString()}</p>
</div> </div>
<img src="blog-1.png" class="blog-image" /> <img src="blog-1.png" class="blog-image" />
</div> </div>
</a> </a>
<br /> <br />
<!-- svelte:component this={page.default} /--> <!-- svelte:component this={page.default} /-->
{/each} {/each}
</main> </main>
<style>
.start {
padding: var(--d2);
}
.blog-entry {
background: var(--rp-moon-surface);
border-radius: var(--border-round);
width: 100%;
color: var(--rp-moon-text);
display: flex;
flex-flow: row wrap;
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
transition: 0.2s;
}
.blog-entry:hover {
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
background: var(--rp-moon-overlay);
transition: 0.2s;
}
.blog-entry div {
width: calc(100% - 15rem - var(--d2) * 2);
padding: var(--d2);
}
.blog-entry img {
width: 15rem;
object-fit: cover;
border-radius: 0 var(--border-round) var(--border-round) 0;
}
@media only screen and (max-width: 700px) {
.blog-entry div {
width: calc(100% - var(--d2) * 2);
}
.blog-entry img {
width: 100%;
max-height: 14rem;
border-radius: 0 0rem var(--border-round) var(--border-round) ;
}
}
.blog-entry h4 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
</style>