added some css

web/App.svelte

@@ -13,13 +13,13 @@
 
 		contentType = res.headers.get("Content-Type");
 		
-		let m;
+		let match;
-		while ((m = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
+		while ((match = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
 			// This is necessary to avoid infinite loops with zero-width matches
-			if (m.index === regex.lastIndex) {
+			if (match.index === regex.lastIndex) {
 				regex.lastIndex++;
 			}
-			filename = m[1];
+			filename = match[1];
 		}
 
 		document.title = filename;
@@ -29,8 +29,6 @@
 </script>
 
 <main>
-	<div>{slug}</div>
-	<div>
 	{#if component === null}
 		Loading data...
 	{:else}
@@ -40,8 +38,15 @@
 			<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
 		{/await}
 	{/if}
-	</div>
 </main>
 
 <style>
+
+main {
+	display: flex;
+	justify-content: center;
+	margin-top: 5rem;
+
+}
+
 </style>

web/index.css

@@ -0,0 +1,4 @@
+body {
+    background-color: #0d1117;
+    font-family: sans-serif;
+}

web/main.ts

@@ -1,4 +1,5 @@
 import App from "./App.svelte";
+import "./index.css";
 
 const app = new App({
 	target: document.body,

web/opener/Text.svelte

@@ -12,7 +12,35 @@ import { onMount } from "svelte";
 	});
 </script>
 
-<div>
+<div class="container" >
-	Text opener
+	<header>{filename}</header>
 	<pre><code>{ content }</code></pre>
 </div>
+
+<style>
+	code{
+		color: #c9d1d9;
+	}
+
+	pre{
+		padding: 1rem;
+	}
+
+	header{
+		font-size: 1.5rem;
+		font-weight: bold;
+		margin-bottom: 1rem;
+		color: #58a6ff;
+		border-bottom: solid 1px #1f6feb;
+		
+		padding: 1rem;
+	}
+
+	.container{
+		border-width: 2px;
+		border-color: #1f6feb;
+		border-style: solid;
+		border-radius: 5px;
+	}
+	
+</style>