fixed spacing of typography

_config_dev.yml

@@ -16,5 +16,3 @@ excerpt_separator: <!--more-->
 exclude: [vendor]
 sass:
   sass_dir: _sass
-  debug_info: true
-  sourcemap: true

_includes/main.sass

@@ -4,3 +4,4 @@
 @import "header"
 @import "footer"
 @import "home"
+@import "getstarted"

_sass/_getstarted.sass

@@ -0,0 +1,48 @@
+.gs-steps
+  list-style: none
+  counter-reset: gs-step
+  margin: 0
+  padding: 0
+  font-size: 1.25rem
+.gs-step
+  padding: 10px 0 0 111px
+  position: relative
+  box-sizing: border-box
+  max-width: 640px
+  margin-bottom: 76px
+  &:before
+    counter-increment: gs-step
+    content: counter(gs-step)
+    position: absolute
+    display: block
+    left: 30px
+    top: 0
+    width: 50px
+    height: 50px
+    border: 1px solid #003351
+    box-sizing: border-box
+    font-size: 1.875rem
+    font-weight: $light-weight
+    text-align: center
+    padding: 9px 0 0 2px
+    border-radius: 6px
+.gs-step__title
+  font-size: 1.875rem
+  text-transform: none
+  margin: 0 0 1rem
+.gs-step__note
+  font-size: 1rem
+  padding-left: 30px
+  box-sizing: border-box
+  position: relative
+  &:before
+    width: 20px
+    height: 20px
+    background: url('/images/info-icon.svg') no-repeat
+    background-size: contain
+    display: block
+    content: ''
+    opacity: 0.4
+    position: absolute
+    left: 0
+    top: 4px

getstarted.html

@@ -0,0 +1,52 @@
+---
+layout: default
+title: Get Started
+permalink: /getstarted/
+---
+<div class="subheader">
+  <div class="bounds">
+    <div>Follow these steps to install PhoneGap and get an app running on your mobile device in minutes.</div>
+  </div>
+</div>
+<div class="bounds">
+  <ol class="gs-steps">
+    <li class="gs-step">
+      <h2 class="gs-step__title">Install our desktop app</h2>
+      <div class="gs-step__description">
+        <p>Download and install our new PhoneGap Desktop app, which is currently in beta. If you want more detailed instructions on how to install and use the app, follow the <a href="#">full guide in our documentation</a>.</p>
+      </div>
+      <footer class="gs-step__note">If you’d like to <a href="#">use the CLI to install PhoneGap</a>, check out our docs.</footer>
+    </li>
+    <li class="gs-step">
+      <h2 class="gs-step__title">Install our mobile app</h2>
+      <div class="gs-step__description">
+        <p>The PhoneGap Developer app is available for multiple platforms, and will get you running your PhoneGap project on your mobile device without code-signing or compiling.</p>
+        <p>You will pair this mobile app to the desktop app in step 4 to preview your new app.</p>
+      </div>
+      <footer class="gs-step__note">Read our <a href="#">guide on installing the mobile app</a> for step-by-step instructions.</footer>
+    </li>
+    <li class="gs-step">
+      <h2 class="gs-step__title">Create your new PhoneGap app</h2>
+      <div class="gs-step__description">
+        <p>To begin, open the PhoneGap Desktop app (that you installed in step 1), and create a new project.</p>
+      </div>
+      <footer class="gs-step__note">For full details on <a href="#">using our desktop app</a>, go to our docs.</footer>
+    </li>
+    <li class="gs-step">
+      <h2 class="gs-step__title">Run your new app on your device</h2>
+      <div class="gs-step__description">
+        <p>This is where things get real!</p>
+        <p>You’ll need to connect the PhoneGap Developer app you installed in step 2 with the PhoneGap Desktop app you got running in step 3.</p>
+        <p>The PhoneGap Desktop app starts a small web server to host your project and once connected to that web server, the PhoneGap Developer app runs your project on your mobile device. Cool, right?</p>
+      </div>
+      <footer class="gs-step__note">The <a href="#">instructions to pair the Desktop and Developer apps</a> are in our docs.</footer>
+    </li>
+    <li class="gs-step">
+      <h2 class="gs-step__title">Write some code &amp; celebrate the world of possibilities!</h2>
+      <div class="gs-step__description">
+        <p>Edit some content or add an alert message to instantly preview your changes. You’ve got a functioning PhoneGap app at this point. If you’d like more help with moving beyond these steps, you’ll find some <a href="#">great articles in our docs</a>.</p>
+        <p>Good luck!</p>
+      </div>
+    </li>
+  </ol>
+</div>

styles/main.sass

@@ -1,8 +1,3 @@
 ---
 ---
-@import "normalize"
-@import "vars"
-@import "base"
-@import "header"
-@import "footer"
-@import "home"
+{% include main.sass %}