Merge pull request #133 from phonegap/product-links

made product anchor positions more precise, #93

Author: GarthDB

_sass/_products.sass

@@ -1,7 +1,7 @@
 .anchor
   display: block
   position: relative
-  top: -90px
+  top: -63px
   visibility: hidden
 .products--opening-section
   @extend .benefits
@@ -133,7 +133,7 @@
       box-sizing: content-box
 @media (min-width: 820px)
   .anchor
-    top: -160px
+    top: -90px
 @media (min-width: 940px)
   .products--grid-descriptions
     display: -webkit-box

products.html

@@ -46,15 +46,15 @@ <h2>PhoneGap vs. Apache Cordova</h2>
       <a href="#phonegap-cli-section">our command line interface</a>, the <a href="#desktop-app-section">PhoneGap Desktop app</a>, the <a href="#mobile-app-section">PhoneGap Developer app</a>, and <a href="#phonegap-build">PhoneGap Build</a>.</p>
     </section>
   </div>
+  <a class="anchor" id="phonegap-cli-section"></a>
   <section class="products--phonegap-cli-section">
-    <a class="anchor" id="phonegap-cli-section"></a>
     <h2>PhoneGap CLI</h2>
     <p>The PhoneGap CLI is the <strong>most powerful and flexible way to use PhoneGap</strong>. Built on top of Apache Cordova, you can <strong>create</strong>, <strong>serve</strong>, <strong>compile</strong>, and <strong>run</strong> apps from the comfort of your command-line terminal. Written in Node.js and distributed on npm, you can use the CLI on any platform and integrate it into any web development workflow. Whether developing locally or running a continuous integration server, the PhoneGap CLI will meet your needs.</p>
     <p>If you're a power-user who wants control over your environment, then the PhoneGap CLI is for you.</p>
     <a href="http://docs.phonegap.com/references/phonegap-cli/" class="button--pill--next">Read the Docs</a>
   </section>
+  <a class="anchor" id="desktop-app-section"></a>
   <section class="products--desktop-app-section">
-    <a class="anchor" id="desktop-app-section"></a>
     <div class="gs-step__content">
       <h2 class="gs-step__title">Desktop App</h2>
       <div class="gs-step__description">
@@ -80,8 +80,8 @@ <h3 class="download__version">Version 0.2.1 (Beta)</h3>
         <div class="download__image">{% include images/pg-desktop.svg %}</div>
     </div>
   </section>
+  <a class="anchor" id="mobile-app-section"></a>
   <section class="products--mobile-app-section">
-    <a class="anchor" id="mobile-app-section"></a>
     <div class="gs-step__content">
       <h2 class="gs-step__title">Developer Mobile App</h2>
       <div class="gs-step__description">
@@ -110,8 +110,8 @@ <h2 class="gs-step__title">Developer Mobile App</h2>
         <div class="download__image">{% include images/pg-mobile.svg %}</div>
     </div>
   </section>
+  <a class="anchor" id="phonegap-build"></a>
   <section class="products--phonegap-build">
-    <a class="anchor" id="phonegap-build"></a>
     <h2>PhoneGap Build</h2>
     <p>Take the pain of compiling out of mobile app development - simply upload your HTML, CSS and Javascript assets to PhoneGap Build and we’ll package them for you. <strong>Get app-store ready apps without the headache of maintaining native SDKs</strong>. We do the work for you in the cloud and your app will always be built with the most up-to-date SDK for the platform you are targeting.</p>
     <p>Package your mobile apps in the cloud with PhoneGap Build.</p>