Mercurial > farol > farol
comparison farol/static/style.css @ 149:f2f434eafb66
Always push the footer to the bottom of the page
| author | Benoît Allard <benoit.allard@greenbone.net> |
|---|---|
| date | Fri, 31 Oct 2014 14:19:16 +0100 |
| parents | 0f19ece4e7e5 |
| children |
comparison
equal
deleted
inserted
replaced
| 148:3500cb0c54d1 | 149:f2f434eafb66 |
|---|---|
| 1 /* So that the whole panel heading be clickable */ | 1 /* So that the whole panel heading be clickable */ |
| 2 .panel-title a, a.a-block { | 2 .panel-title a, a.a-block { |
| 3 display: block; | 3 display: block; |
| 4 } | 4 } |
| 5 /* | 5 |
| 6 // Try to push the footer to the bottom of the page | 6 /* Try to push the footer to the bottom of the page */ |
| 7 html, body { | 7 html, body { |
| 8 height: 100%; | 8 height: 100%; |
| 9 margin: 0; | |
| 10 padding: 0; | |
| 11 } | |
| 12 | |
| 13 .cover { | |
| 14 min-height: 100%; | |
| 15 position: relative; | |
| 16 } | |
| 17 | |
| 18 nav.navigation { | |
| 19 padding: 10px; | |
| 9 } | 20 } |
| 10 | 21 |
| 11 .main.container { | 22 .main.container { |
| 12 min-height: 100%; | 23 padding: 10px; |
| 13 margin-bottom: -50px; | 24 padding-bottom: 140px; /* height of the footer + 10 */ |
| 14 } | 25 } |
| 15 */ | |
| 16 | 26 |
| 27 .footer { | |
| 28 height 130px; | |
| 29 width: 100%; | |
| 30 position: absolute; | |
| 31 bottom: 0; | |
| 32 left: 0; | |
| 33 } | |
| 34 /* And that works */ | |
| 35 | |
| 36 /* Display a background image */ | |
| 17 @media (min-width: 768px){ | 37 @media (min-width: 768px){ |
| 18 body { | 38 body { |
| 19 background: url('background.png') no-repeat fixed right bottom rgb(255,255,255); | 39 background: url('background.png') no-repeat fixed right bottom rgb(255,255,255); |
| 20 } | 40 } |
| 21 } | 41 } |
| 22 | 42 |
| 43 /* attenuate it */ | |
| 23 .cover { | 44 .cover { |
| 24 background: rgba(255,255,255,0.8); | 45 background: rgba(255,255,255,0.8); |
| 25 } | 46 } |
| 26 | 47 |
| 48 /* For the POST_buttons */ | |
| 27 form.inlined-form { | 49 form.inlined-form { |
| 28 display: inline-block; | 50 display: inline-block; |
| 29 } | 51 } |
| 30 | 52 |
| 31 /* To behave as a link, it should'nt have padding ... */ | 53 /* To behave as a link, it should'nt have padding ... */ |
| 32 .btn-link { | 54 .btn-link { |
| 33 padding: 0; | 55 padding: 0; |
| 34 } | 56 } |
| 35 | 57 |
| 36 .footer { | 58 /* Color when hovering, Ouh ... */ |
| 37 height: 130px; | |
| 38 margin-top: 20px; | |
| 39 } | |
| 40 | |
| 41 #greenbone.logo_img { | 59 #greenbone.logo_img { |
| 42 display: block; | 60 display: block; |
| 43 width: 100px; | 61 width: 100px; |
| 44 height: 107px; | 62 height: 107px; |
| 45 background-image: url(greenbone_bw.png); | 63 background-image: url(greenbone_bw.png); |