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

Starting to rework the homepage

pull/249/head
connors 11 years ago
parent
fb6d6b832c
commit
0c4ffa993d
3 changed files with 13 additions and 183 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. 4
      _layouts/default.html
  2. 149
      docs-assets/css/docs.css
  3. 43
      index.html

4
_layouts/default.html
Unescape View File

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

149
docs-assets/css/docs.css
Unescape View File

@ -40,165 +40,23 @@ h6 {
}
.docs-inner-wrapper {
width: 1000px;
width: 1170px;
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
-------------------------------------------------- */
.docs-header {
height: 530px;
margin-top: 60px;
background-color: #fafafa;
}
.docs-header-text {
position: relative;
z-index: 3;
top: 140px;
width: 800px;
margin: 0 auto;
padding-top: 140px;
padding-bottom: 150px;
color: #333;
text-align: center;
-webkit-animation: fadeintext 2s;
@ -206,6 +64,7 @@ h6 {
}
.docs-header-subtitle {
margin-top: 0;
margin-bottom: 35px;
font-size: 45px;
font-weight: 300;

43
index.html
Unescape View File

@ -1,5 +1,5 @@
---
layout: default
layout: home
title: Ratchet
base_url: "./"
---
@ -8,10 +8,13 @@ base_url: "./"
<div class="docs-inner-wrapper">
<hgroup class="docs-header-text">
<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>
</div>
<section class="social">
</header>
</div>
<!--<section class="social">
<ul>
<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>
@ -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>
</li>
</ul>
</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>
</section>-->
Write Preview
Loading…
Cancel
Save