feat: added content to the about page

src/routes/+layout.svelte

@@ -27,3 +27,35 @@
 	>
 </nav>
 {@render children?.()}
+
+<style>
+	nav {
+		margin: var(--d3);
+
+		font-family: 'Fraunces', serif;
+		font-optical-sizing: auto;
+		font-weight: 400;
+		font-style: normal;
+		font-variation-settings:
+			'SOFT' 0,
+			'WONK' 0;
+		font-size: 1.728rem;
+	}
+
+	nav a {
+		margin: 1rem;
+		margin-left: 0rem;
+		padding-left: 0rem;
+		#border-bottom: solid var(--rp-moon-foam);
+		color: var(--rp-moon-foam);
+		&:visited {
+			color: var(--rp-moon-foam);
+		}
+	}
+
+	@media only screen and (max-width: 700px) {
+		nav {
+			margin: var(--d3) var(--d1);
+		}
+	}
+</style>

src/routes/+page.svelte

@@ -3,60 +3,56 @@
 	import type { SvelteComponent } from 'svelte';
 	import './style-entries.css';
 
-	let blog_entries: [string, SvelteComponent][] = Object.entries(
+	let blog_entries: [string, SvelteComponent][] = $state(
-		import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
+		Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
-	).map(([key, value]) => [
+			.map(([key, value]) => [
-		key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
+				key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
-		value as MDsveXComponent
+				value as MDsveXComponent
-	]).map(([link,val])=> 
+			])
-        typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link,val]
+			.map(([link, val]) =>
-    ).map(([link,val])=>{
+				typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link, val]
-        if(val.metadata)
+			)
-            val.metadata.date = Date.parse(val.metadata?.date);
+			.map(([link, val]) => {
-        return [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);
+			.sort(([link1, a], [link2, b]) => b.metadata?.date - a.metadata?.date)
+	);
+	console.log(blog_entries);
 </script>
 
 <main>
-    <div class="start">
+	<div class="media-margin">
-        <h1>Welcome to SvelteKit</h1>
+		<h1>Hi, I'm Amy</h1>
-        <p>
+		<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>
+		</p>
-    </div>
+	</div>
 	{#each blog_entries as [href, page]}
-		<a {href}>
+		<a {href} class="blog-entry">
-			<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(page.metadata?.date).toDateString()}</p>
-					<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
-				</div>
-				<img src="blog-1.png" class="blog-image" />
 			</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));
+		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
-        transition: 0.2s;
+		transition: 0.2s;
 	}
 
 	.blog-entry:hover {
@@ -66,8 +62,8 @@
 	}
 
 	.blog-entry div {
-		width: calc(100% - 15rem - var(--d2) * 2);
+		width: calc(100% - 15rem - var(--d3) * 2);
-		padding: var(--d2);
+		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);
 		}
 	}
 

src/routes/about/+page.svelte

@@ -0,0 +1,9 @@
+<main>
+	<div class="media-margin">
+		<h1>About</h1>
+		<p>
+			Hi, I'm Amy Retzerau! I'm a computer science student who wants to share my hobby in the hope
+			of helping like-minded people.
+		</p>
+	</div>
+</main>

src/routes/blogs/blog.svelte

@@ -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>

src/routes/style.css

@@ -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;
@@ -78,33 +76,6 @@ h1,h2,h3,h4,p:first-child {
 }
 
 
-nav {
-    margin: var(--d3) 0 ;
-
-    padding: 0 var(--d3) 0;
-
-    font-family: "Fraunces", serif;
-    font-optical-sizing: auto;
-    font-weight: 400;
-    font-style: normal;
-    font-variation-settings:
-        "SOFT" 0,
-        "WONK" 0;
-    font-size:1.728rem;
-}
-
-nav a{
-    margin: 1rem;
-    margin-left: 0rem;
-    padding-left: 0rem;
-    border-bottom: solid var(--rp-moon-foam);
-    color: var(--rp-moon-foam);
-    #text-decoration: underline;
-    &:visited {
-        color: var(--rp-moon-foam);
-    }
-}
-
 main {
     width: 100%;
     #box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
@@ -146,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);
+    }
+}
+