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

53
src/routes/+page.svelte
View File

@@ -3,59 +3,55 @@
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]) => [
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);
])
.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>
<div class="media-margin">
<h1>Hi, I'm Amy</h1>
<p>
Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
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">
<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" />
</div>
</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));
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
transition: 0.2s;
}
@@ -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);
}
}

24
src/routes/blogs/blog.svelte
View File

@@ -15,11 +15,11 @@
</script>
<main>
<div class="title">
<div class="title media-margin">
<!-- prettier-ignore -->
<h1>{title}</h1><p class="date">Last updated {ddate.toDateString()}</p>
</div>
<div class="blog-text">
<div class="blog-text media-margin">
<p>{desc}</p>
<slot>
<!-- the mdsvex content will be slotted in here -->
@@ -33,15 +33,8 @@
border-radius: 1rem;
}
.title {
padding: var(--d3);
#margin: var(--d3) 0;
flex-wrap: row;
}
.title h1 {
width: calc(100% - 15rem);
margin: 0;
vertical-align: baseline;
display: inline-block;
}
@@ -54,6 +47,12 @@
#float: right;
}
.blog-text {
border-radius: var(--border-round);
#background: var(--rp-moon-surface);
#box-shadow: 0px 0px 0.5rem 0px hsl(from var(--rp-moon-pine) h calc(s * 0.5) calc(l * 0.25));
}
@media only screen and (max-width: 700px) {
.title {
margin-bottom: -5.3px;
@@ -68,11 +67,4 @@
width: 100%;
}
}
.blog-text {
border-radius: var(--border-round);
#background: var(--rp-moon-surface);
#box-shadow: 0px 0px 0.5rem 0px hsl(from var(--rp-moon-pine) h calc(s * 0.5) calc(l * 0.25));
padding: var(--d2) var(--d3) var(--d4);
}
</style>

12
src/routes/style.css
View File

@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
@font-face {
font-family: 'fira';
font-style: normal;
@@ -119,4 +117,14 @@ h4{
color: var(--rp-moon-foam);
}
.media-margin{
margin: var(--d3);
}
@media only screen and (max-width: 700px) {
.media-margin{
margin: var(--d3) var(--d1);
}
}