Consolidate landing-page-redesign and nav-restructure branches

gulp/handlebars.js

@@ -35,11 +35,16 @@ module.exports.helpers = {
   },
 
   sidebarSubMenu(title, options) {
+    let c = options.hash.collapsible;
+    if (c === undefined) {
+      c = true;
+    }
     const listTag = options.hash.numbered ? 'ol' : 'ul';
+
     return `
-      <li class="pageNavList__subList collapsibleListSet js-collapsibleListSet">
-        <span class="pageNavList__title collapsibleListSet__label js-collapsibleListSet__label">${title}</span>
-        <${listTag} class="collapsibleListSet__list js-collapsibleListSet__list is-collapsed">
+      <li class="pageNavList__subList${(c) ? ' collapsibleListSet js-collapsibleListSet' : ''}">
+        <span class="pageNavList__title${(c) ? ' collapsibleListSet__label js-collapsibleListSet__label' : ''}">${title}</span>
+        <${listTag} class="collapsibleListSet__list${(c) ? ' js-collapsibleListSet__list is-collapsed' : ''}">
           ${options.fn(this)}
         </${listTag}>
       </li>

partials/header-centered.handlebars

@@ -1,6 +1,6 @@
-<div class="so-back">
+<div class="so-back header2016Back">
   <div class="so-chunk">
-    <div class="header2016">
+    <div class="header2016 header2016--centered">
       <div class="header2016__logo">
         <div class="so-siteHeader">
           {{> siteLogo }}

partials/modules/dev-newsletter.handlebars

@@ -2,5 +2,5 @@
   <span class="mailSignup__title">Get developer updates:</span>
   <input type="email" value="" name="EMAIL" class="mailSignup__input" style="border-radius: 3px; " placeholder="email address" required="">
   <div style="position: absolute; left: -5000px;"><input type="text" name="b_c001d97369b7a10d224c23867_c77c979e43" tabindex="-1" value=""></div>
-  <input type="submit" value="Sign up" name="subscribe" class="s-button mailSignup__submit">
+  <input type="submit" value="Sign up" name="subscribe" class="s-button mailSignup__submit spu-textUppercase">
 </form>

partials/tools/sidebar.handlebars

@@ -1,10 +1,10 @@
 <div class="siteSidebar pageNavListBounder">
   <div class="mainSidebar">
     <ul class="pageNavList">
-      {{#sidebarSubMenu "Tools"}}
+      {{#sidebarSubMenu "Tools" collapsible=false}}
         <li class="pageNavList__item"><a href="https://www.stellar.org/laboratory/">Laboratory</a></li>
       {{/sidebarSubMenu}}
-      {{#sidebarSubMenu "Sample Code"}}
+      {{#sidebarSubMenu "Sample Code" collapsible=false}}
         <li class="pageNavList__item"><a href="https://github.com/stellar/account-viewer">Account Viewer</a></li>
         <li class="pageNavList__item"><a href="https://github.com/stellar/stellar-sms-client">SMS Client</a></li>
       {{/sidebarSubMenu}}

src/index.handlebars

@@ -5,92 +5,144 @@ previewImage: landing-1.png
 {{> head}}
 {{> header-centered}}
 
-<div class="so-back so-slantContainer background-nightBlue background-starsLayer spu-padTop-40 spu-padBottom-30">
-  <div class="so-chunk spu-color-neutral9 spu-padBottom-20">
-    <h2 class="landing-sectionTitle">Stellar Documentation</h2>
+<div class="so-back so-slantContainer spu-background-primary8 spu-padTop-40 spu-padBottom-30">
+  <section class="so-chunk spu-color-neutral3 spu-padBottom-20">
+    <h1 class="landing-sectionTitle">Stellar Documentation</h1>
     <p class="spu-centerBlock spu-centerText spu-fontSize-3 landing-lead">
-      <span class="spu-lineFullL">Make money move as easily as email.</span>
-      <span class="spu-lineFullL">Develop a Stellar application or run a node on the network.</span>
+      <span class="spu-lineFullL">Stellar is open-source, distributed payments infrastructure. Build affordable financial services.</span>
     </p>
-  </div>
-  <div class="so-chunk">
-    <div class="flexCols flexCols--l spu-padTB-20">
-      <div class="flexCols__col flexCols--l__col spu-padTB-10 spu-padSE-30 centerText">
-        <a href="{{pathPrefix}}/learn/" class="spu-textDecorationNone">
-          <div class="spu-padBottom-15">
-            <span class="graphic-circled-folder-120"></span>
-          </div>
-          <h3 class="spu-color-neutral9 spu-fontSize-3">Libraries and Tutorials</h3>
-          <p class="spu-fontSize-5 spu-color-neutral6 spu-centerBlock landing-introItemDesc">Learn about developing with Stellar.</p>
-        </a>
+  </section>
+
+  <section class="so-chunk spu-color-neutral3 spu-padBottom-20">
+    <div class="miniItems landing0616-introMini">
+      <a href="#" class="miniItems__item landing0616-introMini__item">
+        <div>
+          <span class="landing0616-circleNum">1</span>
+        </div>
+        <span class="graphic-rocket"></span>
+        <p class="spu-padTop-10 spu-padBottom-20">Stellar Overview</p>
+      </a>
+      <a href="#" class="miniItems__item landing0616-introMini__item">
+        <div>
+          <span class="landing0616-circleNum">2</span>
+        </div>
+        <span class="graphic-checkId"></span>
+        <p class="spu-padTop-10 spu-padBottom-20">Create Account</p>
+      </a>
+      <a href="#" class="miniItems__item landing0616-introMini__item">
+        <div>
+          <span class="landing0616-circleNum">3</span>
+        </div>
+        <span class="graphic-schoolOfCash"></span>
+        <p class="spu-padTop-10 spu-padBottom-20">Send and Receive Money</p>
+      </a>
+    </div>
+  </section>
+
+  <div class="so-slant spu-background-neutral9"></div>
+</div>
+
+<div class="so-back so-slantContainer spu-padBottom-50">
+  <section class="so-chunk spu-pad-20 flexCols flexCols--l spu-padBottom-10">
+    <section class="flexCols__col flexCols--l__col spu-padTB-15 spu-padSE-10">
+      <div class="landing0616-resLink">
+        <div class="centerText">
+          <span class="graphic-pageCode"></span>
+        </div>
+        <h2 class="spu-color-neutral4 landing0616-resTitle">Reference &amp; SDKs</h2>
       </div>
-      <div class="flexCols__col flexCols--l__col spu-padTB-10 spu-padSE-30 centerText">
-        <a href="{{pathPrefix}}/reference/" class="spu-textDecorationNone">
-          <div class="spu-padBottom-15">
-            <span class="graphic-circled-horizon-120"></span>
-          </div>
-          <h3 class="spu-color-neutral9">Horizon</h3>
-          <p class="spu-fontSize-5 spu-color-neutral6 spu-centerBlock landing-introItemDesc">Integrate with Stellar using the API server.</p>
-        </a>
+      <ul class="spu-color-primary4 landing0616-res">
+        <li class="landing0616-res__item"><a href="{{pathPrefix}}/horizon/learn/">REST API</a></li>
+        <li class="landing0616-res__item"><a href="{{pathPrefix}}/js-stellar-sdk/learn/">JavaScript SDK</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/stellar/java-stellar-sdk">Java SDK</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/stellar/go-stellar-base">Go SDK</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/QuantozTechnology/csharp-stellar-base">C# SDK</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/stellar/ruby-stellar-sdk">Ruby SDK</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/StellarCN/py-stellar-base">Python SDK</a></li>
+      </ul>
+    </section>
+
+    <section class="flexCols__col flexCols--l__col spu-padTB-15 spu-padSE-10">
+      <div class="landing0616-resLink">
+        <div class="centerText">
+          <span class="graphic-pageWriting"></span>
+        </div>
+        <h2 class="spu-color-neutral4 landing0616-resTitle">Guides</h2>
       </div>
-      <div class="flexCols__col flexCols--l__col spu-padTB-10 spu-padSE-30 centerText">
-        <a href="https://www.stellar.org/developers/stellar-core/learn/admin.html" class="spu-textDecorationNone">
-          <div class="spu-padBottom-15">
-            <span class="graphic-circled-code-120"></span>
-          </div>
-          <h3 class="spu-color-neutral9">Stellar Core</h3>
-          <p class="spu-fontSize-5 spu-color-neutral6 spu-centerBlock landing-introItemDesc">Contribute to the ledger server or run a node. </p>
-        </a>
+      <ul class="spu-color-primary4 landing0616-res">
+        <li class="landing0616-res__item"><a href="{{pathPrefix}}/learn/get-started">Get Started</a></li>
+        <li class="landing0616-res__item"><a href="{{pathPrefix}}/learn/integration-guides/anchor.html">Become an Anchor</a></li>
+        <li class="landing0616-res__item"><a href="https://www.stellar.org/wp-content/uploads/2016/06/Sending-Payment-Flow-Detailed.jpg">Sending Payments</a></li>
+        <li class="landing0616-res__item"><a href="https://www.stellar.org/wp-content/uploads/2016/06/Receiving-Payment-Flow-Detailed.jpg">Receiving Payments</a></li>
+      </ul>
+    </section>
+
+    <section class="flexCols__col flexCols--l__col spu-padTB-15 spu-padSE-10">
+      <div class="landing0616-resLink">
+        <div class="centerText">
+          <span class="graphic-pageBrick"></span>
+        </div>
+        <h2 class="spu-color-neutral4 landing0616-resTitle">Software</h2>
       </div>
-    </div>
-  </div>
-  <div class="so-slant background-5B6A72"></div>
+      <ul class="spu-color-primary4 landing0616-res">
+        <li class="landing0616-res__item"><a href="{{pathPrefix}}/stellar-core/learn/admin.html">Stellar Core</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/stellar/horizon">Horizon API Server</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/stellar/federation">Federation Server</a></li>
+        <li class="landing0616-res__item"><a href="https://github.com/stellar/bridge-server">Bridge Server</a></li>
+      </ul>
+    </section>
+  </section>
+  <div class="so-slant landing0616-buildAppsSlant"></div>
 </div>
 
-<div class="so-back so-slantContainer spu-padBottom-50 background-5B6A72">
-  <div class="so-chunk spu-pad-20" id="friendbot">
-    <h2 class="landing-sectionTitle spu-color-neutral9 spu-padBottom-10">Quick Start: Test Account</h2>
-    <div class="spu-background-neutral2 spu-radius spu-color-neutral8">
-      {{> modules/friendbot4}}
-    </div>
-  </div>
-  <div class="so-slant spu-background-primary8"></div>
+<div class="so-back so-slantContainer landing0616-buildApps">
+  <section class="so-chunk spu-pad-20 centerText spu-color-neutral9 landing0616-buildApps__chunk">
+    <div class="spu-padBottom-20"><span class="graphic-prototypeGear"></span></div>
+    <h2 class="landing-sectionTitle spu-color-neutral9">Develop the future of finance</h2>
+    <p class="spu-fontSize-3 landing0616-buildApps__lead spu-padBottom-10">Stellar supports all kinds of projects. Build a Slack bot to report a transaction stream, or a microsavings account for school fees or health insurance.</p>
+    <p>
+      <a href="https://www.stellar.org/how-it-works/powered-by-stellar/" class="s-button landing0616-cta spu-textUppercase">Build Stellar Apps</a>
+    </p>
+  </section>
 </div>
-
-<div class="so-back so-slantContainer spu-background-primary8">
-  <div class="so-chunk spu-padTop-20 spu-padBottom-50">
-    <h2 class="landing-sectionTitle spu-color-neutral3 spu-padBottom-20">App Spotlight</h2>
-    <div class="landing-apps">
-      <a href="https://play.google.com/store/apps/details?id=de.xcoins.centaurus" class="landing-appItem">
-        <span class="landing-appItem__media graphic-centaurus-120"></span>
-        <div class="landing-appItem__copy">
-          <p class="landing-appItem__copy__title">Centaurus</p>
-          <p class="landing-appItem__copy__description">
-            Send and receive payments with a Stellar wallet for Android.
-          </p>
+<div class="so-back spu-background-neutral8">
+  <section class="so-chunk spu-padTop-30 spu-padBottom-50 centerText spu-color-neutral3">
+    <h2 class="landing-sectionTitle spu-color-neutral3 spu-padBottom-15">Don't see what you're looking for?</h2>
+    <div class="halfSplit">
+      <div class="halfSplit__half">
+        <p class="spu-fontSize-3">Ask questions and get in touch with 1000+ developers.</p>
+        <div class="miniItems landing0616-lookMini">
+          <a href="http://slack.stellar.org/" class="miniItems__item landing0616-lookMini__item">
+            <span class="graphic-ldarkSlack landing0616-lookMini__item__graphic"></span>
+            <p>Slack</p>
+          </a>
         </div>
-      </a>
-      <div class="landing-appItem">
-        <span class="landing-appItem__media graphic-app-stack-bill-140">
-          <span class="landing-appItem__media__downArrow graphic-longDownArrow-88"></span>
-        </span>
-        <div class="landing-appItem__copy">
-          <a href="{{pathPrefix}}/learn/things-to-build.html" class="landing-appItem__copy__title">Develop Your Own</a>
-          <p class="landing-appItem__copy__description">
-            Build tools to collect payments, send transaction alerts, and perform other services.
-          </p>
+      </div>
+      <div class="halfSplit__divider">
+      </div>
+      <div class="halfSplit__half">
+        <p class="spu-fontSize-3">Find more information and contact us in other Stellar channels.</p>
+        <div class="miniItems landing0616-lookMini">
+          <a href="https://github.com/stellar" class="miniItems__item landing0616-lookMini__item">
+            <span class="graphic-ldarkGithub landing0616-lookMini__item__graphic"></span>
+            <p>Github</p>
+          </a>
+          <a href="https://www.stellar.org/blog/" class="miniItems__item landing0616-lookMini__item">
+            <span class="graphic-ldarkPaper landing0616-lookMini__item__graphic"></span>
+            <p>Stellar Blog</p>
+          </a>
+          <a href="https://twitter.com/stellarorg" class="miniItems__item landing0616-lookMini__item">
+            <span class="graphic-ldarkTwitter landing0616-lookMini__item__graphic"></span>
+            <p>Twitter</p>
+          </a>
         </div>
       </div>
     </div>
-    <p class="spu-centerText">
-      <a href="{{pathPrefix}}/learn/things-to-build.html" class="s-button spu-textUppercase spu-padSE-30">Build Stellar Apps</a>
-    </p>
-
-  </div>
-  <div class="so-slant spu-background-neutral9"></div>
+  </section>
 </div>
+
 <div class="so-back">
-  <div class="so-chunk spu-padBottom-15 spu-maxWidth-40">
+  <div class="so-chunk spu-padTB-15 spu-maxWidth-40">
     {{> modules/dev-newsletter}}
   </div>
 </div>

src/styles/_graphics.scss

@@ -16,3 +16,22 @@
 .graphic-app-stack-bill-140 { @include so-graphic("app-stack-bill.png", 280, 280); @extend .so-graphic; }
 .graphic-longDownArrow-88 { @include so-graphic("longDownArrow.png", 66, 176); @extend .so-graphic; }
 .graphic-backArrow-9 { @include so-graphic("backArrow.svg", 36, 18); @extend .so-graphic;}
+
+
+.graphic-centaurus-120 { @include so-graphic("centaurus-120.png", 240, 240); @extend .so-graphic; }
+.graphic-app-stack-bill-140 { @include so-graphic("app-stack-bill.png", 280, 280); @extend .so-graphic; }
+.graphic-longDownArrow-88 { @include so-graphic("longDownArrow.png", 66, 176); @extend .so-graphic; }
+.graphic-backArrow-9 { @include so-graphic("backArrow.svg", 36, 18); @extend .so-graphic;}
+
+// for landing0616
+.graphic-rocket { @include so-graphic("rocket.png", 96, 120); @extend .so-graphic;}
+.graphic-checkId { @include so-graphic("check-id.png", 164, 120); @extend .so-graphic;}
+.graphic-schoolOfCash { @include so-graphic("school-of-cash.png", 186, 120); @extend .so-graphic;}
+.graphic-pageCode { @include so-graphic("page-code.png", 184, 162); @extend .so-graphic;}
+.graphic-pageWriting { @include so-graphic("page-writing.png", 180, 164); @extend .so-graphic;}
+.graphic-pageBrick { @include so-graphic("page-brick.png", 154, 164); @extend .so-graphic;}
+.graphic-prototypeGear { @include so-graphic("prototype-gear.png", 180, 180); @extend .so-graphic;}
+.graphic-ldarkSlack { @include so-graphic("ldark-slack.png", 100, 100); @extend .so-graphic;}
+.graphic-ldarkGithub { @include so-graphic("ldark-github.png", 100, 100); @extend .so-graphic;}
+.graphic-ldarkPaper { @include so-graphic("ldark-paper.png", 100, 100); @extend .so-graphic;}
+.graphic-ldarkTwitter { @include so-graphic("ldark-twitter.png", 100, 100); @extend .so-graphic;}

src/styles/_header2016.scss

@@ -1,6 +1,11 @@
+.header2016, .header2016Back {
+  border-bottom: 1px solid $s-color-neutral7;
+}
 .header2016 {
   @include S-flex-row;
-  border-bottom: 1px solid $s-color-neutral7;
+}
+.header2016--centered {
+  border-bottom: 0;
 }
   .header2016__logo {
     @include S-flexItem-noFlex;
@@ -12,4 +17,4 @@
     }
   .header2016__nav {
     @include S-flexItem-share;
-  }
+  }