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

home pattern

pull/253/head
connors 11 years ago
parent
f9c2f6eaa8
commit
c490832cb1
4 changed files with 65 additions and 96 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. 42
      docs/assets/css/docs.css
  2. BIN
      docs/assets/img/pattern.png
  3. 76
      docs/index.html
  4. 43
      sass/docs.scss

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

@ -24,7 +24,20 @@ body {
} }
.docs-header { .docs-header {
background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%); min-height: 700px;
height: 100vh;
background-image: linear-gradient(45deg, #0a1855 0%, #f11651 100%);
}
.docs-header:before {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url(../img/pattern.png);
background-size: 50%;
opacity: .5;
content: '';
} }
.docs-nav { .docs-nav {
@ -69,15 +82,15 @@ body {
padding: 15px 30px 16px; padding: 15px 30px 16px;
margin: 0 10px 10px; margin: 0 10px 10px;
font-size: 18px; font-size: 18px;
color: #00d1fe; color: rgba(255, 255, 255, 0.7);
border-color: #00d1fe; border-color: rgba(255, 255, 255, 0.7);
-webkit-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear; -moz-transition: all 0.2s linear;
transition: all 0.2s linear; transition: all 0.2s linear;
} }
.docs-header-content .btn:hover { .docs-header-content .btn:hover {
color: #63e3ff; color: #fff;
border-color: #63e3ff; border-color: #fff;
} }
.docs-header-content .btn:active { .docs-header-content .btn:active {
opacity: .5; opacity: .5;
@ -85,17 +98,17 @@ body {
} }
.docs-header-content .btn-primary { .docs-header-content .btn-primary {
margin-bottom: 0; margin-bottom: 0;
color: #fff; color: #0a1855;
border-color: #00d1fe; border-color: rgba(255, 255, 255, 0.85);
background-color: #00d1fe; background-color: rgba(255, 255, 255, 0.85);
} }
.docs-header-content .btn-primary:hover { .docs-header-content .btn-primary:hover {
color: #fff; color: #0a1855;
border-color: #63e3ff; border-color: #fff;
background-color: #63e3ff; background-color: #fff;
} }
.docs-header-content .btn-primary:active { .docs-header-content .btn-primary:active {
background-color: #63e3ff; opacity: .5;
} }
.docs-title, .docs-title,
@ -476,7 +489,10 @@ hr {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header-content { .docs-header-content {
padding: 170px 0 200px; position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
} }
.docs-subtitle { .docs-subtitle {

BIN
docs/assets/img/pattern.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 KiB

76
docs/index.html
Unescape View File

@ -4,15 +4,13 @@ title: Ratchet
--- ---
<div class="docs-header"> <div class="docs-header">
<div class="container column-group"> <!-- <div class="container column-group">
<div class="column units-2"> <div class="column units-2">
<header class="docs-nav"> <header class="docs-nav">
<h1 class="docs-title">Ratchet</h1> <h1 class="docs-title">Ratchet</h1>
<a class="icon icon-bars" href="/components" data-ignore="push"></a>
<a class="version" href="https://github.com/maker/ratchet" data-ignore="push">v2.0.0</a>
</header> </header>
</div> </div>
</div> </div> -->
<div class="docs-header-content"> <div class="docs-header-content">
<p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p> <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
@ -22,7 +20,7 @@ title: Ratchet
</div> </div>
<!-- Social links --> <!-- Social links -->
<ul class="social"> <!--<ul class="social">
<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>
</li> </li>
@ -34,74 +32,12 @@ title: Ratchet
Follow @GoRatchet</a> 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> <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>-->
<!-- Benefits -->
<section class="docs-benefits docs-section">
<div class="container column-group">
<div class="section-header column units-2">
<h2 class="section-heading">The mobile framework built for you</h2>
<p class="section-lead">Here's why we think you're going to love it.</p>
</div>
<div class="column-group">
<div class="column units-2 lg-units-6">
<div class="benefit-icon">
<span class="icon icon-code"></span>
</div>
<h3 class="benefit-heading">Simple web technology</h3>
<p class="benefit-text">Ratchet is built simple HTML, CSS, and JS. We used the power of SASS to make Ratchet extremely capable at quickly building mobile applications you can start playing with right away.</p>
</div>
<div class="column units-2 lg-units-6">
<div class="benefit-icon">
<span class="icon icon-list"></span>
</div>
<h3 class="benefit-heading">Tons of UI patterns</h3>
<p class="benefit-text">All the UI patterns that you'd expect in one simple framework. We've included our buttons, controls, forms, and behaviors that are optimized for performance in your app.</p>
</div>
</div>
<div class="column-group">
<div class="column units-2 lg-units-6">
<div class="benefit-icon">
<span class="icon icon-pages"></span>
</div>
<h3 class="benefit-heading">Native platform themes</h3>
<p class="benefit-text">Building an application for iOS or Android? Look no further. Ratchet provides platform specific themes that work on top of our standard components.</p>
</div>
<div class="column units-2 lg-units-6">
<div class="benefit-icon">
<span class="icon icon-download"></span>
</div>
<h3 class="benefit-heading">Fast and easy</h3>
<p class="benefit-text">It's super fast to get set up with Ratchet. Once you've downloaded the code, take a look at one of our starter templates or example applications.</p>
</div>
</div>
</div>
</section>
<section class="docs-contribute docs-section">
<div class="container column-group">
<div class="column units-2 lg-units-4">
<h3 class="contribute-heading">Contribute code</h3>
<p class="contribute-text">Have an feature or component you want to build? Open a pull request on our GitHub project. Our contributors make Ratchet better every day.</p>
<a class="link" href="#">GitHub project</a>
</div>
<div class="column units-2 lg-units-4">
<h3 class="contribute-heading">Submit an issue</h3>
<p class="contribute-text">See something that doesn't look right? Let use know and open an issue. We or one of our awesome contributors will get it fixed quickly.</p>
<a class="link" href="#">GitHub issues</a>
</div>
<div class="column units-2 lg-units-4">
<h3 class="contribute-heading">Ask a question</h3>
<p class="contribute-text">Wondering how to get a certain aspect of Ratchet to work the way you want. You're probably not the only one. Ask a question on our Google Group.</p>
<a class="link" href="#">Google group</a>
</div>
</div>
</section>
<footer class="docs-footer docs-section"> <!-- <footer class="docs-footer docs-section">
<div class="container column-group"> <div class="container column-group">
<div class="column units-2"> <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> <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>
</div> </div>
</footer> </footer> -->

43
sass/docs.scss
Unescape View File

@ -24,7 +24,21 @@ body {
// -------------------------------------------------- // --------------------------------------------------
.docs-header { .docs-header {
background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%); min-height: 700px;
height: 100vh;
background-image: linear-gradient(45deg, #0a1855 0%,#f11651 100%);
&:before {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url(../img/pattern.png);
background-size: 30%;
opacity: .035;
content: '';
}
} }
.docs-nav { .docs-nav {
position: relative; position: relative;
@ -65,13 +79,13 @@ body {
padding: 15px 30px 16px; padding: 15px 30px 16px;
margin: 0 10px 10px; margin: 0 10px 10px;
font-size: 18px; font-size: 18px;
color: #00d1fe; color: rgba(255,255,255,.7);
border-color: #00d1fe; border-color: rgba(255,255,255,.7);
@include transition(all .2s linear); @include transition(all .2s linear);
&:hover { &:hover {
color: #63e3ff; color: #fff;
border-color: #63e3ff; border-color: #fff;
} }
&:active { &:active {
opacity: .5; opacity: .5;
@ -80,17 +94,17 @@ body {
} }
.btn-primary { .btn-primary {
margin-bottom: 0; margin-bottom: 0;
color: #fff; color: #0a1855;
border-color: #00d1fe; border-color: rgba(255,255,255,.85);
background-color: #00d1fe; background-color: rgba(255,255,255,.85);
&:hover { &:hover {
color: #fff; color: #0a1855;
border-color: #63e3ff; border-color: #fff;
background-color: #63e3ff; background-color: #fff;
} }
&:active { &:active {
background-color: #63e3ff; opacity: .5;
} }
} }
} }
@ -512,7 +526,10 @@ hr {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
// Jumbotron // Jumbotron
.docs-header-content { .docs-header-content {
padding: 170px 0 200px; position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
} }
.docs-subtitle { .docs-subtitle {
margin-bottom: 30px; margin-bottom: 30px;

Write Preview
Loading…
Cancel
Save