link to blog posts from blurb boxes on homepage

pull/2451/head
Richard Harris 6 years ago
parent 4bf5f63086
commit 58ca195139

@ -32,7 +32,7 @@
font-size: var(--h5); font-size: var(--h5);
} }
.box a { .learn-more {
position: relative; position: relative;
text-align: right; text-align: right;
margin-top: auto; margin-top: auto;
@ -41,12 +41,12 @@
font-size: 1.6rem; font-size: 1.6rem;
} }
.box a:hover { .box:hover .learn-more {
color: white; color: white;
text-decoration: underline; text-decoration: underline;
} }
.box a::after, .cta a::after { .learn-more::after, .cta a::after {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
@ -121,26 +121,26 @@
</style> </style>
<section class='container'> <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> <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> <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> <a class="learn-more">learn more</a>
</div> </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> <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> <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> <a class="learn-more">learn more</a>
</div> </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> <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> <p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>
<a href="TODO-blog-post-on-reactivity">learn more</a> <a class="learn-more">learn more</a>
</div> </a>
<div class="linkify description" style="grid-area: what;"> <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> <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>

Loading…
Cancel
Save