fixing responsive footer

This commit is contained in:
davegandy 2013-10-06 15:35:57 -04:00
parent 838ba8af05
commit d31232f1b4
8 changed files with 24 additions and 13 deletions

View File

@ -2,22 +2,21 @@
<div class="container text-center"> <div class="container text-center">
<div> <div>
<i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }} <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
&middot; <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a> Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div> </div>
<div> <div>
Font Awesome licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a> Font Awesome licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
&middot; <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a> Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
&middot; <span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a> Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
</div> </div>
<div> <div>
Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a> Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
</div> </div>
<div class="project"> <div class="project">
<a href="{{ site.fontawesome.github.url }}">GitHub Project</a> <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;
&middot;
<a href="{{ site.fontawesome.github.url }}/issues">Issues</a> <a href="{{ site.fontawesome.github.url }}/issues">Issues</a>
</div> </div>
</div> </div>

View File

@ -20,5 +20,6 @@
@import "site/carbonad"; @import "site/carbonad";
@import "site/responsive/screen-lg"; @import "site/responsive/screen-lg";
@import "site/responsive/screen-md";
@import "site/responsive/screen-sm"; @import "site/responsive/screen-sm";
@import "site/responsive/screen-xs"; @import "site/responsive/screen-xs";

View File

@ -3,6 +3,7 @@
border-bottom: 1px solid @red-dark; border-bottom: 1px solid @red-dark;
margin-bottom: 0; margin-bottom: 0;
&, h1 { color: #fff; } &, h1 { color: #fff; }
padding: 30px 0;
#gradient > .directional(@red, mix(@red, @red-dark, 90%), -40deg); #gradient > .directional(@red, mix(@red, @red-dark, 90%), -40deg);
// background-color: @red; // background-color: @red;

View File

@ -24,19 +24,20 @@
// Sticky Footer Styles // Sticky Footer Styles
// -------------------- // --------------------
@footer-height: 165px;
@footer-margin: 60px;
html, body { height: 100%; } html, body { height: 100%; }
#wrap { #wrap {
min-height: 100%; min-height: 100%;
height: auto !important; height: auto !important;
height: 100%; height: 100%;
}
.sticky-footer();
.sticky-footer(@footer-height: 165px, @footer-margin: 60px;) {
#wrap {
margin: 0 auto -(@footer-height); margin: 0 auto -(@footer-height);
padding: 0 0 (@footer-height + @footer-margin); padding: 0 0 (@footer-height + @footer-margin);
} }
#footer { height: @footer-height; }
#footer {
height: @footer-height;
} }

View File

@ -49,4 +49,6 @@
font-size: 26px; font-size: 26px;
line-height: 36px; line-height: 36px;
} }
.hide-lg { display: none; }
} }

View File

@ -0,0 +1,3 @@
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.hide-md { display: none; }
}

View File

@ -43,5 +43,7 @@
} }
} }
.sticky-footer(185px, 60px);
.hide-sm { display: none; } .hide-sm { display: none; }
} }

View File

@ -64,5 +64,7 @@
} }
.info-ad #carbonads-container .carbonad { margin-top: @buffer-lg; } .info-ad #carbonads-container .carbonad { margin-top: @buffer-lg; }
.sticky-footer(245px, 60px);
.hide-xs { display: none; } .hide-xs { display: none; }
} }