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

making the header work well

pull/253/head
connors 11 years ago
parent
bd69324fb1
commit
098f1126ff
4 changed files with 98 additions and 55 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. 72
      docs/assets/css/docs.css
  2. 11
      docs/components.html
  3. 9
      docs/index.html
  4. 61
      sass/docs.scss

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

@ -45,6 +45,17 @@ body {
height: 100vh;
min-height: 620px;
}
.docs-header .carbonad {
position: absolute !important;
bottom: 90px !important;
margin-top: 0 !important;
-webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext;
animation-name: fadeintext;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
}
.docs-masthead {
position: relative;
@ -56,10 +67,8 @@ body {
.docs-title {
position: absolute;
top: 14px;
left: 50%;
margin-bottom: 0;
color: #fff;
font-size: 22px;
font-weight: 100;
-webkit-transform: translateX(-50%);
@ -67,18 +76,23 @@ body {
transform: translateX(-50%);
}
.docs-title a,
.docs-nav {
color: #fff;
cursor: pointer;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.docs-title a:active,
.docs-nav:active {
color: #fff;
opacity: .5;
}
.docs-nav {
cursor: pointer;
}
.docs-header-content {
position: relative;
top: 30px;
@ -133,8 +147,6 @@ body {
}
.carbonad {
position: absolute !important;
bottom: 90px !important;
width: 100% !important;
height: auto !important;
padding: 15px !important;
@ -145,12 +157,6 @@ body {
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
-webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext;
animation-name: fadeintext;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
}
.carbonad-img {
@ -186,6 +192,8 @@ body {
}
.docs-sub-content {
position: relative;
overflow: hidden;
padding-top: 55px;
padding-bottom: 65px;
color: #fff;
@ -532,19 +540,32 @@ hr {
}
@media screen and (min-width: 768px) {
.docs-logo {
width: 70px;
height: 70px;
font-size: 30px;
line-height: 68px;
}
.docs-header {
min-height: 770px;
}
.docs-header .carbonad {
bottom: 130px !important;
left: 50% !important;
margin-left: -165px !important;
}
.docs-sub-header .carbonad {
position: absolute !important;
top: 50% !important;
right: 15px !important;
margin-top: 0 !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
}
.docs-sub-content {
margin-right: 380px;
}
.docs-title {
position: static;
float: left;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
@ -567,10 +588,7 @@ hr {
}
.carbonad {
bottom: 130px !important;
left: 50% !important;
width: 330px !important;
margin-left: -165px !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
@ -599,7 +617,7 @@ hr {
display: block;
width: 395px;
height: 813px;
margin-left: -13px;
margin-left: -20px;
font-family: "Helvetica Neue", sans-serif;
background-image: url("../img/iphone5c.png");
background-size: 100%;
@ -692,11 +710,21 @@ hr {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
}
@media screen and (min-width: 1200px) {
.device {
margin-left: 39px;
}
.docs-sub-header .carbonad {
right: 30px !important;
}
}
.example-device {
margin: 0 auto;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
padding-left: 0;

11
docs/components.html
Unescape View File

@ -4,14 +4,7 @@ title: Components · Ratchet
---
<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>
{% include masthead.html %}
<div class="container">
<div class="column-group">
<div class="column units-2">
@ -21,6 +14,8 @@ title: Components &middot; Ratchet
</div>
</div>
</div>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
<div class="platform-toggle">

9
docs/index.html
Unescape View File

@ -4,14 +4,7 @@ title: Ratchet
---
<div class="docs-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>
{% include masthead.html %}
<div class="docs-header-content">
<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>

61
sass/docs.scss
Unescape View File

@ -43,6 +43,15 @@ body {
.docs-header {
height: 100vh;
min-height: 620px;
// Ad on the homepage
.carbonad {
position: absolute !important;
bottom: 90px !important;
margin-top: 0 !important;
@include animation-name(fadeintext);
@include animation-duration(3s);
}
}
// Masthead
@ -55,17 +64,15 @@ body {
}
.docs-title {
position: absolute;
top: 14px;
left: 50%;
margin-bottom: 0;
color: #fff;
font-size: 22px;
font-weight: 100;
@include transform(translateX(-50%));
}
.docs-title a,
.docs-nav {
color: #fff;
cursor: pointer;
@include transition(opacity .2s linear);
&:active {
@ -73,6 +80,9 @@ body {
opacity: .5;
}
}
.docs-nav {
cursor: pointer;
}
.docs-header-content {
position: relative;
top: 30px;
@ -124,8 +134,6 @@ body {
// Ads
.carbonad {
position: absolute !important;
bottom: 90px !important;
width: 100% !important;
height: auto !important;
padding: 15px !important;
@ -136,8 +144,6 @@ body {
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
@include animation-name(fadeintext);
@include animation-duration(3s);
}
.carbonad-img {
margin: 0 !important;
@ -170,6 +176,8 @@ body {
// --------------------------------------------------
.docs-sub-content {
position: relative;
overflow: hidden;
padding-top: 55px; // Visually centers the content.
padding-bottom: 65px; // Visually centers the content.
color: #fff;
@ -554,17 +562,29 @@ hr {
// Tablet to desktop
@media screen and (min-width: 768px) {
.docs-logo {
width: 70px;
height: 70px;
font-size: 30px;
line-height: 68px;
}
.docs-header {
min-height: 770px;
// Ads on the homepage
.carbonad {
bottom: 130px !important;
left: 50% !important;
margin-left: -165px !important;
}
}
.docs-sub-header .carbonad {
position: absolute !important;
top: 50% !important;
right: 15px !important;
margin-top: 0 !important;
@include transform(translateY(-50%) !important);
}
.docs-sub-content {
margin-right: 380px
}
.docs-title {
position: static;
float: left;
@include transform(translateX(0));
}
.docs-header-content {
@ -583,10 +603,7 @@ hr {
// Ads
.carbonad {
bottom: 130px !important;
left: 50% !important;
width: 330px !important;
margin-left: -165px !important;
border-right: 1px solid rgba(255,255,255,.1) !important;
border-bottom: 1px solid rgba(255,255,255,.1) !important;
border-left: 1px solid rgba(255,255,255,.1) !important;
@ -623,7 +640,7 @@ hr {
display: block;
width: 395px;
height: 813px;
margin-left: -13px;
margin-left: -20px;
font-family: "Helvetica Neue", sans-serif;
background-image: url("../img/iphone5c.png");
background-size: 100%;
@ -706,6 +723,15 @@ hr {
text-shadow: 0 0 10px rgba(0,0,0,.5);
}
}
@media screen and (min-width: 1200px) {
// Device
.device {
margin-left: 39px;
}
.docs-sub-header .carbonad {
right: 30px !important;
}
}
// Example devices
@ -718,6 +744,7 @@ hr {
// --------------------------------------------------
.container {
position: relative;
margin-left: auto;
margin-right: auto;
padding-left: 0;

Write Preview
Loading…
Cancel
Save