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
rodzic
commit
d8b6a92ba0
2 zmienionych plików z 31 dodań i 23 usunięć
  1. +14
    -11
      static/sass/main.sass
  2. +17
    -12
      templates/layout.html

+ 14
- 11
static/sass/main.sass Wyświetl plik

@@ -5,30 +5,36 @@
@import mixins
@import variables

body
margin: 0px
html, body
height: 100%
margin: 0
padding: 0

*
font-family: sans-serif

div#main
div#container
min-height: 100%
position: relative

div#body
padding-bottom: 50px
padding-top: 4%

div#center
margin-left: auto
margin-right: auto
margin-top: 0px
width: 75%

div#footer
@extend .t3

background-color: $lightBlue
bottom: -50px
height: 60px
padding-top: 12px
position: fixed
width: 100%
position: absolute
text-align: center
width: 100%

*
color: white
@@ -36,16 +42,13 @@ body
a
@extend .t3

text-decoration: none
font-size: 1.2em
margin-left: 5%
margin-right: 5%
text-decoration: none

&:hover
text-decoration: underline

p span
font-size: 0.7em

&:hover
bottom: 0px

+ 17
- 12
templates/layout.html Wyświetl plik

@@ -19,20 +19,25 @@
= endblock
</head>
<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 id="footer">
<a href="/">home</a>
<a href="/about">about</a>
<a href="/developers">developers</a>
<p>
&copy; 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>
&copy; 2012-2013 bitshift. <span>All Rights Reserved.</span>
</p>
</div>
</div>
</body>
</html>

Ładowanie…
Anuluj
Zapisz