Przeglądaj źródła
Add flooring to footer.
Add:
templates/layout.html
-Add `header`, `body`, and `footer` divs, for greater modularity and to
floor the footer.
static/sass/main.sass
-Add styling to the new footer, which is always floored to the bottom of
the page (even when an otherwise insufficient amount of content is
present).
tags/v1.0^2
Severyn Kozak
10 lat temu
2 zmienionych plików z 31 dodań i 23 usunięć
-
+14 -11static/sass/main.sass
-
+17 -12templates/layout.html
+ 14
- 11
static/sass/main.sass
Wyświetl plik
| @@ -5,30 +5,36 @@ | |||||
| @import mixins | @import mixins | ||||
| @import variables | @import variables | ||||
| body | |||||
| margin: 0px | |||||
| html, body | |||||
| height: 100% | |||||
| margin: 0 | |||||
| padding: 0 | |||||
| * | * | ||||
| font-family: sans-serif | font-family: sans-serif | ||||
| div#main | |||||
| div#container | |||||
| min-height: 100% | |||||
| position: relative | |||||
| div#body | |||||
| padding-bottom: 50px | |||||
| padding-top: 4% | padding-top: 4% | ||||
| div#center | div#center | ||||
| margin-left: auto | margin-left: auto | ||||
| margin-right: auto | margin-right: auto | ||||
| margin-top: 0px | |||||
| width: 75% | width: 75% | ||||
| div#footer | div#footer | ||||
| @extend .t3 | @extend .t3 | ||||
| background-color: $lightBlue | background-color: $lightBlue | ||||
| bottom: -50px | |||||
| height: 60px | |||||
| padding-top: 12px | padding-top: 12px | ||||
| position: fixed | |||||
| width: 100% | |||||
| position: absolute | |||||
| text-align: center | text-align: center | ||||
| width: 100% | |||||
| * | * | ||||
| color: white | color: white | ||||
| @@ -36,16 +42,13 @@ body | |||||
| a | a | ||||
| @extend .t3 | @extend .t3 | ||||
| text-decoration: none | |||||
| font-size: 1.2em | font-size: 1.2em | ||||
| margin-left: 5% | margin-left: 5% | ||||
| margin-right: 5% | margin-right: 5% | ||||
| text-decoration: none | |||||
| &:hover | &:hover | ||||
| text-decoration: underline | text-decoration: underline | ||||
| p span | p span | ||||
| font-size: 0.7em | font-size: 0.7em | ||||
| &:hover | |||||
| bottom: 0px | |||||
+ 17
- 12
templates/layout.html
Wyświetl plik
| @@ -19,20 +19,25 @@ | |||||
| = endblock | = endblock | ||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <div id="main"> | |||||
| <div id="center"> | |||||
| = block body | |||||
| = endblock | |||||
| <div id="container"> | |||||
| <div id="header"> | |||||
| </div> | |||||
| <div id="body"> | |||||
| <div id="center"> | |||||
| = block body | |||||
| = endblock | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | |||||
| <div id="footer"> | |||||
| <a href="/">home</a> | |||||
| <a href="/about">about</a> | |||||
| <a href="/developers">developers</a> | |||||
| <p> | |||||
| © 2012-2013 bitshift. <span>All Rights Reserved.</span> | |||||
| </p> | |||||
| <div id="footer"> | |||||
| <a href="/">home</a> | |||||
| <a href="/about">about</a> | |||||
| <a href="/developers">developers</a> | |||||
| <p> | |||||
| © 2012-2013 bitshift. <span>All Rights Reserved.</span> | |||||
| </p> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </body> | </body> | ||||
| </html> | </html> | ||||