From c67be618a8dc9955e3be22c03cfb74812d09c162 Mon Sep 17 00:00:00 2001 From: Jenil Gogari Date: Tue, 9 Dec 2014 00:25:14 +0530 Subject: Redesign front-page * Add splash background image * Parallax scrolling * Moved logo to navbar --- assets/css/bootswatch.min.css | 2 +- assets/img/bg.jpg | Bin 0 -> 53220 bytes assets/img/logo-nav.png | Bin 0 -> 4341 bytes assets/js/bootswatch.js | 10 ++++++++++ assets/less/bootswatch.less | 29 +++++++++++++++++++++++++++-- 5 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 assets/img/bg.jpg create mode 100644 assets/img/logo-nav.png (limited to 'assets') diff --git a/assets/css/bootswatch.min.css b/assets/css/bootswatch.min.css index e113f999..8115e991 100644 --- a/assets/css/bootswatch.min.css +++ b/assets/css/bootswatch.min.css @@ -1 +1 @@ -body{padding-top:50px}#banner{min-height:300px;border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:5em 0 2em;background-color:#141d27;color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){.splash{padding-top:4em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}} \ No newline at end of file +body{padding-top:50px}body>.navbar{-webkit-transition:background-color 300ms ease-in;transition:background-color 300ms ease-in}body>.navbar-transparent{background-color:transparent}body>.navbar-transparent .navbar-nav>.open>a{background-color:transparent !important}#home{padding-top:0}#home .navbar-brand{padding:13.5px 15px 12.5px}#home .navbar-brand>img{display:inline;margin:0 8px;height:100%}#banner{min-height:300px;border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:9em 0 2em;background-color:#141d27;background-image:url(../img/bg.jpg);background-size:cover;background-attachment:fixed;color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){.splash{padding-top:4em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}} \ No newline at end of file diff --git a/assets/img/bg.jpg b/assets/img/bg.jpg new file mode 100644 index 00000000..4082ef3d Binary files /dev/null and b/assets/img/bg.jpg differ diff --git a/assets/img/logo-nav.png b/assets/img/logo-nav.png new file mode 100644 index 00000000..ffae8993 Binary files /dev/null and b/assets/img/logo-nav.png differ diff --git a/assets/js/bootswatch.js b/assets/js/bootswatch.js index 93f1d4ef..9a32eee5 100644 --- a/assets/js/bootswatch.js +++ b/assets/js/bootswatch.js @@ -1,4 +1,14 @@ (function(){ + $(window).scroll(function () { + var top = $(document).scrollTop(); + $('.splash').css({ + 'background-position': '0px -'+(top/3).toFixed(2)+'px' + }); + if(top > 50) + $('#home > .navbar').removeClass('navbar-transparent'); + else + $('#home > .navbar').addClass('navbar-transparent'); + }); var $button = $("
< >
").click(function(){ var html = $(this).parent().html(); diff --git a/assets/less/bootswatch.less b/assets/less/bootswatch.less index 8b27f8df..99d828e4 100644 --- a/assets/less/bootswatch.less +++ b/assets/less/bootswatch.less @@ -1,5 +1,27 @@ body { - padding-top: 50px; + padding-top: 50px; + > .navbar { + -webkit-transition: background-color 300ms ease-in; + transition: background-color 300ms ease-in; + } + > .navbar-transparent { + background-color: transparent; + .navbar-nav > .open > a { + background-color: transparent !important; + } + } +} + +#home { + padding-top: 0px; + .navbar-brand { + padding: 13.5px 15px 12.5px; + > img { + display: inline; + margin: 0 10px; + height: 100%; + } + } } #banner { @@ -75,8 +97,11 @@ footer { } .splash { - padding: 5em 0 2em; + padding: 9em 0 2em; background-color: #141d27; + background-image: url(../img/bg.jpg); + background-size: cover; + background-attachment: fixed; color: #fff; text-align: center; -- cgit v1.2.3