homepage realign
This commit is contained in:
connors
Родитель
c0e99c71bd
Коммит
cfb0333b0c
|
|
@ -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']);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body ontouchstart="">
|
||||
<body class="docs-home" ontouchstart="">
|
||||
{{ content }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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-weight: 300;
|
||||
}
|
||||
.docs-header .docs-subtitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
color: #777;
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
line-height: 30px;
|
||||
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;
|
||||
}
|
||||
|
||||
.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
23
index.html
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import "variables.scss";
|
||||
@import "mixins.scss";
|
||||
|
||||
// Devices
|
||||
.platform-ios {
|
||||
@import "theme-ios.scss";
|
||||
|
|
@ -11,10 +12,14 @@
|
|||
//
|
||||
// Documentation
|
||||
// --------------------------------------------------
|
||||
|
||||
html,
|
||||
body {
|
||||
position: static !important; // Overrides the fixed positioning of body in Ratchet
|
||||
font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
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-header-content {
|
||||
margin-top: 50px;
|
||||
|
||||
.docs-title {
|
||||
margin: 0;
|
||||
font-size: 40px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче