fixing up the homepage and adding the ad

11 years ago · 62793dc9bc
3 changed files with 184 additions and 117 deletions
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@ -24,7 +24,7 @@ body {
 }

 .docs-header {
-  min-height: 700px;
+  position: relative;
  height: 100vh;
  background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
 }
@ -40,36 +40,6 @@ body {
  content: '';
 }

-.docs-nav {
-  position: relative;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-.docs-nav .icon,
-.docs-nav .version {
-  position: absolute;
-  color: #fff;
-  opacity: .4;
-  -webkit-transition: opacity 0.2s linear;
-  -moz-transition: opacity 0.2s linear;
-  transition: opacity 0.2s linear;
-}
-.docs-nav .icon:hover,
-.docs-nav .version:hover {
-  opacity: 1;
-}
-.docs-nav .icon {
-  top: 13px;
-  right: 0;
-  cursor: pointer;
-}
-.docs-nav .version {
-  top: 14px;
-  left: 0;
-}
-
-.docs-nav,
 .docs-header-content {
  text-align: center;
 }
@ -116,27 +86,62 @@ body {
  opacity: .5;
 }

-.docs-title,
-.docs-subtitle {
-  color: #fff;
-}
-
-.docs-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 6px;
-}
-
 .docs-subtitle {
  max-width: 750px;
  margin: 0 auto 20px;
  font-size: 26px;
  font-weight: 100;
+  color: #fff;
  line-height: 34px;
 }

+.carbonad {
+  position: absolute !important;
+  bottom: 90px !important;
+  left: 50% !important;
+  width: 330px !important;
+  height: auto !important;
+  padding: 15px !important;
+  margin-left: -165px !important;
+  font-size: 13px !important;
+  border-radius: 3px !important;
+  background: transparent !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.carbonad-img {
+  margin: 0 !important;
+}
+
+.carbonad-text,
+.carbonad-text a,
+.carbonad-tag,
+.carbonad-tag a {
+  color: #fff !important;
+}
+
+.carbonad-text,
+.carbonad-tag {
+  display: block !important;
+  float: none !important;
+  width: auto !important;
+  height: auto !important;
+  margin-left: 145px !important;
+  color: white !important;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+}
+
+.carbonad-text {
+  padding-top: 0 !important;
+}
+
+.carbonad-tag {
+  text-align: left !important;
+}
+.carbonad-tag a {
+  color: #fff !important;
+}
+
 .docs-sub-content {
  padding-top: 50px;
  color: #fff;
@ -194,12 +199,15 @@ body {
 }

 .social {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
  padding: 20px 0 20px;
  margin: 0;
  list-style: none;
  text-align: center;
-  border-bottom: 1px solid #eee;
-  background-color: #f9f9f9;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 .social li {
  height: 20px;
@ -493,9 +501,23 @@ hr {
 }

@media screen and (min-width: 768px) {
+  .docs-header {
+    min-height: 770px;
+  }
+
+  .docs-title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 100;
+    opacity: .4;
+  }
+
  .docs-header-content {
    position: relative;
-    top: 50%;
+    top: 37%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
@ -511,8 +533,22 @@ hr {
    display: inline-block;
  }

-  .docs-title {
-    font-size: 22px;
+  .docs-logo {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 15px;
+    color: #fff;
+    font-weight: 300;
+    line-height: 68px;
+    border: 1px solid #fff;
+    border-radius: 40px;
+  }
+
+  .docs-nav {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    color: #fff;
  }

  .social .twitter-follow-button {
--- a/docs/index.html
+++ b/docs/index.html
@ -4,14 +4,18 @@ 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>
  <div class="docs-header-content">
-    <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
+    <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>
-</div>
+
+  <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>

  <!-- Social links -->
-<!--<ul class="social">
+  <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>
    </li>
@ -23,12 +27,5 @@ title: Ratchet
      Follow @GoRatchet</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>
-</ul>-->
-
-<!-- <footer class="docs-footer docs-section">
-  <div class="container column-group">
-    <div class="column units-2">
-      <p class="footer-content">Code licensed under the MIT license. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
-    </div>
+  </ul>
 </div>
-</footer> -->
--- a/sass/docs.scss
+++ b/sass/docs.scss
@ -24,7 +24,7 @@ body {
 // --------------------------------------------------

 .docs-header {
-  min-height: 700px;
+  position: relative;
  height: 100vh;
  background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);

@ -40,34 +40,6 @@ body {
    content: '';
  }
 }
-.docs-nav {
-  position: relative;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255,255,255,.1);
-
-  .icon,
-  .version {
-    position: absolute;
-    color: #fff;
-    opacity: .4;
-    @include transition(opacity .2s linear);
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-  .icon {
-    top: 13px;
-    right: 0;
-    cursor: pointer;
-  }
-  .version {
-    top: 14px;
-    left: 0;
-  }
-}
-.docs-nav,
 .docs-header-content {
  text-align: center;
 }
@ -109,28 +81,62 @@ body {
    }
  }
 }
-.docs-title,
-.docs-subtitle {
-  color: #fff;
-}
-.docs-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 6px;
-}
 .docs-subtitle {
  max-width: 750px;
  margin: 0 auto 20px;
  font-size: 26px;
  font-weight: 100;
+  color: #fff;
  line-height: 34px;
 }

+// Ads
+.carbonad {
+  position: absolute !important;
+  bottom: 90px !important;
+  left: 50% !important;
+  width: 330px !important;
+  height: auto !important;
+  padding: 15px !important;
+  margin-left: -165px !important;
+  font-size: 13px !important;
+  border-radius: 3px !important;
+  background: transparent !important;
+  border: 1px solid rgba(255,255,255,.1) !important;
+}
+.carbonad-img {
+  margin: 0 !important;
+}
+.carbonad-text,
+.carbonad-text a,
+.carbonad-tag,
+.carbonad-tag a {
+  color: #fff !important;
+}
+.carbonad-text,
+.carbonad-tag {
+  display: block !important;
+  float: none !important;
+  width: auto !important;
+  height: auto !important;
+  margin-left: 145px !important;
+  color: #fff!important;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+}
+.carbonad-text {
+  padding-top: 0 !important;
+}
+.carbonad-tag {
+  text-align: left !important;
+
+  a {
+    color: #fff !important;
+  }
+}

 // Subpage Header
 // --------------------------------------------------
+
 .docs-sub-content {
  padding-top: 50px;
  color: #fff;
@ -193,12 +199,15 @@ body {
 // --------------------------------------------------

 .social {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
  padding: 20px 0 20px;
  margin: 0;
  list-style: none;
  text-align: center;
-  border-bottom: 1px solid #eee;
-  background-color: #f9f9f9;
+  background-color: rgba(0,0,0,.2);

  li {
    height: 20px;
@ -526,9 +535,21 @@ hr {
 // Tablet to desktop 
@media screen and (min-width: 768px) {
  // Jumbotron
+  .docs-header {
+    min-height: 770px;
+  }
+  .docs-title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 100;
+    opacity: .4;
+  }
  .docs-header-content {
    position: relative;
-    top: 50%;
+    top: 37%;
    @include transform(translateY(-50%));
  }
  .docs-subtitle {
@ -541,8 +562,21 @@ hr {
      display: inline-block;
    }
  }
-  .docs-title {
-    font-size: 22px;
+  .docs-logo {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 15px;
+    color: #fff;
+    font-weight: 300;
+    line-height: 68px;
+    border: 1px solid #fff;
+    border-radius: 40px;
+  }
+  .docs-nav {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    color: #fff;
  }

  // Social