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

new header direction

pull/249/head
connors 11 years ago
parent
eb8d2801f7
commit
da81a30597
3 changed files with 85 additions and 49 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. 41
      docs-assets/css/docs.css
  2. 48
      index.html
  3. 45
      lib/sass/docs.scss

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

@ -636,26 +636,25 @@ body {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
.docs-home { .docs-header {
background-image: linear-gradient(45deg, #02b8ea 0%, #03afbf 50%, #0367bf 100%); background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
background-repeat: no-repeat;
} }
.docs-nav { .docs-nav {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
.docs-nav .icon { .docs-nav .icon {
margin-top: 5px; margin-top: 5px;
color: #fff; color: #fff;
opacity: .5; opacity: .4;
cursor: pointer; cursor: pointer;
-webkit-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
} }
.docs-nav .icon:hover { .docs-nav .icon:hover {
opacity: .8; opacity: 1;
} }
.docs-nav, .docs-nav,
@ -664,11 +663,13 @@ body {
} }
.docs-header-content { .docs-header-content {
margin-top: 50px; padding-top: 50px;
padding-bottom: 50px;
} }
.docs-header-content .button { .docs-header-content .button {
color: #03afbf; color: #fff;
border-color: #fff; border-color: #00d1fe;
background-color: #00d1fe;
} }
.docs-title, .docs-title,
@ -690,15 +691,21 @@ body {
font-size: 24px; font-size: 24px;
font-weight: 100; font-weight: 100;
line-height: 34px; line-height: 34px;
opacity: .8;
} }
.social { .docs-benefits {
display: none; display: none;
margin: 20px 0 20px; text-align: center;
padding: 0; font-size: 18px;
}
.social {
padding: 20px 0 20px;
margin: 0;
list-style: none; list-style: none;
text-align: center; text-align: center;
border-bottom: 1px solid #eee;
background-color: #f9f9f9;
} }
.social li { .social li {
height: 20px; height: 20px;
@ -933,7 +940,8 @@ hr {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header-content { .docs-header-content {
margin-top: 100px; padding-top: 100px;
padding-bottom: 130px;
} }
.docs-header-content .button { .docs-header-content .button {
max-width: 300px; max-width: 300px;
@ -947,11 +955,6 @@ hr {
line-height: 60px; line-height: 60px;
} }
.social {
margin-top: 40px;
margin-bottom: 40px;
}
.device { .device {
position: relative; position: relative;
top: 50px; top: 50px;

48
index.html
Unescape View File

@ -4,20 +4,48 @@ title: Ratchet
base_url: "./" base_url: "./"
--- ---
<div class="container column-group"> <div class="docs-header">
<div class="column units-2"> <div class="container column-group">
<header class="docs-nav"> <div class="column units-2">
<a class="icon icon-list pull-right" href="/components" data-ignore="push"></a> <header class="docs-nav">
<h1 class="docs-title">Ratchet</h1> <a class="icon icon-list pull-right" href="/components" data-ignore="push"></a>
</header> <h1 class="docs-title">Ratchet</h1>
</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>
<a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</div>
</div> </div>
<section class="docs-benefits">
<div class="container column-group">
<div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="container column-group">
<div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="column units-1 lg-units-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<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>

45
lib/sass/docs.scss
Unescape View File

@ -30,24 +30,23 @@ body {
// Jumbotron // Jumbotron
// -------------------------------------------------- // --------------------------------------------------
.docs-home { .docs-header {
background-image: linear-gradient(45deg, rgba(2,184,234,1) 0%,rgba(3,175,191,1) 50%,rgba(3,103,191,1) 100%); background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
background-repeat: no-repeat;
} }
.docs-nav { .docs-nav {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.1);
.icon { .icon {
margin-top: 5px; margin-top: 5px;
color: #fff; color: #fff;
opacity: .5; opacity: .4;
cursor: pointer; cursor: pointer;
@include transition(opacity .2s linear); @include transition(opacity .2s linear);
&:hover { &:hover {
opacity: .8; opacity: 1;
} }
} }
} }
@ -56,11 +55,13 @@ body {
text-align: center; text-align: center;
} }
.docs-header-content { .docs-header-content {
margin-top: 50px; padding-top: 50px;
padding-bottom: 50px;
.button { .button {
color: rgb(3,175,191); color: #fff;
border-color: #fff; border-color: #00d1fe;
background-color: #00d1fe;
} }
} }
.docs-title, .docs-title,
@ -80,7 +81,15 @@ body {
font-size: 24px; font-size: 24px;
font-weight: 100; font-weight: 100;
line-height: 34px; line-height: 34px;
opacity: .8; }
// Benefits
// --------------------------------------------------
.docs-benefits {
display: none;
text-align: center;
font-size: 18px;
} }
@ -88,11 +97,12 @@ body {
// -------------------------------------------------- // --------------------------------------------------
.social { .social {
display: none; padding: 20px 0 20px;
margin: 20px 0 20px; margin: 0;
padding: 0;
list-style: none; list-style: none;
text-align: center; text-align: center;
border-bottom: 1px solid #eee;
background-color: #f9f9f9;
li { li {
height: 20px; height: 20px;
@ -341,7 +351,8 @@ hr {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
// Jumbotron // Jumbotron
.docs-header-content { .docs-header-content {
margin-top: 100px; padding-top: 100px;
padding-bottom: 130px;
.button { .button {
max-width: 300px; max-width: 300px;
@ -355,12 +366,6 @@ hr {
line-height: 60px; line-height: 60px;
} }
// Social
.social {
margin-top: 40px;
margin-bottom: 40px;
}
// Device // Device
.device { .device {
position: relative; position: relative;

Write Preview
Loading…
Cancel
Save