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

homepage realign

pull/249/head
connors 11 years ago
parent
c0e99c71bd
commit
cfb0333b0c
5 changed files with 176 additions and 144 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. 4
      _includes/header.html
  2. 2
      _layouts/home.html
  3. 142
      docs-assets/css/docs.css
  4. 23
      index.html
  5. 149
      lib/sass/docs.scss

4
_includes/header.html
Unescape View File

@ -21,6 +21,10 @@
<script src="{{ page.base_url }}docs-assets/js/docs.js"></script>
<script src="{{ page.base_url }}docs-assets/js/fingerblast.js"></script>
<!-- Typekit -->
<script type="text/javascript" src="//use.typekit.net/asj6ttm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);

2
_layouts/home.html
Unescape View File

@ -3,7 +3,7 @@
<head>
{% include header.html %}
</head>
<body ontouchstart="">
<body class="docs-home" ontouchstart="">
{{ content }}
</body>
</html>

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

@ -621,67 +621,87 @@
border-color: #81c700;
}
html,
body {
position: static !important;
font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
}
body {
position: relative !important;
font: 14px/1.5 "adelle-sans",sans-serif;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
.docs-header-wrapper {
background-color: #fafafa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%;
.docs-home {
background-image: linear-gradient(45deg, #02b8ea 0%, #03afbf 50%, #0367bf 100%);
background-repeat: no-repeat;
}
.docs-header-wrapper .icon {
position: absolute;
top: 15px;
right: 15px;
.docs-nav {
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.docs-nav .icon {
margin-top: 5px;
color: #fff;
opacity: .5;
cursor: pointer;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.docs-header-wrapper .icon:active {
opacity: .3;
.docs-nav .icon:hover {
opacity: .8;
}
.docs-header {
padding-top: 50px;
padding-bottom: 50px;
.docs-nav,
.docs-header-content {
text-align: center;
-webkit-animation-name: fadein;
animation-name: fadein;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.docs-header .docs-title {
.docs-header-content {
margin-top: 50px;
}
.docs-header-content .button {
color: #03afbf;
border-color: #fff;
}
.docs-title,
.docs-subtitle {
color: #fff;
}
.docs-title {
margin: 0;
font-size: 40px;
font-size: 22px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 6px;
}
.docs-header .docs-subtitle {
margin-top: 0;
margin-bottom: 20px;
color: #777;
font-size: 22px;
.docs-subtitle {
max-width: 750px;
margin: 0 auto 20px;
font-size: 24px;
font-weight: 300;
line-height: 30px;
line-height: 34px;
opacity: .8;
}
.social {
display: none;
margin: 20px 0 20px;
padding: 0;
list-style: none;
text-align: center;
-webkit-animation-name: fadein;
animation-name: fadein;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.social li {
height: 20px;
padding-bottom: 25px;
display: inline-block;
vertical-align: top;
}
@ -689,6 +709,9 @@ body {
padding: 0;
border: 0;
}
.social iframe {
background-color: transparent;
}
.docs-masthead {
padding-top: 60px;
@ -870,6 +893,9 @@ body {
}
.device {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
display: none;
}
@ -906,6 +932,26 @@ hr {
}
@media screen and (min-width: 768px) {
.docs-header-content {
margin-top: 100px;
}
.docs-header-content .button {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 40px;
line-height: 60px;
}
.social {
margin-top: 40px;
margin-bottom: 40px;
}
.device {
position: relative;
top: 50px;
@ -1169,35 +1215,3 @@ hr {
margin-right: -30px;
}
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
-webkit-transform: scale(0.9);
}
50% {
opacity: 0;
-webkit-transform: scale(0.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes shownotice {
0% {
height: 100%;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
100% {
height: 100%;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
}

23
index.html
Unescape View File

@ -4,18 +4,19 @@ title: Ratchet
base_url: "./"
---
<header class="docs-header-wrapper">
<a class="icon icon-list" href="#"></a>
<div class="container">
<div class="column-group">
<div class="docs-header column units-2">
<h1 class="docs-title">Ratchet</h1>
<p class="docs-subtitle">Prototype 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-primary button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</div>
</div>
<div class="container column-group">
<div class="column units-2">
<header class="docs-nav">
<a class="icon icon-list pull-right" href="/components"></a>
<h1 class="docs-title">Ratchet</h1>
</header>
</div>
</header>
</div>
<div class="docs-header-content">
<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>
</div>
<ul class="social">
<li>

149
lib/sass/docs.scss
Unescape View File

@ -1,5 +1,6 @@
@import "variables.scss";
@import "mixins.scss";
// Devices
.platform-ios {
@import "theme-ios.scss";
@ -11,10 +12,14 @@
//
// Documentation
// --------------------------------------------------
html,
body {
width: 100%;
height: 100%;
}
body {
position: static !important; // Overrides the fixed positioning of body in Ratchet
font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative !important; // Overrides the fixed positioning of body in Ratchet
font: 14px/1.5 "adelle-sans",sans-serif;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased; // Fix for webkit rendering
@ -25,66 +30,83 @@ body {
// Jumbotron
// --------------------------------------------------
.docs-header-wrapper {
background-color: #fafafa;
@include hairline(single, #c8c7cc, 0);
.docs-home {
background-image: linear-gradient(45deg, rgba(2,184,234,1) 0%,rgba(3,175,191,1) 50%,rgba(3,103,191,1) 100%);
background-repeat: no-repeat;
}
.docs-nav {
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.2);
.icon {
position: absolute;
top: 15px;
right: 15px;
margin-top: 5px;
color: #fff;
opacity: .5;
cursor: pointer;
@include transition(opacity .2s linear);
&:active {
opacity: .3;
&:hover {
opacity: .8;
}
}
}
.docs-header {
padding-top: 50px;
padding-bottom: 50px;
.docs-nav,
.docs-header-content {
text-align: center;
@include animation-name(fadein);
@include animation-duration(2s);
.docs-title {
margin: 0;
font-size: 40px;
font-weight: 300;
}
}
.docs-header-content {
margin-top: 50px;
.docs-subtitle {
margin-top: 0;
margin-bottom: 20px;
color: #777;
font-size: 22px;
font-weight: 300;
line-height: 30px;
.button {
color: rgb(3,175,191);
border-color: #fff;
}
}
.docs-title,
.docs-subtitle {
color: #fff;
}
.docs-title {
margin: 0;
font-size: 22px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 6px;
}
.docs-subtitle {
max-width: 750px;
margin: 0 auto 20px;
font-size: 24px;
font-weight: 300;
line-height: 34px;
opacity: .8;
}
// Overriding the button styles for the social
// --------------------------------------------------
.social {
display: none;
margin: 20px 0 20px;
padding: 0;
list-style: none;
text-align: center;
@include animation-name(fadein);
@include animation-duration(2s);
li {
height: 20px;
padding-bottom: 25px;
display: inline-block;
vertical-align: top;
}
[class*="button"] {
padding: 0;
border: 0;
}
// Remove after button class changes.
iframe {
background-color: transparent;
}
}
@ -275,6 +297,9 @@ body {
}
.device {
font-family: $font-family-default;
font-size: $font-size-default;
line-height: $line-height-default;
display: none;
}
@ -314,6 +339,29 @@ hr {
// Tablet to desktop
// --------------------------------------------------
@media screen and (min-width: 768px) {
// Jumbotron
.docs-header-content {
margin-top: 100px;
.button {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 40px;
line-height: 60px;
}
// Social
.social {
margin-top: 40px;
margin-bottom: 40px;
}
// Device
.device {
position: relative;
top: 50px;
@ -504,38 +552,3 @@ hr {
margin-right: -30px;
}
}
// Animations
// --------------------------------------------------
@-webkit-keyframes fadein {
0% {
opacity: 0;
-webkit-transform: scale(.9);
}
50% {
opacity: 0;
-webkit-transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
// Only visible to Mozilla browsers. Sneaky huh?
@-moz-keyframes shownotice {
0% {
height: 100%;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
100% {
height: 100%;
min-height: 30px;
padding: 20px 0;
opacity: 1;
}
}

Write Preview
Loading…
Cancel
Save