diff options
| author | Rory Gibson <rg.rorygibson@gmail.com> | 2013-10-20 19:06:39 +0400 |
|---|---|---|
| committer | Rory Gibson <rg.rorygibson@gmail.com> | 2013-10-20 19:06:39 +0400 |
| commit | b4d0836a63b6c3d79f853fa689fe0a6cd521f9cd (patch) | |
| tree | 286202bddc79a7c46e63d51324359810defb9245 | |
| parent | 389b15d63d8e46f9ec3e648b8d7f2ef015470973 (diff) | |
Updated footer to stick to the bottom when there is little content on a page
| -rw-r--r-- | assets/css/style.css | 24 | ||||
| -rw-r--r-- | assets/sass/.sass-cache/792fa3931a43cc589267989cea1f80ecbb5936dc/style.scssc | bin | 37110 -> 38735 bytes | |||
| -rw-r--r-- | assets/sass/style.scss | 23 | ||||
| -rw-r--r-- | default.hbs | 20 |
4 files changed, 51 insertions, 16 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index ec5e666..67cc225 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,6 +1,10 @@ /* ============================================================ */ /* Base */ /* ============================================================ */ +html, body { + height: 100%; +} + body { background: #fefefe; color: #424242; @@ -111,6 +115,19 @@ pre { max-width: 889px; } +#wrapper { + height: auto; + min-height: 100%; + /* This must be the same as the height of the footer */ + margin-bottom: -265px; +} +#wrapper:after { + content: ""; + display: block; + /* This must be the same as the height of the footer */ + height: 265px; +} + .button { background: #303030; border: none; @@ -139,7 +156,7 @@ pre { /* Site Header */ /* ============================================================ */ .site-header { - margin: 100px 0 35px; + padding: 100px 0 35px; overflow: auto; text-align: center; text-transform: uppercase; @@ -334,10 +351,11 @@ pre { .footer { background: #303030; color: #D3D3D3; - padding: 80px 0 95px; + height: 265px; + overflow: auto; } .footer .site-title-wrapper { - margin-bottom: 35px; + margin: 80px auto 35px; } .footer .site-title a:hover, .footer .button-square:hover { diff --git a/assets/sass/.sass-cache/792fa3931a43cc589267989cea1f80ecbb5936dc/style.scssc b/assets/sass/.sass-cache/792fa3931a43cc589267989cea1f80ecbb5936dc/style.scssc Binary files differindex b6de145..21447ef 100644 --- a/assets/sass/.sass-cache/792fa3931a43cc589267989cea1f80ecbb5936dc/style.scssc +++ b/assets/sass/.sass-cache/792fa3931a43cc589267989cea1f80ecbb5936dc/style.scssc diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 0844ecb..d471f23 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -10,6 +10,8 @@ $background: #FEFEFE; /* Base */ /* ============================================================ */ +html, body { height: 100%; } + body { background: $background; color: #424242; @@ -101,6 +103,20 @@ pre { max-width: 889px; } +#wrapper { + height: auto; + min-height: 100%; + /* This must be the same as the height of the footer */ + margin-bottom: -265px; + + &:after { + content: ""; + display: block; + /* This must be the same as the height of the footer */ + height: 265px; + } +} + .button { background: $secondary; border: none; @@ -128,7 +144,7 @@ pre { /* ============================================================ */ .site-header { - margin: 100px 0 35px; + padding: 100px 0 35px; overflow: auto; text-align: center; text-transform: uppercase; @@ -322,9 +338,10 @@ pre { .footer { background: $secondary; color: #D3D3D3; - padding: 80px 0 95px; + height: 265px; + overflow: auto; - .site-title-wrapper { margin-bottom: 35px; } + .site-title-wrapper { margin: 80px auto 35px; } .site-title a:hover, .button-square:hover { diff --git a/default.hbs b/default.hbs index 7ebf7c6..25d89c2 100644 --- a/default.hbs +++ b/default.hbs @@ -24,19 +24,19 @@ </head> <body class="{{body_class}}"> - <header class="site-header"> - <div class="container"> - <div class="site-title-wrapper"> - <h1 class="site-title"><a class="js-ajax-link" title="{{@blog.title}}" href="{{@blog.url}}">{{@blog.title}}</a></h1> + <div id="wrapper"> + <header class="site-header"> + <div class="container"> + <div class="site-title-wrapper"> + <h1 class="site-title"><a class="js-ajax-link" title="{{@blog.title}}" href="{{@blog.url}}">{{@blog.title}}</a></h1> - <a class="button-square js-ajax-link js-show-index" href="{{@blog.url}}"><span class="icon icon-menu"></span></a> + <a class="button-square js-ajax-link js-show-index" href="{{@blog.url}}"><span class="icon icon-menu"></span></a> - <a class="button-square" href="{{@blog.url}}/rss"><span class="icon icon-rss"></span></a> + <a class="button-square" href="{{@blog.url}}/rss"><span class="icon icon-rss"></span></a> + </div> </div> - </div> - </header> - - <div id="wrapper"> + </header> + <div id="ajax-container"> {{{body}}} </div> |