new header direction

11 years ago · da81a30597
3 changed files with 85 additions and 49 deletions
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@ -636,26 +636,25 @@ body {
  -webkit-text-size-adjust: 100%;
 }

-.docs-home {
-  background-image: linear-gradient(45deg, #02b8ea 0%, #03afbf 50%, #0367bf 100%);
-  background-repeat: no-repeat;
+.docs-header {
+  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
 }

 .docs-nav {
  padding-top: 12px;
  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 .docs-nav .icon {
  margin-top: 5px;
  color: #fff;
-  opacity: .5;
+  opacity: .4;
  cursor: pointer;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
 }
 .docs-nav .icon:hover {
-  opacity: .8;
+  opacity: 1;
 }

 .docs-nav,
@ -664,11 +663,13 @@ body {
 }

 .docs-header-content {
-  margin-top: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }
 .docs-header-content .button {
-  color: #03afbf;
-  border-color: #fff;
+  color: #fff;
+  border-color: #00d1fe;
+  background-color: #00d1fe;
 }

 .docs-title,
@ -690,15 +691,21 @@ body {
  font-size: 24px;
  font-weight: 100;
  line-height: 34px;
-  opacity: .8;
 }

-.social {
+.docs-benefits {
  display: none;
-  margin: 20px 0 20px;
-  padding: 0;
+  text-align: center;
+  font-size: 18px;
+}
+
+.social {
+  padding: 20px 0 20px;
+  margin: 0;
  list-style: none;
  text-align: center;
+  border-bottom: 1px solid #eee;
+  background-color: #f9f9f9;
 }
 .social li {
  height: 20px;
@ -933,7 +940,8 @@ hr {

@media screen and (min-width: 768px) {
  .docs-header-content {
-    margin-top: 100px;
+    padding-top: 100px;
+    padding-bottom: 130px;
  }
  .docs-header-content .button {
    max-width: 300px;
@ -947,11 +955,6 @@ hr {
    line-height: 60px;
  }

-  .social {
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
  .device {
    position: relative;
    top: 50px;
--- a/index.html
+++ b/index.html
@ -4,20 +4,48 @@ title: Ratchet
 base_url: "./"
 ---

-<div class="container column-group">
-  <div class="column units-2">
-    <header class="docs-nav">
-      <a class="icon icon-list pull-right" href="/components" data-ignore="push"></a>
-      <h1 class="docs-title">Ratchet</h1>
-    </header>
+<div class="docs-header">
+  <div class="container column-group">
+    <div class="column units-2">
+      <header class="docs-nav">
+        <a class="icon icon-list pull-right" href="/components" data-ignore="push"></a>
+        <h1 class="docs-title">Ratchet</h1>
+      </header>
+    </div>
  </div>
-</div>

-<div class="docs-header-content">
-  <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
-  <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
+  <div class="docs-header-content">
+    <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
+    <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
+  </div>
 </div>

+<section class="docs-benefits">
+  <div class="container column-group">
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  </div>
+
+  <div class="container column-group">
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  </div>
+</section>
+
+
+
 <ul class="social">
  <li>
    <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@ -30,24 +30,23 @@ body {
 // Jumbotron
 // --------------------------------------------------

-.docs-home {
-  background-image: linear-gradient(45deg, rgba(2,184,234,1) 0%,rgba(3,175,191,1) 50%,rgba(3,103,191,1) 100%);
-  background-repeat: no-repeat;
+.docs-header {
+  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
 }
 .docs-nav {
  padding-top: 12px;
  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255,255,255,.2);
+  border-bottom: 1px solid rgba(255,255,255,.1);

  .icon {
    margin-top: 5px;
    color: #fff;
-    opacity: .5;
+    opacity: .4;
    cursor: pointer;
    @include transition(opacity .2s linear);

    &:hover {
-      opacity: .8;
+      opacity: 1;
    }
  }
 }
@ -56,11 +55,13 @@ body {
  text-align: center;
 }
 .docs-header-content {
-  margin-top: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;

  .button {
-    color: rgb(3,175,191);
-    border-color: #fff;
+    color: #fff;
+    border-color: #00d1fe;
+    background-color: #00d1fe;
  }
 }
 .docs-title,
@ -80,7 +81,15 @@ body {
  font-size: 24px;
  font-weight: 100;
  line-height: 34px;
-  opacity: .8;
+}
+
+// Benefits
+// --------------------------------------------------
+
+.docs-benefits {
+  display: none;
+  text-align: center;
+  font-size: 18px;
 }


@ -88,11 +97,12 @@ body {
 // --------------------------------------------------

 .social {
-  display: none;
-  margin: 20px 0 20px;
-  padding: 0;
+  padding: 20px 0 20px;
+  margin: 0;
  list-style: none;
  text-align: center;
+  border-bottom: 1px solid #eee;
+  background-color: #f9f9f9;

  li {
    height: 20px;
@ -341,7 +351,8 @@ hr {
@media screen and (min-width: 768px) {
  // Jumbotron
  .docs-header-content {
-    margin-top: 100px;
+    padding-top: 100px;
+    padding-bottom: 130px;
    
    .button {
      max-width: 300px;
@ -355,12 +366,6 @@ hr {
    line-height: 60px;
  }

-  // Social
-  .social {
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
  // Device
  .device {
    position: relative;