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

update footer and grunt

pull/213/head
connors 11 years ago
parent
34dfafc3b9
commit
f480a73ed0
6 changed files with 108 additions and 73 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
      Gruntfile.js
  2. 19
      docs/_includes/footer.html
  3. 58
      docs/assets/css/docs.css
  4. 2
      docs/components.html
  5. 16
      docs/index.html
  6. 82
      sass/docs.scss

4
Gruntfile.js
Unescape View File

@ -53,9 +53,7 @@ module.exports = function(grunt) {
'<%= meta.distPath %>ios-theme.css': 'sass/theme-ios.scss', '<%= meta.distPath %>ios-theme.css': 'sass/theme-ios.scss',
'<%= meta.distPath %>android-theme.css': 'sass/theme-android.scss', '<%= meta.distPath %>android-theme.css': 'sass/theme-android.scss',
'<%= meta.docsAssetsPath %>css/docs.css': 'sass/docs.scss', '<%= meta.docsAssetsPath %>css/docs.css': 'sass/docs.scss',
'<%= meta.docsPath %><%= pkg.name %>.css': 'sass/ratchet.scss', '<%= meta.docsPath %><%= pkg.name %>.css': '<%= meta.distPath %><%= pkg.name %>.css'
'<%= meta.docsPath %>ios-theme.css': 'sass/theme-ios.scss',
'<%= meta.docsPath %>android-theme.css': 'sass/theme-android.scss'
} }
} }
}, },

19
docs/_includes/footer.html
Unescape View File

@ -1 +1,18 @@
<p class="docs-mini-footer">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> <div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<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>
<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>
</li>
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</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>
</li>
</ul>
<p class="docs-footer-content">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
</div>

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

@ -43,7 +43,7 @@ body {
.docs-header { .docs-header {
height: 100vh; height: 100vh;
min-height: 620px; min-height: 700px;
} }
.docs-header .carbonad { .docs-header .carbonad {
position: absolute !important; position: absolute !important;
@ -311,31 +311,47 @@ body {
font-weight: 300; font-weight: 300;
} }
.social { .docs-footer {
position: absolute; border-top: 1px solid #ddd;
bottom: 0; margin-top: 50px;
left: 0; padding-top: 30px;
right: 0; padding-bottom: 30px;
padding: 20px 0 20px; text-align: center;
}
.docs-footer .social {
padding: 0 0 20px;
margin: 0; margin: 0;
list-style: none; list-style: none;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
} }
.social li { .docs-footer .social li {
height: 20px; height: 20px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.social .twitter-follow-button { .docs-footer .social .twitter-follow-button {
margin-top: 5px; margin-top: 5px;
} }
.docs-mini-footer { .docs-footer-content {
padding-top: 40px;
padding-bottom: 40px;
margin: 0; margin: 0;
color: #777; color: #777;
font-size: 12px;
}
.docs-header .docs-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.docs-header .docs-footer .docs-footer-content {
color: rgba(255, 255, 255, 0.5);
}
.docs-header .docs-footer .docs-footer-content a {
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
} }
.docs-component-toolbar { .docs-component-toolbar {
@ -375,6 +391,7 @@ body {
.docs-examples { .docs-examples {
margin-top: 30px; margin-top: 30px;
margin-bottom: 50px;
} }
.docs-example-group { .docs-example-group {
@ -418,6 +435,9 @@ code {
margin-right: -15px; margin-right: -15px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.component.no-border {
border-bottom: 0;
}
.component-title { .component-title {
margin-bottom: 10px; margin-bottom: 10px;
@ -630,10 +650,10 @@ hr {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header { .docs-header {
min-height: 770px; min-height: 830px;
} }
.docs-header .carbonad { .docs-header .carbonad {
bottom: 130px !important; bottom: 180px !important;
left: 50% !important; left: 50% !important;
margin-left: -165px !important; margin-left: -165px !important;
} }
@ -679,8 +699,6 @@ hr {
.docs-nav { .docs-nav {
float: right; float: right;
margin-top: 3px;
margin-bottom: -3px;
} }
.docs-nav .docs-nav-trigger { .docs-nav .docs-nav-trigger {
display: none; display: none;
@ -778,8 +796,8 @@ hr {
border-radius: 3px !important; border-radius: 3px !important;
} }
.social .twitter-follow-button { .docs-footer .social .twitter-follow-button {
margin-top: 0; margin-top: 0px;
} }
.step-title { .step-title {

2
docs/components.html
Unescape View File

@ -1226,7 +1226,7 @@ window.addEventListener('push', myFunction);
</article> </article>
<!-- Ratchicons --> <!-- Ratchicons -->
<article class="component" id="ratchicons"> <article class="component no-border" id="ratchicons">
<h3 class="component-title">Ratchicons</h3> <h3 class="component-title">Ratchicons</h3>
<p class="component-description">Use Ratchicons in your application to help inform interactions.</p> <p class="component-description">Use Ratchicons in your application to help inform interactions.</p>

16
docs/index.html
Unescape View File

@ -11,19 +11,5 @@ title: Ratchet
</div> </div>
{% include ad.html %} {% include ad.html %}
{% include footer.html %}
<!-- Social links -->
<ul class="social">
<li>
<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>
<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>
</li>
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</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>
</li>
</ul>
</div> </div>

82
sass/docs.scss
Unescape View File

@ -44,7 +44,7 @@ body {
} }
.docs-header { .docs-header {
height: 100vh; height: 100vh;
min-height: 620px; min-height: 700px;
// Ad on the homepage // Ad on the homepage
.carbonad { .carbonad {
@ -301,39 +301,52 @@ body {
} }
// Overriding the button styles for the social // Footer
// -------------------------------------------------- // --------------------------------------------------
.social { .docs-footer {
position: absolute; border-top: 1px solid #ddd;
bottom: 0; margin-top: 50px;
left: 0; padding-top: 30px;
right: 0; padding-bottom: 30px;
padding: 20px 0 20px;
margin: 0;
list-style: none;
text-align: center; text-align: center;
background-color: rgba(0,0,0,.2);
li { .social {
height: 20px; padding: 0 0 20px;
display: inline-block; margin: 0;
vertical-align: top; list-style: none;
}
.twitter-follow-button { li {
margin-top: 5px; height: 20px;
display: inline-block;
vertical-align: top;
}
.twitter-follow-button {
margin-top: 5px;
}
} }
} }
.docs-footer-content {
// Footer
// --------------------------------------------------
.docs-mini-footer {
padding-top: 40px;
padding-bottom: 40px;
margin: 0; margin: 0;
color: #777; color: #777;
font-size: 12px;
}
.docs-header .docs-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 0;
border-top: 1px solid rgba(255,255,255,.1);
.docs-footer-content {
color: rgba(255,255,255,.5);
a {
font-weight: bold;
color: rgba(255,255,255,.8);
}
}
} }
@ -375,6 +388,7 @@ body {
.docs-examples { .docs-examples {
margin-top: 30px; margin-top: 30px;
margin-bottom: 50px;
} }
.docs-example-group { .docs-example-group {
margin-top: 30px; margin-top: 30px;
@ -423,6 +437,10 @@ code {
margin-left: -15px; margin-left: -15px;
margin-right: -15px; margin-right: -15px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
&.no-border {
border-bottom: 0;
}
} }
.component-title { .component-title {
margin-bottom: 10px; margin-bottom: 10px;
@ -645,11 +663,11 @@ hr {
// Tablet to desktop // Tablet to desktop
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header { .docs-header {
min-height: 770px; min-height: 830px;
// Ads on the homepage // Ads on the homepage
.carbonad { .carbonad {
bottom: 130px !important; bottom: 180px !important;
left: 50% !important; left: 50% !important;
margin-left: -165px !important; margin-left: -165px !important;
} }
@ -687,8 +705,6 @@ hr {
// Docs nav // Docs nav
.docs-nav { .docs-nav {
float: right; float: right;
margin-top: 3px;
margin-bottom: -3px;
.docs-nav-trigger { .docs-nav-trigger {
display: none; display: none;
@ -791,9 +807,9 @@ hr {
} }
// Social // Social
.social { .docs-footer {
.twitter-follow-button { .social .twitter-follow-button {
margin-top: 0; margin-top: 0px;
} }
} }

Write Preview
Loading…
Cancel
Save