jannik/web-jbeyerstedt
1
0
Fork 0
Code Releases Activity

[SITE CSS] solve sticky footer with CSS calc() only, no position: absolute any more

Browse source
This commit is contained in:
Jannik Beyerstedt 2016-10-28 21:22:28 +02:00
parent e652bae824
commit 30aaa46456
6 changed files with 65 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

37
assets/css/main.css
View file

@ -15,8 +15,8 @@ h1, h2, h3, h4 {
margin-top: 1em; margin-top: 1em;
font-family: 'Crimson Text', serif; } font-family: 'Crimson Text', serif; }
main h1:first-child { main h1:first-child, main div.container:first-child {
margin-top: 0.4em; } margin-top: 0; }
h5 { h5 {
margin-bottom: 8px; } margin-bottom: 8px; }
@ -134,9 +134,10 @@ nav {
line-height: 1; } } line-height: 1; } }
footer { footer {
margin-top: 20px; margin-top: 25px;
padding-top: 15px; padding-top: 15px;
padding-bottom: 10px; padding-bottom: 10px;
height: 70px;
min-width: inherit; min-width: inherit;
background-color: #bebebe; background-color: #bebebe;
color: #000; } color: #000; }
@ -163,30 +164,18 @@ footer {
height: 1.4rem; height: 1.4rem;
padding-right: 0.2em; } padding-right: 0.2em; }
/* make footer sticky */ @media (max-width: 575px) {
html {
position: relative;
min-height: 100%; }
@media (min-width: 576px) {
body {
/* Margin bottom by footer height */
margin-bottom: 100px; }
footer { footer {
position: absolute; height: 175px; } }
bottom: 0;
width: 100%; /* space footer at bottom of page */
height: 70px; } } @media (min-width: 576px) {
main {
min-height: calc(100vh - 83px - 70px - 25px); } }
@media (max-width: 575px) { @media (max-width: 575px) {
body { main {
/* Margin bottom by footer height */ min-height: calc(100vh - 83px - 25px); } }
margin-bottom: 205px; }
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 175px; } }
/* /*
* HELPERS * HELPERS

2
assets/css/main.css.map
View file

File diff suppressed because one or more lines are too long

51
assets/css/templates/home.css
View file

@ -1,33 +1,32 @@
/* STYLE for jannikbeyerstedt.de /* STYLE for jannikbeyerstedt.de
* for specific template * for specific template
*/ */
main div.home { main {
text-align: center; padding-top: 14vh; }
margin-top: 15vh; main div.home {
margin-bottom: 20vh; } text-align: center; }
main div.home div.logo { main div.home div.logo {
font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif; font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif;
font-size: 24.5px; font-size: 24.5px;
line-height: 1.2em; line-height: 1.2em;
font-weight: 300; font-weight: 300;
width: 11em; width: 11em;
margin: 0 auto; } margin: 0 auto; }
main div.home div.logo span { main div.home div.logo span {
color: #2dac01; color: #2dac01;
font-weight: 400; } font-weight: 400; }
main div.home div.logo span.firstname { main div.home div.logo span.firstname {
padding-left: 0.1em; padding-left: 0.1em;
padding-right: 0.56em; } padding-right: 0.56em; }
main div.home div.logo span.surname { main div.home div.logo span.surname {
letter-spacing: -0.036em; } letter-spacing: -0.036em; }
main div.home p { main div.home p {
margin-top: 0.5em; margin-top: 0.5em;
font-size: 14px; font-size: 14px;
letter-spacing: -0.02em; } letter-spacing: -0.02em; }
@media (max-width: 575px) { @media (max-width: 575px) {
main div.home { main {
margin-top: 13vh; padding-top: 16vh; } }
margin-bottom: 17vh; } }
/*# sourceMappingURL=home.css.map */ /*# sourceMappingURL=home.css.map */

2
assets/css/templates/home.css.map
View file

@ -39,6 +39,6 @@
"../../vendors/bootstrap/scss/mixins/_float.scss" "../../vendors/bootstrap/scss/mixins/_float.scss"
], ],
"sourcesContent": [], "sourcesContent": [],
"mappings": "AAAA;;GAEG;AAQE,IAAI,CAAC,GAAG,AAAA,KAAK,CAAP;EACP,UAAU,EAAE,MAAO;EACnB,UAAU,EAAE,IAAK;EACjB,aAAa,EAAE,IAAK,GAHZ;EAKL,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAhB;IACP,WAAW,EAAE,2CAA4C;IACzD,SAAS,EAAE,MAAO;IAClB,WAAW,EAAE,KAAM;IACnB,WAAW,EAAE,GAAI;IAEjB,KAAK,EAAE,IAAK;IACZ,MAAM,EAAE,MAAO,GAPP;IASR,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,CAAtB;MACH,KAAK,EItBE,OAAO;MJuBd,WAAW,EAAE,GAAI,GAFb;MAGH,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,AAAA,UAAU,CAA1B;QACV,YAAY,EAAE,KAAM;QACpB,aAAa,EAAE,MAAO,GAFX;MAIZ,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,AAAA,QAAQ,CAA1B;QACR,cAAc,EAAE,QAAS,GADhB;EAOf,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,CAAC,CAAb;IACA,UAAU,EAAE,KAAM;IAClB,SAAS,EAAE,IAAK;IAChB,cAAc,EAAE,OAAQ,GAHvB;;AKoBH,MAAM,EAAL,SAAS,EAAE,KAAK;ELVX,IAAI,CAAC,GAAG,AAAA,KAAK,CAAP;IACZ,UAAU,EAAE,IAAK;IACjB,aAAa,EAAE,IAAK,GAFP", "mappings": "AAAA;;GAEG;AAOH,IAAI,CAAC;EACH,WAAW,EAAE,IAAK,GADd;EAGD,IAAI,CAAC,GAAG,AAAA,KAAK,CAAP;IACP,UAAU,EAAE,MAAO,GADX;IAGL,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAhB;MACP,WAAW,EAAE,2CAA4C;MACzD,SAAS,EAAE,MAAO;MAClB,WAAW,EAAE,KAAM;MACnB,WAAW,EAAE,GAAI;MAEjB,KAAK,EAAE,IAAK;MACZ,MAAM,EAAE,MAAO,GAPP;MASR,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,CAAtB;QACH,KAAK,EItBE,OAAO;QJuBd,WAAW,EAAE,GAAI,GAFb;QAGH,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,AAAA,UAAU,CAA1B;UACV,YAAY,EAAE,KAAM;UACpB,aAAa,EAAE,MAAO,GAFX;QAIZ,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,AAAA,QAAQ,CAA1B;UACR,cAAc,EAAE,QAAS,GADhB;IAOf,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,CAAC,CAAb;MACA,UAAU,EAAE,KAAM;MAClB,SAAS,EAAE,IAAK;MAChB,cAAc,EAAE,OAAQ,GAHvB;;AKoBH,MAAM,EAAL,SAAS,EAAE,KAAK;ELVnB,IAAI,CAAC;IACH,WAAW,EAAE,IAAK,GADd",
"names": [] "names": []
} }

52
assets/scss/main.scss
View file

@ -21,8 +21,8 @@ h1, h2, h3, h4 {
margin-top: 1em; margin-top: 1em;
font-family: 'Crimson Text', serif; font-family: 'Crimson Text', serif;
} }
main h1:first-child { main h1:first-child, main div.container:first-child {
margin-top: 0.4em; margin-top: 0;
} }
h5 { h5 {
margin-bottom: 8px; margin-bottom: 8px;
@ -93,12 +93,12 @@ main div.container {
$header_logoSize: 75px; $header_logoSize: 75px;
$header_logoPadg: 4px;
header { header {
img { img {
width: $header_logoSize; width: $header_logoSize;
height: $header_logoSize; height: $header_logoSize;
margin: 4px 0; margin: $header_logoPadg 0;
float: left; float: left;
} }
@ -184,11 +184,15 @@ nav {
$footer_logoHeight: 1.4rem; $footer_logoHeight: 1.4rem;
$footer_margin: 25px;
$footer_height: 70px;
$footer_height_xs: 175px;
footer { footer {
margin-top: 20px; margin-top: 25px;
padding-top: 15px; padding-top: 15px;
padding-bottom: 10px; padding-bottom: 10px;
height: $footer_height;
min-width: inherit; min-width: inherit;
background-color: $footer_color_bg; background-color: $footer_color_bg;
@ -226,36 +230,22 @@ footer {
} }
/* make footer sticky */ @include media-breakpoint-down(xs) {
$footer_height: 70px;
$footer_height_xs: 175px;
$footer_margin: 30px;
html {
position: relative;
min-height: 100%;
}
@include media-breakpoint-up(sm) {
body {
/* Margin bottom by footer height */
margin-bottom: $footer_height + $footer_margin;
}
footer { footer {
position: absolute; height: $footer_height_xs;
bottom: 0; }
width: 100%; }
height: $footer_height;
/* space footer at bottom of page */
$header_height: 2*$header_logoPadg + $header_logoSize;
@include media-breakpoint-up(sm) {
main {
min-height: calc(100vh - #{$header_height} - #{$footer_height} - #{$footer_margin});
} }
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
body { main {
/* Margin bottom by footer height */ min-height: calc(100vh - #{$header_height} - #{$footer_margin});
margin-bottom: $footer_height_xs + $footer_margin;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: $footer_height_xs;
} }
} }

9
assets/scss/templates/home.scss
View file

@ -8,10 +8,10 @@
@import "../mainvariables"; @import "../mainvariables";
main { main {
padding-top: 14vh;
div.home { div.home {
text-align: center; text-align: center;
margin-top: 15vh;
margin-bottom: 20vh;
div.logo { div.logo {
font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif; font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif;
@ -46,8 +46,7 @@ main {
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
main div.home { main {
margin-top: 13vh; padding-top: 16vh;
margin-bottom: 17vh;
} }
} }