From f480a73ed0e1326fc2795cc5f3049b997750799a Mon Sep 17 00:00:00 2001 From: connors Date: Mon, 24 Feb 2014 16:19:29 -0800 Subject: update footer and grunt --- Gruntfile.js | 4 +-- docs/_includes/footer.html | 19 ++++++++++- docs/assets/css/docs.css | 58 +++++++++++++++++++++----------- docs/components.html | 2 +- docs/index.html | 16 +-------- sass/docs.scss | 82 +++++++++++++++++++++++++++------------------- 6 files changed, 108 insertions(+), 73 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 85cd2ee..d5e887e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -53,9 +53,7 @@ module.exports = function(grunt) { '<%= meta.distPath %>ios-theme.css': 'sass/theme-ios.scss', '<%= meta.distPath %>android-theme.css': 'sass/theme-android.scss', '<%= meta.docsAssetsPath %>css/docs.css': 'sass/docs.scss', - '<%= meta.docsPath %><%= pkg.name %>.css': 'sass/ratchet.scss', - '<%= meta.docsPath %>ios-theme.css': 'sass/theme-ios.scss', - '<%= meta.docsPath %>android-theme.css': 'sass/theme-android.scss' + '<%= meta.docsPath %><%= pkg.name %>.css': '<%= meta.distPath %><%= pkg.name %>.css' } } }, diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index f6c3882..9b475a7 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -1 +1,18 @@ -

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 Connor Sears.

+
+ + + +

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 Connor Sears.

+
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6a9ffc5..89834c6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -43,7 +43,7 @@ body { .docs-header { height: 100vh; - min-height: 620px; + min-height: 700px; } .docs-header .carbonad { position: absolute !important; @@ -311,31 +311,47 @@ body { font-weight: 300; } -.social { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 20px 0 20px; +.docs-footer { + border-top: 1px solid #ddd; + margin-top: 50px; + padding-top: 30px; + padding-bottom: 30px; + text-align: center; +} +.docs-footer .social { + padding: 0 0 20px; margin: 0; list-style: none; - text-align: center; - background-color: rgba(0, 0, 0, 0.2); } -.social li { +.docs-footer .social li { height: 20px; display: inline-block; vertical-align: top; } -.social .twitter-follow-button { +.docs-footer .social .twitter-follow-button { margin-top: 5px; } -.docs-mini-footer { - padding-top: 40px; - padding-bottom: 40px; +.docs-footer-content { margin: 0; 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 { @@ -375,6 +391,7 @@ body { .docs-examples { margin-top: 30px; + margin-bottom: 50px; } .docs-example-group { @@ -418,6 +435,9 @@ code { margin-right: -15px; border-bottom: 1px solid #ddd; } +.component.no-border { + border-bottom: 0; +} .component-title { margin-bottom: 10px; @@ -630,10 +650,10 @@ hr { @media screen and (min-width: 768px) { .docs-header { - min-height: 770px; + min-height: 830px; } .docs-header .carbonad { - bottom: 130px !important; + bottom: 180px !important; left: 50% !important; margin-left: -165px !important; } @@ -679,8 +699,6 @@ hr { .docs-nav { float: right; - margin-top: 3px; - margin-bottom: -3px; } .docs-nav .docs-nav-trigger { display: none; @@ -778,8 +796,8 @@ hr { border-radius: 3px !important; } - .social .twitter-follow-button { - margin-top: 0; + .docs-footer .social .twitter-follow-button { + margin-top: 0px; } .step-title { diff --git a/docs/components.html b/docs/components.html index da0ae91..e2f5805 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1226,7 +1226,7 @@ window.addEventListener('push', myFunction); -
+

Ratchicons

Use Ratchicons in your application to help inform interactions.

diff --git a/docs/index.html b/docs/index.html index 13f5f8d..fd3e832 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,19 +11,5 @@ title: Ratchet {% include ad.html %} - - - + {% include footer.html %} diff --git a/sass/docs.scss b/sass/docs.scss index 9be20b8..56f52ce 100644 --- a/sass/docs.scss +++ b/sass/docs.scss @@ -44,7 +44,7 @@ body { } .docs-header { height: 100vh; - min-height: 620px; + min-height: 700px; // Ad on the homepage .carbonad { @@ -301,39 +301,52 @@ body { } -// Overriding the button styles for the social +// Footer // -------------------------------------------------- -.social { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 20px 0 20px; - margin: 0; - list-style: none; +.docs-footer { + border-top: 1px solid #ddd; + margin-top: 50px; + padding-top: 30px; + padding-bottom: 30px; text-align: center; - background-color: rgba(0,0,0,.2); - li { - height: 20px; - display: inline-block; - vertical-align: top; - } - .twitter-follow-button { - margin-top: 5px; + .social { + padding: 0 0 20px; + margin: 0; + list-style: none; + + li { + height: 20px; + display: inline-block; + vertical-align: top; + } + .twitter-follow-button { + margin-top: 5px; + } } } - - -// Footer -// -------------------------------------------------- - -.docs-mini-footer { - padding-top: 40px; - padding-bottom: 40px; +.docs-footer-content { margin: 0; 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 { margin-top: 30px; + margin-bottom: 50px; } .docs-example-group { margin-top: 30px; @@ -423,6 +437,10 @@ code { margin-left: -15px; margin-right: -15px; border-bottom: 1px solid #ddd; + + &.no-border { + border-bottom: 0; + } } .component-title { margin-bottom: 10px; @@ -645,11 +663,11 @@ hr { // Tablet to desktop @media screen and (min-width: 768px) { .docs-header { - min-height: 770px; + min-height: 830px; // Ads on the homepage .carbonad { - bottom: 130px !important; + bottom: 180px !important; left: 50% !important; margin-left: -165px !important; } @@ -687,8 +705,6 @@ hr { // Docs nav .docs-nav { float: right; - margin-top: 3px; - margin-bottom: -3px; .docs-nav-trigger { display: none; @@ -791,9 +807,9 @@ hr { } // Social - .social { - .twitter-follow-button { - margin-top: 0; + .docs-footer { + .social .twitter-follow-button { + margin-top: 0px; } } -- cgit v1.2.3