removing pattern for now.

11 years ago · bd69324fb1
4 changed files with 86 additions and 112 deletions
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@ -38,8 +38,7 @@ body {
  background-image: url(../img/pattern.png);
  background-size: 30%;
  background-position: center center;
-  opacity: .035;
-  content: '';
+  opacity: .038;
 }

 .docs-header {
@ -47,20 +46,28 @@ body {
  min-height: 620px;
 }

+.docs-masthead {
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
 .docs-title {
  position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 14px;
+  left: 50%;
+  margin-bottom: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 100;
-  opacity: .4;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
 }

 .docs-nav {
-  position: absolute;
-  right: 20px;
-  top: 20px;
  color: #fff;
  cursor: pointer;
  -webkit-transition: opacity 0.2s linear;
@ -72,21 +79,9 @@ body {
  opacity: .5;
 }

-.docs-logo {
-  width: 75px;
-  height: 75px;
-  margin: 0 auto 15px;
-  color: #fff;
-  font-size: 35px;
-  font-weight: 300;
-  line-height: 72px;
-  border: 1px solid #fff;
-  border-radius: 40px;
-}
-
 .docs-header-content {
  position: relative;
-  top: 40px;
+  top: 30px;
  text-align: center;
  padding: 50px 10px;
  -webkit-animation-name: fadeintext;
@ -101,7 +96,7 @@ body {
  padding: 15px 60px 16px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
-  border-color: rgba(255, 255, 255, 0.7);
+  border: 0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
@ -117,7 +112,6 @@ body {
 .docs-header-content .btn-primary {
  margin-bottom: 0;
  color: #0a1855;
-  border-color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.85);
 }
 .docs-header-content .btn-primary:hover {
@ -132,20 +126,10 @@ body {
 .docs-subtitle {
  max-width: 750px;
  margin: 0 auto 20px;
-  font-size: 26px;
+  font-size: 28px;
  font-weight: 100;
  color: #fff;
-  line-height: 34px;
-}
-
-.docs-masthead {
-  position: relative;
-}
-.docs-masthead .docs-title {
-  left: 0;
-}
-.docs-masthead .docs-nav {
-  right: 0;
+  line-height: 38px;
 }

 .carbonad {
@ -155,7 +139,7 @@ body {
  height: auto !important;
  padding: 15px !important;
  font-size: 13px !important;
-  line-height: 16px !important;
+  line-height: 18px !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-right: 0 !important;
@ -181,7 +165,7 @@ body {
  height: auto !important;
  margin-left: 145px !important;
  color: rgba(255, 255, 255, 0.65) !important;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+  font-family: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
 }

 .carbonad-text {
@ -202,18 +186,19 @@ body {
 }

 .docs-sub-content {
-  padding-top: 100px;
-  padding-bottom: 100px;
+  padding-top: 55px;
+  padding-bottom: 65px;
  color: #fff;
 }
 .docs-sub-content .page-title,
 .docs-sub-content .page-description {
  margin-top: 0;
  margin-bottom: 0;
-  font-weight: 300;
+  font-weight: 100;
 }
 .docs-sub-content .page-title {
  font-size: 40px;
+  margin-bottom: 5px;
 }
 .docs-sub-content .page-description {
  color: #fff;
@ -226,17 +211,6 @@ body {
  padding-bottom: 80px;
 }

-.section-header {
-  text-align: center;
-}
-.section-header:after {
-  display: block;
-  content: '';
-  width: 200px;
-  margin: 50px auto 80px;
-  border-bottom: 1px solid #eee;
-}
-
 .section-heading,
 .section-lead {
  margin-top: 0;
@ -569,8 +543,15 @@ hr {
    min-height: 770px;
  }

+  .docs-title {
+    position: static;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
  .docs-header-content {
-    top: 37%;
+    top: 32%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
@ -586,6 +567,7 @@ hr {
  }

  .carbonad {
+    bottom: 130px !important;
    left: 50% !important;
    width: 330px !important;
    margin-left: -165px !important;
@ -717,6 +699,8 @@ hr {
 .container {
  margin-left: auto;
  margin-right: auto;
+  padding-left: 0;
+  padding-right: 0;
 }

 .column-group {
--- a/docs/components.html
+++ b/docs/components.html
@ -4,14 +4,17 @@ title: Components &middot; Ratchet
 ---

 <div class="docs-sub-header">
+  <header class="docs-masthead">
+    <div class="container">
+      <div class="column units-2">
+        <a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
+        <h1 class="docs-title">Ratchet</h1>
+      </div>
+    </div>
+  </header>
  <div class="container">
    <div class="column-group">
      <div class="column units-2">
-        <header class="docs-masthead">  
-          <h1 class="docs-title">Ratchet</h1>
-          <a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a>
-        </header>
-        
        <div class="docs-sub-content">
          <h2 class="page-title">Components</h2>
          <p class="page-description">Design patterns that serve as basic building blocks</p>
--- a/docs/index.html
+++ b/docs/index.html
@ -4,10 +4,15 @@ title: Ratchet
 ---

 <div class="docs-header">
-  <h1 class="docs-title">Ratchet</h1>
-  <a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a>
+  <header class="docs-masthead">
+    <div class="container">
+      <div class="column units-2">
+        <a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
+        <h1 class="docs-title">Ratchet</h1>
+      </div>
+    </div>
+  </header>
  <div class="docs-header-content">
-    <h2 class="docs-logo">R</h2>
    <p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p>
    <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
  </div>
@ -20,7 +25,7 @@ title: Ratchet
      <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>
    </li>
    <li>
-      <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://maker.github.com/ratchet/" data-text="Ratchet: Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
+      <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </li>
    <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
--- a/sass/docs.scss
+++ b/sass/docs.scss
@ -36,27 +36,34 @@ body {
    background-image: url(../img/pattern.png);
    background-size: 30%;
    background-position: center center;
-    opacity: .035;
-    content: '';
+    opacity: .038;
+    // content: '';
  }
 }
 .docs-header {
  height: 100vh;
  min-height: 620px;
 }
+
+// Masthead
+.docs-masthead {
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255,255,255,.1);
+}
 .docs-title {
  position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 14px;
+  left: 50%;
+  margin-bottom: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 100;
-  opacity: .4;
+  @include transform(translateX(-50%));
 }
 .docs-nav {
-  position: absolute;
-  right: 20px;
-  top: 20px;
  color: #fff;
  cursor: pointer;
  @include transition(opacity .2s linear);
@ -66,20 +73,9 @@ body {
    opacity: .5;
  }
 }
-.docs-logo {
-  width: 75px;
-  height: 75px;
-  margin: 0 auto 15px;
-  color: #fff;
-  font-size: 35px;
-  font-weight: 300;
-  line-height: 72px;
-  border: 1px solid #fff;
-  border-radius: 40px;
-}
 .docs-header-content {
  position: relative;
-  top: 40px;
+  top: 30px;
  text-align: center;
  padding: 50px 10px;
  @include animation-name(fadeintext);
@ -90,7 +86,7 @@ body {
    padding: 15px 60px 16px;
    font-size: 18px;
    color: rgba(255,255,255,.7);
-    border-color: rgba(255,255,255,.7);
+    border: 0;
    @include transition(all .2s linear);

    &:hover {
@ -105,7 +101,6 @@ body {
  .btn-primary {
    margin-bottom: 0;
    color: #0a1855;
-    border-color: rgba(255,255,255,.85);
    background-color: rgba(255,255,255,.85);

    &:hover {
@ -121,20 +116,10 @@ body {
 .docs-subtitle {
  max-width: 750px;
  margin: 0 auto 20px;
-  font-size: 26px;
+  font-size: 28px;
  font-weight: 100;
  color: #fff;
-  line-height: 34px;
-}
-.docs-masthead {
-  position: relative;
-
-  .docs-title {
-    left: 0;
-  }
-  .docs-nav {
-    right: 0;
-  }
+  line-height: 38px;
 }

 // Ads
@ -145,7 +130,7 @@ body {
  height: auto !important;
  padding: 15px !important;
  font-size: 13px !important;
-  line-height: 16px !important;
+  line-height: 18px !important;
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-right: 0 !important;
@ -165,7 +150,7 @@ body {
  height: auto !important;
  margin-left: 145px !important;
  color: rgba(255,255,255,.65) !important;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+  font-family: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
 }
 .carbonad-text {
  padding-top: 0 !important;
@ -185,18 +170,19 @@ body {
 // --------------------------------------------------

 .docs-sub-content {
-  padding-top: 100px;
-  padding-bottom: 100px;
+  padding-top: 55px; // Visually centers the content.
+  padding-bottom: 65px; // Visually centers the content.
  color: #fff;

  .page-title,
  .page-description {
    margin-top: 0;
    margin-bottom: 0;
-    font-weight: 300;
+    font-weight: 100;
  }
  .page-title {
    font-size: 40px;
+    margin-bottom: 5px;
  }
  .page-description {
    color: #fff;
@ -212,17 +198,6 @@ body {
  padding-top: 80px;
  padding-bottom: 80px;
 }
-.section-header {
-  text-align: center;
-
-  &:after {
-    display: block;
-    content: '';
-    width: 200px;
-    margin: 50px auto 80px;
-    border-bottom: 1px solid #eee;
-  }
-}
 .section-heading,
 .section-lead {
  margin-top: 0;
@ -588,8 +563,12 @@ hr {
  .docs-header {
    min-height: 770px;
  }
+  .docs-title {
+    position: static;
+    @include transform(translateX(0));
+  }
  .docs-header-content {
-    top: 37%;
+    top: 32%;
    @include transform(translateY(-50%));
    
    .btn {
@ -604,6 +583,7 @@ hr {

  // Ads
  .carbonad {
+    bottom: 130px !important;
    left: 50% !important;
    width: 330px !important;
    margin-left: -165px !important;
@ -740,6 +720,8 @@ hr {
 .container {
  margin-left: auto;
  margin-right: auto;
+  padding-left: 0;
+  padding-right: 0;
 }
 .column-group {
  width: auto;