feat: added Layout for Blog posts together with custom components for images

src/routes/blogs/blog.svelte

@@ -9,14 +9,13 @@
 	export let desc;
 
 	let ddate = new Date(Date.parse(date));
-	import './style-blog.css';
 </script>
 
-export let alt;
-
-<h1>{title}</h1>
 <main>
-	<p class="date">Last updated {ddate.toDateString()}</p>
+	<div class="title">
+		<!-- prettier-ignore -->
+		<h1>{title}</h1><p class="date">Last updated {ddate.toDateString()}</p>
+	</div>
 	<div class="blog-text">
 		<p>{desc}</p>
 		<slot>
@@ -27,6 +26,54 @@ export let alt;
 
 <style>
 	main {
-		background-color: var(--rp-moon-surface);
+		padding: 0;
+		border-radius: 1rem;
+	}
+
+	.title {
+		padding: 0 var(--d3) 0;
+		#display: table;
+		flex-wrap: row;
+		#height: 5rem;
+		margin-bottom: -12px;
+        #white-space: nowrap;
+	}
+
+	.title h1 {
+		width: calc(100% - 15rem);
+		margin: 0;
+		vertical-align: baseline;
+		display: inline-block;
+	}
+
+	.title p {
+		width: 15rem;
+		display: inline-block;
+		text-align: right;
+		margin: 0;
+		#float: right;
+	}
+
+	@media only screen and (max-width: 700px) {
+
+        .title {
+            margin-bottom:-5.3px;
+        }
+
+        .title h1 {
+            display: block;
+            width:100%;
+        }
+
+        .title p{ 
+            width:100%;
+        }
+    }
+
+	.blog-text {
+		border-radius: var(--border-round);
+		background: var(--rp-moon-surface);
+		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+		padding: var(--d2) var(--d3) var(--d4);
 	}
 </style>