Add sticky footer

This commit is contained in:
Sahat Yalkabov
2014-01-24 02:14:40 -05:00
parent 930aab7046
commit ab09056976
2 changed files with 78 additions and 38 deletions

View File

@ -3,10 +3,31 @@
// Scaffolding
// -------------------------
html, body {
height: 100%;
}
body {
padding-top: 70px;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -150px;
/* Pad bottom by footer height */
padding: 0 0 150px;
}
#footer {
height: 150px;
padding-top: 35px;
background-color: @navbar-default-bg;
border-top: 1px solid @navbar-default-border;
}
// Brand Colors
// -------------------------
@ -17,7 +38,6 @@ body {
@brand-info: #5bc0dd;
// Navbar
// -------------------------
@ -132,6 +152,7 @@ body {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
// Misc
.navbar-nav img {
width: 30px;
height: 30px;
@ -150,3 +171,5 @@ body {
margin-bottom: 12px;
padding-top: 0;
}

View File

@ -16,43 +16,60 @@ html
script(src='/js/lib/jquery.js')
script(src='/js/lib/bootstrap.js')
script(src='/js/lib/flatui-radio.js')
script(src='/js/main.js')
body
.navbar.navbar-default.navbar-fixed-top
#wrap
.navbar.navbar-default.navbar-fixed-top
.container
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='/') Project name
.collapse.navbar-collapse
ul.nav.navbar-nav
li(class=title=='Home'?'active':undefined)
a(href='/') Home
li(class=title=='API Browser'?'active':undefined)
a(href='/api') API Browser
li(class=title=='Contact'?'active':undefined)
a(href='/contact') Contact
ul.nav.navbar-nav.navbar-right
if !user
li(class=title=='Login'?'active':undefined)
a(href='/login') Login
li(class=title=='Create Account'?'active':undefined)
a(href='/signup') Create Account
else
li.dropdown(class=title=='Account Management'?'active':undefined)
a.dropdown-toggle(href='#', data-toggle='dropdown')
if user.profile.picture
img(src='#{user.profile.picture}')
| #{user.profile.name || user.id} 
i.caret
ul.dropdown-menu
li: a(href='/account') My Account
li.divider
li: a(href='/logout') Logout
.container
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='/') Project name
.collapse.navbar-collapse
ul.nav.navbar-nav
li(class=title=='Home'?'active':undefined)
a(href='/') Home
li(class=title=='API Browser'?'active':undefined)
a(href='/api') API Browser
li(class=title=='Contact'?'active':undefined)
a(href='/contact') Contact
ul.nav.navbar-nav.navbar-right
if !user
li(class=title=='Login'?'active':undefined)
a(href='/login') Login
li(class=title=='Create Account'?'active':undefined)
a(href='/signup') Create Account
else
li.dropdown(class=title=='Account Management'?'active':undefined)
a.dropdown-toggle(href='#', data-toggle='dropdown')
if user.profile.picture
img(src='#{user.profile.picture}')
| #{user.profile.name || user.id} 
i.caret
ul.dropdown-menu
li
a(href='/account') My Account
li.divider
li
a(href='/logout') Logout
.container
block content
block content
#footer
.container.text-center
div
| © 2014 Company, Inc.
div
strong Hackathon Starter
| Project
| ·
| Created by
a(href='http://sahatyalkabov.com') Sahat Yalkabov
div
| Code licensed under
a(href='http://opensource.org/licenses/mit-license.html') MIT License
div
a(href='https://github.com/sahat/hackathon-starter') GitHub Project
| ·
a(href='https://github.com/sahat/hackathon-starter/issues') Issues