remove unused styles etc

site/src/routes/blog/index.html

@@ -77,15 +77,6 @@
 		text-transform: uppercase;
 	}
 
-	/* .post:first-child .byline::after {
-		content: 'Latest post';
-		font-weight: 700;
-		color: var(--second);
-		text-transform: uppercase;
-		margin-left: 1em;
-	} */
-
-
 	.post p {
 		font-size: var(--h5);
 		max-width: 30em;
@@ -103,21 +94,4 @@
 	.posts a:hover > h2 {
 		color: var(--flash)
 	}
-
-	.byline {
-		/* width: 100%; */
-		padding: 1.6rem 0 0 0;
-		/* border-bottom: 1px solid var(--second); */
-		font: 300 var(--code-fs)/1.7 var(--font-mono);
-	}
-
-	time {
-		/* border-bottom: 1px solid var(--second); */
-	}
-
-	.byline a {
-		color: var(--second);
-	}
-
-	.byline a:hover { color: var(--flash) }
 </style>

site/src/routes/index.html

@@ -58,15 +58,6 @@
 		opacity: 0.7;
 	}
 
-	.learn-btn {
-		all: unset;
-		cursor: pointer;
-		display: block;
-		margin-top: 4rem;
-	}
-
-	.legend { padding-top: 4rem }
-
 	.box {
 		padding: 2em;
 		display: flex;
@@ -108,14 +99,6 @@
 		background: url(/icons/arrow-right.svg);
 	}
 
-	h6 {
-		max-width: 25em;
-		padding: 2.4rem;
-		border-radius: var(--border-r);
-		font: 300 1rem/1.4 var(--font-mono);
-		text-align: center;
-	}
-
 	.example {
 		display: grid;
 		grid-template-columns: 1fr 4fr;
@@ -197,7 +180,11 @@
 		<p>Svelte components are written in HTML files. Just add data.</p>
 	</div>
 
-	<iframe src="/repl/embed?gist=0eb9e3a2d22b981b67924c326ed1293a" scrolling="no"></iframe>
+	<iframe
+		title="Hello world example"
+		src="/repl/embed?gist=0eb9e3a2d22b981b67924c326ed1293a"
+		scrolling="no"
+	></iframe>
 </section>
 
 <section class="container grid example linkify">
@@ -205,7 +192,11 @@
 		<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
 	</div>
 
-	<iframe src="/repl/embed?gist=ea123e7c4e7edc809670eb2dcab25b56" scrolling="no"></iframe>
+	<iframe
+		title="Scoped styles example"
+		src="/repl/embed?gist=ea123e7c4e7edc809670eb2dcab25b56"
+		scrolling="no"
+	></iframe>
 </section>
 
 <section class="container grid example linkify">
@@ -213,7 +204,11 @@
 		<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
 	</div>
 
-	<iframe src="/repl/embed?gist=7b7908b677eb0c374e17f1c5b6287e6e" scrolling="no"></iframe>
+	<iframe
+		title="Reactivity example"
+		src="/repl/embed?gist=7b7908b677eb0c374e17f1c5b6287e6e"
+		scrolling="no"
+	></iframe>
 </section>
 
 <section class="container grid example linkify">
@@ -221,7 +216,11 @@
 		<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
 	</div>
 
-	<iframe src="/repl/embed?gist=c5336bba9eb1195bb2403aa04ff25186" scrolling="no"></iframe>
+	<iframe
+		title="Transitions example"
+		src="/repl/embed?gist=c5336bba9eb1195bb2403aa04ff25186"
+		scrolling="no"
+	></iframe>
 </section>
 
 <section class="container grid half">

site/src/routes/repl/_components/Output/index.html

@@ -13,6 +13,7 @@
 	export let values_store;
 	export let json5;
 	export let sourceError;
+	export let sourceErrorLoc;
 	export let runtimeError;
 
 	// refs
@@ -37,6 +38,10 @@
 		viewer.setProp(prop, value);
 		updateValues(prop, value);
 	}
+
+	function navigate(event) {
+		// TODO handle navigation from error messages
+	}
 </script>
 
 <style>
@@ -108,7 +113,6 @@
 	>CSS output</button>
 </div>
 
-
 {#if view === 'result'}
 	<SplitPane type="vertical" pos={67}>
 		<div slot="a">
@@ -122,7 +126,6 @@
 					{props}
 					{sourceError}
 					bind:error={runtimeError}
-					on:data="{e => updateData(e.detail.current)}"
 					on:navigate={navigate}
 					on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
 				/>

site/src/routes/repl/_components/Repl.html

@@ -232,17 +232,6 @@
 	}
 
 	@media (min-width: 768px) {
-		.show-if-mobile { display: none }
-
-		.repl-outer.zen-mode {
-			position: fixed;
-			width: 100%;
-			height: 100%;
-			top: 0;
-			left: 0;
-			z-index: 11;
-		}
-
 		section { height: 100% }
 	}
 </style>

site/src/routes/repl/embed.html

@@ -87,49 +87,12 @@
 		--pane-controls-h: 4.2rem;
 	}
 
-	.pane { width: 100%; height: 100% }
-
-	h3 {
-		margin: 4rem 0 0 0;
-		padding: 0 2.4rem .8rem;
-		font-size: 1.3rem;
-	}
-
 	@media (min-width: 768px) {
 		.repl-outer {
 			background-color: var(--back);
 			overflow: hidden;
 			box-sizing: border-box;
 		}
-
-		.repl-outer.zen-mode {
-			position: fixed;
-			width: 100%;
-			height: 100%;
-			top: 0;
-			left: 0;
-			z-index: 11;
-		}
-	}
-
-	.loading {
-		text-align: center;
-		color: var(--second);
-		font-weight: 300;
-		margin: 2em 0 0 0;
-		opacity: 0;
-		animation: fade-in .4s;
-		animation-delay: .2s;
-		animation-fill-mode: both;
-	}
-
-	@keyframes fade-in {
-		0%   { opacity: 0 }
-		100% { opacity: 1 }
-	}
-
-	.input {
-		padding: 2.4em 0 0 0;
 	}
 </style>
 

site/src/routes/repl/index.html

@@ -143,12 +143,6 @@
 
 	.pane       { width: 100%; height: 100% }
 
-	h3 {
-		margin: 4rem 0 0 0;
-		padding: 0 2.4rem .8rem;
-		font-size: 1.3rem;
-	}
-
 	@media (min-width: 768px) {
 		.repl-outer {
 			margin: 0 -4.8rem; /* can't do calc(0 - var(--side-nav)) */
@@ -165,7 +159,6 @@
 			width: 100%;
 			height: 100%;
 			top: 0;
-			left: 0;
 			z-index: 11;
 		}
 	}