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

building out the home page layout

pull/249/head
connors 11 years ago
parent
24891dcdfb
commit
72adf63da2
3 changed files with 156 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      docs-assets/css/docs.css
  2. 66
      index.html
  3. 55
      lib/sass/docs.scss

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

@ -667,7 +667,7 @@ body {
padding-bottom: 50px; padding-bottom: 50px;
} }
.docs-header-content .button { .docs-header-content .button {
padding: 15px 30px; padding: 15px 30px 16px;
font-size: 18px; font-size: 18px;
color: #00d1fe; color: #00d1fe;
border-color: #00d1fe; border-color: #00d1fe;
@ -718,10 +718,66 @@ body {
line-height: 34px; line-height: 34px;
} }
.section-header {
text-align: center;
}
.section-header:after {
display: block;
content: '';
width: 200px;
margin: 50px auto 80px;
border-bottom: 1px solid #eee;
}
.section-heading,
.section-lead {
margin-top: 0;
margin-bottom: 0;
}
.section-heading {
font-size: 55px;
font-weight: 300;
}
.section-lead {
font-size: 24px;
color: #777;
font-weight: 100;
}
.docs-benefits { .docs-benefits {
display: none; padding-top: 80px;
padding-bottom: 80px;
text-align: center; text-align: center;
}
.benefit-icon {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 20px;
border: 1px solid #ddd;
border-radius: 50px;
}
.benefit-icon .icon {
color: #14b9d6;
font-size: 50px;
line-height: 100px;
}
.benefit-heading {
font-weight: 500;
font-size: 24px;
margin-top: 5px;
margin-bottom: 5px;
}
.benefit-text {
margin-top: 0;
margin-bottom: 100px;
font-size: 18px; font-size: 18px;
color: #777;
} }
.social { .social {

66
index.html
Unescape View File

@ -21,42 +21,66 @@ base_url: "./"
</div> </div>
</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: Prototype iPhone 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>
<!-- Benefits -->
<section class="docs-benefits"> <section class="docs-benefits">
<div class="container column-group"> <div class="container column-group">
<div class="section-header column units-2">
<h2 class="section-heading">Getting started</h2>
<p class="section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="column units-1 lg-units-6"> <div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <div class="benefit-icon">
<span class="icon icon-refresh"></span>
</div>
<h3 class="benefit-heading">Simple web technology</h3>
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p> tempor incididunt ut labore et dolore magna aliqua.</p>
</div> </div>
<div class="column units-1 lg-units-6"> <div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <div class="benefit-icon">
<span class="icon icon-refresh"></span>
</div>
<h3 class="benefit-heading">Simple web technology</h3>
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p> tempor incididunt ut labore et dolore magna aliqua.</p>
</div> </div>
</div> </div>
<div class="container column-group"> <div class="container column-group">
<div class="column units-1 lg-units-6"> <div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <div class="benefit-icon">
<span class="icon icon-refresh"></span>
</div>
<h3 class="benefit-heading">Simple web technology</h3>
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p> tempor incididunt ut labore et dolore magna aliqua.</p>
</div> </div>
<div class="column units-1 lg-units-6"> <div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <div class="benefit-icon">
<span class="icon icon-refresh"></span>
</div>
<h3 class="benefit-heading">Simple web technology</h3>
<p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p> tempor incididunt ut labore et dolore magna aliqua.</p>
</div> </div>
</div> </div>
</section> </section>
<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: Prototype iPhone 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>

55
lib/sass/docs.scss
Unescape View File

@ -59,7 +59,7 @@ body {
padding-bottom: 50px; padding-bottom: 50px;
.button { .button {
padding: 15px 30px; padding: 15px 30px 16px;
font-size: 18px; font-size: 18px;
color: #00d1fe; color: #00d1fe;
border-color: #00d1fe; border-color: #00d1fe;
@ -108,14 +108,65 @@ body {
font-weight: 100; font-weight: 100;
line-height: 34px; line-height: 34px;
} }
.section-header {
text-align: center;
&:after {
display: block;
content: '';
width: 200px;
margin: 50px auto 80px;
border-bottom: 1px solid #eee;
}
}
.section-heading,
.section-lead {
margin-top: 0;
margin-bottom: 0;
}
.section-heading {
font-size: 55px;
font-weight: 300;
}
.section-lead {
font-size: 24px;
color: #777;
font-weight: 100;
}
// Benefits // Benefits
// -------------------------------------------------- // --------------------------------------------------
.docs-benefits { .docs-benefits {
display: none; padding-top: 80px;
padding-bottom: 80px;
text-align: center; text-align: center;
}
.benefit-icon {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 20px;
border: 1px solid #ddd;
border-radius: 50px;
.icon {
color: #14b9d6;
font-size: 50px;
line-height: 100px;
}
}
.benefit-heading {
font-weight: 500;
font-size: 24px;
margin-top: 5px;
margin-bottom: 5px;
}
.benefit-text {
margin-top: 0;
margin-bottom: 100px;
font-size: 18px; font-size: 18px;
color: #777;
} }

Write Preview
Loading…
Cancel
Save