Change stylesheet to Analog theme and add some images!

public/global.css

@@ -9,7 +9,11 @@ body {
 	margin: 0;
 	padding: 8px;
 	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-family: "Crimson Text Regular", "Crimson Pro", Georgia, serif;
+}
+
+h1 {
+	font-family: "Abhaya Libre ExtraBold", "Abhaya Libre", "Liberation Serif Bold", "Playfair Display SC Bold", serif;
 }
 
 a {
@@ -61,3 +65,7 @@ button:not(:disabled):active {
 button:focus {
 	border-color: #666;
 }
+
+.highlight {
+	color: #800020;
+}

public/index.html

@@ -4,7 +4,7 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>Svelte app</title>
+	<title>ChipChoc 🍪</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>

src/App.svelte

@@ -3,7 +3,8 @@
 </script>
 
 <main>
-	<h1>Hello {name}!</h1>
+	<img src="/assets/email-baker.png" class="main-pic"/>
+	<h1>Chip <span class="highlight">Choc</span></h1>
 	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 </main>
 
@@ -16,15 +17,22 @@
 	}
 
 	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
+		text-transform: lowercase;
 		font-size: 4em;
 		font-weight: 100;
 	}
 
+	.main-pic {
+		max-width: 100%;
+	}
+
 	@media (min-width: 640px) {
 		main {
 			max-width: none;
 		}
+
+		.main-pic {
+			max-width: 240px;
+		}
 	}
-</style>
+</style>