playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

fixing up the homepage and adding the ad

pull/253/head
connors 11 years ago
parent
b505dd05aa
commit
62793dc9bc
3 changed files with 184 additions and 117 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 134
      docs/assets/css/docs.css
  2. 43
      docs/index.html
  3. 124
      sass/docs.scss

134
docs/assets/css/docs.css
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save