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

refactor: changed svelts server processing

Browse Source
This commit is contained in:
Amy Retzerau
2025-10-26 11:18:07 +01:00
parent d1e592e8bf
commit 648e922e3f
2 changed files with 54 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/+page.svelte
View File

@@ -20,12 +20,19 @@
</div>
{#each blogs as blog (blog.src)}
<a href={blog.src} target={blog.src_target} class="blog-entry">
<div>
<div class="blog-text">
<h4>{blog.title}</h4>
<p>{blog.desc}</p>
<p class="date">{blog.date}</p>
</div>
<img src="blog-1.png" alt="Preview of the described article" />
<div class="blog-img" style={'background-color:' + blog.img_bg}>
<span style="display: inline-block;height: 100%;vertical-align: middle;"></span><img
src={'/blog-covers/' + blog.img}
alt="Preview of the described article"
style={blog.scale}
/>
<!---->
</div>
</a>
<!-- svelte:component this={page.default} /-->
{/each}
@@ -51,26 +58,45 @@
transition: 0.2s;
}
.blog-entry div {
.blog-text {
width: calc(100% - 15rem - var(--d3) * 2);
padding: var(--d3);
}
.blog-img {
width: 15rem;
margin: 0;
padding: 0;
background-color: var(--rp-moon-text);
border-radius: 0 calc(var(--border-round) + 3px) calc(var(--border-round) + 3px) 0;
}
.blog-entry img {
width: 15rem;
display: inline-block;
vertical-align: middle;
height: 100%;
object-fit: cover;
border-radius: 0 var(--border-round) var(--border-round) 0;
}
@media only screen and (max-width: 700px) {
.blog-entry div {
.blog-text {
width: calc(100% - var(--d1) * 2);
padding: var(--d1);
}
.blog-img {
border-radius: 0 0rem var(--border-round) var(--border-round);
max-height: 10rem;
}
.blog-img {
width: 100%;
}
.blog-entry img {
width: 100%;
max-height: 14rem;
border-radius: 0 0rem var(--border-round) var(--border-round);
}
}