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

removing pattern for now.

pull/253/head
connors 11 years ago
parent
1851beaa0f
commit
bd69324fb1
4 changed files with 86 additions and 112 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. 88
      docs/assets/css/docs.css
  2. 13
      docs/components.html
  3. 13
      docs/index.html
  4. 84
      sass/docs.scss

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

@ -38,8 +38,7 @@ body {
background-image: url(../img/pattern.png); background-image: url(../img/pattern.png);
background-size: 30%; background-size: 30%;
background-position: center center; background-position: center center;
opacity: .035; opacity: .038;
content: '';
} }
.docs-header { .docs-header {
@ -47,20 +46,28 @@ body {
min-height: 620px; min-height: 620px;
} }
.docs-masthead {
position: relative;
overflow: hidden;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.docs-title { .docs-title {
position: absolute; position: absolute;
top: 20px; top: 14px;
left: 20px; left: 50%;
margin-bottom: 0;
color: #fff; color: #fff;
font-size: 22px; font-size: 22px;
font-weight: 100; font-weight: 100;
opacity: .4; -webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
} }
.docs-nav { .docs-nav {
position: absolute;
right: 20px;
top: 20px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
-webkit-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
@ -72,21 +79,9 @@ body {
opacity: .5; opacity: .5;
} }
.docs-logo {
width: 75px;
height: 75px;
margin: 0 auto 15px;
color: #fff;
font-size: 35px;
font-weight: 300;
line-height: 72px;
border: 1px solid #fff;
border-radius: 40px;
}
.docs-header-content { .docs-header-content {
position: relative; position: relative;
top: 40px; top: 30px;
text-align: center; text-align: center;
padding: 50px 10px; padding: 50px 10px;
-webkit-animation-name: fadeintext; -webkit-animation-name: fadeintext;
@ -101,7 +96,7 @@ body {
padding: 15px 60px 16px; padding: 15px 60px 16px;
font-size: 18px; font-size: 18px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-color: rgba(255, 255, 255, 0.7); border: 0;
-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;
@ -117,7 +112,6 @@ body {
.docs-header-content .btn-primary { .docs-header-content .btn-primary {
margin-bottom: 0; margin-bottom: 0;
color: #0a1855; color: #0a1855;
border-color: rgba(255, 255, 255, 0.85);
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
} }
.docs-header-content .btn-primary:hover { .docs-header-content .btn-primary:hover {
@ -132,20 +126,10 @@ body {
.docs-subtitle { .docs-subtitle {
max-width: 750px; max-width: 750px;
margin: 0 auto 20px; margin: 0 auto 20px;
font-size: 26px; font-size: 28px;
font-weight: 100; font-weight: 100;
color: #fff; color: #fff;
line-height: 34px; line-height: 38px;
}
.docs-masthead {
position: relative;
}
.docs-masthead .docs-title {
left: 0;
}
.docs-masthead .docs-nav {
right: 0;
} }
.carbonad { .carbonad {
@ -155,7 +139,7 @@ body {
height: auto !important; height: auto !important;
padding: 15px !important; padding: 15px !important;
font-size: 13px !important; font-size: 13px !important;
line-height: 16px !important; line-height: 18px !important;
background: transparent !important; background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
border-right: 0 !important; border-right: 0 !important;
@ -181,7 +165,7 @@ body {
height: auto !important; height: auto !important;
margin-left: 145px !important; margin-left: 145px !important;
color: rgba(255, 255, 255, 0.65) !important; color: rgba(255, 255, 255, 0.65) !important;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important; font-family: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
} }
.carbonad-text { .carbonad-text {
@ -202,18 +186,19 @@ body {
} }
.docs-sub-content { .docs-sub-content {
padding-top: 100px; padding-top: 55px;
padding-bottom: 100px; padding-bottom: 65px;
color: #fff; color: #fff;
} }
.docs-sub-content .page-title, .docs-sub-content .page-title,
.docs-sub-content .page-description { .docs-sub-content .page-description {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-weight: 300; font-weight: 100;
} }
.docs-sub-content .page-title { .docs-sub-content .page-title {
font-size: 40px; font-size: 40px;
margin-bottom: 5px;
} }
.docs-sub-content .page-description { .docs-sub-content .page-description {
color: #fff; color: #fff;
@ -226,17 +211,6 @@ body {
padding-bottom: 80px; padding-bottom: 80px;
} }
.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-heading,
.section-lead { .section-lead {
margin-top: 0; margin-top: 0;
@ -569,8 +543,15 @@ hr {
min-height: 770px; min-height: 770px;
} }
.docs-title {
position: static;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.docs-header-content { .docs-header-content {
top: 37%; top: 32%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
@ -586,6 +567,7 @@ hr {
} }
.carbonad { .carbonad {
bottom: 130px !important;
left: 50% !important; left: 50% !important;
width: 330px !important; width: 330px !important;
margin-left: -165px !important; margin-left: -165px !important;
@ -717,6 +699,8 @@ hr {
.container { .container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 0;
padding-right: 0;
} }
.column-group { .column-group {

13
docs/components.html
Unescape View File

@ -4,14 +4,17 @@ title: Components · Ratchet
--- ---
<div class="docs-sub-header"> <div class="docs-sub-header">
<header class="docs-masthead">
<div class="container">
<div class="column units-2">
<a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
<h1 class="docs-title">Ratchet</h1>
</div>
</div>
</header>
<div class="container"> <div class="container">
<div class="column-group"> <div class="column-group">
<div class="column units-2"> <div class="column units-2">
<header class="docs-masthead">
<h1 class="docs-title">Ratchet</h1>
<a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a>
</header>
<div class="docs-sub-content"> <div class="docs-sub-content">
<h2 class="page-title">Components</h2> <h2 class="page-title">Components</h2>
<p class="page-description">Design patterns that serve as basic building blocks</p> <p class="page-description">Design patterns that serve as basic building blocks</p>

13
docs/index.html
Unescape View File

@ -4,10 +4,15 @@ title: Ratchet
--- ---
<div class="docs-header"> <div class="docs-header">
<h1 class="docs-title">Ratchet</h1> <header class="docs-masthead">
<a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a> <div class="container">
<div class="column units-2">
<a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
<h1 class="docs-title">Ratchet</h1>
</div>
</div>
</header>
<div class="docs-header-content"> <div class="docs-header-content">
<h2 class="docs-logo">R</h2>
<p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p> <p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p>
<a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</div> </div>
@ -20,7 +25,7 @@ title: Ratchet
<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>
<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: Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile 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> <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>
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true"> <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">

84
sass/docs.scss
Unescape View File

@ -36,27 +36,34 @@ body {
background-image: url(../img/pattern.png); background-image: url(../img/pattern.png);
background-size: 30%; background-size: 30%;
background-position: center center; background-position: center center;
opacity: .035; opacity: .038;
content: ''; // content: '';
} }
} }
.docs-header { .docs-header {
height: 100vh; height: 100vh;
min-height: 620px; min-height: 620px;
} }
// Masthead
.docs-masthead {
position: relative;
overflow: hidden;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.docs-title { .docs-title {
position: absolute; position: absolute;
top: 20px; top: 14px;
left: 20px; left: 50%;
margin-bottom: 0;
color: #fff; color: #fff;
font-size: 22px; font-size: 22px;
font-weight: 100; font-weight: 100;
opacity: .4; @include transform(translateX(-50%));
} }
.docs-nav { .docs-nav {
position: absolute;
right: 20px;
top: 20px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
@include transition(opacity .2s linear); @include transition(opacity .2s linear);
@ -66,20 +73,9 @@ body {
opacity: .5; opacity: .5;
} }
} }
.docs-logo {
width: 75px;
height: 75px;
margin: 0 auto 15px;
color: #fff;
font-size: 35px;
font-weight: 300;
line-height: 72px;
border: 1px solid #fff;
border-radius: 40px;
}
.docs-header-content { .docs-header-content {
position: relative; position: relative;
top: 40px; top: 30px;
text-align: center; text-align: center;
padding: 50px 10px; padding: 50px 10px;
@include animation-name(fadeintext); @include animation-name(fadeintext);
@ -90,7 +86,7 @@ body {
padding: 15px 60px 16px; padding: 15px 60px 16px;
font-size: 18px; font-size: 18px;
color: rgba(255,255,255,.7); color: rgba(255,255,255,.7);
border-color: rgba(255,255,255,.7); border: 0;
@include transition(all .2s linear); @include transition(all .2s linear);
&:hover { &:hover {
@ -105,7 +101,6 @@ body {
.btn-primary { .btn-primary {
margin-bottom: 0; margin-bottom: 0;
color: #0a1855; color: #0a1855;
border-color: rgba(255,255,255,.85);
background-color: rgba(255,255,255,.85); background-color: rgba(255,255,255,.85);
&:hover { &:hover {
@ -121,20 +116,10 @@ body {
.docs-subtitle { .docs-subtitle {
max-width: 750px; max-width: 750px;
margin: 0 auto 20px; margin: 0 auto 20px;
font-size: 26px; font-size: 28px;
font-weight: 100; font-weight: 100;
color: #fff; color: #fff;
line-height: 34px; line-height: 38px;
}
.docs-masthead {
position: relative;
.docs-title {
left: 0;
}
.docs-nav {
right: 0;
}
} }
// Ads // Ads
@ -145,7 +130,7 @@ body {
height: auto !important; height: auto !important;
padding: 15px !important; padding: 15px !important;
font-size: 13px !important; font-size: 13px !important;
line-height: 16px !important; line-height: 18px !important;
background: transparent !important; background: transparent !important;
border-top: 1px solid rgba(255,255,255,.1) !important; border-top: 1px solid rgba(255,255,255,.1) !important;
border-right: 0 !important; border-right: 0 !important;
@ -165,7 +150,7 @@ body {
height: auto !important; height: auto !important;
margin-left: 145px !important; margin-left: 145px !important;
color: rgba(255,255,255,.65) !important; color: rgba(255,255,255,.65) !important;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important; font-family: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
} }
.carbonad-text { .carbonad-text {
padding-top: 0 !important; padding-top: 0 !important;
@ -185,18 +170,19 @@ body {
// -------------------------------------------------- // --------------------------------------------------
.docs-sub-content { .docs-sub-content {
padding-top: 100px; padding-top: 55px; // Visually centers the content.
padding-bottom: 100px; padding-bottom: 65px; // Visually centers the content.
color: #fff; color: #fff;
.page-title, .page-title,
.page-description { .page-description {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-weight: 300; font-weight: 100;
} }
.page-title { .page-title {
font-size: 40px; font-size: 40px;
margin-bottom: 5px;
} }
.page-description { .page-description {
color: #fff; color: #fff;
@ -212,17 +198,6 @@ body {
padding-top: 80px; padding-top: 80px;
padding-bottom: 80px; padding-bottom: 80px;
} }
.section-header {
text-align: center;
&:after {
display: block;
content: '';
width: 200px;
margin: 50px auto 80px;
border-bottom: 1px solid #eee;
}
}
.section-heading, .section-heading,
.section-lead { .section-lead {
margin-top: 0; margin-top: 0;
@ -588,8 +563,12 @@ hr {
.docs-header { .docs-header {
min-height: 770px; min-height: 770px;
} }
.docs-title {
position: static;
@include transform(translateX(0));
}
.docs-header-content { .docs-header-content {
top: 37%; top: 32%;
@include transform(translateY(-50%)); @include transform(translateY(-50%));
.btn { .btn {
@ -604,6 +583,7 @@ hr {
// Ads // Ads
.carbonad { .carbonad {
bottom: 130px !important;
left: 50% !important; left: 50% !important;
width: 330px !important; width: 330px !important;
margin-left: -165px !important; margin-left: -165px !important;
@ -740,6 +720,8 @@ hr {
.container { .container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 0;
padding-right: 0;
} }
.column-group { .column-group {
width: auto; width: auto;

Write Preview
Loading…
Cancel
Save