a few tweaks

site/src/routes/index.html

@@ -178,11 +178,13 @@
 	</ul>
 </section>
 
-<section class="container grid half">
+<section class="container grid half linkify">
 	<div>
 		<p>Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.</p>
 
 		<p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p>
+
+		<p><a href="TODO-svelte-3-blog-post">Read the introductory blog post</a> to learn more.</p>
 	</div>
 
 	<div>
@@ -190,7 +192,7 @@
 	</div>
 </section>
 
-<section class="container grid example">
+<section class="container grid example linkify">
 	<div>
 		<p>Svelte components are written in HTML files. Just add data.</p>
 	</div>
@@ -198,7 +200,7 @@
 	<iframe src="/repl/embed?gist=0eb9e3a2d22b981b67924c326ed1293a" scrolling="no"></iframe>
 </section>
 
-<section class="container grid example">
+<section class="container grid example linkify">
 	<div>
 		<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>
@@ -206,15 +208,15 @@
 	<iframe src="/repl/embed?gist=ea123e7c4e7edc809670eb2dcab25b56" scrolling="no"></iframe>
 </section>
 
-<section class="container grid example">
+<section class="container grid example linkify">
 	<div>
-		<p>Trigger updates by assigning to local variables. The compiler does the rest.</p>
+		<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>
 </section>
 
-<section class="container grid example">
+<section class="container grid example linkify">
 	<div>
 		<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
 	</div>

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

@@ -248,7 +248,7 @@
 </style>
 
 <div class="repl-inner">
-	<SplitPane type="horizontal">
+	<SplitPane type="horizontal" pos={60}>
 		<section slot=a>
 			<Input
 				{component_store}

site/src/routes/repl/index.html

@@ -151,6 +151,7 @@
 
 	@media (min-width: 768px) {
 		.repl-outer {
+			margin: 0 -4.8rem; /* can't do calc(0 - var(--side-nav)) */
 			height: calc(100vh - var(--nav-h));
 			background-color: var(--back);
 			overflow: hidden;

site/static/global.css

@@ -230,16 +230,21 @@ button[outline] {
 	padding: 0 .4rem .1rem;
 	border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
 	user-select: none;
-	white-space: nowrap;
+	/* white-space: nowrap; */
 	color: inherit;
-	transition: color .2s;
+	transition: color .2s, border .2s, padding .2s;
 }
 
 .linkify a:not(.open-in-repl):hover  {
 	color: var(--flash);
 }
 
-.linkify a:not(.open-in-repl):before {
+.linkify a:not(.open-in-repl):hover {
+	padding: 0 .4rem 0;
+	border-bottom: .2rem solid hsla(15, 100%, 50%, 1);
+}
+
+/* .linkify a:not(.open-in-repl):before {
 	content: '';
 	position: absolute;
 	width: 100%;
@@ -259,7 +264,7 @@ button[outline] {
 .linkify a:not(.open-in-repl):hover:before  {
 	visibility: visible;
 	transform: scaleX(1);
-}
+} */
 
 a:hover > .icon { stroke: var(--flash) }