Responsive work on hero section
Project: http://git-wip-us.apache.org/repos/asf/cordova-docs/repo Commit: http://git-wip-us.apache.org/repos/asf/cordova-docs/commit/a5b7c5ac Tree: http://git-wip-us.apache.org/repos/asf/cordova-docs/tree/a5b7c5ac Diff: http://git-wip-us.apache.org/repos/asf/cordova-docs/diff/a5b7c5ac Branch: refs/heads/cordova-website Commit: a5b7c5acf80390ab7837a5a638388d3e8112ab41 Parents: ba9bee4 Author: Brad Gashler <[email protected]> Authored: Tue Aug 11 16:26:56 2015 -0700 Committer: Brad Gashler <[email protected]> Committed: Tue Aug 11 16:26:56 2015 -0700 ---------------------------------------------------------------------- www/index.html | 9 ++++---- www/static/css-src/main.scss | 47 ++++++++++++++++++++++++++++++--------- www/static/js/main.js | 6 +++-- 3 files changed, 46 insertions(+), 16 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/a5b7c5ac/www/index.html ---------------------------------------------------------------------- diff --git a/www/index.html b/www/index.html index 6347648..9e89e20 100644 --- a/www/index.html +++ b/www/index.html @@ -10,16 +10,17 @@ title: Apache Cordova <div id="hero"> <div class="container vertical-center-parent"> <div id="hero_section" class="vertical-center-child"> - <div id="hero_section_left"> + <div id="hero_section_left" class="hidden-xs"> <img src="{{ site.baseurl }}/static/img/cordova_bot.png" style="width:100%" /> </div> <div id="hero_section_right"> - <img id="hero_logo" src="{{ site.baseurl }}/static/img/logo_text.svg" /> + <img class="hero_logo hidden-xs" src="{{ site.baseurl }}/static/img/logo_text.svg" /> + <img class="hero_logo visible-xs" src="{{ site.baseurl }}/static/img/logo_full_2.svg" /> <p>Native mobile apps with HTML, CSS & JavaScript</p> <p>Target multiple platforms with one code base</p> <p>Free and open source</p> <div> - <img src="{{ site.baseurl }}/static/img/platform-logos.svg" width="188px" /> + <img src="{{ site.baseurl }}/static/img/platform-logos.svg" width="188px" /><a href="#supported_platforms_section" class="platforms_more">+6 more...</a> </div> <div> <button type="button" class="btn btn-lg btn-primary">Get Started</button> @@ -161,7 +162,7 @@ title: Apache Cordova <div class="container-fluid dark"> <div class="container"> - <div class="row showcase_section_intro"> + <div class="row showcase_section_intro" id="supported_platforms_section"> <div class="col-md-12 text-center"> <h1>Supported Platforms</h1> <h2>See a list of http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/a5b7c5ac/www/static/css-src/main.scss ---------------------------------------------------------------------- diff --git a/www/static/css-src/main.scss b/www/static/css-src/main.scss index edf57b8..9f075ee 100644 --- a/www/static/css-src/main.scss +++ b/www/static/css-src/main.scss @@ -1,5 +1,5 @@ @import 'lib/bootstrap'; -@import 'blog'; +/* @import 'blog'; */ @import 'plugins'; /* Customized Variables for Bootstrap */ @@ -35,6 +35,14 @@ $gray-20: lighten($gray-base, 80%); $gray-10: lighten($gray-base, 90%); $brand-primary: #4CC2E4; +/* Grid size (mirrors Bootstraps) */ +$screen-sm-min: 768px; +$screen-xs-max: $screen-sm-min - 1; +$screen-md-min: 992px; +$screen-sm-max: $screen-md-min - 1; +$screen-lg: (min-width: 1200px); +$scree-md-max: $screen-lg - 1; + /* Mixin that prefixes any CSS rule */ @mixin vendor-prefix($property, $argument) { @@ -46,6 +54,13 @@ $brand-primary: #4CC2E4; } +@media (min-width: $screen-sm-min) { body { font-size:.5em; } } + + +body { + +} + #hero { height:1020px; background-color:$gray-transparent; @@ -54,27 +69,39 @@ $brand-primary: #4CC2E4; position:relative; color:white; #hero_section { - width:730px; + width:80%; + max-width:730px; font-size:18px; margin-top:-100px; /* vertically centers more accuaretly since bottom bar is absolutely positioned*/ + > div { + display: inline-block; + } #hero_section_left { - width:312px; - float:left; + width:39%; + vertical-align: top; } + #hero_section_right { - width:730px - 312px; - float:right; + width:59%; div { padding-bottom:20px; } + .platforms_more { + font-size: 12px; + padding-left: 20px; + font-weight: bold; + } } } - #hero_logo { - width:350px; + .hero_logo { + width:100%; padding-top:40px; padding-bottom:20px; } } +@media (max-width: 768px) { + #hero #hero_section #hero_section_right { width:100%; } +} #hero_bottom_strip { position: absolute; @@ -143,7 +170,7 @@ img#logo_top { position:absolute; top:50%; left:50%; - transform:translate(-50%,-50%); + @include vendor-prefix(transform, translate(-50%,-50%)); } } @@ -178,7 +205,7 @@ img#logo_top { @extend .well_code; position: absolute; top: 100%; - transform: translateY(-100%); + @include vendor-prefix(transform, translateY(-100%)); padding: 0; margin:0; background-color: $gray-20; http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/a5b7c5ac/www/static/js/main.js ---------------------------------------------------------------------- diff --git a/www/static/js/main.js b/www/static/js/main.js index 575f71a..7a35752 100644 --- a/www/static/js/main.js +++ b/www/static/js/main.js @@ -2,6 +2,8 @@ $(function(){ // resize the hero to the innerWidth of the window var window_height = window.innerHeight; var navbar_spacer = $('#_fixed_navbar_spacer').height(); var adjusted_window_height = window_height - navbar_spacer; - console.log('new height ' + adjusted_window_height) - $('#hero').height(adjusted_window_height); + if (adjusted_window_height > 800) { // do not resize on small devices + $('#hero').height(adjusted_window_height); + console.log('new height ' + adjusted_window_height) + } }); \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
