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

Merge branch 'optimize_docs_fonts' of github.com:twbs/ratchet into optimize_docs_fonts 

Conflicts:
	docs/examples.html
	docs/getting-started.html
	sass/docs.scss
pull/359/head
Mark Otto 11 years ago
parent
84a532eda2 ed7bbd6403
commit
5ccaea573b
6 changed files with 61 additions and 153 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. 4
      docs/_includes/header.html
  2. 67
      docs/assets/css/docs.css
  3. 2
      docs/assets/css/docs.min.css
  4. 48
      docs/examples.html
  5. 3
      docs/getting-started.html
  6. 90
      sass/docs.scss

4
docs/_includes/header.html
Unescape View File

@ -32,8 +32,4 @@
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})(); })();
// Remove once I add back in the docs.js
// $(function() {
// $(window).on('load', function () { new FingerBlast('.body'); });
// });
</script> </script>

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

@ -92,7 +92,8 @@ body {
} }
.docs-header .carbonad { .docs-header .carbonad {
left: 50% !important; left: 50% !important;
margin-left: -165px !important; width: 300px !important;
margin-left: -150px !important;
margin-bottom: 60px !important; margin-bottom: 60px !important;
} }
@ -106,11 +107,6 @@ body {
transform: translateY(-50%) !important; transform: translateY(-50%) !important;
} }
} }
@media screen and (min-width: 1200px) {
.docs-sub-header .carbonad {
right: 30px !important;
}
}
.docs-masthead { .docs-masthead {
position: relative; position: relative;
padding-top: 15px; padding-top: 15px;
@ -296,7 +292,7 @@ body {
} }
.docs-header-content .btn { .docs-header-content .btn {
display: block; display: block;
padding: 15px 90px 16px; padding: 15px 75px 16px;
font-size: 18px; font-size: 18px;
margin-bottom: 0; margin-bottom: 0;
color: #0a1855; color: #0a1855;
@ -365,7 +361,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: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-family: "Open Sans", sans-serif !important;
} }
.carbonad-text { .carbonad-text {
@ -387,7 +383,7 @@ body {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.carbonad { .carbonad {
width: 330px !important; width: 360px !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: 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; border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
@ -559,21 +555,13 @@ body {
} }
.docs-examples { .docs-examples {
margin-top: 50px;
margin-bottom: 50px;
}
.docs-example-group {
margin-top: 30px; margin-top: 30px;
} }
.docs-example-group .example-wrap {
display: inline-block; .example-wrap {
margin-right: 10px; margin-bottom: 30px;
}
.docs-example-group .example-wrap:last-child {
margin-right: 10px;
} }
.docs-example-group .example-wrap .example { .example-wrap .example {
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 3px; padding: 3px;
@ -581,28 +569,15 @@ body {
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-radius: 3px; border-radius: 3px;
} }
.docs-example-group .example-wrap h5 { .example-wrap .example-title {
margin-top: 10px; margin-top: 10px;
} }
.docs-example-group .example-wrap img { .example-wrap img {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
} }
@media screen and (min-width: 768px) {
.docs-example-group .example-wrap {
display: inline-block;
}
.docs-example-group .example-wrap .example {
width: 180px;
}
}
@media screen and (min-width: 1200px) {
.docs-example-group .example-wrap .example {
width: 220px;
}
}
code { code {
padding: 2px 4px; padding: 2px 4px;
font-size: 90%; font-size: 90%;
@ -974,16 +949,6 @@ hr {
max-width: 940px; max-width: 940px;
} }
.column {
padding-left: 20px;
padding-right: 20px;
}
.column .column-group {
margin-left: -20px;
margin-right: -20px;
}
.units-1 { .units-1 {
width: 50%; width: 50%;
} }
@ -1088,16 +1053,6 @@ hr {
.container { .container {
max-width: 1170px; max-width: 1170px;
} }
.column {
padding-left: 30px;
padding-right: 30px;
}
.column .column-group {
margin-left: -30px;
margin-right: -30px;
}
} }
.platform-ios { .platform-ios {
@-webkit-keyframes fadeOverlay { @-webkit-keyframes fadeOverlay {

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

48
docs/examples.html
Unescape View File

@ -20,30 +20,38 @@ title: Examples &middot; Ratchet
<div class="container"> <div class="container">
<div class="column-group"> <div class="column-group">
<div class="column units-2 lg-units-8 docs-examples"> <div class="column units-2 lg-units-8 docs-examples docs-content">
<p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device to see the apps as intended.</p>
<p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
<div class="docs-example-group">
<div class="example-wrap"> <div class="column-group">
<a class="example" href="/examples/app-movies" data-ignore="push"> <div class="column units-2 lg-units-4">
<img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480"> <div class="example-wrap">
</a> <a class="example" href="/examples/app-movies" data-ignore="push">
<h5>Movie finder</h5> <img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
</div> </a>
<div class="example-wrap"> <h4 class="example-title">Movie finder</h4>
<a class="example" href="/examples/app-ios-mail" data-ignore="push"> </div>
<img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
</a>
<h5>iOS mail app</h5>
</div> </div>
<div class="example-wrap"> <div class="column units-2 lg-units-4">
<a class="example" href="/examples/app-android-notes" data-ignore="push"> <div class="example-wrap">
<img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480"> <a class="example" href="/examples/app-ios-mail" data-ignore="push">
</a> <img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
<h5>Android notes app</h5> </a>
<h4 class="example-title">iOS mail app</h4>
</div>
</div> </div>
<div class="column units-2 lg-units-4">
<div class="example-wrap">
<a class="example" href="/examples/app-android-notes" data-ignore="push">
<img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
</a>
<h4 class="example-title">Android notes app</h4>
</div>
</div> <!-- .column-group -->
</div> </div>
</div> </div>
<div class="column units-2 lg-units-4"> <div class="column units-2 lg-units-4">
{% include download-module.html %} {% include download-module.html %}
</div> </div>

3
docs/getting-started.html
Unescape View File

@ -21,9 +21,6 @@ title: Getting started &middot; Ratchet
<div class="container"> <div class="container">
<div class="column-group"> <div class="column-group">
<div class="column units-2 lg-units-8 docs-content"> <div class="column units-2 lg-units-8 docs-content">
<div class="docs-section"> <div class="docs-section">
<h2>Quick start</h2> <h2>Quick start</h2>
<p class="lead">Quickly get up and running with a Ratchet prototype.</p> <p class="lead">Quickly get up and running with a Ratchet prototype.</p>

90
sass/docs.scss
Unescape View File

@ -96,7 +96,8 @@ body {
// Ads on the homepage // Ads on the homepage
.carbonad { .carbonad {
left: 50% !important; left: 50% !important;
margin-left: -165px !important; width: 300px !important;
margin-left: -150px !important;
margin-bottom: 60px !important; margin-bottom: 60px !important;
} }
} }
@ -110,12 +111,6 @@ body {
@include transform(translateY(-50%) !important); @include transform(translateY(-50%) !important);
} }
} }
// Account for the extra margin for large sceens.
@media screen and (min-width: 1200px) {
.docs-sub-header .carbonad {
right: 30px !important;
}
}
// Masthead and nav // Masthead and nav
.docs-masthead { .docs-masthead {
@ -302,7 +297,7 @@ body {
.btn { .btn {
display: block; display: block;
padding: 15px 90px 16px; padding: 15px 75px 16px;
font-size: 18px; font-size: 18px;
margin-bottom: 0; margin-bottom: 0;
color: #0a1855; color: #0a1855;
@ -368,7 +363,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: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-family: "Open Sans", sans-serif !important;
} }
.carbonad-text { .carbonad-text {
padding-top: 0 !important; padding-top: 0 !important;
@ -387,7 +382,7 @@ body {
// Desktop styles for ads // Desktop styles for ads
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.carbonad { .carbonad {
width: 330px !important; width: 360px !important;
border-right: 1px solid rgba(255,255,255,.1) !important; border-right: 1px solid rgba(255,255,255,.1) !important;
border-bottom: 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; border-left: 1px solid rgba(255,255,255,.1) !important;
@ -586,52 +581,27 @@ body {
// Example devices // Example devices
// -------------------------------------------------- // --------------------------------------------------
.docs-examples { .docs-examples {
margin-top: 50px;
margin-bottom: 50px;
}
.docs-example-group {
margin-top: 30px; margin-top: 30px;
.example-wrap {
display: inline-block;
margin-right: 10px;
&:last-child {
margin-right: 10px;
}
.example {
display: block;
overflow: hidden;
padding: 3px;
width: 100%;
border: $border-default;
border-radius: 3px;
}
h5 {
margin-top: 10px;
}
img {
display: block;
width: 100%;
height: auto;
}
}
} }
@media screen and (min-width: 768px) { .example-wrap {
// Examples margin-bottom: 30px;
.docs-example-group .example-wrap {
display: inline-block;
.example { .example {
width: 180px; display: block;
} overflow: hidden;
padding: 3px;
width: 100%;
border: $border-default;
border-radius: 3px;
} }
} .example-title {
@media screen and (min-width: 1200px) { margin-top: 10px;
.docs-example-group .example-wrap .example { }
width: 220px; img {
display: block;
width: 100%;
height: auto;
} }
} }
@ -1015,15 +985,6 @@ hr {
padding: 0; padding: 0;
max-width: 940px; max-width: 940px;
} }
.column {
padding-left: 20px;
padding-right: 20px;
}
// Lines nested grids up correctly.
.column .column-group {
margin-left: -20px;
margin-right: -20px;
}
// Override the mobile grid // Override the mobile grid
.units-1 { width: 50%; } .units-1 { width: 50%; }
@ -1065,15 +1026,6 @@ hr {
.container { .container {
max-width: 1170px; max-width: 1170px;
} }
.column {
padding-left: 30px;
padding-right: 30px;
}
// Lines nested grids up correctly.
.column .column-group {
margin-left: -30px;
margin-right: -30px;
}
} }

Write Preview
Loading…
Cancel
Save