Browse Source

fixing up the homepage and adding the ad

pull/253/head
connors 11 years ago
parent
commit
62793dc9bc
  1. 134
      docs/assets/css/docs.css
  2. 43
      docs/index.html
  3. 124
      sass/docs.scss

134
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 {

43
docs/index.html

@ -4,31 +4,28 @@ 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>
<!-- Social links -->
<!--<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>
<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>
<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">
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>-->
<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>
<!-- <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>
</div>
</footer> -->
<!-- Social links -->
<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>
<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>
<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">
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>
</div>

124
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

Loading…
Cancel
Save