From d00b6a791611b013ca9bedaa9d82e8f115fefe9d Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 20 Apr 2019 17:37:18 -0400
Subject: [PATCH] link to blog posts from blurb boxes on homepage

---
 site/src/routes/_components/Blurb.svelte | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/site/src/routes/_components/Blurb.svelte b/site/src/routes/_components/Blurb.svelte
index 61b249be80..dcdab3dd54 100644
--- a/site/src/routes/_components/Blurb.svelte
+++ b/site/src/routes/_components/Blurb.svelte
@@ -32,7 +32,7 @@
 		font-size: var(--h5);
 	}
 
-	.box a {
+	.learn-more {
 		position: relative;
 		text-align: right;
 		margin-top: auto;
@@ -41,12 +41,12 @@
 		font-size: 1.6rem;
 	}
 
-	.box a:hover {
+	.box:hover .learn-more {
 		color: white;
 		text-decoration: underline;
 	}
 
-	.box a::after, .cta a::after {
+	.learn-more::after, .cta a::after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -121,26 +121,26 @@
 </style>
 
 <section class='container'>
-	<div class='box bg-prime white' style="grid-area: one">
+	<a href="blog/write-less-code" class='box bg-prime white' style="grid-area: one">
 		<h2 style='padding:2.4rem 0 0 0'>Write less code</h2>
 		<p>Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript</p>
 
-		<a href="TODO-blog-post-on-loc">learn more</a>
-	</div>
+		<a class="learn-more">learn more</a>
+	</a>
 
-	<div class='box bg-flash white' style="grid-area: two">
+	<a href="blog/virtual-dom-is-pure-overhead" class='box bg-flash white' style="grid-area: two">
 		<h2 style='padding:2.4rem 0 0 0'>No virtual DOM</h2>
 		<p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p>
 
-		<a href="TODO-blog-post-on-vdom-overhead">learn more</a>
-	</div>
+		<a class="learn-more">learn more</a>
+	</a>
 
-	<div class='box bg-second white' style="grid-area: three">
+	<a href="TODO-blog-post-on-reactivity" class='box bg-second white' style="grid-area: three">
 		<h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2>
 		<p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>
 
-		<a href="TODO-blog-post-on-reactivity">learn more</a>
-	</div>
+		<a class="learn-more">learn more</a>
+	</a>
 
 	<div class="linkify description" style="grid-area: what;">
 		<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>