Commit e4f4db6b authored by Yohan Jarosz's avatar Yohan Jarosz
Browse files

good footer

parent 55c004bf
...@@ -4,16 +4,17 @@ ...@@ -4,16 +4,17 @@
{%- include head.html -%} {%- include head.html -%}
<body> <body>
<div class="content-wrap">
<div class="main">
{%- include header.html -%}
<main class="page-content" aria-label="Content">
<div class="wrapper">
{{ content }}
</div>
</main>
<div class="main"> {%- include footer.html -%}
{%- include header.html -%} </div>
<main class="page-content" aria-label="Content">
<div class="wrapper">
{{ content }}
</div>
</main>
{%- include footer.html -%}
</div> </div>
</body> </body>
......
...@@ -3,19 +3,19 @@ ...@@ -3,19 +3,19 @@
{%- include head.html -%} {%- include head.html -%}
<body> <body>
<div class="main">
<div class="main"> <div class="content-wrapper">
{%- include header.html -%} {%- include header.html -%}
<main class="page-content" aria-label="Content"> <main class="page-content" aria-label="Content">
<div class="wrapper"> <div class="wrapper">
{{ content }} {{ content }}
</div> </div>
</main> </main>
{%- include footer.html -%}
</div> </div>
</body> {%- include footer.html -%}
</div>
</body>
</html> </html>
...@@ -24,10 +24,11 @@ $table-text-align: left !default; ...@@ -24,10 +24,11 @@ $table-text-align: left !default;
$content-width: 1080px !default; $content-width: 1080px !default;
$on-palm: 600px !default; $on-palm: 600px !default;
$on-laptop: 960px !default; $on-laptop: 1080px !default;
// height of the banner // height of the banner
$banner-height: 100px; $banner-height: 100px;
$footer-height: 50px;
// Use media queries like this: // Use media queries like this:
// @include media-query($on-palm) { // @include media-query($on-palm) {
......
...@@ -8,8 +8,8 @@ dl, dd, ol, ul, figure { ...@@ -8,8 +8,8 @@ dl, dd, ol, ul, figure {
padding: 0; padding: 0;
} }
html, body { html, body{
height:100%; height: 100%;
} }
/** /**
...@@ -24,7 +24,9 @@ body { ...@@ -24,7 +24,9 @@ body {
-o-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1; font-feature-settings: "kern" 1;
font-kerning: normal; font-kerning: normal;
background: url('bg-overlay.svg') background: url('bg-overlay.svg');
display: flex;
flex-direction: column;
} }
...@@ -173,7 +175,7 @@ pre { ...@@ -173,7 +175,7 @@ pre {
max-width: $content-width; max-width: $content-width;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
min-height: 100%; #min-height: 100%;
@extend %clearfix; @extend %clearfix;
position: relative; position: relative;
background-color: $background-color; background-color: $background-color;
......
...@@ -8,6 +8,12 @@ ...@@ -8,6 +8,12 @@
position: relative; position: relative;
} }
.content-wrapper {
flex: 1 0 auto;
}
/** /**
* SVG BANNER * SVG BANNER
*/ */
...@@ -109,13 +115,14 @@ ...@@ -109,13 +115,14 @@
*/ */
.site-footer { .site-footer {
padding: $spacing-unit 0; padding: $spacing-unit 0;
position: absolute;
bottom: 0; bottom: 0;
height: $spacing-unit * 2;
display:flex; display:flex;
justify-content:center; justify-content:center;
align-items:center; align-items:center;
width:100%; width:100%;
height: $footer-height;
margin-top: -$footer-height;
flex-shrink: 0;
} }
.footer-wrapper { .footer-wrapper {
...@@ -181,6 +188,7 @@ ...@@ -181,6 +188,7 @@
margin-left: 20px; margin-left: 20px;
} }
padding: $spacing-unit 0; padding: $spacing-unit 0;
padding-bottom: $footer-height;
} }
.page-heading { .page-heading {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment