Browse Source

Starting to rework the homepage

pull/249/head
connors 11 years ago
parent
commit
0c4ffa993d
  1. 4
      _layouts/default.html
  2. 149
      docs-assets/css/docs.css
  3. 43
      index.html

4
_layouts/default.html

@ -10,7 +10,7 @@
<!-- Page content --> <!-- Page content -->
{{ content }} {{ content }}
<!-- Footer <!-- Footer -->
{% include footer.html %} --> {% include footer.html %}
</body> </body>
</html> </html>

149
docs-assets/css/docs.css

@ -40,165 +40,23 @@ h6 {
} }
.docs-inner-wrapper { .docs-inner-wrapper {
width: 1000px; width: 1170px;
margin: 0 auto; margin: 0 auto;
} }
/* Masthead (navigation)
-------------------------------------------------- */
.docs-masthead {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 100;
padding: 10px 0;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.docs-masthead .docs-inner-wrapper {
line-height: 40px;
}
.docs-masthead-title {
padding: 0;
margin: 0;
font-weight: 700;
font-size: 21px;
text-transform: uppercase;
letter-spacing: 5px;
}
.docs-navigation {
float: right;
padding: 0;
margin: 0;
font-size: 15px;
}
.nav-item {
position: relative;
float: left;
margin-right: 30px;
list-style: none;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-item a {
position: relative;
color: #777;
text-decoration: none;
}
.nav-item a:hover {
color: #555;
}
/* Give the components link a bit more room to fit the caret */
.nav-item.nav-components {
margin-right: 45px;
}
/* Give the components link a down caret */
.nav-components-link:after {
content: '';
position: absolute;
right: 0;
width: 0;
height: 0;
top: 8px;
right: -15px;
margin-left: -4px;
border-right: 4px solid transparent;
border-top: 4px solid #777;
border-left: 4px solid transparent;
}
/* The components list dropdown */
.components-list {
position: absolute;
display: none;
top: 45px;
left: -20px;
z-index: -1;
padding: 10px 0;
line-height: 1.1;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
box-shadow: 0 0 8px rgba(0,0,0,.05);
}
.components-list.active {
z-index: 100;
display: block;
}
.components-list:before,
.components-list:after {
content: '';
position: absolute;
left: 30px;
width: 0;
height: 0;
}
.components-list:before {
top: -11px;
margin-left: -11px;
border-right: 11px solid transparent;
border-bottom: 11px solid rgba(0,0,0,.3);
border-left: 11px solid transparent;
}
.components-list:after {
top: -10px;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
.components-list li {
list-style: none;
}
.components-list li:last-child {
padding-bottom: 0;
}
.components-list li a {
display: block;
width: 150px;
padding: 10px 20px;
}
.components-list li a:hover {
color: #fff;
background-color: #1eb0e9;
}
/* Jumbo header /* Jumbo header
-------------------------------------------------- */ -------------------------------------------------- */
.docs-header { .docs-header {
height: 530px;
margin-top: 60px;
background-color: #fafafa; background-color: #fafafa;
} }
.docs-header-text { .docs-header-text {
position: relative;
z-index: 3; z-index: 3;
top: 140px;
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
padding-top: 140px;
padding-bottom: 150px;
color: #333; color: #333;
text-align: center; text-align: center;
-webkit-animation: fadeintext 2s; -webkit-animation: fadeintext 2s;
@ -206,6 +64,7 @@ h6 {
} }
.docs-header-subtitle { .docs-header-subtitle {
margin-top: 0;
margin-bottom: 35px; margin-bottom: 35px;
font-size: 45px; font-size: 45px;
font-weight: 300; font-weight: 300;

43
index.html

@ -1,5 +1,5 @@
--- ---
layout: default layout: home
title: Ratchet title: Ratchet
base_url: "./" base_url: "./"
--- ---
@ -8,10 +8,13 @@ base_url: "./"
<div class="docs-inner-wrapper"> <div class="docs-inner-wrapper">
<hgroup class="docs-header-text"> <hgroup class="docs-header-text">
<h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS, and JS components.</h2> <h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS, and JS components.</h2>
<a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V1.0']);">Download Ratchet</a> <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</hgroup> </hgroup>
</div> </div>
<section class="social"> </header>
</div>
<!--<section class="social">
<ul> <ul>
<li> <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> <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>
@ -25,36 +28,4 @@ base_url: "./"
<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> <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>
</ul> </ul>
</section> </section>-->
</header>
<!-- Getting started -->
<div class="docs-outer-wrapper docs-content">
<section class="content-section section-informational" id="gettingStarted">
<div class="docs-inner-wrapper">
<ol class="steps">
<li class="step">
<div class="step-icon">
<span class="icon icon-pages"></span>
</div>
<h3 class="step-title">Create your pages</h3>
<p class="step-description">Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own.</p>
</li>
<li class="step">
<div class="step-icon">
<span class="icon icon-refresh"></span>
</div>
<h3 class="step-title">Connect pages with push.js</h3>
<p class="step-description">Read about <a href="#push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
</li>
<li class="step">
<div class="step-icon">
<span class="icon icon-share"></span>
</div>
<h3 class="step-title">Save the prototype to your phone</h3>
<p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen".</p>
</li>
</ol>
</div>
</section>
</div>
Loading…
Cancel
Save