fix wacky margins on mobile

site/src/routes/_components/Blurb.svelte

@@ -144,8 +144,8 @@
 		<p><a href="TODO-svelte-3-blog-post">Read the introductory blog post</a> to learn more.</p>
 	</div>
 
-	<div style="grid-area: start; display: flex; flex-direction: column">
-		<pre class="language-bash" style="margin: 0 0 1em 0">
+	<div style="grid-area: start; display: flex; flex-direction: column; min-width: 0">
+		<pre class="language-bash" style="margin: 0 0 1em 0; min-width: 0; min-height: 0">
 npx degit sveltejs/template my-svelte-project
 cd my-svelte-project
 

site/src/routes/index.svelte

@@ -37,26 +37,29 @@
 	}
 
 	.hero {
-		margin: 15rem auto;
+		margin: 10rem auto;
 	}
 
 	.hero h3, .logotype {
 		position: relative;
-		left: 3rem;
+		left: 1.6rem;
+	}
+
+	.hero h3 {
+		font-size: 2rem;
 	}
 
 	.logotype {
-		height: 6rem;
+		height: 4rem;
 	}
 
 	.logo {
 		position: absolute;
 		top: -4rem;
-		right: 0;
-		width: 68rem;
-		height: 68rem;
-		/* mix-blend-mode: multiply; */
+		right: 4rem;
+		width: 52rem;
 		will-change: transform;
+		display: none;
 	}
 
 	.examples {
@@ -93,6 +96,30 @@
 		border: 2px solid var(--second);
 	}
 
+	@media (min-width: 640px) {
+		.logotype {
+			height: 6rem;
+		}
+
+		.hero h3 {
+			font-size: var(--h3);
+		}
+	}
+
+	@media (min-width: 800px) {
+		.logo {
+			display: block;
+		}
+
+		.hero {
+			margin: 15rem auto;
+		}
+
+		.hero h3, .logotype {
+			left: 3rem;
+		}
+	}
+
 	@media (min-width: 920px) {
 		.example {
 			display: grid;
@@ -104,7 +131,7 @@
 </style>
 
 <svelte:head>
-	<title>Svelte • The magical disappearing UI framework</title>
+	<title>Svelte • Cybernetically enhanced web apps</title>
 </svelte:head>
 
 <svelte:window bind:scrollY={sy}/>