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

feat: added general media margin for consistant margins

Browse Source
This commit is contained in:
Amy Retzerau
2025-09-26 13:02:43 +02:00
parent fc23cb6e90
commit 7ef5d2bbb9
3 changed files with 55 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/routes/+page.svelte
View File

@@ -3,60 +3,56 @@
import type { SvelteComponent } from 'svelte';
import './style-entries.css';
let blog_entries: [string, SvelteComponent][] = Object.entries(
import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
).map(([key, value]) => [
key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
value as MDsveXComponent
]).map(([link,val])=>
typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link,val]
).map(([link,val])=>{
if(val.metadata)
val.metadata.date = Date.parse(val.metadata?.date);
return [link,val];
}
).sort(([link1,a],[link2,b])=>b.metadata?.date-a.metadata?.date);
console.log(blog_entries);
let blog_entries: [string, SvelteComponent][] = $state(
Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
.map(([key, value]) => [
key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
value as MDsveXComponent
])
.map(([link, val]) =>
typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link, val]
)
.map(([link, val]) => {
if (val.metadata) val.metadata.date = Date.parse(val.metadata?.date);
return [link, val];
})
.sort(([link1, a], [link2, b]) => b.metadata?.date - a.metadata?.date)
);
console.log(blog_entries);
</script>
<main>
<div class="start">
<h1>Welcome to SvelteKit</h1>
<p>
Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
</p>
</div>
<div class="media-margin">
<h1>Hi, I'm Amy</h1>
<p>
This is a collection of things I've set up and created that I think might interest others.
</p>
</div>
{#each blog_entries as [href, page]}
<a {href}>
<div class="blog-entry">
<div>
<h4>{page.metadata?.title}</h4>
<p>{page.metadata?.desc}</p>
<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
</div>
<img src="blog-1.png" class="blog-image" />
<a {href} class="blog-entry">
<div>
<h4>{page.metadata?.title}</h4>
<p>{page.metadata?.desc}</p>
<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
</div>
<img src="blog-1.png" class="blog-image" />
</a>
<br />
<!-- svelte:component this={page.default} /-->
{/each}
</main>
<style>
.start {
padding: var(--d2);
}
.blog-entry {
display: block;
margin: var(--d3) 0;
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;
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
transition: 0.2s;
}
.blog-entry:hover {
@@ -66,8 +62,8 @@
}
.blog-entry div {
width: calc(100% - 15rem - var(--d2) * 2);
padding: var(--d2);
width: calc(100% - 15rem - var(--d3) * 2);
padding: var(--d3);
}
.blog-entry img {
@@ -78,13 +74,14 @@
@media only screen and (max-width: 700px) {
.blog-entry div {
width: calc(100% - var(--d2) * 2);
width: calc(100% - var(--d1) * 2);
padding: var(--d1);
}
.blog-entry img {
width: 100%;
max-height: 14rem;
border-radius: 0 0rem var(--border-round) var(--border-round) ;
border-radius: 0 0rem var(--border-round) var(--border-round);
}
}